资讯专栏INFORMATION COLUMN

深入理解ES6笔记(五)解构:使访问数据更便捷

_DangJin / 3513人阅读

摘要:当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中。在对象的嵌套解构中同样能为本地变量使用不同的名称提取数组解构结构赋值基本忽略一些选项重新赋值默认值数组解构赋值同样允许在数组任意位置指定默认值。

主要知识点:对象解构、数组解构、混合解构以及参数解构

《深入理解ES6》笔记 目录

对象解构 对象解构

对象解构简单的例子

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
解构赋值
let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;
//使用解构来分配不同的值
({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"

在函数中使用解构赋值

let node = {
    type: "Identifier",
    name: "foo"
},
type = "Literal",
name = 5;
function outputInfo(value) {
    console.log(value === node); // true
}
outputInfo({ type, name } = node);
console.log(type); // "Identifier"
console.log(name); // "foo"
默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为 undefined 。

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name, value } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // undefined

可以选择性地定义一个默认值,以便在指定属性不存在时使用该值:

let node = {
    type: "Identifier",
    name: "foo"
};
let { type, name, value = true } = node;
console.log(type); // "Identifier"
console.log(name); // "foo"
console.log(value); // true
赋值给不同的本地变量名
let node = {
    type: "Identifier",
    name: "foo"
};
//读取名为  type  的属性,并把它的值存储在变量  localType  上
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"

也可以给变量别名添加默认值,依然是在本地变量名称后添加等号与默认值,例如:

let node = {
    type: "Identifier"
};
//该语法实际上与传统对象字面量语法相反,传统语法将名称放在冒号左边、值放在冒号右边;而在本例中,则是名称在右边,需要进行值读取的位置则被放在了左边。
let { type: localType, name: localName = "bar" } = node;
console.log(localType); // "Identifier"
console.log(localName); // "bar"
嵌套的对象解构

使用类似于对象字面量的语法,可以深入到嵌套的对象结构中去提取你想要的数据:

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
//每当有一个冒号在解构模式中出现,就意味着冒号之前的标识符代表需要检查的位置,而冒号右侧则是赋值的目标。当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中。
let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 1

在对象的嵌套解构中同样能为本地变量使用不同的名称:

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
                column: 4
       }
    }
};
// 提取 node.loc.start
let { loc: { start: localStart }} = node;
console.log(localStart.line); // 1
console.log(localStart.column); // 1
数组解构 结构赋值

基本

let colors = [ "red", "green", "blue" ];
let [ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

忽略一些选项

let colors = [ "red", "green", "blue" ];
let [ , , thirdColor ] = colors;
console.log(thirdColor); // "blue"

重新赋值

let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
默认值

数组解构赋值同样允许在数组任意位置指定默认值。当指定位置的项不存在、或其值为undefined ,那么该默认值就会被使用:

let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
嵌套的解构

在整个解构模式中插入另一个数组模式,解构操作就会下行到嵌套的数组中,就像这样:

let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
剩余项

数组解构有个名为剩余项( rest items )的概念,它使用 ... 语法来将剩余的项目赋值给一个指定的变量:
三个点的解构赋值必须放在所有解构元素的最末尾,否则报错。

let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red"
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

也可以进行数组的克隆操作:

/ 在 ES5 中克隆数组
var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

// 在 ES6 中克隆数组
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"
混合解构

混合解构指的是对象和数组混合起来,执行解构操作

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    },
    range: [0, 3]
};
let {
loc: { start },
range: [ startIndex ]
} = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
参数解构

原函数写法:

// options 上的属性表示附加参数
function setCookie(name, value, options) {
    options = options || {};
    let secure = options.secure,
    path = options.path,
    domain = options.domain,
    expires = options.expires;
// 设置 cookie 的代码
}
// 第三个参数映射到 options
setCookie("type", "js", {
    secure: true,
    expires: 60000
});

问题:无法仅通过查看函数定义就判断出函数所期望的输入,必须阅读函数体的代码。

重写函数:

function setCookie(name, value, { secure, path, domain, expires }) {
// 设置 cookie 的代码
}
setCookie("type", "js", {
    secure: true,
    expires: 60000
});
解构的参数是必需的

参数解构有一个怪异点:默认情况下调用函数时未给参数解构传值会抛出错误:

// 出错!
setCookie("type", "js");

可以这样写避免错误:

function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}
参数解构的默认值
function setCookie(name, value,
{
    secure = false,
    path = "/",
    domain = "example.com",
    expires = new Date(Date.now() + 360000000)
} = {}
) {
// ...
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108477.html

相关文章

  • 深入理解ES6笔记——解构使数据访问便捷(5)

    摘要:解构,一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值,以及对象和数组混合情况下的解构赋值操作,最后一个知识点是解构函数的参数。 解构,一种黑魔法 解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。 下面的代码你可能无法在浏览器上实时测试,推荐在babel官网在线测试代码:在线测试ES6代码...

    Drinkey 评论0 收藏0
  • 深入理解ES6笔记——导读

    摘要:最近买了深入理解的书籍来看,为什么学习这么久还要买这本书呢主要是看到核心团队成员及的创造者为本书做了序,作为一个粉丝,还是挺看好这本书能给我带来一个新的升华,而且本书的作者也非常厉害。 使用ES6开发已经有1年多了,以前看的是阮一峰老师的ES6教程,也看过MDN文档的ES6语法介绍。 最近买了《深入理解ES6》的书籍来看,为什么学习ES6这么久还要买这本书呢?主要是看到Daniel A...

    Godtoy 评论0 收藏0
  • ES6学习之 -- 解构使数据访问便捷

    摘要:数组的解构赋值规定允许按照一定模式,从数组和对象中提取值对变量进行赋值,我们称之为解构。的规则是,只要有可能导致解构的歧义,就不得使用圆括号。 数组的解构赋值 ES6规定:允许按照一定模式,从数组和对象中提取值对变量进行赋值,我们称之为解构。以前赋值只能直接指定值 let a = 1; let b = 2; let c = 3; ES6允许以下这种做法 let [a, b, c] = ...

    mrcode 评论0 收藏0

发表评论

0条评论

_DangJin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<