箭头函数和解构赋值
1. 箭头函数
箭头函数是一种声明函数的简洁语法。
<script>
// 1.箭头函数表达方式
// let fn=function(){}
let fn = () => { }
// 2.函数只有一个参数时可以省略 ()
// let fn1=(m)=>{}
let fn1 = m => { return m }
console.log(fn1(1))
// 3.函数体只有一行代码时可以省略 {},并自动做为返回值被返回
let fn2 = m => m * m
console.log(fn2(3))
</script>
注意:
- 箭头函数属于表达式函数,不存在函数提升;
- 箭头函数默认不存在this,因为箭头函数中的this指向的是上级作用域中的this;
- 箭头函数中没有 arguments,只能使用 … 动态获取实参。
2. 解构赋值
将数据结构中的数据赋值给变量。
2.1 数组解构
将数组元素快速赋值给一系列变量的简洁语法。
<script>
// 语法
// let [变量]=[数组元素值]
// 场景分析
// 1.变量数=值数 -- 一一对应赋值
let [a,b,c,d]=[1,2,3,4]
console.log(a,b,c,d)
// 2. 变量数>值数 -- 多余的变量将被赋值为 undefined
let [e,f,g,h,i]=[1,2,3,4]
console.log(e,f,g,h,i)
// 3.变量数<值数
// 3.1 有多少个变量,取多少个值
let[j,k]=[1,2,3,4,5]
console.log(j,k)
// 3.2 ...取剩余值
let [l,m,...n]=[1,2,3,4,5,6]
console.log(l,m,n)
// 4.按需取值 -- 空格补位,一一对应取值
let [o, ,p, ,q]=[1,2,3,4,5]
console.log(o,p,q)
// 多维数组复杂情况
let [ , ,r,s,t,[x,y,z]]=[1,2,3,4,5,['welcome','to','wonderland']]
console.log(r,s,t,x,y,z)
</script>
2.2 对象解构
将对象属性和方法快速赋值给一系列变量的简洁语法。
- 语法
<script>
// 语法 将对象的属性名当做变量名使用
// let {变量名}={属性值}
let obj={
name:'酷盖',
age:23,
sex:'男',
}
let {name,age,sex}=obj
console.log(name,age,sex)
</script>
- 对象解构不存在 一 一 对应,属性名和变量名相同则赋值,找不到与变量名一致的属性,则变量值为undefined。
<script>
let obj={
name:'酷盖',
age:23,
sex:'男',
}
// obj中无adress属性,则值为undefined
let{name,age,adress}=obj
console.log(name,age,adress)
</script>
- 若有定义变量与对象中属性名相同,需要修改变量名。
<script>
let name='奶盖'
let obj={
name:'酷盖',
age:23,
sex:'男',
}
// 冒号 : 修改变量名
let {name:uname,age,sex}=obj
console.log(uname,age,sex)
</script>
- 多维对象解构
<script>
let obj = {
name: '酷盖',
age: 23,
sex: '男',
user1: {
name: '小摩托',
age: 21,
sex: '女'
},
user2: {
name: '小飞侠',
age: 21,
sex: '女'
}
}
let { user1: { name }, user2: { name: uname } } = obj
console.log(name, uname)
</script>