JS拓展:解构赋值,默认参数(Default) + 不定参数(Rest) + 扩展运算符(Spread),箭头函数
解构赋值
在ES5我们提取对象中的信息形式如下:
//定义对象
const people = {
name: 'lux',
age: 20
}
//取出对象的属性
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
在es6中,解构能让我们从对象或者数组里快速的取出数据存为变量,例如:
//对象,对象解构时前面要用变量声明,键名也要一样, 按照名字赋值
const people = {
name: 'lux',
age: 20
}
const { name, age } = people //类型应该是对象
console.log(`${name} --- ${age}`)
//数组 按照下标位置赋值
const color = ['red', 'blue']
const [first, second] = color //类型应该是数组
console.log(first) //'red'
console.log(second) //'blue'
默认参数(Default) + 不定参数(Rest) + 扩展运算符(Spread)
默认参数(default)的功能是在函数被调用时对参数做自动估值(若没被赋值,则自动赋值),扩展运算符(spread)则可以将数组转换为连续的函数参数,不定参数(rest)用在参数末尾,将最末尾的参数转换为数组。不定参数(rest)让我们不再需要arguments,更直接地解决了一些常见的问题
function f(x, y=12) {
// 如果没有传入y或传入了undefined,y的默认值为12
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y是一个数组
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// 将数组中的每个元素展开为函数参数
f(...[1,2,3]) == 6
默认参数
不定参数 (用于接收不定数量的参数)
展开运算符 (用于赋值时直接展开所有元素)
箭头函数与this语法
语法:函数的参数=>函数体
=>前的部分是函数的参数部分,主要有以下几种情况:
- 参数为空(写一个空括号即可)
()=>
- 只有一个参数a(只写a或者在a外加一个括号)
(a)=> 或者 a=>
- 有多个参数a,b,c,d(必须写在括号里)
(a,b,c,d)=>
- 含有默认值的参数(直接给参数赋值就可以了,同以前一样)
(a=1,b=2,c=3,d=4)=>
- 含有不定参数(直接写就行,同以前一样)
(a,b,…c)=>
- 另外,箭头函数参数也支持解构赋值
=>后的部分也就是函数体主,要有以下几种情况:
- 当函数体只有一条语句时,可以不加花括号,直接将这条语句写在箭头后面即可
- 然后如果这条语句是一个return value这种的话,请去掉return,直接写那个值value即可。在箭头函数执行时,会自动将其作为返回值返回。
- 当然,如果这个值是一个对象,请在他的外面加上一个括号如({value})因为如果不加的话,{会被认为是函数体的开始,而不会被认为是一个对象的开始
- 有多条语句(要加上花括号,写法和以前一样)有多条语句(要加上花括号,写法和以前一样)
=>{
语句1;
语句2;
语句3;
}
箭头函数中的this