ES6解构赋值解析

引言

MDN对解构赋值的定义：解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。
在项目开发过程中我们会频繁使用object和Array，过去我们会通过Object.xxx或者[ ]使用，但是通过解构赋值能够更简洁的拿到数组或对象中的值。

基本使用

let a, b, rest;
[a, b] = [10, 20];

console.log(a);//10

console.log(b);//20
[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);// Array [30,40,50]
复制代码

数组解构赋值

基本使用

let arr = [21,24,3,4,5];
let [a,b] = arr;
console.log(a) //21
console.log(b) //24
复制代码

上面这段代码中 let [a,b]定义了从原来的数组中取出什么变量，即按照索引顺序取出索引为[0]``[1]的变量

嵌套数组的解构赋值

在原来的数组解构中加入一层数组结构，就能将数组的解构赋值深入下一层。

let Ninja = ['Naruto','Sasuke',['Sakura','Kakashi'],'Shikamaru']
let [a,s,[b]] = Ninja;
console.log(b)//Sakura
//如果将解构赋值的第二个元素设为数组：
let [a,[b]] = Ninja;
console.log(b) //S
复制代码

不定元素

可以使用剩余操作符...把其余元素赋值给一个变量

let arr = [3,4,5,6,7];
let [ a,...b] = arr;
console.log(a) //3
console.log(b) //4,5,6,7
复制代码

对象的解构赋值

同名变量的解构赋值

同名变量的解构赋值是在开发中最常用的解构赋值方法之一，其语法是在赋值操作符=放一个同名变量

let Ninjia = {
    firstName:'Nara',
    lastName:'Shikamaru',
    height:175
    }
    const {firstName,height} = Ninjia;
    console.log(firstName); //Nara
    console.log(height);  //175
复制代码

非同名变量赋值

和上面的语法差不多，区别就是自定义解构赋值的变量名

let Ninjia = {
    firstName:'Nara',
    lastName:'Shikamaru',
    height:175
    }
 const {name:lastName,datas:height}
 console.log(datas)  //175
复制代码