ECMAScript6简介——变量的解构赋值
文章目录
-
- 变量的解构赋值
- 默认值
- 对象的解构赋值
- 字符串的解构赋值
- 数值和布尔值的解构赋值
- 函数参数的解构赋值
- 不得使用圆括号的情况
变量的解构赋值
基本用法：
- ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
- 以前，为变量赋值，只能直接指定值：
1. let a = 1;
2. let b = 2;
3. let c = 3;
- ES6允许写成下满这样：可以从数组中提取值，按照对应位置，对变量赋值。
1. let [a,b,c] =[1,2,3];
- 本质上，这种写法属于“模式匹配”，只要等号两边模式相同，左边的变量就会被赋予对应的值。
let [foo,[[bar],baz]] = [1,[[2],3]]
foo //1
bar //2
baz //3
let [ , , third] = ["foo","bar","baz"];
third //"baz"
let [x, , y] = [1,2,3];
x //1
y //3
let[head,...tail] = [1,2,3,4]
head //1
tail //[2,3,4]
let [x,y,...z]=['a'];
x //"a"
y //undefined
z // []
- 如果结构不成功，变量的值就等于
undefined
let [foo] = []
let [bar,foo] = [1];
- 另一种情况是不完全解构模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
let [x, y] = [1,2,3];
x //1
y //2
let [a,[b],d] = [1,[2,3],4];
a //1
b //2
c //4
- 如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。
//报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {
};
- 对于set结构，也可以使用数组的解构赋值。
let [x,y,z] = new Set(['a','b','c']);
x //"a"
- 事实上，只要某种数据结构具有iterator接口，都可以采用数组形式的解构赋值。
默认值
- 解构赋值允许指定默认值。
let [foo = true] =[];
foo //true
let [x,y = 'b'] = ['a']; //x='a',y='b'
let [x,y = 'b'] = ['a',undefind]; //x='a', y='b'
注意：ES6内部使用严格相等运算符(===), 判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined,默认才会生效。如果数组成员为null,默认值就不会生效，因为null不严格等于undefined。
let [x = 1] = [undefined];
x //1
let[x = 1] = [null];
x //null
- 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f(){
console.log('aaa')
}
let[x = f()] = [1];
上面的代码中，因为x能取到值，所以函数f根本不会执行。上面的代码其实等价于下面的代码。
let x;
if ([1][0] === undefined){
x = f();
} else {
x = [1][0]
}
- 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = []; //x=1; y=1
let [x = 1, y = x] = [2]; //x=2; y=2
let [x = 1, y = x] = [1,2]; //x=1;y=2
let [x = y ,y = 1] = []; //ReferenceError: y is not defined
对象的解构赋值
- 解构不仅可以用于数组，还可以用于对象。
let {
foo , bar } = {
foo: "aaa",bar: "bbb"};
foo //"aaa"
bar //"bbb"
- 对象的解构与数组有一个重要的不同，数组元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let {
bar , foo } = {
foo: "aaa",bar: "bbb" };
foo //"aaa"
bar //"bbb"
let {
baz} = {
foo: "aaa", bar: "bbb" }
baz //undefined
- 如果变量名与属性名不一致，必须写成下面这样。
let {
foo : baz } = {
foo: "aaa" ,bar: "bbb"};
baz //"aaa"
let obj = {
first: "hello" ,last: "world"};
let {
first: f,last: l} = obj;
f //"helllo"
l //'world'
- 事实上，对象的解构赋值是下面形式的简写,而真正被赋值的是后者，而不是前者。
let {
foo: foo , bar: bar } = {
foo: "aaa",bar:"bbb"};
let {
foo: baz } = {
foo:"aaa",bar: "bbb"};
baz //"aaa"
foo //error:foo is not defined
- 与数组一样，解构也可以用于嵌套结构的对象。
let obj = {
p:[
"Hello",
{
y : "World" }
]
};
let {
p :[x,{
y }]} = obj;
x //"Hello"
y // "World"
注意：这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成以下形式。
let obj = {
p:[
"Hello",
{
y : "World" }
]
};
let {
p, p :[x,{
y }]} = obj;
x //"Hello"
y // "World"
p //["Hello", {y: "World"}]
- 嵌套赋值例子。
let a = {
};
let b = [];
({
foo: a.prop, bar: b[0] } = {
foo: 123, bar: true});
a //{prop:123}
arr //[true]
- 对象的解构也可以指定默认值。
var {
x = 3 } = {
};
x //3
var {
x, y = 5 } = {
x: 1};
x //1
y //5
var {
x : y = 3} = {
};
y //3
var {
x: y = 3} = {
x: 5};
y //5
var {
message:msg = "Something"} ={
}
msg //"Something"
- 默认值生效的条件是，对象的属性值严格等于
undefined。属性x等于null，因为null与undefined不严格相等，所以是个有效的赋值，导致默认值3不会生效。如果解构失败，变量的值等于undefined
var {
x = 3 } = {
x : undefined};
x //3
var {
x = 3} = {
x : null}
x //null
let {
foo } = {
bar: "baz"};
foo //undefined
- 如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。
let {
foo} = {
bar: "baz"};
foo // undefined
- 如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。在下面代码中，等号左边的
foo属性。对应一个子对象，该子对象的bar属性，解构时会报错，因为foo这时等于undefined，再取子属性就会报错。
//报错
let {
foo:{
bar}} = {
baz: "baz"};
- 如果将一个已经声明的变量用于解构赋值，必须非常小心。
//报错
let x,
{
x} = {
x: 1};
//SyntaxError: syntax error
- 上面的代码写法会报错。因为JS引擎会将{x}理解成一个代码块，发生语法错误。解决的方法是将其用大括号包围。
//正确
let x,
({
x} = {
x: 1});
- 解构赋值允许等号左边的模式之中，不放置任何变量名，因此，能够写出非常古怪的赋值表达式。下面的表达式虽然无意义，但是语法合理，可以执行。
({
} = [true,false]);
({
} = "abc");
({
} = []);
- 对象的赋值解构，可以很方便地将现有的将现有的对象方法赋值到某个变量。
let {
log, sin, cos } = Math;
- 由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {
0: first,[arr.length - 1 ]:last} = arr;
first //1
last //3
字符串的解构赋值
- 字符串也可以解构赋值，这是因为此时，字符串被转换成一个类似于数组的对象。
const [a,b,c,d,e] = "hello";
a //h
b //e
c //l
d //l
e //o
- 类似数组的对象都有一个
length属性，因此还可以对这个属性解构赋值。
let {
length : len} = "hello"
len //5
数值和布尔值的解构赋值
- 解构赋值时，如果等号右边是数值和布尔值，则会先转换为对象。下面的代码中，数值和布尔值的包装对象都有
toString属性，因此变量s都能取到值。
let {
toString : s} = 123;
s === Number.prototype.toString //true
let {
toString : s} = true;
s === Number.prototype.toString //true
- 解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转化为对象， 由于
undefined和null无法转为对象，所以对他们进行解构赋值，都会报错。
let {
prop: x } = undefined; // TypeError
let {
prop: y } = null; //TypeError
函数参数的解构赋值
- 下面的代码中，函数
add的参数表面上是一个数组，但在传入参数时，数组参数就被结构成了x和y,对于函数内部的代码来说，他们感受到的参数就是x和y。
function add ([x,y]){
return x + y;
}
add([1,2]); //3
[[1,2], [3,4]].map(([a,b]) =>a + b );
//[3,7]
- 函数的参数的解构也可以使用默认值。下面代码中，函数
move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值，如果解构失败，x和y等于默认值。
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]
不得使用圆括号的情况
- 变量声明语句
// 报错
let [(a)] = [1];
let {
x: (c)} = {
};
let ({
x: c}) = {
};
let {
(x: c)} = {
};
let {
(x): c} = {
};
let {
o: ({
p: p }) } = {
o: {
p: 2 } };
- 函数参数
// 报错
function f([(z)]) {
return z; }
// 报错
function f([z,(x)]) {
return x; }
- 赋值语句的模式
// 全部报错
({
p: a }) = {
p: 42 };
([a]) = [5];