es6解构

es6 的解构语法,很有用. 可以在日常开发中提供不少便捷之处
本文记录学习关于数组,对象,函数参数在解构中的一些用法.

数组

// 基本使用
const [a, b] = [1, 2, 3] // a = 1, b = 2
// 嵌套解构
const [a, [b], c] = [1, [2], 3] // a = 1, b = 2, c = 3
// 缺省值
const [a, b] = [1] // a = 1, b = undefined
// 默认值
const [a, b = '123'] = [1] // a = 1, b = '123'
// 忽略某些值
const [a,,c] = [1,2,3] // a = 1, c = 3

以上例子展示了数组结构赋值的 基本用法 嵌套结构 缺省值 默认值 这几种情况.
有一种情况需要注意, 因为在默认值的判定中是 完全等于 也就是 === , 所以对于右侧表达式中的某个元素为 null 这种情况是, 默认值不会生效, 因为 undefined !== null

//
const [a, b = '1'] = [1, null] // a = 1, b = null

以上的例子里面,表达式的右面都是数组. 其实对于非数组结构的数据来说, 也是可以使用数组形式的解构赋值. 比如下面:

const [a, b] = new Set([1,2]) // a = 1, b = 2

如上所示, set 也是可以使用 set 也是可以使用数组形式的解构赋值.
其实如果, 某种数据结构具有 Iterator 接口, 都是可以使用 数组形式 的解构赋值

对象

和 数组 的解构不同的是, 变量的解构没有可以不用关心变量的顺序, 因为对象是由键值对组成的

// 基本使用
const {a, b} = {b: 2, a: 1} // a = 1 b = 2
// 嵌套结构
const {a, b: [c, d]} = {a: 1, b: [2, 3]} // a = 1 , c = 2, d = 3
// 默认值
const {a, b=2} = {a: 1} // a = 1, b = 2

对于默认值,和数组的结构赋值判定相同, 解构出来的值 完全等于undefined 时, 才会使用默认值

函数参数

可以在函数的参数中灵活使用解构赋值

function add([a, b]) {
  return a + b
}
add([1 , 3]) // 4
function add2({a, b}) {
  return a + b
}
add2({a: 4, b: 1}) // 5

参考

变量的解构赋值