ES6解构赋值

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6解构赋值脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一、数组解构赋值:
VAR a = 1;
var b = 2;
var c = 3;
解构赋值:
var [a,b,c] = [1,2,3];
let [a,b,c] = new Set([1,2,3]);
也可嵌套赋值:
let [foo,[[bar],[baz]]] = [1,[[2],[3]]];
结果:
foo //  1; bar // 2; baz // 3;
 
let [,,third] == ["foo","bar","baz"];
结果:
third // "baz";
 
let [head, ...tail] = [1,2,3,4];
结果:
head // 1;
tail // [2,3,4];
 
let [x, y, ...z] = ['a'];
结果: 
x // "a"; 
y // undefined;
z // [];
 
如果解构不成功,变量就会等于undefinedvar [foo] == [];  foo // undefined
var [bar,foo] == [1];  foo // undefined
 
 
不完全解构
let [x,y] = [1,2,3];
x // 1
y // 2
 
let [a,[b],c] = [1,[2,3],4];
a // 1;
b // 2;
c // 4;
 
只要某种数据解构具有迭代接口,都可以采用数组形式的解构赋值。
 
解构赋值允许指定默认值。
var [foo = true] = []; foo // true
let [x, y='b'] = ['a']; //x = 'a'; y = 'b'
let [x, y='b'] = ['a',undefined]; //x = 'a'; y = 'b'
ES6内部使用(===)完全等于来判断一个位置是否有值,所以,如果一个数组成员不严格等于undefined,默认值不会生效var [x = 1] = [undefined]; x // 1
var [x = 1] = [null]; x // null
上面如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined
 
解构赋值的惰性取值:
function f(){ return 'aaa'};
let [x = f()] = [1];
x // 1
上面代码中x可以取到值1,所以就不会执行表达式,所以x = 1,等价于下面代码
var x;
if([1][0] === undefined){x =f()}else{x = [1][0]}
变赋值之前必须声明
二、对象解构赋值
var {foo, bar} = {foo:"aaa", bar:"bbb"};
foo // "aaa"
bar // "bbb"
*对象的解构赋值与数组一个重要的不同。数组必须是按次序排列,变量取值由未知决定;
而对象的属性没次序,变量必须与属性同名,才能取到正确的值。例如:
数组:let [x,y] = [1,2];  // x = 1,  y = 2
对象:var {foo, bar} = {bar:"aaa", foo:"bbb"}; // foo = "bbb", bar = "aaa"
var {baz} = {bar:"aaa"} // baz = "undefined"
如果变量名与属性名称不一致;必须写成下面这样:
var {foo:baz} = {foo: "aaa", bar: "bbb"};  // baz = "aaa"
letconst不允许重新声明!
其他同数组解构赋值。
三、字符串解构赋值
const [a,b,c,d,e] = "hello"; // a="h", b="e"... e="o";
类似与数组对象都有长度(length属性);因此还可以对这个属性解构赋值
let {length : len} = "hello"; // len = 5
四、数值和布尔值得解构赋值
let {toString: s} = 123;
s === Number.PRototyPE.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true
五、函数参数的解构赋值
function add([x,y]){
return  x+y;
}
add([1,2]); // 3
[[1,2],[3,4]].map(([a,b]) => a+b); // [3,7];
函数参数的解构也可以使用,默认值
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]
undefined会触发函数的默认值
[1,undefined,3].map((x = "yes")=>x) // [1,"yes",3]

脚本宝典总结

以上是脚本宝典为你收集整理的ES6解构赋值全部内容,希望文章能够帮你解决ES6解构赋值所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。