ES6学习（变量解构赋值）

解构赋值含义：容许按照必定模式，从数组和对象中提取值，对变量进行赋值，只要等号两边的模式相同，左边的变量就会被赋予对应的值

一、数组解构赋值 右侧必须是一个数组

let [a, b, c] = [1, 2, 3];
// 若是不是数组，则会报错
let [e] = 5
console.log(e)
// 若是左侧变量名多于右侧，则左侧多的变量赋值不成功为undefined
let [a,b,c,d] = [2,3];
console.log(a,b,c,d) //2  3  undefined  undefined
// 若是左侧出现展开运算符时；右侧对应的值会放到一个数组中
let [a,...b] = [1,2]
console.log(a,b)   // 1  [2]
let [c,...d] = [1,[3,4]]
console.log(c,d)// 1  [[3,4]]
// 若是右侧的值多于左侧的变量，那么只匹配对应的值，多余的值则不会解构  嵌套解构
let [aa,bb] = [1,[3,4],66]
let [cc,[dd]] = [1,[3,4],66]
console.log(aa,bb) //1  [3,4]
console.log(cc,dd) //1  3
// 二、解构赋值容许指定默认值
let [a1,b1=2] = [1];
console.log(a1,b1) //1  2
// 只有左侧对应的值严格等于undefined时，默认才生效
let [a2,b2=3]=[2,false];
let [a3,b3=3]=[2,undefined];
console.log(a2,b2);  //2  false
console.log(a3,b3);  //2  3
// 默认值能够引用解构赋值的其余变量，但该变量必须已经声明。
let [a4,b4=a4] = [3];
let [a6=1,b6=a6] = [];
let [a5=b5,b5] = [3,5];
let [a7=b7,b7] = []; //ReferenceError: b7 is not defined
console.log(a4,b4)  //3  3
console.log(a5,b5)  //3  5
console.log(a6,b6)  //1  1

二、对象的解构赋值

对象解构 是根据变量名来进行解构赋值的 没有顺序，若是左侧没有在右侧找到一样的名称，则该变量是undefined先找到同名属性，而后再赋给对应的变量。真正被赋值的是后者，而不是前者。因此咱们写代码的时候必定要注意

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
console.log(bar,foo)  //bbb  aaa
let { bar, foo } = { foo: 'aaa' };
console.log(bar,foo) //undefined  aaa
let { bar:foo, foo:bar } = { foo: 'aaa', bar: 'bbb' };
let {  foo:bar } = { foo: 'aaa', bar: 'bbb' };
console.log(bar,foo) //foo is not defined
// 也能够对内置对象进行解构 例如Math
let {floor,ceil,round} = Math;
console.log(floor(3.5))  //3
console.log(ceil(3.5)) //4
console.log(round(3.5)) //4
// 对象也能够嵌套解构
let {fn,fn:{fn1}} = {fn:{fn1:3}}
console.log(fn) //{fn1:3}
console.log(fn1) // 3
// 对象的解构也能够指定默认值  默认值生效的条件是，对象的属性值严格等于undefined。
var {obj1 = 3} = {};
var {obj2 = 3} = {obj2:undefined};
var {obj3 = 3} = {obj3:null};
console.log(obj1,obj2,obj3) //3  3  null
// 注意  不能将大括号写在行首，JavaScript 引擎会将{obj4}理解成一个代码块，从而发生语法错误。
let obj4;
// {obj4} = {obj3:5};
({obj4} = {obj4:5})
// 能够对数组进行对象属性的解构
// 都有一个length属性，所以还能够对这个属性解构赋值。
let {0:first,length:len} = [2,4,5]
console.log(first) //2
console.log(len) //3

三、字符串的解构赋值 就是把字符串展开，分别对应左侧一个变量

const [str1, str2, str3] = 'hello';
const {length}= 'hello';
console.log(str1,str2,str3,length)  //h  e  l  5
// 只要等号右边的值不是对象或数组，就先将其转为对象。因为undefined和null没法转为对象，因此对它们进行解构赋值，都会报错。
let {toString:s} = 55
let dddd = s.toString(444)
console.log(typeof dddd)

四、解构赋值有什么用？

（1）、交换赋值更方便

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

（2）、函数返回值，能够直接解构对应不一样的变量

function example() {
    return {
        foos: 1,
        bars: 2
    };
}
let { foos, bars } = example();

（3）、函数传参更方便 若是向函数中传入数组或对象的话，不使用解构那咱们还须要从数组或对象中去取值；若是解构，则咱们能够在函数中直接使用变量的值

function f([x, y, z]) {
    // 这里能够直接使用 数组的值 1 2 3
}
f([1, 2, 3]);

（4）、以快速提取 JSON 数据中有用的值 后台接口给咱们返回的字段，咱们不必定所有都用，这是咱们能够把用到的字段解构出来使用。

let jsonData = {
    data: [867, 5309],
    success:true,
    massage:"成功",
    status:200
};
​
let { status, data,success } = jsonData;

（5）、for...of循环遍历 任何部署了 Iterator 接口的对象，

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
​
for (let [key, value] of map) {
    console.log(key + " is " + value);
}

（6）、引入模块的时候，可使用解构来，输出须要使用的一些方法

// 例如vue3 的引入 直接使用其内的函数
 import { ref, reactive,readonly,toRaw } from 'vue'

欢迎关注公众号（web学习吧），一块儿学习进步:

本文使用 mdnice 排版