ES6解构赋值全了解

ES6解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

1.数组的解构赋值

let arr=[1,2,3,4];
let [x,y,m,n]=[1,2,3]
console.log(x,y,m,n);

答案:1,2,3,undefined

//设置默认值，只有后面解构的值是undefined的时候才会走默认值

let [x1,x2=(function(){console.log('哈哈哈')();return 10})]=[1,undefined];

console.log(x1,x2);

答案:1 f(){console.log('哈哈哈')();return 10}

 //不定参数赋值 将后面的项放在一个数组中赋值给y3

let [y1,y2,...y3]=[1,2,3,4,5];

...是扩展运算符。

2.对象的解构赋值

//默认值

let {name,age}={name:"珠峰",age:10};

        console.log(name,age);

答案:珠峰 10

 let {name,age=100}={name:"珠峰"};

        console.log(name,age);

答案:珠峰 100

 

let {name,age=100,list}={name:"珠峰",age:undefined,list:["js","node","vue","react"]};

        console.log(name,age,list);

 

答案:

  let x1,x2;

        ({x1,x2}={x1:1,x2:2});

        console.log(x1,x2)

答案:1 2

3.其他数据类型的解构赋值

tip:使用数组的解构赋值的形式 如果等号右边不是一个数组 默认将其转换为类数组(必须有length属性)

 let [x,y]="123";

       console.log(x,y);

答案: 1 2   字符串类型

 

tip:使用对象的解构赋值的形式 如果等号右边不是一个对象 默认转为对象 再进行赋值

 let {length:b}="1234";

        console.log(Object("1234"));

        console.log(b);

答案:

4.函数参数的解构赋值

(1)数组

      function getA([a,b,c,...d]){

            console.log(a,b,c,d);

        }

        getA([1,2,3,4,5])

答案：1 2 3 [4,5]

(2)对象

 function getB({name="详情",age}){

            console.log(name,age);

        }

        getB({name:undefined,age:10});

答案：详情 10

5.练习代码

  const metadata={
            title:'Scratchpad',
            translations:[
                {
                    locale:'de',
                    localization_tags:[],
                    last_edit:'2019-10-30',
                    title:'JavaScript'
                }
            ],
            url:'/en-US/docs/Tools/Scratchpad'
        };
        let {
            title:englishTitle, //Scratchpad
            translations:[
                {
                    title:localeTitle,  //JavaScript
                },

            ],
        }=metadata;
        console.log(englishTitle);
        console.log(localeTitle);