1.用三目运算符代替简单的if-else
if (age >= 18) {
ageGroup = "An adult";
} else {
ageGroup = "A child";
}
ageGroup = age >= 18 ? "An adult" : "A child";
使用可选链运算符?(ES11),当属性未定义,返回undefined而不是抛出错误
res.data && res.data.id =>res.data?.id
使用?.可选链简化三元运算符
var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined
var fooValue = myForm.querySelector('input[name=foo]')?.value
2.空合并(ES11)
用于判断运算符左侧的值为null或undefined时,才返回运算符右侧的值
maybeSomething ?? "Nothing found
空合并??如果左侧未定义,则返回右侧。如果是,则返回左侧:它的行为类似||,但是更严。||运算符是左边是falsy值(fasly值是在Boolean上下文中认定为false的值。),都会返回右侧的值。而??必须运算符左侧的值为null或undefined时,才会返回右侧的值。因此0||1的结果为1,0??1的结果为0。
3.扩展运算符
数组、对象合并
let newArray = [...nums1, ...nums2];
let newObj = {
data1,
data2,
...Obj
}
使用扩展运算符实现数组合并,将两数组组成新数组。对象合并的话,不同的key保留合并,相同的key则取后面对象的value,这样可以起到更新的作用。
搭配 new 对数组去重
const uniqueNumbers = [...new Set(numbers)]
rest参数
arguments对象不是数组,只是可以下标访问而已,而rest参数是一个真正的数组。rest参数只能作为最后一个参数,否则会报错。
function fn(a, b, ...rest) {
console.log(a)// 1
console.log(b)// 2
console.log(rest)// [3,4,5]
}
fn(1,2,3,4,5)
还可以用做拷贝(对一维数组是深拷贝,多维数组是浅拷贝)
4.简写
对象字面量简写
var person = {
name: name,
city: city,
age: age,
};
const person = { name, city, age }
解构赋值:
var person = {
name: Tom,
city: XiaMen,
age: 18,
};
var name = person.name;var city = person.city; var age = person.age
var {name,city,age}=person
var {name,...userInfo}=person //name=Tom , userInfo={city: XiaMen,age: 18}
解构值还可以为对象,且解构可以赋初始值。
函数定义、变量声明简写:
函数名(){
}
let name, age, favoriteFood = "Pizza";
箭头函数简写:
let fn = ()=>{
//函数体
}
参数只有一个时可省略小括号,函数体只有一句可以省略{}和return。(箭头函数没有自己的this,它指向的是外层函数的this。不能使用new关键字。没有arguments对象。没有原型)
5.flat/flatMap
flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
//例如一个数组有很多层,
const arr = [10, 20, [30, 40], [50, [60]], [70, [80, [90]]]];
// 将数组里面第一层数组扁平化
const newArr1 = arr.flat(1);
console.log(newArr1); // [10, 20, 30, 40, 50, [60], 70, [80, [90]]]
// 将数组里面第三层数组扁平化
const newArr2 = arr.flat(3);
console.log(newArr2); // [10, 20, 30, 40, 50, 60, 70, 80, 90]
flat()方法会移除数组中的空项,当flat()深度为0是可以进行数组的深拷贝
flatMap() 方法首先会遍历原数组的每一个元素, 并且会为每个元素都执行一次传入的回调函数,最终把所有元素执行回调函数返回的结果压缩成一个新数组
const message = ["Hello World", "Hello coder", "你好 中国"];
const newMessage = message.flatMap(item => item.split(" "));
console.log(newMessage); // ['Hello', 'World', 'Hello', 'coder', '你好', '中国']
要注意的点时:flatMap是先进行map操作,再做flat的操作。且不会改变原数组,flatMap中的flat相当于深度为1。我们可以通过这一特性简化代码。
//初始数据
var studentList = [
{
id:1,
name:'张三',
sex:0,
age:18,
},
{
id:2,
name:'李四',
sex:1,
age:22,
},
{
id:3,
name:'王五',
sex:1,
age:19,
}
]
//需要的数据格式如下:
[{
id:'学生id',
name:'学生姓名'
}]
//使用filter和map
var data1= studentList.filter(item=>item.sex===0);
var data2= data1.map(item=>({
id:item.id,
name:item.name
}));
//使用flatMap方法来替代
var data = studentList.flatMap(r=>r.sex==='0' ? [{id:r.id, name:r.name}] : [])
6、at( )
at( )数组负索引访问器,因为中括号不允许直接从数组末尾访问元素,也不能接受负索引,所以ES13将 at() 方法引入了数组 。
const vegetables = ['potatoe', 'tomatoe', 'onion'];
vegetables.at(1); // => 'tomatoe'
vegetables.at(-1); // => 'onion'
vegetables.at(3); // => undefined
array.at(negIndex) 将会访问位于索引 array.length + negIndex 处的元素,
at()的索引范围:[-array.length,array.length-1]