ES6 - 解构赋值

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

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

1、对象解构赋值

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

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

2、数组解构赋值

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/…