文享日志

ES6变量的解构

JavaScript

发表于2017年12月14日01:43:03

更新于2018年02月06日22:55:21

0条评论 233次阅读

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。


数组其实是一种特殊的对象,数组中键为数字(数组下标),值为数组中值。

只要某种数据结构具有 Iterator 接口(一般看有没有长度属性),都可以采用数组形式的解构赋值。

典型实例如:

let [a, b, c] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];


结果为head为1,tail为[2,3,4];


解构允许设置默认值。

ES6 内部使用严格相等运算符,判断一个位置是否有值。

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

典型实例:

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


对象的解构与数组的不同之处在于,对象解构不需要按顺序排列。(这个其实很好理解)

典型例子:

let { bar, foo , baz} = { foo: "aaa", bar: "bbb" };
//bar = 'bbb' ; foo = 'aaa' ; baz = undefined
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };        
//baz = 'aaa' ; foo :foo is not defined

实际上,对象的解构左边赋值的是值,而不是键。通过以上的例子可以看出

对象的解构可使用默认值

var { message: msg = 'Something went wrong' } = {};
//msg = "Something went wrong"


字符串解构

const [a, b, c, d, e] = 'hello';
//a = "h" ; b  = "e" ; c = "l" ; d = "l" ; e = "o" ;


数值和布尔值解构

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true


函数参数解构

[[1, 2], [3, 4]].map(([a, b]) => a + b);     //[3,7]


解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。


一些解构代码示例:

function f() {
  console.log('aaa');
}
let [x = f()] = [1];

这里的f()函数,只有在又边为undefined时才会调用判断。


let { log, sin, cos } = Math;

这种解构后,可以直接使用log,sin,cos函数。


function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]









👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广