ES6 - 解构赋值

hey ~ 我是肥阳，后期会持续更新，请记得点赞支持哟

解构赋值 是一种 Javascript 表达式，指的是将值从数组（或将属性从对象）提取到不一样的变量中
即：等号的左边与等号的右边相等
主要分为 数组，对象，字符串 的解构

一、对象解构赋值

未进行解构赋值时，请看下面这段代码：

var object = {
    name： '肥阳',
    age: '18',
    kg: '45',
    love: '代码',
}
复制代码

若是键值对特别多，一个个去获取的话代码就会变得很长

var name = object.name;
var age = object.age;
var kg = object.kg;
console.log(name, age, kg); // 肥阳 18 45
复制代码

因此就有了对象的 解构赋值
能够简单理解为：等号的左边和右边的结构相同

var {name, age, kg} = object;
console.log(name, age, kg);  // 肥阳 18 45
复制代码

是否是简单多了呢 ？嘻嘻嘻
这种写法是 在声明的同时进行解构赋值
也能够 在声明以后进行解构赋值，以下：

var name = '';
({name} = object);
console.log(name); // 肥阳
复制代码

当个人变量名和对象的键名 不一致 时，就涉及到了 解构赋值的 变量重命名

var { name: Str } = object;
console.log(Str); // 肥阳
复制代码

若是有新的变量，会显示为 undefined

var { c } = object;
console.log(c); // undefined
复制代码

若是要给新的变量赋值，就用到了 ' = ', 重命名用的是 ' : '

var { c = 'hello' } = object;
console.log(c);  // hello
复制代码

若是object有c值：

var object = {
    name： '肥阳',
    age: '18',
    kg: '45',
    love: '代码',
    c: 'hey'
}
var { c = 'hello' } = object;
console.log(c);  // hey
复制代码

若是object有c值：undefined

var object = {
    name： '肥阳',
    age: '18',
    kg: '45',
    love: '代码',
    c: undefined
}
var { c = 'hello' } = object;
console.log(c);  // hello
复制代码

二、数组解构赋值

let x = 1;
let y = 2;
let z = 3;
console.log(x, y, z); // 1 2 3
复制代码

ES6能够这样写：

let [x, y, z] = [1, 2, 3];
console.log(x, y, z); // 1 2 3
复制代码

假设有一个数组 arr

var arr = ['x', 'y', 'z'];
var [a, b, c] = arr;
console.log(a, b, c); // x y z
复制代码

若是arr里的某一项的值为undefined

arr[0] = undefined;
var [a, b, c] = arr;
console.log(a,b,c); // undefined y z
复制代码

咱们能够设一个默认值

var [a = '100', b, c] = arr;
console.log(a, b, c); // 100 y z
复制代码

详情请前往官网文档：developer.mozilla.org/zh-CN/docs/…