ES6中的解构

我理解的解构是:让变量去接收一个数组或对象时,直接从数组或对象中拆解元素。

数组的解构

普通一对一的赋值

const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

 

非对称赋值

const [a, b] = [1, [2, 3]];
console.log(a); // 1
console.log(b); // [2, 3]

 

解构时可以给默认值

const [a, b = 2] = [1];
console.log(b); // 2

 

对象的解构

普通解构

const config = {
    title: '2333',
    desc: 'bwerd'
};
let {title, desc} = config;
console.log(title); // '2333'
console.log(desc); // 'bwerd'

 

对象属性设置别名

当后端数据的变量格式与前端定的规范不一致时,可以通过取别名来达到规范

const { 
    goods_title: goodsTitle,
    goods_image: goodsImg
} = {
    goods_title: 'tweittt',
    goods_image: 'https://i.img.com/s.png'
};
console.log(goodsTitle); // tweittt
console.log(goodsImg); // https...

 

设置默认值

只对确实未赋值的项生效,假设值是null是不会启用默认值的

let [a, b = 2] = [1, null];
console.log(b); // null

 

解构的妙用

交换数组的值,再也不用第三者

// 老方法
var a = 1;
var b = 2;
var c = b;
a = b;
b = c;
console.log(a); // 2
console.log(b); // 1


// 新方法
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

发表评论

电子邮件地址不会被公开。 必填项已用*标注