ECMAScript6 - 解构赋值

61 阅读1分钟

变量的解构赋值

  1. 交换变量的值
let x = 1;
let y = 2;
[x,y] = [y,x]
console.log(x,y) // 2 1

2.函数参数的定义
解构赋值可以方便的将一组参数与变量名对应起来。

// 参数是一组有次序的值
function f([x,y,z]) {...}
f([1,2,3])

// 参数是一组无次序的值
function f({x,y,z}) {...}
f({z:3, y:2, x:1})

对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

默认值和别名

起别名可以防止 const 声明的变量相同变量名会报错。

const {name:oneName = 'xxx'} = {name:'aaa'}
const {name:twoName = 'xxx'} = {name:'bbb'}

数组的解构赋值

基本用法

let [a, b, c] = [1, 2, 3]

上面代码表示,可以从数组中提取值,按照对应位置对变量赋值。
本质上这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。数组的元素是按次序排列的,变量的取值由它的位置决定。

默认值

解构赋值允许指定默认值。

let [foo = true] = []
foo // true

let [x, y = 'b'] = ['a']  // x = 'a' y = 'b'
let [x, y = 'b'] = ['a', undefined] // x = 'a' y = 'b'

null == undefined 结果是 true,但 null === undefined 结果是 false

let [x = 1] = [undefined]
x // 1

let [x = 1] = [null]
x // null

💣 ES6 内部使用严格相等运算符(===)判断一个位置是否有值。只有当一个数组成员严格等于 undefined ,默认值才会生效。