ES6-变量声明以及解构

变量声明

1. var声明的变量会进行变量提升，全局作用于下会被挂载到window上

2. let/const 不会进行变量提升提升，存在暂时性死区，不能在声明前被使用

3. const在被声明的时候必须赋初值，const代表变量指向的那个内存地址所保存的数据不得改动，如果声明一个对象，是可以改变对象的属性的

4. let/const 存在块级作用域，里层的可以读取外层的，可以在不同的层级中声明同一变量

• 作用域的声明必须要有｛｝(大括号)

变量的解构赋值

数组的解构赋值

书写形式

let a = 1;
let b = 2;
let c = 3;
---等同于---
let [a, b, c] = [1, 2, 3];

这种写法属模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值
右边不是可遍历的结构（Iterator）就会报错

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

// 可以使用...
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

解构不成功

let [foo] = [];
let [bar, foo] = [1];
console.log(foo)//undefined

不完全解构

左边与右边不是完全匹配

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

默认值

只有当一个数组成员严格等于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'
let [x = 1] = [null];// x = null

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。从左边开始声明

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

对象的解构赋值

解构方式

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

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

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

如果变量名与属性名不一样的话，需要写成以下样式

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj; // {属性名：变量名}
f // 'hello'
l // 'world'

默认值

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

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

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

嵌套的解构赋值

数组的部分按照数组的规则，对象的部分按照对象的规则

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

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

字符串的解构赋值

类似于数组

函数参数的解构赋值

函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

// 数组的写法
function add([x, y]){
  return x + y;
}
// 对象的写法
function move({x = 0, y = 0} = {}) {// 等号右边的｛｝可以省略 表示必须传入一个对象 否则报错
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
add([1, 2]); // 3

注意点

1.避免JavaScript把｛｝读成代码块

// 正确的写法
let x;
({x} = {x: 1}); // 加上一个括号 让他成为一个表达式

2.数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3