ES6笔记（ 六 ）- Desconstruction

ES6笔记（ 六 ）- Desconstruction

解构: 使用ES6提供的新的语法，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

目录:

1. 过去我们遇到的一些尴尬场景
2. 对象解构
3. 函数解构
4. 解构默认值
5. 一些实战场景

过去我们遇到的一些尴尬场景

当我们访问一个对象中的成员属性的时候, 一般会使用obj.xxx的形式去访问, 如下

const obj = {
    username: 'loki',
    age: 18
}

console.log(obj.username);
console.log(obj.age);

if( obj.username === 'loki' ) {
    console.log('这是狡诈之神洛基');
}

当我们多次用到一个对象中的成员时, 我们必须写很多obj.xxx, 很恶心, 于是同学想到了将常用的对象属性保存进一个变量中, 如下

const username = obj.username;
const age = obj.age;

如果常用的变量少我们还好写, 假如一个对象有十多个成员属性都是常用的, 我们要一直这么赋值下去吗？那未免也太磕碜了

对象解构

正是为了解决上面的这种尴尬, ES6推出了新的语法叫做解构赋值, 我们用解构将上面的需求走一次, 并且这次我们将要常用的属性设置七八个

const obj = {
    username: 'loki',
    age: 18,
    sex: 'male',
    address: 'Guangdong',
    weight: 120,
    height: 167,
    character: 'nice'
}

// ok, 如果以上对象里的属性都是我常用的, 而且我可能一个页面里每个属性都用七八次, 用ES5怎么做都很费劲, 我们来看看ES6
const { username, age, sex, address, weight, height, character } = obj;
console.log(username, age, sex, address, weight, height, character); // loki, 18, male, Guangdong, 120, 167, nice

上面的写法就等于从obj里找到同名属性并赋值给外部的同名变量。像下面这么写也是可以的

const obj = {
    a: 1,
    b: 10
}

let a, b;

( { a, b } = obj );

console.log(a, b); // 1, 10

对象非同名属性解构

有的时候我们希望我们从对象中解构出来的属性在外部不用同名变量承接, 可以写成如下形式

const obj = {
    username: 'loki'
}

const { username: name, age: userAge = 18 } = obj;
console.log(name, userAge); // loki 18

对象深层次解构

// 如果我们想解构下面对象address中的province应该怎么写呢
const obj = {
    address: {
        province: 'Guangdong'
    }
}

const { address: { province } } = obj;
console.log(province); // Guangdong

数组解构

由于在JS中数组也是对象, 所以我们完全可以按照对象的方式来解构数组

// 但是你要知道, 数组的下标0, 1这种作为变量名是不合法的, 所以我们要取别名
const arr = [1, 2, 3];

const { 0: n1, 1: n2, 2: n3 } = arr;
console.log(n1, n2, n3); // 1, 2, 3

当然, ES6给我们提供了更加方便的解构数组的方式

const [n1, n2, n3] = [1, 2, 3];
console.log(n1, n2, n3); // 1 ,2, 3

如果你想只获得指定索引的属性值的话, 如下操作

const arr = [1, 2, 3, 4];
const [, n1, , n2 ] = arr;
console.log(n1, n2); // 2, 4

数组深层次解构

const numbers = [1, 2, 3, [4, 5], { username: 'loki' }];

// 我们来取5这个值
const [, , , [, number]] = numbers;
console.log(number); // 5   

// 我们再来取username
const [, , , , { username }] = numbers;
console.log(username); // loki

解构默认值

const obj = {
    username: 'loki'
}

const { username, age = 20 } = obj; 

console.log(username, age); // loki 20

const arr = [1, 2, 3];
const [a, b, c, d = 4] = arr;
console.log(a, b, c, d); // 1, 2, 3, 4

一些实战场景

1. 交换两个变量的值

let str = 'hello';
let str2 = 'world';
[str2, str] = [str, str2];
console.log(str, str2); // world, hello

2. 函数参数的解构

// 参数直接解构对象
function print( { name, age, sex } ) {
    console.log(name, age, sex);
}

const user = {
    name: 'loki',
    age: 18,
    sex: 'male'
}

print( user ); // 输出loki, 18, male

3. 解构 + 参数默认值

function print( { name = '无', age = '未知', sex = '男' } = {} ) {
    consooe.log(name, age, sex);
}

print(); // 无, 未知, 男

4. 解构 + rest运算符

// 我们的需求是从obj对象中解构出name, 剩下的属性全部解构并放进obj2对象中

const obj = {
    name: 'loki',
    age: 18,
    sex: 'male'
}

const { name, ...obj2 } = obj;
console.log(name, obj2); // loki { age: 18, sex: 'male'}

// 从数组arr中解构出第一项, 剩下的所有元素全部放进arr2中
const arr = [1, 2, 3];
const [n1, ...arr2];
console.log(n1, arr2); // 1, [2, 3]