<<深入理解ES6>>记:五

第5章 解构:使数据访问更便捷

1.对象解构

  • 允许默认值
let node = {
    name: 'ylz',
    age: 20
}
let {name, age, value = true} = node;
console.log(name);   // ylz 
  • 为不同名局部变量赋值
let node = {
    name: 'ylz',
    age: 20
}
let {myName: name, myAge: age} = node;
console.log(myName);   // ylz 
  • 嵌套对象解构
let node = {
    name: 'ylz',
    age: 20,
    son: {
        msg: {
            name: '233'
        }
    }
}
let {son: {msg}} = node;
console.log(msg.name);   // 233

2.数组解构

在ES6中交换变量
let a = 1,
    b = 1;
[a, b] = [b, a];
console.log(a);     // 2
console.log(b);     // 1

3.不定元素

let colors = ['red', 'blue', 'green'];
let [firstColor, ...restColors] = colors;
console.log(restColors.length);

4.数组复制

ES5: 
var colors = ['red', 'green'];
var newColors = colors.concat();
ES6: 
let [...newColors] = colors;

5.解构参数
解构可以用在函数参数的传递过程中, 更加方便

funtion setCookie(name, value, {secure, path, domain, expires} = {}) {
    // 设置cookie的代码
}
setCookie('type', 'js', {
    secure: true,
    expires: 6000
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,042评论 3 37
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,108评论 8 25
  • 解构 意义:从对象或数组中获取特定数据并赋值给变量 对象解构 在赋值操作符左侧放置一个对象字面量 不要忘记初始化程...
    Revontulet阅读 376评论 0 0
  • 情也凉,意也凉 满地落叶, 只恨爱太长。 风愁肠,雨愁肠。 忘却思念不彷徨, 情愿两茫茫。 思悠悠,念悠悠, 思念...
    满地落叶阅读 124评论 0 0
  • 遇见H先生是在15年的夏天,H是我的初中同学,我只记得那天阳光特别好,好到略带一点刺眼。那天我带着一副大墨镜骑着我...
    不在调上的猫阅读 482评论 0 0