array destructuring.md

Posted on | In

array destructuring

destructuring

decomposing a structure into its individual parts

解构解决了两件事

  1. 从结构化的数据批量提取对应的数据， 并且直接把值赋予变量（在我们处理接口返回值的时候尤为好用）
  2. 便捷的给我们的数据赋予初始值， 不用再写类似这样的三元表达式了： a = a === undefiend ? defaultValue: value;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var [
        {
            name: firstname,
            email: firstemil = 'nobody@none.com'
        },
        {
            name: secondname,
            email: secondemil = 'nobody@none.com'
        }
    ] = getSomeRecords();

Refactoring Code Using Destructuring

1
2
3
4
5
6
7
// before
var getData = () => [1, 2, 3];
var data = getData()

let a = data[0];
let b = data[1];
let c = data[2];
1
2
3
4
5
// after
var getData = () => [1, 2, 3];
var data = getData()

let [a, b, c] = [...data];

Spread Operator & Declaring Destrutured

…运算符解决了什么问题？我们不需要去管我们没有显式的指示出来的变量。只要它传了， 那么剩下的我都用…运算符去收集和处理。把不确定性可以更好的管理起来。

1
2
3
4
5
6
7
// before
var getData = () => [1, 2, 3];
var data = getData()

let a = data[0];
let b = data[1];
let c = data[2];
1
2
3
4
5
6
7
// after
var getData = () => [1, 2, 3];
var data = getData();

let temp;
// 先把data-> temp -> 执行解构
let [a, b, c] = temp = [...data];

Declaration & Assignment

1
2
3
4
5
6
7
8
9
// before
var getData = () => [1, 2, 3];
var data = getData()

var o = {};

o.a = data[0];
o.b = data[1];
o.c = data[2];
1
2
3
4
5
6
7
8
// after
var getData = () => [1, 2, 3];
var data = getData();

let temp;
var o = {};
// 先把data-> temp -> 执行解构
[o.a, o.b, o.c] = temp = [...data];

comma separation

解决的问题是： 我需要跳过其中一个元素，完成解构

1
2
3
4
5
6
7
// before
var getData = () => [1, 2, 3];
var data = getData()

let a = data[0];
// let b = data[1];
let c = data[2];
1
2
3
4
5
6
7
// after
var getData = () => [1, 2, 3];
var data = getData();

let temp;
// 先把data-> temp -> 执行解构
let [a, , c] = temp = [...data];

交换两个元素的值

1
2
3
4
5
6
7
8
9
//before
var x = 10;
var y = 20;

{
    let temp = x;
    x = y;
    y = temp;
}
1
2
3
4
var x = 10;
var x = 20;

[y, x] = [x, y];

Parameter Arrays

解构同样可以使用在函数的参数中, 当然，在ES6中，直接支持了函数参数的默认值

1
2
3
4
5
6
7
8
// before
function data (tmp = []) {
    var [
        first,
        second,
        third
    ] = tmp;
}
1
2
3
4
// before
function data ([first, second, third] = []) {

}

Nested Array Destructuring

使用解构赋值的时候，一定要注意，是否会触发类型错误， 给一个默认值是一个很棒的方法。

1
2
3
4
5
6
7
8
9
// before
var getData = () => [1, [2, 3], 4];
var data = getData() || [];
var data2 = data[1]

let a = data[0];
let b = data2[0];
let c = data2[1];
let b = data[2];
1
2
3
// after
var getData = () => [1, [2, 3], 4];
var data = getData()