ES6知识点总结二：解构赋值

3、解构赋值

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

数组

const courseArr = ['es6','es7','es8'];
const a=courseArr[0];
const b=courseArr[1];
const c=courseArr[2];
console.log('传统赋值：',a,b,c);
function getArr(){
    const [a,b,c] = courseArr;
    const [d,,f] = courseArr;
    console.log('解构赋值：',a,b,c);
    console.log('解构赋值：',d,f);
}
getArr();
let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo,bar,baz);//1,2,3
let [ , , third] = ["foo", "bar", "baz"];
console.log(third);//baz
let [head, ...tail] = [1, 2, 3, 4];
console.log(tail);//[2,3,4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
//如果解构不成功，变量的值就等于undefined

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

对象

//获取对象的值，以往的写法
const course = {
name:'es6',
price:500
};
//传统赋值
const name = course.name;
const price = course.price;
console.log('name :', name);
console.log('price :', price);
//结构赋值获取name、price的值，解构赋值左右两边数据必须保持一样
function getName(){
    const {name,price} = course;
    console.log('name :', name);
    console.log('price :', price);
}
getName();
//由于const不允许重复声明，为了互不影响，将解构赋值例子放入函数中，因为const有块级作用域

复杂类型

const other = {
    name1:'es6',
    price:500,
    teacher:{
        name:'jingjing',
        age:30
    }
}
const {name1,teacher:{name}} = other;
console.log(name1,name);

//遇到有两个name值时，下面这种写法会报错，是因为const不允许重复声明
const other = {
    name:'es6',
    price:500,
    teacher:{
        name:'jingjing',
        age:30
    }
}
//const {name,teacher:{name}} = other;//报错：Identifier 'name' has already been declared
//为了解决这种报错，可以为name改名
const {name:otherName,teacher:{name}} = other;
 console.log(otherName,name);

默认值

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

let [x = 1] = [undefined];
x // 1
let [x=1] = []
x //1
let [x = 1] = [null];
x // null

//如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined
null==undefined; //true
null===undefined; //false

注意点

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

// 正确的写法
let x;
({x} = {x: 1});

函数的结构赋值

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

用途

交换变量

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

获取函数返回的多个值

//数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
a;//1
b;//2
c;//3

//对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

获取JSON数据值

//JSON常用于前后端数据交换，JSON属于字符串，以往获取JSON中数据，需要使用json.parse()转换为对象
const jsonData = '{"id": 42, "status": "OK", "data": [867, 5309], "isTeacher": true}';
const {id,status} = JSON.parse(jsonData);
console.log(id,status);

参考：https://www.w3cschool.cn/escript6/escript6-s4pc37et.html