前高频端面试题合集9-解构符号

1. 解构符号的作用

解构赋值是对赋值运算符的扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

2. 使用方式

  • 基本使用

    1
    2
    let [a, b, c] = [1, 2, 3];
    // let a = 1,b = 2,c=3

  • 嵌套使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     // 数组
     let [a, [[b], c]] = [1, [[2], 3]];

    console.log(a);
    console.log(b);
    console.log(c);

    // 对象
    let obj = {p: ['hello', {y: 'world'}] };
    let {p: [x, { y }] } = obj;
    console.log(x);
    console.log(y);

  • 忽略

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 数组
    let [a, , b] = [1, 2, 3];
    console.log(a);
    console.log(b);

    // 对象
    let obj = { p: ['hello', { y: 'world' }] };
    let { p: [x, { }] } = obj;
    console.log(x);

  • 不完全解构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     // 数组
     let [a = 1, b] = [];
     console.log(a);
     console.log(b);

    // 对象
    let obj = { p: [{ y: 'world' }] };
    let { p: [{ y }, x] } = obj;
    console.log(x);
    console.log(y);

  • 剩余运算符

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 数组
    // let [a, ...b] = [1, 2, 3];
    // console.log(a);
    // console.log(b);

    // 对象
    let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
    console.log(a);
    console.log(b);
    console.log(rest);

  • 字符串

    1
    2
    3
    4
    5
    6
    let [a, b, c, d, e] = 'hello';
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);

  • 解构默认值

    1
    2
    3
    4
    5
    6
    7
    // 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。
    let [a = 2] = [undefined]; 
    console.log(a);
    // 对象
    let {a = 10, b = 5} = {a: 3};
    // console.log(a);
    // console.log(b);

  • 交换变量的值.

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

3. 解构赋值的应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 1. 浅克隆与合并
let name = { name: "aaa" }
let age = { age: 'bbb' }
let person = { ...name, ...age }
console.log(person) // { name: "aaa", age: 'bbb' }

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

// 2. 提取JSON数据
let JsonData = { id: 10, status: "OK", data: [111, 222] } 
let { id, status, data: numbers } = JsonData; 
console.log(id, status, numbers); //10 "OK" [111, 222]

// 3. 函数参数的定义
// 参数有序
function fun1([a, b, c]) { console.log(a, b, c) } 
fun1([1, 2, 3]); 

// 参数无序
function fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3, x: 2, y: 1 });

// 参数有默认值
function fun3 ([a=1,b]) {
console.log(a,b);
}
fun3([,3])