es6 解构

Posted 2021-01-07 greenteaone

1.解构的基本用法

我们经常需要从已经存在的对象或数组中摘取部分数据，没有ES6解构之前，需要大量遍历，写许多重复的代码。如下代码

var user={name:"test",age:18,gender:"female",company:"mico"}
var name=user.name;
var company=user.company;
var age=user.age
console.log("name:",name);     //输出 name: test
console.log("company:",company); //输出 company: mico
console.log("age:",age); //输出 age:18

　es6解构处理是这样的：

var user={name:"test",age:18,gender:"female",company:"mico"}
var {name,company,age}=user;  //解构
console.log("name:",name);     //输出 name: test
console.log("company:",company); //输出 company: mico

console.log("age:",age); //输出 age:18

console.log({name,company}); //输出 { name: ‘test‘, company: ‘mico‘ }

 es6解构，让代码简洁，省去重复的赋值代码，

2.利用ES6解构实现交换变量

平时我们交换变量的时候都要定义一个中间的临时变量来完成交换，现在用数组的解构轻松可以交换变量，而且还省掉了临时变量，代码如下：

let a=1;
let b=2;
[a,b]=[b,a];
console.log(`a=${a}`)  //输出a=2
console.log(`b=${b}`) //输出b=1

3.利用ES6解构取任意层级的数据赋值

var house = {
    width: "20m",
    height: "30m",
    people: [{
        name: "test1",
        age: 18,
        gender: "female",
        company: "mico-test1"
    }, {
        name: "test2",
        age: 18,
        gender: "male",
        company: "mico-test2"
    }]
}
let {people:[,{company}]} = house;
let {people:[,{company:com}]} = house;
console.log(company); //输出 mico-test2
console.log(com); //输出 mico-test2

 4.利用ES6解构数据赋值，并且添加其他的属性

var house = {
    width: "20m",
    height: "30m",
    people: [{
        name: "test1",
        age: 18,
        gender: "female",
        company: "mico-test1"
    }, {
        name: "test2",
        age: 18,
        gender: "male",
        company: "mico-test2"
    }]
}
let {people,address=""} = house; //address 是添加的属性
console.log( {people,address}); //输出{people:...,address:""}

可以用等号给添加的属性赋一个默认值，也可以不给他赋值，这样打印出来address就是undefined（ address: undefined ）

5.ES6解构为非同名变量赋值

var house = {
    width: "20m",
    height: "30m",
}
let {width:newWidth,height:newHeight} = house; 

console.log("newWidth:",newWidth); //输出newWidth: 20m
console.log("newHeight:",newHeight); //输出newHeight: 30m

取出house里的width和height并且赋给newWidth和newHeight两个局部变量，就可以在旧的属性后面用冒号：紧跟新的变量，表示把取出的值放在新变量里。

6.ES6解构数组复制 

ar people= [{
    name: "test1",
    age: 18,
    gender: "female",
    company: "mico-test1"
}, {
    name: "test2",
    age: 18,
    gender: "male",
    company: "mico-test2"
}]
let [...clonePeople]=people
console.log("clonePeople:",clonePeople); //输出clonePeople: [ { name: ‘test1‘,age: 18,gender: ‘female‘,company: ‘mico-test1‘ },{ name: ‘test2‘, age: 18, gender: ‘male‘, company: ‘mico-test2‘ } ]
clonePeople[0].name="ll";
console.log(people[0].name) //输出ll

let numbers=[1,2,3];

let [...cloneNumbers]=numbers;

cloneNumbers[2]=77;

console.log("cloneNumbers=",cloneNumbers); //输出cloneNumbers= [ 1, 2, 77 ]

console.log("numbers=",numbers);          //输出numbers= [ 1, 2, 3 ]

用解构数组复制以后，

1.如果数组成员是引用类型，那么旧的数组和新的数组都是指向一个地址，无论哪个变量改变，数组都会跟着改变

2.如果数组是基本类型，那么旧的数组和新的数组，无论哪个变量改变都不会相互影响。

 

注意：解构里为对象赋值的，都是指向的同一个地址，所以旧的对象值，与赋值后的变量是相互影响的

例如：

var house = {
    width: "20m",
    height: "30m",
    people: [{
        name: "test1",
        age: 18,
        gender: "female",
        company: "mico-test1"
    }, {
        name: "test2",
        age: 18,
        gender: "male",
        company: "mico-test2"
    }]
}
let {people} = house; //address 是添加的属性
console.log(people); //输出[ { name: ‘test1‘,age: 18,gender: ‘female‘,company: ‘mico-test1‘ },{ name: ‘test2‘, age: 18, gender: ‘male‘, company: ‘mico-test2‘ } ]
people[0].name="arry";
console.log(house.people[0].name);//输出arry

赋值后的变量people里第一个值的name改成arry，结果house里面对应的people值也改成了arry