es6解构赋值

【ES6】解构赋值_es6解构赋值_一颗不甘坠落的流星的博客-CSDN博客

一、解构赋值
解构赋值：主要用来从数组和对象中提取值，对变量进行赋值。
[]：是专门解构数组使用的
{}：是专门解构对象使用的
二、解构数组
1. 变量赋值
ES6之前的写法：
var a1 = 1,b1 = 2;
console.log(a1,b1)    // 1 2

var a2,b2;
a2 = 11;
b2 = 22;
console.log(a2,b2)    // 11 22

var arr = ['jack','rose'];
console.log(arr[0],arr[1])    // jack rose
1
2
3
4
5
6
7
8
9
10
解构赋值写法：
var [a1, b1] = [1, 2];
console.log(a1,b1)    // 1 2

var a2,b2;
[a2, b2] = [11, 22];
console.log(a2,b2)    // 11 22

var arr = ['jack','rose'];
var [a3,b3] = arr;
console.log(a3,b3)    // jack rose
1
2
3
4
5
6
7
8
9
10
- 上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
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
1
2
3
4
5
解构赋值写法：
var a=1,b=2;
[a, b] = [b, a];
console.log('a='+a,'b='+b)    // a=2 b=1
1
2
3
3. 默认值
如果解构不成功，变量的值就等于undefined。
let [a] = [];
let [x, y] = [1];
console.log(a); // undefined
console.log(x); // 1
console.log(y); // undefined
1
2
3
4
5
可以在表达式左边的数组中为任意对象预设默认值。
防止从数组中取出一个值为undefined的对象
let a, b, c, d;
[a=5, b=7] = [1];
[c,d] = [2]
console.log(a,b,c,d); // 1 7 2 undefined

1
2
3
4
5
当数组成员为null的时候，默认值就不会生效
let [x = 1] = [undefined];
console.log(x);    // 1

let [y = 1] = [null];
console.log(y); // null
1
2
3
4
5
4. 不完全解构
等号左边的模式，只匹配一部分的等号右边的数组。
这种情况下，解构依然可以成功。
let [x, y] = [1, 2, 3];
console.log(x, y); // 1 2

let [a, [b], c] = [1, [2, 3], 4];
console.log(a, b, c); // 1 2 4
1
2
3
4
5
5. 解构数组嵌套
let arr = [1, [[2,22], 3]];
let [a,[b,c]] = arr;
console.log(a, b, c); // 1 [2,22] 3
1
2
3
6. 与...运算符结合使用
let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

let [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
1
2
3
4
5
6
7
三、解构对象
对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
如果变量与属性不同名，需要先匹配属性名，在定义变量。

左边定义的变量名与右边对象的属性名相同时
let {x, y} = {x: 1, y: 2,}
// 相当于 {x: x, y: y} = {x: 1, y: 2,}
console.log(x, y)    // 1 2
1
2
3
左边定义的变量名与右边对象的属性名不相时
let {x: a, y: b} = {x: 1, y: 2,}
// 此时x，y是用来匹配右边对象的属性名，a，b才是变量
console.log(a, b)    // 1 2
1
2
3
1. 获取成员
解构赋值对可以用来提取 JSON 对象中的数据
const obj = {
    name : 'jack',
    age : 18,
    gender : '男'
}
let name = obj.name;
let age = obj.age;
let gender = obj.gender;
1
2
3
4
5
6
7
8
解构赋值的方式从对象中获取成员
const obj = {
    name : 'jack',
    age : 18,
    gender : "男"
}
//前面的{}表示我要从obj这个对象中获取成员了
//name age gender 都得是 obj 中有的成员
//obj 必须是一个对象
let { name,age,gender } = obj;
1
2
3
4
5
6
7
8
9
2. 对象赋值
声明后赋值
let obj = {a: 6, b: 4};
let {a, b} = obj;
console.log(a,b); // 6 4
1
2
3
无声明赋值
let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b); // 1 2
1
2
3
3. 默认值
指定对象的解构默认值。
let {a = 3} = {};
console.log(a) // 3

let {b, c = 5} = {b: 1};
console.log(b, c) // 1 5

let {d: e = 3} = {};
console.log(e) // 3

let {f: g = 3} = {f: 5};
console.log(g) // 5
1
2
3
4
5
6
7
8
9
10
11
当对象成员为null的时候
let [x = 22] = {x: undefined};
console.log(x);    // 22

let [y = 1] = {y: null};
console.log(y); // null
1
2
3
4
5
4. 解构嵌套对象
与数组一样，解构也可以用于嵌套结构的对象。
let obj = {
  a: [
    'Hello',
    { y: 'JavaScript' }
  ]
};
let { a: [x, { y }] } = obj;
console.log(x, y); // Hello JavaScript
1
2
3
4
5
6
7
8
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
1
2
3
4
5
6
7
8
9
10
11
12
四、解构函数
1. 函数的参数
函数的参数也可以使用解构赋值。
function fn([x, y]){
  return x + y;
}
fn([1, 2]); // 3
1
2
3
4
函数参数的解构也可以使用默认值。
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]
1
2
3
4
5
6
7
8
2. 函数返回值
当函数返回一个数组时，使用解构处理更方便
function fn() {
  return [1, 2];
}
let a, b;
[a, b] = fn();
console.log(a,b); // 1 2
1
2
3
4
5
6
忽略一个函数的某些返回值
function fn() {
  return [1, 2, 3];
}
let a, b;
[, b, c] = fn();
console.log(b, c); // 2 3
1
2
3
4
5
6
忽略一个函数的全部返回值
function fn() {
  return [1, 2, 3];
}
[ , , ] = fn();
1
2
3
4
四、其他解构
1. 字符串
字符串会被转换成了一个类似数组的对象。
let [a, b, c] = 'ES6';
console.log(a, b, c)    // E S 6
1
2
字符串的length属性也能进行解构赋值
let {length : l} = 'ES6';
console.log(l) // 3
1
2
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);    // 报错
————————————————
版权声明：本文为CSDN博主「一颗不甘坠落的流星」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45677671/article/details/115798682