解构赋值上这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战。前言 ECMAScript 6.

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战。

前言

ECMAScript 6.0 简称ES6 , 是 JavaScript 语言的新一代的标准，于在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》。

一般情况，ES6 一个泛指， 5.1版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017、ES2018、ES2019、ES2020、ES2021 等等

我们一起来学习吧！

解构赋值以前的赋值

在ES6结构赋值之前，要从数组或者对象获取属性转为变量就只能一个一个的，真心是有点累。

对象：

var person = {
    name: "Tom",
    age: 18,
    sex: 1
};

// 一个一个var
var name = person.name;
var age = peson.age;
var sex = person.sex;

数组：

var persons =  [{
    name: "tom"
},{
    name: "Jim"
}]

var p1 = persons[0];
var p2 = persons[1];

解构

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

对象解构

var person = {
    name: "Tom",
    age: 18,
    sex: 1
};

const { name, age, sex} = person;
//等同于
// const name = person.name
// const age = person.age
// const sex = person.sex

没有对应的属性名

如果没有对应的属性名，返回的值为undefined。

const { age } = {name: "tom"}

console.log(age);  // undefined

变量名与属性名不一致

如果你想变量名与属性名不一致，可以:变量名形式，重新命名。

var {name: myName} = {name: "tom"};
console.log(myName); // tom

多级属性解构

const musicInfo = {
    title: "处处吻",
    id: 124878,
    playUrls: {
        hd: "https://xx",
        sd: "https://yy"
    }
}

const { id, playUrls: { hd } } = musicInfo

console.log(id); // 124878
console.log(hd); // https://xx

如果第一级深度的属性不存在，再解构就会报错，合情合理嘛。

const musicInfo = {
    title: "处处吻",
    id: 124878,
    playUrls: {
        hd: "https://xx",
        sd: "https://yy"
    }
}

const { aa: { bb } } = musicInfo
// Uncaught TypeError: Cannot read properties of undefined (reading 'bb')

数组解构

按照对应位置，对变量赋值。

看个例子就知道了：

const numArr = [1,2,3];
const num0 = numArr[0]; // 1
const num1 = numArr[1]; // 2
const num2 = numArr[2]; // 3

const [n1, n2, n3] = numArr; //

非常简洁，代码量少了不少，舒服。

多级解构和对象差不多吧。

const [num1, [num21], num3] = [1, [2, 3], 4];

console.log(num21); // 2

Set的解构

对于 Set 结构，也通用适用。

let [num1, num2, num3] = new Set([1, 2, 3]);

console.log(num1); // 1
console.log(num2); // 2
console.log(num3); // 3

Generator 函数解构

对于之后会说的Generator函数也适用。

function* numbers(a = 1) {
    while (true) {
        yield a++;
    }
}

const [num1, num2, num3, num4, num5] = numbers();

console.log(num1, num2, num3, num4, num5);
// 1,2,3,4,5

类数组

类数组，并不能用数组解构，其并不是数组，但是可以添加属性，让其可以被遍历。

const arrayLike = {
    0: 1,
    1: 2,
    length: 2
}

const [num1, num2] = arrayLike;
console.log(num1, num2);
// TypeError: arrayLike is not iterable

添加 Symbol.iterator, 可以直接借用 Array.prototype[Symbol.iterator]

const arrayLike = {
    0: 1,
    1: 2,
    length: 2,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
}

const [num1, num2] = arrayLike;


console.log(num1, num2);  // 1,2

这里就说明，任何对象，实现了 [Symbol.iterator]就可以使用数组解构，当然对象解构依旧是生效的。

小结

今天你收获了吗？

解构赋值 上

前言