其实所有纠结选择的人心里早就有了答案,咨询只是想得到内心所倾向的选择。最终所谓的命运,还是自己一步步走出来的
变量的解构赋值
1.数组的解构复制
基本用法
解构(Destructuring):ES6按照一定模式,从数组和对象中提取值,对变量进行赋值
1 | let [a, b, c] = [1, 2, 3] |
这种写法属于”模式匹配”,只要等号两边的模式相同,变量就能赋上对应的值
1 | let [foo, [[bar], baz]] = [1, [[2], 3]]; |
解构不成功,值就等于undefined
不完全解构,也可以成功
如果等号右边不是数组(或者严格地说,不是可遍历的结构,将会报错)
对于Set结构,也可以使用数组进行解构赋值 let [x, y, z] = new Set([“a”, “b”, “c”]); (只要某种数据解构具有Iterator接口,都可以采用数组形式的解构赋值)
默认值
解构赋值允许指定默认值
1 | let [foo = true] = []; |
es6内部使用严格相等运算符(===),判断一个位置是否有值,只有挡一个数组成员严格等于undefined,默认值才会生效) (null不等于undefined
1 | function () { |
如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,
才会求值。因为x能取到值,所以函数f根本不会执行
对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
对象的解构赋值的内部机制,是先找到同名属性,饭后再赋值给对应的变量,真正赋值的是后者,不是前者,前者只是模式,不是变量
1 | let obj = { |
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,报错
1 | let {foo: {bar}} = {baz: 'baz'}; |
foo这时等于undefined,再取子属性就会报错
1 | //错误写法 |
错误写法JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号放在行首,避免JavaScript将其解释为代码块,才能解决这个问题
字符串的解构赋值
字符串可以解构赋值,此时字符串被转换为一个类似数组的对象
1 | const [a, b, c, d, e] = 'hello'; |
类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值
1 | let {length: len} = 'hello' |
大专栏 ES6解构"#数值和布尔值的解构赋值" class="headerlink" title="数值和布尔值的解构赋值">数值和布尔值的解构赋值
解构赋值时,如果等号右边是数值和布尔值,则会先转为对象
1 | let {toString: s} = 123 |
解构规则:只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构会报错
1 | let { prop: x } = undefined; |
函数参数的解构赋值
函数的参数也可以使用解构赋值
1 | [[1,2],[3,4]].map(([a,b]) => a+b)//[3,7] |
函数参数的解构也可以使用默认值
1 | function move({x = 0, y = 0} = {}) { |
函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值。
圆括号问题
可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号
1 | [(b)] = [3]; |
上面三行语句都可以正确执行,因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。第一行语句中,模式是取数组的第一个成员,跟圆括号无关;第二行语句中,模式是p,而不是d;第三行语句与第一行语句的性质一致。
- 交换变量的值
- 从函数返回多个值
- 函数参数的定义
- 提取JSON数据
- 函数参数的默认值
- 遍历map结构
任何部署了 Iterator 接口的对象,都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
1 | const map = new Map(); |
如果只想获取键名或者只想获取键值
1 | // 获取键名 |
输入模块的指定方法 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰
1 | const { SourceMapConsumer, SourceNode } = require("source-map") |