javascript-es6（三）

解构赋值

解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法

基本语法：

1. 赋值运算符 = 左侧的 [] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2. 变量的顺序对应数组单元值的位置依次进行赋值操作

​
//同时将数组单元值 100 60 80 依次赋值给变量 max min avg
const [max,min,avg] = [100,60,80]
console.log(max)  //最大值 100
console.log(min)  //最小值 60
console.log(avg)  //平均值 80

​

基本语法：典型应用交互2个变量

 

let a = 1
let b = 2;   //注意这边一定要有 分号
[b,a] = [a,b]
console.log(a)  //2
console.log(b)  //1

js 前面必须加分号情况有：

1.立即执行函数

(function fn() {} )();
//或则
;(function fn() {} )()

2.数组结构

数组开头的，特别是前面有语句的 别忘记加 分号

let a = 1
let b = 2
;[b,a] = [a,b]

变量多 单元值少的情况:

变量的数量大于单元值数量时，多余的变量将被赋值为 undefined

const [a,b,c,d] = ['小帅','小美','小刚']
console.log(a,b,c,d)  //小帅 小美 小刚 undefined

防止有undefined传递单元值的情况，可以设置默认值

允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效

const [a = '苹果', b = '橙子'] = ['小帅']
console.log(a,b)  //小帅 橙子

变量少 单元值多的情况：

多余的单位值将被忽略

const [a,b,c] = ['苹果','香蕉','橙子'，'樱桃']
console.log(a,b,c)  //苹果 香蕉 橙子

但可利用剩余参数解决变量少 单元值多的情况

const [a,b,...arr] = ['苹果','香蕉','橙子','樱桃']
console.log(a,b)  //苹果 香蕉
console.log(arr) //['橙子','樱桃']

剩余参数返回的还是一个数组

按需导入，忽略某些返回值

const [a, ,c,d] = ['苹果','香蕉','橙子','樱桃']
console.log(a)  //苹果

console.log(c)  //橙子
console.log(d)  //樱桃

支持多维数组的结构

const [a,b] = ['苹果',['香蕉','橙子']]
console.log(a,b)  //苹果  ['香蕉','橙子']

如果想要单独拿到香蕉和橙子

const [a,[b,c]] = ['苹果',['香蕉','樱桃']]
console.log(a,b,c)  //苹果 香蕉 樱桃

对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法：

1. 赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2. 对象属性的值将被赋值给与属性名 相同的 变量

3. 注意解构的变量名不要和外面的变量名冲突否则报错

4.对象中找不到与变量名一致的属性时变量值为 undefined

//先定义一个普通对象
const user = {
    name:'小帅',
    age:'18'
};
//批量声明变量 name age
//同时将数组单元值 小帅 18 依次赋值给 name age
const {name,age} = user

console.log(name) //小帅
console.log(age)  //18

给新的变量名赋值：

可以从一个对象中提取变量并同时修改新的变量名 

冒号表示“什么值：赋值给谁”

const user = {
    name:'小帅',
    age:18
}
//把原来的 name 变量重新命名为 uname
const {name:uname,age} = user
console.log(uname)  //小帅
console.log(age)    //18