ES6必知必会 —— 变量声明和结构赋值

Posted 2020-11-03 流星飞雨

本文章属于个人对es6一些比较常用的语法的总结归纳，其主要参考阮一峰大神的<a href="http://es6.ruanyifeng.com//">ECMAScript6入门</a> ，如有哪里理解不对或者不透彻的地方，还请批评指正~

ps：推荐使用es6在线调试

<b>let 和 const</b>

1.let声明的变量只有在当前代码块成效，而且不具备变量提升（即代码块中有let声明的变量提前使用会报错）;

{
   console.log(a)    // a is not defined
   console.log(b)   //  2
   let a = 1;
   var b = 2;
}

2.let同一作用域内不允许重复声明;

3.const声明一个只读常量，一旦声明，无法更改;

4.const声明一个变量的时候，必须初始化，而且该变量只能在当前作用域有效;

5.const声明一个符合类型的数据时（主要是对象和数组），保存的是变量的内存地址，只能保证这个地址固定，不能保证数据结构不变;

const o = {};
o.name = ‘hello‘;    //可以给对象添加属性
console.log(o);      // { "name" : "hello" }
  
o = {};             //报错，因为o的内存地址不能改变

6.可以使用 Object.freeze()方法来冻结一个对象或者对象的某个属性;

7.ES5声明变量的方式有两种 : var 和 function; ES6声明变量的方式有六种 : var let const function import class；

<b>变量的解构赋值 </b>

1.ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值；

2.如果变量解构不成功就会返回 undefined；

3.只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值；

4.解构赋值时可以指定默认值 （ let [ foo = true ] = [] ）；

5.如果数组的某个成员不严格等于( === ) undefined ， 默认值就不会生效；

let [x, y = ‘b‘] = [‘a‘]; // x=‘a‘, y=‘b‘
let [x, y = ‘b‘] = [‘a‘, ‘undefined‘];  // x = ‘a‘ , y = ‘undefined‘ 

6.如果指定的默认值是一个表达式，那么该表达式是惰性求值（即只有在使用到的时候才去求值）；

7.默认值可以引用解构赋值的其他变量，但该变量必须已经声明；

8.对象的解构中，变量必须与属性同名，才能取到正确的值，如果变量没有对应的同名属性，则会导致取不到值，最后等于undefined；

9.对象的解构赋值是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者；

let { foo: baz , bar } = { foo: "aaa", bar: "bbb" }; 
foo // foo is not defined
baz // ‘aaa‘
bar // ‘bbb‘

上述例子中 foo 是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo ， bar之所以能匹配，是因为对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }

10.变量的解构赋值通常用于交换变量，函数参数定义，参数指定默认值等，虽然解构赋值虽然很方便，但是解析起来并不容易，如果使用不当就会产生与预期值不同的问题~