朝圣言
扫描关注朝圣言

手机扫描二维码

ES6 常用汇总(一)

朝圣言2019-11-20前端仕锦 656 0A+A-

一、let 和 const

1、let 可以声明变量

let name = '张三';console.log(name);//张三

2、ES6 新增块级作用域

  注:在 ES6 之前作用域分为:全局作用域、函数作用域

{
var name1 = '张三';
let name2 = '李四';
console.log(name2);//李四
}
console.log(name1);//张三
console.log(name2);//报错

上面代码在代码块之中,分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个变量,结果 let 声明的变量报错,var 声明的变量返回了正确的值。而在代码块内 let 声明的变量返回了正确的值。这表明,let 声明的变量只在它所在的代码块有效。

3、let 的使用场景

var a =[]; for(var i=0;i<10;i++){
    a[i] = function(){
        console.log(i);
    }
}
a[6]();//10

上面的代码中,变量 i 是 var 声明的,在全局范围内都有效。所以每一次循环,新的 i 值都会覆盖旧值,导致最后输出的是最后一轮的 i 的值。

var a = []; for(let i=0;i<10;i++){
    a[i]=function(){
        console.log(i);
    }
}
a[6]();//6

上面代码中,变量 i 是 let 声明的,声明的变量仅在块级作用域内有效,当前的 i 只在本轮循环有效,所以每一次循环的 i 其实都是一个新的变量,最后输出的是 6.

4、不存在变量提升

console.log(a);
console.log(b); var a = 2;//undefined
let b = 3;//报错

 上面代码中,变量 a 用 var 命令声明,会发生变量提升,即脚本运行时,变量 a 已经存在了,但是么有值,所以会输出 undefined。变量 b 用 let 命令声明,不会发生变量提升。这表明在声明它之前,变量 b 是不存在的,这时如果用到它,就会抛出一个错误。

5、暂时性死区


let b = 3 {
    b=4 }
console.log(b);//4

当代码执行到代码块中时,b=4 在代码块中是没有定义的,所以它会往外找定义的变量,找到 let b=3;那么 b=4 就会覆盖 b=3,所以最后 b=4

let b=3 {
    b=4;
    let b=5;
}
console.log(b);//报错

上面代码中,存在全局变量 b,但是块级作用域内又声明了一个局部变量 b,导致后者绑定这个块级作用域,不会再向块区外面找,所以在 let 声明变量前,对 b 赋值就会报错。暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

ES6 明确规定,如果区块中存在 let 和 const 命令,这个区块对这些命令声明的变量,从一开始就形成看封闭作用域。凡是在声明之前就使用这些变量,就会报错。总之,在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。在语法上,称为“暂时性死区”。

6、不允许重复声明

{
    let a = 10;
    let a = 8;
    console.log(a);//报错
}

let 不允许在相同的作用域内重复声明同一个变量。

7、顶层对象属性

var a = 2;
console.log(window.a);//2
 let b = 3;
console.log(window.b);//undefined

顶层对象,在浏览器环境指的是 window 对象,在 Node 指的是 global 对象。ES5 之中,顶层对象的属性与全局变量是等价的。

ES6 规定,var 命令和 function 命令声明的全局变量,依旧是顶层对象的属性;let 命令、const 命令、class 命令声明的全局变量、不属于顶层对象属性。 所以上面代码中,全局变量 b 是由 let 声明 ,不是顶层对象,返回 undefined。

8、const

上面介绍 let 有的属性,const 都有;唯一的区别是 const 声明的变量是不可以修改的,const 声明一个只读的常量,一旦声明,常量的值就不能改变。

const a =2;
a=3;
console.log(a);//报错

const 特殊的场景

const a ={name:'张三'};
a.name = '李四';
console.log(a);//李四

上面代码中,常量 a 储存的是一个地址,这个地址指向一个对象,不可变的只是这个地址,即不能把 a 指向另一个地址,但对象本身是可变的。

文章关键词
前端
web
es6
发表评论