脚本宝典收集整理的这篇文章主要介绍了变量的解构赋值,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
解构赋值
解构赋值是ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值;
解构赋值主要有一下几种
数组的解构赋值
let [a,b,c] = [1,2,3];
允许有默认值
let [foo = true] = [];
foo//true
let [x,y='b'] = ['a']; //x='a';y='b';
对象的解构赋值
对象的解构和数组不同的地方是,数组的元素必须是按次序排列的,变量的值由它的位置决定;对象的属性是无序的,变量名与属性名相同就可以了。
let {foo, bar} = {foo: 'aaa', bar: 'bbb'};
foo//'aaa'
bar//'bbb'
如果变量名和属性名不一致,或者想要给这个变量名和属性名不一样,可以这样使用。
VAR {foo: baz} = {foo: 'aaa', bar:'bbb'}
bar//'aaa'
这相当于给给变量赋值,而且变量名不需要和属性名一样。
如果对一个已经声明的变量,需要谨慎
let x;
{x} = {x: 1};//SyntaxError
因为Javascript引擎会将{x}理解成一个代码块,从而发生语法错误。
({x} = {x:1})
字符串解构赋值
let [a,b,c,d,e] = 'hello';
a//'h'
b//'e'
类似数组的对象都有一个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
ES6内部使用的是严格相等运算符(===),判断一个位置是否有值。如果一个组员不严格等于undefined,默认值是不会生效的。
let [x=1] = [undefined];
x//1
let [x=1] = [null];
x//null
let {x=3} = {x: undefined};
x//3
let {x=3} = {x:null};
x//null;
变量的解构赋值的用途
交换变量的值
let x = 1; let y = 2;
[x, y] = [y, x];
从函数中返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
以上是脚本宝典为你收集整理的变量的解构赋值全部内容,希望文章能够帮你解决变量的解构赋值所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。