前端实用技巧分享

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]