ES6 的对象解构赋值

12345 (ID: 47)

等级：新手上路

积分：9
发帖：1 篇
来自：保密
注册：2023/11/29 22:10:47
造访：2023/12/5 13:02:41

[ 第 1 楼 ]

解构赋值：ES6允许按照一定规则从数组或对象中提取值，并对变量进行赋值。说直白点，等号两边的结构相同，右边的值会赋给左边的变量。
1.基本用法

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); //1,2,3

let [d, ,] = [1, 2, 3];
console.log(d); //1

let [[e], f] = [[1], 2];
console.log(e, f); //1,2

let [g, ...h] = [1, 2, 3];
console.log(g, h); //1,[2,3]

2.不完全解构---右边提供的值要比变量多

let [[i]] = [[1, 2], 3];
console.log(i); //1

3.解构赋值失败为undefined

let [j] = [];
console.log(j); //undefined

4.支持解构赋值提供默认值

let [k = 1, l = 2] = [3];
console.log(k, l); //3,2
// 规则是先看右边的值是否严格等于undefined，如果是undefined才会用默认值，除此之外，都是优先用右边提供的值。
let [m = 1, n = 2] = [undefined, null];
console.log(m, n); //1，null

2023/11/29 22:12:22

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：天使

积分：1373
发帖：60 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/5/3 6:15:31

[ 第 2 楼 ]

对象解构赋值与数组有些不同，数组像按照等号对称的赋值，而对象是按照key名相同赋值，与顺序无关

let { a, b } = { b: 1, a: 2 };
console.log(a, b); //2,1

对象解构与数组解构的混合使用：

let arr = [1,2,3]
let {0:a,[arr.length-1]:b} = arr;
console.log(a,b)//1,3

字符串解构赋值时，字符串会转为一个类数组。

let [a, b, c, d] = "love";
console.log(a,b,c,d)//l,o,v,e
let { length: a } = "love";
console.log(a); //4

函数参数解构赋值

function add([a = 1, b = 2] = []) {
console.log(a + b);
}
add(); //3
add([3,4]);//7
// 函数参数对应
function add2({b,a}){
console.log(a,b)
};
add2({a:1,b:2})//1,2

2023/12/5 12:57:06

IP：已设置保密

123458 (ID: 48)

等级：新手上路

积分：8
发帖：0 篇
来自：保密
注册：2023/12/6 2:20:46
造访：2023/12/6 2:49:19

[ 第 3 楼 ]

真不错

2023/12/6 2:21:11

IP：已设置保密