ES6: 变量解构赋值

1、概念

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值，分为数组解构、对象解构两大类型。

2、数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法，如下代码所示：

2.1 基本用法

数组解构赋值：
eg1:

// 普通的数组
let arr = [1, 2, 3]
// 批量声明变量 a b c 
// 同时将数组单元值 1 2 3 依次赋值给变量 a b c
let [a, b, c] = arr
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

eg2:

const pc = ['海尔', '联想', '小米', '方正'];
[hr, lx, mi, fz] = pc
console.log(hr, lx, mi, fz)  // 海尔 联想 小米 方正

eg3:

function getValue () {
	return [100, 60]
}
[max, min] = getValue()
console.log(max, min)  // 100 60

eg4:

const pc = ['海尔', '联想', '小米', '方正']
const [hr, lx, mi, fz] = ['海尔', '联想', '小米', '方正']
console.log(hr)  // 海尔
console.log(lx)  // 联想
console.log(mi)  // 小米
console.log(fz)  // 方正

eg5: 交换2个变量的值

let a = 1
let b = 2;
[b, a] = [a, b]
console.log(a, b)  // 2  1

2.2 变量多， 单元值少 ， undefined

const [a, b, c, d] = [1, 2, 3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined

2.3 变量少， 单元值多

const [a, b] = [1, 2, 3]
console.log(a) // 1
console.log(b) // 2

2.4 剩余参数 变量少， 单元值多

const [a, b, ...c] = [1, 2, 3, 4]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3, 4]  真数组

2.5 防止 undefined 传递

const [a = 0, b = 0] = [1, 2]
// const [a = 0, b = 0] = []
console.log(a) // 1
console.log(b) // 2

2.6 按需导入赋值

const [a, b, , d] = [1, 2, 3, 4]
console.log(a) // 1
console.log(b) // 2
console.log(d) // 4

const arr = [1, 2, [3, 4]]
console.log(arr[0])  // 1
console.log(arr[1])  // 2
console.log(arr[2])  // [3,4]
console.log(arr[2][0])  // 3

2.7 多维数组解构

const arr = [1, 2, [3, 4]]
const [a, b, c] = [1, 2, [3, 4]]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4]

const [a, b, [c, d]] = [1, 2, [3, 4]]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 4

总结：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
2. 变量的顺序对应数组单元值的位置依次进行赋值操作
3. 变量的数量大于单元值数量时，多余的变量将被赋值为 undefined
4. 变量的数量小于单元值数量时，可以通过 … 获取剩余单元值，但只能置于最末位
5. 允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

注：支持多维解构赋值，比较复杂后续有应用需求时再进一步分析

3、对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法，如下代码所示：

3.1 基本用法

<script>
  // 普通对象
  const user = {
    name: '小明',
    age: 18
  };
  // 批量声明变量 name age
  // 同时将数组单元值 小明  18 依次赋值给变量 name  age
  const {name, age} = user
  // const { name: username, age } = user  // 对象解构的变量名 可以重新改名  旧变量名: 新变量名
	
  console.log(name) // 小明
  console.log(age) // 18
</script>

3.2 解构数组对象

const person= [
  {
    uname: '刘德华',
    age: 6
  }
]
const [{ uname, age }] = person
console.log(uname)  // 刘德华
console.log(age)  // 6

3.3 多级对象解构

const person= {
  name: '刘德华',
  family: {
    mother: '刘妈妈',
    father: '刘爸爸',
    daughter: '刘向蕙'
  },
  age: 6
}
// 多级对象解构
const { name, family: { mother, father, sister } } = person
console.log(name)  // 刘德华
console.log(mother)  // 刘妈妈
console.log(father)  // 刘向蕙
console.log(sister)  // 乔治

3.4 多级对象解构案例

// 1. 这是后台传递过来的数据
const msg = {
  "code": 200,
  "msg": "获取新闻列表成功",
  "data": [
    {
      "id": 1,
      "title": "5G商用自己，三大运用商收入下降",
      "count": 58
    },
    {
      "id": 2,
      "title": "国际媒体头条速览",
      "count": 56
    },
    {
      "id": 3,
      "title": "乌克兰和俄罗斯持续冲突",
      "count": 1669
    },

  ]
}

// 需求1： 请将以上msg对象  采用对象解构的方式 只选出  data 方面后面使用渲染页面
// const { data } = msg
// console.log(data)
// 需求2： 上面msg是后台传递过来的数据，我们需要把data选出当做参数传递给 函数
// const { data } = msg
// msg 虽然很多属性，但是我们利用解构只要 data值
function render({ data }) {
  // const { data } = arr
  // 我们只要 data 数据
  // 内部处理
  console.log(data)

}
render(msg)

// 需求3， 为了防止msg里面的data名字混淆，要求渲染函数里面的数据名改为 myData
function render({ data: myData }) {
  // 要求将 获取过来的 data数据 更名为 myData
  // 内部处理
  console.log(myData)

}
render(msg)

总结：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2. 对象属性的值将被赋值给与属性名相同的变量
3. 对象中找不到与变量名一致的属性时变量值为 undefined
4. 允许初始化变量的默认值，属性不存在或单元值为 undefined 时默认值才会生效