ES6新特性 解构赋值

在很多场景下，我们发现一个复合属性中像对象、数组，我们在使用时并不会每一次都用到其中的每一项、每一个元素，所以ES6的解构赋值就可以单独将我们需要的属性、元素取出，不用将对象、数组全部加载，可以提高项目的运行效率。

对象

先声明一个对象

let obj = {
    name: "zhangsan",
    age: "18",
}

在这个对象中有两个属性，通过解构赋值，我们可以做到只加载我们需要的属性，不需要加载整个obj

const { name } = obj;
console.log(name); // "zhangsan"

这是对象解构赋值的一种形式，对象结构赋值时，不需要和属性在对象内的位置一一对应，但属性名必须与对象中的键名相同

const { age, name } = obj;
console.log(name); // "zhangsan"
console.log(age); // "18"

对象解构赋值中，我们可以起一些自定义的别名

const { name: xingming, age: nianling } = obj;
console.log(xingming); // "zhangsan"
console.log(nianling); // "18"

数组

先声明一个数组

let arr = ["hello", "world"];

数组中解构赋值，是需要和元素的位置一一对应的

const [ hello, world ] = arr;
console.log(hello); // "hello"
console.log(world); // "world"

元素对应的位置可以为空，但不可省略

const [ , world ] = arr;
console.log(world); // "world"
const [ world ] = arr;
console.log(world); // "hello"

数组解构中，解构名称可以自定义

const [ a, b ] = arr;
console.log(a); // "hello"
console.log(b); // "world"

 

结构赋值不仅仅可以用在数组对象中，还有很多场景多会用到，例如构造函数

function func(){
    this.name = "zhangsan";
    this.age = "18";
    this.temp = "hello world";
}
const {name, age, temp} = new func();
console.log(name); // "zhangsan"
console.log(age); // "18"
console.log(temp); // "hello world"

还有像 import 这样的获取方法都可以使用