JavaScript（ES6）-let & const & 解构化赋值

JavaScript（ES6）

1.let & const

1-1. let命令

基本语法：ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
 let a = 10;
 var b =1;
}
console.log(a);// 报错
console.log(b);// 1

let特点：

1. 不存在变量提升。
2. 暂时性死区，只要快级作用域内存在let命令，它所声明的变量的区域，不再受外部的影响。
3. 不允许重复声明，在同一个作用域内，一个变量名只能被声明一次。
4. let 为JavaScript新增了块级作用域。

1-2. const 命令

基本用法：const声明一个只读的常量，一但声明，常量的值就不能改变。

const PI = 3.14;
console.log(PI); // 3.14
PI = 5; // TypeError: Assignment to constant variable.

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
console.log(foo.prop) // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

const特点：

1. const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
2. const的作用域与let命令相同：只在声明所在的块级作用域内有效。
3. const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
4. const声明的常量，也与let一样不可重复声明。
5. const声明的对象，可以为其添加属性（常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址）。

2.变量的解构化赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

2-1. 变量赋值

如果解构不成功，值为 undefined

let [a, b, c] = [2, 2, 3];
console.log(a, b, c); // 2,2,3

let [d, e, f] = [2, 2];
console.log(d) // 2
console.log(e) // 2
console.log(f) // undefined

let [foo] = 2 // 报错，

解构函数允许指定默认值

let [x=20,y] = [,2]
conslole.log(x,y) // 20,2

let [a=20,b] = [2,2];
console.log(a,b); // 2,2

2-1. 数组的解构函数

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

let [a, b, c] = [1, 2, 3]; // a = 1, b = 2, c = 3

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解构不成功，变量的值就等于undefined。

2-2.解构赋值允许指定默认值

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [foo = true] = [];
foo // true

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

// 解构对象也能指定默认值
var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

2-3.对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

2-4.字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

2-5.用途

1. 交换变量的值

   let x = 1;
   let y = 2;
   
   [x, y] = [y, x];
   // x = 2, y = 1
   

2. 从函数返回多个值

   函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

   // 返回一个数组
   
   function example1() {
     return [1, 2, 3];
   }
   let [a, b, c] = example1();
   console.log(a,b,c); // 1, 2, 3
   // 返回一个对象
   
   function example2() {
     return {
       foo: 1,
       bar: 2
     };
   }
   let { foo, bar } = example2();
   console.log(foo,bar); // 1, 2,
   

3. 函数参数的定义

   解构赋值可以方便地将一组参数与变量名对应起来。

   // 参数是一组有次序的值
   function f1([x, y, z]) { ... }
   f([1, 2, 3]);
   
   // 参数是一组无次序的值
   function f2({x, y, z}) { ... }
   f({z: 3, y: 2, x: 1});