解构赋值(ES6学习笔记)-白红宇

解构赋值(ES6学习笔记)

阅读量：2159 次

发布时间：2019-05-01

本文共 3094 字，大约阅读时间需要 10 分钟。

什么是解构赋值？

按照一定模式从数组和对象中提取值，然后对变量进行赋值。（模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值）

如果解构不成功，变量的值就为undefined。（赋值没有配对时，未配对的变量值为undefined，此时若有默认值则为默认值）

解构赋值的分类。

数组解构赋值 （按照对应顺序赋值）

// 数组解构// 初始化{
         let [a,b,c] = [1,2,3]; //等价于let a=1,b=2,c=3    console.log(a,b,c);  // 1 2 3}// 先定义后赋值{
         let a,b,c;    [a,b,c]=[1,2,3];     console.log(a,b,c);  //1 2 3}// '…'扩展运算符，以数组形式取剩余的数{
         let a,b,rest;    [a,b,...rest]=[1,2,3,4,5];    console.log(a,b,rest);   //1 2 [3,4,5]}// 适用于变量交换，更为方便，不需要中间值{
         let a=1,b=2;    [a,b]=[b,a];    console.log(a,b); //2 1}// 获取函数返回值更为方便{
         function f(){
             return [1,2];    }    let a,b,c;    [a,b,c=99]=f();    console.log(a,b,c);  //1 2 99}// 当函数返回了多个值，可以选择性的接收其中的值{
         function f(){
             return [1,2,3,4,5,6];    }    let a,b,c;    [a,,,b,c]=f();  //每个逗号代表一个数，但是最后一个数的逗号可以省略不写    console.log(a,b,c);  //1 4 5}// 函数返回第一个值，以数组形式存取剩余值{
         function f(){
             return [1,2,3,4,5,6];    }    let a,b,c;    [a,,...c]=f();    console.log(a,b,c);  //1 undefined [3,4,5,6]}// '…'扩展时后面没值就为空数组{
         let [foo,...z]=["a"];    console.log(foo,z);   //a []}// 嵌套使用{
         let [a,[b],d]=[1,[2,3],4];    console.log(a,b,d);   //1  2  4   }// 解构赋值表达式两边模板必须一致，不然会报错{
         let [f]=1;    console.log(f);  //1 is not iterable,  }

对象解构赋值（赋值机制其实是，先找到同名的属性名，再把属性值赋值给同名属性名对应的变量，属性名和属性值变量相同的时候可以简写为一个）

1、赋值没有固定顺序，但变量名必须与属性名同名才能取到对应的属性值。
2、若变量名与属性名不一致时，必须明确其对应关系。

// 对象解构// 初始化解构赋值，找到属性名相同的变量，然后对应赋值,若其变量为undefined或者默认值{
         let {
     a:a,b:c,c:b,d:d=10}={
     a:1,b:2};    console.log(a,b,c,d);  // 1 undefined  2  10}// 属性名和变量名相同可以省略属性名不写{
         let o = {
     a:1,b:2};    ({
     a,b:c,c:b,d=10} = o);  //不是初始化的对象解构赋值要加括号    console.log(a,b,c,d);    //1 undefined 2 10}// 嵌套使用{
         let metaData={
             title:"abc",        text:[{
                 title:"text",            desc:"descriptopn"        }]    }    let a,b,desc;    ({
     title:a,text:[{
     title:b,desc:desc}]}=metaData);    console.log(a,b,desc);   //abc  text  description}

字符串解构赋值

将字符串看作一个类似于数组的对象。

// 字符串解构// 初始化解构赋值{
         let [a,b,c] = 'hello';    console.log(a,b,c);  //h e l}// 先定义，后解构赋值{
         let a,b,c;    [a,b,c] = 'hello';    console.log(a,b,c);  //h e l}

该类似数组的对象都有一个length属性，因此可以对这个属性进行解构。

//对字符串的属性进行解构{
         let len;    ({
     length:len} = 'hello');    console.log(len);  //5}

该类似数组的对象都有一些方法，也就是函数，它们也可以进行解构。结果为一个函数。

// 对字符串的方法进行解构{
         let upper;    ({
     toUpperCase:upper} = 'hello');    console.log(upper);    //ƒ toUpperCase()    console.log(upper.call('hello'));    //HELLo    console.log(upper.call('a1213Bas'));    //A1213BAS 得到的函数可以转换其他字符串}

布尔值解构赋值

函数参数解构赋值

1、函数调用时，会将实参传递给形参，其过程就是实参赋值给形参。因此，也可以使用解构赋值。
2、其规则与数组、对象的解构赋值一致，关键看参数是采用哪种解构赋值方式。

// 函数解构赋值// 参数为数组{
         function add([x,y=10]){
             return x+y;    }    let r = add([1]);    console.log(r);   //11}// 参数为对象{
         function add({
      x:x,y:y=10}){
             return x+y;    }    let r = add({
     x:20});    console.log(r);   //30}