ES6 解构赋值

概述

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

为何要使用解构操作？

是因为 JSON 格式的普及，导致大量数据提取工作；
而这种提取过程，在 ES6 的解构语法中，带来了极大的便捷性；

一、数组解构

数组解构赋值，有两种基本的写法：1.分行解构；2 单行解构；

let info = ['Mr.Lon', 18, '男']; //数组赋值
let [name, age, gender] = info;   //数组解构赋值
info = ['Mr.Lon', 18, '男'],
    [name, age, gender] = info; //同上
[name, age, gender] = ['Mr.Lon', 18, '男'];
console.log(name);

从上面的例子分行或单行，都可以确定必须一一完美匹配才可以正确赋值；

1、数组层次也需要匹配（可嵌套）

let [name,[age,gender]] = ['Mr.Lon',[18,'男']];

2、用逗号作为占位符不赋值（可忽略）

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

3、在变量解构时，可以在数组的元素中设置一个默认值（解构默认值）

//当 gender 没有赋值时，采用默认值
let [name,age,gender = '男'] = ['Mr.Lon',18];

4、还有一种…var 的语法，可以将没有赋值的内容都赋值给这个变量（剩余运算符）

let [name,...other] = ['Mr.Lon',18,'男'];

二．对象解构

1. 对象的解构方式和数组大同小异，定义一个对象字面量，然后解构赋值

let obj = {
    name : 'Mr.Lon',
    age : 18,
}
//解构对象至变量
let {name , age} = obj; 
//直接输出变量
console.log(name)
console.log(age)
// 对象的解构也支持单行的简写模式，具体如下
let {name , age} = {name : 'Mr.Lon' , age : 18}

2、在对象字面量里，还嵌套了对象，解构时也用相同的方法是解开即可（可嵌套）

let obj = {
    name : 'Mr.Lon',
    age : 18,
    info : {
        id : 1,
        gender : '男'
    }
}
let{info : {id,gender}} = obj;
console.log(gender)

3、对象变量解构也可以设置一个默认值，在没有赋值时输出默认值（解构默认值）；

let obj = {}
let {name,age,gender = '女'} = obj;
console.log(gender)     //如果没有默认值则undefined

4、如果不想要对象属性名作为解构变量，可以通过键值对的方式更改变量名（使用别名,防止命名冲突）；

let {name : myName , age : myAge} = obj;    //name失效

5、剩余运算符

let { ...r } = { a: 1, b: 2, c: 3 };
console.log(r);//{a: 1, b: 2, c: 3}

三、其它解构

ES6 除了提供对象和数组解构外，还提供了很多适用的解构方案；

1、如果你想要让个普通变量的值进行交换，不必需要第三个变量参与；

let key = 1;
let value = 'Me.Lon';
//解构操作，变量互换
[key , value] = [value , key];
console.log(key);//Me.Lon
console.log(value);//1

2、如果函数的返回值是一个数组或对象，直接将函数进行赋值解构；

function fn(){
    return ['Mr.Lon',18,'男'];
}
let [name , age , gender] = fn();
function fn2(){
    return{
        name : 'Mr.Lon',
        age : 18,
        gender : '男'
    }
}
let {name , age , gender} = fn2();

3、当函数进行参数传递的时候，可以进行数组和对象字面量方式的传参；

function fn([name,agae,gender]){
    console.log(name);
}
fn(['Mr.Lon',18,'男']);
function fn2({name,age,gender}){
    console.log(name);
}
fn2({
    name : 'Mr.Lon',
    age : 18,
    gender : '男'
})

4、除了对象和数组可以使用解构，字符串类型的数据也可以解构

let [x,y,z] = 'ABC';
console.log(x);//A
let {length : len} = 'ABC'; //长度
console.log(len);           //输出3

ES6 解构赋值

ES6 解构赋值

相关文章