ES6——解构赋值与对象简化

目录

一.解构赋值

1.对对象解构

ES5怎么解决问题？

解构赋值怎么用？

默认值：

重命名：

 配合扩展运算符：

2.对数组解构 

ES5怎么做

ES6写法 

取到指定位置的数据

默认值

---

一.解构赋值

解构赋值其实是对赋值运算符的一种扩展，它主要针对数组和对象来进行操作。更加的简介方便

准确来说它是一种 JavaScript 表达式，通过它（解构赋值），我么们可以将属性或者值从对象中或者数组中取出并赋值给其他变量

---

1.对对象解构

ES5怎么解决问题？

// ES5我们怎么从对象中取出需要的属性

const testObj = {
  name: 'Brave-AirPig',
  age: 22,
};

let user_name = testObj.name;
let user_age = testObj.age;

console.log(user_name, user_age);

// Brave-AirPig 22

解构赋值怎么用？

我相信你一定会爱上解构赋值的，因为它方便太多了：

// ES6解构赋值

const testObj = {
  name: 'Brave-AirPig',
  age: 22,
};

let { name, age } = testObj;

console.log(name, age);

// Brave-AirPig 22

不难发现，我为什么不写 user_name 了，这是因为 testObj 对象中没有这个属性，这个解构赋值出来的属性名是不能瞎写的 🤐 

默认值：

const testObj = {
  name: 'Brave-AirPig',
  age: 22,
};

let { name, age, hobby = ['跑步', '打代码'] } = testObj;

console.log(name, age, hobby);

// Brave-AirPig 22 [ '跑步', '打代码' ]

重命名：

我们上面提到不能瞎写，但是并不是绝对的，哈哈😆 

const testObj = {
  name: 'Brave-AirPig',
  age: 22,
};

let { name: user_name, age: user_age, hobby = ['跑步', '打代码'] } = testObj;

let name = '小郭';
let age = 25;

console.log(name, user_name, age, user_age, hobby);

// 小郭 Brave-AirPig 25 22 [ '跑步', '打代码' ]

这正好解决了我们的业务需求，将解构赋值出来的属性重命名，那么这些 常用属性名我们还可以无限使用，比如name、age这些 

深层取值：

const testObj = {
  name: 'Brave-AirPig',
  age: 22,
  hobby: {
    first: '跑步',
    second: '打代码',
  },
};

const {hobby: { second: myHobby }} = testObj;
console.log(myHobby);

// 打代码

 配合扩展运算符：

const testObj = {
  name: 'Brave-AirPig',
  age: 22,
  hobby: {
    first: '跑步',
    second: '打代码',
  },
};

// 浅拷贝
const { ...casual_name } = testObj;

console.log(casual_name);

---

2.对数组解构 

ES5怎么做

老规矩，我们来看看ES5是怎么做的：

// ES5怎么写

const arr = [1, 2, 3, 4];

let a = arr[0];
let b = arr[1];
let c = arr[2];
let d = arr[3];

console.log(a, b, c, d);

// 1 2 3 4

ES6写法 

let arr = [1,3,5,7,8,10,'腊'];

let [x,y,z,...res] = arr;
console.log(z);
console.log(res);

---

取到指定位置的数据

const arr = [1, 2, 3, 4];

let [, , , newArr] = arr;

console.log(newArr);

//  4

默认值

const arr = [1, 2, 3, 4];

let [a, b, c, d, newArr = 5] = arr;

console.log(a, b, c, d, newArr);

// 1 2 3 4 5