文章目录
-
- 一、解构赋值
- 二、解构数组
-
- 1. 变量赋值
- 2. 交换变量
- 3. 默认值
- 4. 不完全解构
- 5. 解构数组嵌套
- 6. 与
...运算符结合使用
- 三、解构对象
-
- 1. 获取成员
- 2. 对象赋值
- 3. 默认值
- 4. 解构嵌套对象
- 四、解构函数
-
- 1. 函数的参数
- 2. 函数返回值
- 四、其他解构
-
- 1. 字符串
- 3. 其他数据类型
一、解构赋值
- 解构赋值：主要用来从数组和对象中提取值，对变量进行赋值。
[]：是专门解构数组使用的{}：是专门解构对象使用的
二、解构数组
1. 变量赋值
- ES6之前的写法：
var a1 = 1,b1 = 2;
console.log(a1,b1) // 1 2var a2,b2;
a2 = 11;
b2 = 22;
console.log(a2,b2) // 11 22var arr = ['jack','rose'];
console.log(arr[0],arr[1]) // jack rose
12345678910
- 解构赋值写法：
var [a1, b1] = [1, 2];
console.log(a1,b1) // 1 2var a2,b2;
[a2, b2] = [11, 22];
console.log(a2,b2) // 11 22var arr = ['jack','rose'];
var [a3,b3] = arr;
console.log(a3,b3) // jack rose
12345678910
- 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
1
2. 交换变量
- ES6之前的写法：
var a=1,b=2,c;
c = a;
a = b;
b = c;
console.log('a='+a,'b='+b) // a=2 b=1
12345
- 解构赋值写法：
var a=1,b=2;
[a, b] = [b, a];
console.log('a='+a,'b='+b) // a=2 b=1
123
3. 默认值
- 如果解构不成功，变量的值就等于
undefined。
let [a] = [];
let [x, y] = [1];
console.log(a); // undefined
console.log(x); // 1
console.log(y); // undefined
12345
- 可以在表达式左边的数组中为任意对象预设默认值。
- 防止从数组中取出一个值为
undefined的对象
let a, b, c, d;
[a=5, b=7] = [1];
[c,d] = [2]
console.log(a,b,c,d); // 1 7 2 undefined12345
- 当数组成员为
null的时候，默认值就不会生效
let [x = 1] = [undefined];
console.log(x); // 1let [y = 1] = [null];
console.log(y); // null
12345
4. 不完全解构
- 等号左边的模式，只匹配一部分的等号右边的数组。
- 这种情况下，解构依然可以成功。
let [x, y] = [1, 2, 3];
console.log(x, y); // 1 2let [a, [b], c] = [1, [2, 3], 4];
console.log(a, b, c); // 1 2 4
12345
5. 解构数组嵌套
let arr = [1, [[2,22], 3]];
let [a,[b,c]] = arr;
console.log(a, b, c); // 1 [2,22] 3
123
6. 与...运算符结合使用
let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
1234567
三、解构对象
对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
如果变量与属性不同名，需要先匹配属性名，在定义变量。
- 左边定义的变量名与右边对象的属性名相同时
let {x, y} = {x: 1, y: 2,}
// 相当于 {x: x, y: y} = {x: 1, y: 2,}
console.log(x, y) // 1 2
123
- 左边定义的变量名与右边对象的属性名不相时
let {x: a, y: b} = {x: 1, y: 2,}
// 此时x，y是用来匹配右边对象的属性名，a，b才是变量
console.log(a, b) // 1 2
123
1. 获取成员
- 解构赋值对可以用来提取 JSON 对象中的数据
const obj = {name : 'jack',age : 18,gender : '男'
}
let name = obj.name;
let age = obj.age;
let gender = obj.gender;
12345678
- 解构赋值的方式从对象中获取成员
const obj = {name : 'jack',age : 18,gender : "男"
}
//前面的{}表示我要从obj这个对象中获取成员了
//name age gender 都得是 obj 中有的成员
//obj 必须是一个对象
let { name,age,gender } = obj;
123456789
2. 对象赋值
- 声明后赋值
let obj = {a: 6, b: 4};
let {a, b} = obj;
console.log(a,b); // 6 4
123
- 无声明赋值
let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b); // 1 2
123
3. 默认值
- 指定对象的解构默认值。
let {a = 3} = {};
console.log(a) // 3let {b, c = 5} = {b: 1};
console.log(b, c) // 1 5let {d: e = 3} = {};
console.log(e) // 3let {f: g = 3} = {f: 5};
console.log(g) // 5
1234567891011
- 当对象成员为
null的时候
let [x = 22] = {x: undefined};
console.log(x); // 22let [y = 1] = {y: null};
console.log(y); // null
12345
4. 解构嵌套对象
- 与数组一样，解构也可以用于嵌套结构的对象。
let obj = {a: ['Hello',{ y: 'JavaScript' }]
};
let { a: [x, { y }] } = obj;
console.log(x, y); // Hello JavaScript
12345678
let obj = {a:{b:{x:1,y:2}}
}
let {a,a:{b},a:{b:{x,y}}} = obj;
console.log(a); // {b: {…}}
console.log(b); // {x: 1, y: 2}
console.log(x, y); // 1 2
123456789101112
四、解构函数
1. 函数的参数
- 函数的参数也可以使用解构赋值。
function fn([x, y]){return x + y;
}
fn([1, 2]); // 3
1234
- 函数参数的解构也可以使用默认值。
function fn({x = 8,y} = {}) {console.log(x,y);return [x, y];
}
fn(); // [8, undefined]
fn({}); // [8, undefined]
fn({x: 9}); // [9, undefined]
fn({x: 6, y: 4}); // [6, 4]
12345678
2. 函数返回值
- 当函数返回一个数组时，使用解构处理更方便
function fn() {return [1, 2];
}
let a, b;
[a, b] = fn();
console.log(a,b); // 1 2
123456
- 忽略一个函数的某些返回值
function fn() {return [1, 2, 3];
}
let a, b;
[, b, c] = fn();
console.log(b, c); // 2 3
123456
- 忽略一个函数的全部返回值
function fn() {return [1, 2, 3];
}
[ , , ] = fn();
1234
四、其他解构
1. 字符串
- 字符串会被转换成了一个类似数组的对象。
let [a, b, c] = 'ES6';
console.log(a, b, c) // E S 6
12
- 字符串的
length属性也能进行解构赋值
let {length : l} = 'ES6';
console.log(l) // 3
12
3. 其他数据类型
- 当等号左边为对象，右边为
数值、布尔值、undefined和null时
let {a1: b1} = 666;
console.log(b1); // undefined
let {a2: b2} = true;
console.log(b2); // undefined
let {a3: b3} = undefined;
console.log(b3); // 报错
let {a4: b4} = null;
console.log(b4); // 报错
12345678
