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);

View Code