vue前戏ES6

vue

es6语法

es6语法:let和const:

{

var a=123;

let b=234;

}

console.log(a);

console.log(b);

浏览器里会只看到123;

而且还会抱一个b is not define的错误

为什么?在{ }局部作用域里面可以找到a变量值?

这是js var的一个坑,一旦定义了就是全局的变量.

var示例:

{

var a=123;

let b=234;

}

var a=234;

console.log(a);

console.log(b);

输出的是234,因为var a=123被覆盖了.

如果还是用var的话,就会有各种各样想不到的坑,不符合我们编程的逻辑

所以es6里面,用let在声明变量有以下特点:

  • let声明变量块级作用域
  • 不能够重复声明

而且还添加了const声明变量

**一旦声明,立即初始化,不能重复声明.**

var示例二:

1 var a = [];

2 for (var i = 0; i < 10; i++) {

3 a[i] = function () {

4 console.log(i);

5 };

6 }

7 a[6]();

上面代码中,变量ivar命令声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的函数内部的console.log(i),里面的i指向的就是全局的i。也就是说,所有数组a的成员里面的i,指向的都是同一个i,导致运行时输出的是最后一轮的i的值,也就是 10

如果使用let,声明的变量仅在块级作用域内有效,最后输出的是 6

var a = [];

for (let i = 0; i < 10; i++) {

a[i] = function () {

console.log(i);

};

}

a[6]();

上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算

模板字符串:

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量

// 普通字符串

`In JavaScript '\n' is a line-feed.`

// 多行字符串

`In JavaScript this is

not legal.`

console.log(`string text line 1

string text line 2`);

// 字符串中嵌入变量

let name = "Bob", time = "today";

`Hello ${name}, how are you ${time}?`

上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义

let greeting = `\`Yo\` World!`;

输入结果:`Yo` World!

箭头函数:

var f = (a) = > {a}

//等同于

var f = function(a){

return a;

}

使用箭头函数注意点:

箭头函数有几个使用注意点。

首先看事例:

this指向的是使用它的对象,也就是person对象

var person={

name:'张三',

age:18,

fav:function(){

consolo.log(this)

}

}

//箭头函数this的指向发生改变,指向了定义对象时的对象 Window

var person={

name:'张三',

age:18,

fav:()=>{

consolo.log(this)

}

}

person.fav()

不可以使用arguments对象

该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

         var person3 = {

name:'小马哥',

age:18,

fav: ()=>{

console.log(argument);

}

}

person3.fav('把妹','把爷');

 对象的单体模式

解决this指向了定义对象时的对象的问题

var person={

name:'张三',

age:18,

fav(){

}

}

等同于

var person={

name:'张三',

age:18,

fav:function(){

consolo.log(this)

}

}

ES6的面向对象

ES5:

//构造函数的方式创建一个对象

var Animal(name,age){

this.name=name;

this.age=age;

}

Animal.prototype.showName=function(){

console.log(this.name)

}

var dog=new Animal('日天',18)

ES6:

class Animal{

construtor(name,age){

this.name=name;

this.age=age;

}#什么都不用加直接写

showName(){

console.log(this.name)

}

}

var dog=new Animal('张三',14)

dog.showName()

以上是 vue前戏ES6 的全部内容, 来源链接: utcz.com/z/379052.html

回到顶部