文章目录
- 1.数组的解构赋值,按次序排列,位置决定
- 2.对象的解构赋值,没有次序,变量与属性同名即可取值,默认undefined
- 3.字符串的解构赋值
- 4.数值和布尔值的结构赋值
- 5.函数结构赋值,
- 被解构的参数`是`传入的参数`,还是`函数参数默认值
- 6.不能使用圆括号场景,区别声明语句与赋值语句
-
- 7.用途:
ES6允许按照一定的模式,从数组或对象中提取值,给变量进行赋值,称为解构赋值
1.数组的解构赋值,按次序排列,位置决定
只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。
1.数组 匹配位置一 一对应赋值,可以部分赋值,对应【不完全解构】不上为undefined
2.set结构,也可以使用数组的结构赋值
let [x, y, z] = new Set(['a', 'b', 'c']);
let [x, , y] = [1, 2, 3];
let [x, y, ...z] = ['a'];
let [a, [b], d] = [1, [2, 3], 4];
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
let [x, y, z] = new Set(['a', 'b', 'c']);
2.对象的解构赋值,没有次序,变量与属性同名即可取值,默认undefined
对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量
1.变量名与属性名不同则Undefined
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo
bar
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz
2.变量名与属性名不一致:let {属性名:将变成名称} = { }
let {
foo: baz
} = {
foo: 'aaa',
bar: '222'
};
console.log(baz);
3.解构赋值,将现有对象赋值到变量
let { sin, log, cos } = Math;
console.log(log(8));
const { log } = console;
log('hello');
4.结构于嵌套结构的对象
let obj = { p: ['hello', { y: 'world' }] };
let { p: [x, { y }] } = obj;
console.log(x);
console.log(y);
let obj1 = {
p: [
"hello11", {
y: "world222"
}
]
};
let {
p,
p: [x1, {
y1
}]
} = obj1;
console.log(y1);
5.对象的解构赋值可以取到继承的属性。
const obj1 = {};
const obj2 = { foo: 'bar' }
Object.setPrototypeOf(obj1, obj2)
const { foo } = obj1;
console.log(foo);
6.默认值生效的条件是,对象的属性值严格等于undefined
。
const { x = 3 } = { x: undefined }
console.log(x);
const { y = 10 } = { y: null }
console.log(y);
7.圆括号与解构赋值的关系
-
声明后的变量解构赋值时,需要加()
let x;
{x} = {x:3})
let x;
({x} = {x:3})
-
解构赋值等号左侧可以不放置任何变量名,不违法但没必要
({} = [true, false]);
({} = 'abc');
({} = []);
-
数组本质对象,可对数组进行对象属性解构
const arr = [1,2,3];
const {0:first,[arr.length-1]:last} = arr;
console.log(first);
3.字符串的解构赋值
被转化为类数组的对象
const [a, b, c, d, e] = 'hello';
a
b
c
d
e
let {length : len} = 'hello';
len
4.数值和布尔值的结构赋值
等号右边是数值布尔值先转为对象,具有tostring属性
let {toString: s} = 123;
s === Number.prototype.toString
let {toString: s} = true;
s === Boolean.prototype.toString
let { prop: x } = undefined;
let { prop: y } = null;
5.函数结构赋值,
被解构的参数是
传入的参数,还是
函数参数默认值
1.函数参数,数组传参时被解构为变量参数
function add([x, y]){
return x + y;
}
add([1, 2]);
[[1, 2], [3, 4]].map(([a, b]) => a + b);
2.函数参数(对象,变量)设置默认值,若接受参数解构后得到变量值,否则默认值
对象是参数设置默认值,无论是否传参,均默认值存在
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8});
move({x: 3});
move({});
move();
3.函数参数(不是为变量,对象)指定默认值,而不是变量x,y指定默认,有返回值
参数是对象,若参数为空对象undefined,若未传参采用默认值
function move({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
move({x: 3, y: 8});
move({x: 3});
move({});
move();
4.undefined触发函数参数默认值
6.不能使用圆括号场景,区别声明语句与赋值语句
1.声明变量不能带
let [(a)] = [1];
let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};
let { o: ({ p: p }) } = { o: { p: 2 } };
2.函数参数(也属变量声明)
function f([(z)]) { return z; }
function f([z,(x)]) { return x; }
3.赋值语句
({ p: a }) = { p: 42 };
([a]) = [5];
6.1可以使用圆括号
赋值语句的非模式部分可以用圆括号,一般尽量别用
[(b)] = [3];
({ p: (d) } = {});
[(parseInt.prop)] = [3];
7.用途:
1.交换变量值
let x = 4;
let y = 2;
[x, y] = [y, x];
console.log(x);
console.log(y);
2.允许函数返回多个值
function ex() {
return [1, 2, 3]
}
let [a, b, c] = ex()
console.log(a, b, c);
3.函数参数无关顺序,对应变量名
function f1([x, y, z]) { console.log(x, y, z); }
f1([7, 8, 9]);
function f({ x, y, z }) { console.log(x, y, z); }
f({ z: 77, x: 88, y: 99 });
4.提取 JSON 数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
5.函数参数默认值
6.Map遍历
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
for (let [key] of map) {
}
for (let [,value] of map) {
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)