逆战班学习总结-解构赋值和展开运算符

结构赋值的用法

赋值概述：

     解构赋值，就是快速的从对象或者数组中取出成员的一个语法方式

1.解构对象：

  快速的从对象中获取成员 

看下面代码演示

// ES5 的方法向得到对象中的成员
const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

let name = obj.name
let age = obj.age
let gender = obj.gender

用结构赋值的方法法从对象中获取成员

const obj = {
  name: 'Jack',
  age: 18,
  gender: '男'
}

// 前面的 {} 表示我要从 obj 这个对象中获取成员了
// name age gender 都得是 obj 中有的成员
// obj 必须是一个对象
let { name, age, gender } = obj

2.结构数组

快速的从数组中获取成员

// ES5 的方式从数组中获取成员
const arr = ['Jack', 'Rose', 'Tom']
let a = arr[0]
let b = arr[1]
let c = arr[2]

使用解构赋值的方式从数组中获取成员

const arr = ['Jack', 'Rose', 'Tom']

// 前面的 [] 表示要从 arr 这个数组中获取成员了
// a b c 分别对应这数组中的索引 0 1 2
// arr 必须是一个数组
let [a, b, c] = arr

`注意``

如果要使用结构赋值 =两边的数据类型必须是一样的
就是：

   {} 是专门解构对象obj使用的
   [] 是专门解构数组arr使用的

展开运算符 “…”

ES6 里面号新添加了一个运算符 … ，叫做展开运算符

  1.可以数组展开

let arr = [1, 2, 3, 4, 5]
console.log(...arr) // 1 2 3 4 5

 2.合并数组的时候可以使用

let arr = [1, 2, 3, 4]
let arr2 = [...arr, 5]
console.log(arr2)

3.也可以合并对象使用

let obj = {
  name: 'Jack',
  age: 18
}
let obj2 = {
  ...obj,
  gender: '男'
}
console.log(obj2)

 4.在函数传递参数的时候也可以使用

let arr = [1, 2, 3]
function fn(a, b, c) {
  console.log(a)
  console.log(b)
  console.log(c)
}
fn(...arr)
// 等价于 fn(1, 2, 3)

这两个都是ES6的语法 都可以让代码操作起来更简单流畅，如果多加练习，就能体会它的好处了