解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组、对象、字符串的解构赋值等;
今天是要说的是数组、对象和函数参数的解构赋值:
一、 数组的解构赋值
1.前后模式必须匹配,如果前面的声明的是二维数组后面的数据也是二维数组
//数组的解构赋值 let [a,b,c]=[12,23,34] console.log(a,b,c) //12,23,34 let [d,[e,f],g]=[1,[2,3],4] console.log(d,e,f,g) //1,2,3,4
2.前多后少,即前面声明的变量多,后面赋值少
所以某些变量会解构不成功,这种情况就相当于只声明了变量未定义值,所以为undefined
let [a,b,c]=[1,2] console.log(a,b,c) //1,2,undefined
3.前少后多,即前面的变量少,后面的值多;这种情况分为两种:
(1)省略赋值
(2)不定参数解构赋值
...是拓展运算符
//省略赋值 let [,,a]=[1,2,3]; console.log(a) // 3 //...不定参数解构赋值 let [c,...s]=[1,2,3,4]; console.log(c,s) // 1 [2, 3, 4]
4.数组解构赋值的默认值
Q1:先赋值默认值再解构赋值还是直接解构赋值不考虑默认值?
A:直接解构赋值不考虑默认值
//先赋值默认值再解构赋值还是直接解构赋值不考虑默认值? let [x, y = (function () { console.log("1111"); return 10; })()] = [45, 32] console.log(y)
Q2:什么时候会赋值为默认值?
A:当解构不成功,则前有变量,后未定义时,此时此变量的值为undefined就会走默认值;其他的情况都不是未定义
var a= null var a= [ ] 这些情况都是定义了
二、对象的解构赋值
1.变量和属性名必须同名,才可以解构赋值、
//变量和属性必须同名 才可以解构赋值 let {a,b}={a:"张三",b:"李四"} console.log(a,b) //张三 李四
2.解构不成功,值为undefined
let {a,b}={a:"张三"} console.log(a,b) //张三 undefined
3.如果需要变量名和属性名不一致时
//变量名和属性名不一致时 let {aa:A,bb:B}={aa:"张三",bb:"李四"} console.log(A,B) //张三 李四
4.对象解构赋值的默认问题
与数组解构相同,解构成功时直接赋值,不考虑默认值,解构不成功没有值或undefined就会赋值默认值
5.对象解构赋值时需要注意
{}前必须加 let
{a}={a:"zhangsan"} ✖ let {a}={a:"zhangsan"} ✔
6.当声明一些方法等于它的类时,就可以直接使用这个方法
let {ceil}=Math; let a=ceil(2.3); console.log(a) //3 let {log}=console; log("aaa") //aaa
三、函数参数的解构赋值
1.函数参数的默认值
function f(a=5){ //等号左边是形参,右边是默认值 console.log(a) } f(3) // a是形参 5是默认值 3是实参
当函数的参数解构赋值的时候要理清函数的默认参数
2.函数作用域:函数在调用的时候会形成一个私有作用域,在这个作用域下声明的变量和参数变量外界都访问不到
3.arguments:是函数中一个类数组参数,它是实参构成的集合
function f(a,b,c){ console.log(arguments) } f(1,2,3)
4.箭头函数
(1)只适合用于匿名函数
// 匿名函数 let fn=function(){} //函数表达式 fn(12,function(){ }) // 回调函数
除了用function 声明的有名函数 剩下的都是匿名函数
(2)箭头函数的写法
let fn =(变量)=>{代码}
每个箭头函数结束的时候一定要return
(3)当只有一个变量的时候可以省略()
let fn=x=>{return x;}
(4)当只有一行代码,且这行代码是return xxx;时,可以省略{}和return
let fn=x=>x;
(5)箭头函数的优势:箭头函数没有this指向,只指向他的父级作用域
(6)箭头函数获取实参,不能使用arguments,需要用...arg
let fn=(...arg)=>{ console.log(arg) } fn(1,2,3)
(7)箭头函数不能定义类函数:因为箭头函数中的this指向父级作用域,而类中的this指向实例对象