js进阶----(作用域+解构+箭头函数)--＞解构赋值

学习目标：知道解构语法及分类，使用解构简洁语法快速为变量赋值

(一）数组解构

概念：将数组单元值快速批量赋值给一系列变量的简洁语法

    const arr = [100, 60, 80]
    const [max, min, avg] = arr
    // const max =arr[0]
    // const min =arr[1]
    // const avg =arr[2]
    // 直接打印
    // console.log(max);


    // 交换两个变量
    let a = 1
    let b = 2;
    [b, a] = [a, b]
    console.log(a, b)

注意：js前面必须加分号情况

（1）立即执行函数

（function t() { })();
//或者
;(function t() { })()

(2)数组解构：数组开头的，特别是前面有语句的一定注意加分号

//;[b,a] = [a,b]



//const arr = [1,2,3]
const str = 'pink';
[1,2,3].map(function(item) //数组开头，前面加上分号
//arr.map(function(item)
 {
  console.log(item)
})

补充：变量多，单元值少的情况

// 1. 变量多，单元值少
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.变量少，单元值多
const [a,b,c] = ['上','下','前'，后']
console.log(a) //上
console.log(b)  //下
console.log(c)  //前

//3. 利用剩余参数解决变量少，单元值多的情况
const [a,b,...c] = ['上','下','前'，后']
console.log(a) //上
console.log(b)  //下
console.log(c) //['前','后']真数组

//4. 防止有undefined 传递单元值情况，可以设置默认值
const [a=0,b=0] = [1,2] //当有参数传过来,这时a=1,b=2
const [a=0,b=0] = []  //传过来空数组，这时ab皆为默认值0
console.log(a)
console.log(b)

//5. 按需导入，忽略某些返回值
const [a,b, ,d] = [1,2,3,4]
console.log(a) //1
console.log(b) //2
console.log(d) //4

(二）对象解构

概念：将对象属性和方法快速批量赋值给一系列变量的简洁语法

1.基本语法：

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

（2）变量名必须与对应的属性值的属性名相同

（3）结构的变量名不要与外面的变量名冲突，否则报错

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

//定义一个对象
const user = {
  name:'老王',
  age:18,
};
//将对象赋值给变量（变量名和属性名要相同）
const {name,age} =user
//也可以直接将对象赋值给变量 const {name,age} = {name:'老王',age:18}
console.log(name)
console.log(age)
//控制台分别打印显示老王，18

2.给新的变量名赋值

const {name:uname,age} = {name:'老王',age:18}
//在变量中将旧的变量写在前面，之后冒号后面跟着新的变量名
console.log(uname)
console.log(age)
//打印的时候就只能打印新变量名了

3.解构数组对象

const pig = [{
  uname:'老王',
  age:18
}]
const [{uname,age}] = pig
//数组对象的解构const后面先是中括号，中括号里边再嵌套大括号并写上变量

console.log(uname)
console.log(age)

4.多级对象解构

const pig = {
  name:'小王',
  family:{
    mother:'女王',
    father:'老王',
    sister:'中王',
  
   },
  age:18
  
}
const {name,family:{mother,father,sister},age} = pig
//包含多级对象时，要将被包含对象的对象名写出来

console.log(name)
console.log(mather)
console.log(father)
console.log(sister)
console.log(age)