JavaScript代码ES6优化点

一、取值使用解构方法

数组

优点：只需提供位置即可，并且可同时获得不同位置的值

let array = [1,2,3,4,5]
let [a,,b] = array
console.log(a)   //1
console.log(b)   //3


let array = [1,2,3,4,5]
let [,,a] = array
a    //3

对象

优点：只需提供名称（与属性名形同）即可，不需要注意位置

let array ={name:'Tom',age:18}
let {name,age} = array
console.log(name)    //'Tom'

let array ={name:'Tom',age:18}
let {age,name} = array
console.log(name)    //'Tom'

二、合并数组或对象使用扩展运算符

注意：合并时数组不会自动去重，对象会自动去重，后者覆盖前者

//数组合并不去重
let array1 = [1,2,3,4,5]
let array2 = [2,6,7]
let joinArray = [...array1,...array2]
console.log(joinArray)   //[1,2,3,4,5,2,6,7]

//数组合并去重
let array1 = [1,2,3,4,5]
let array2 = [2,6,7]
let noRepeatArray = [...new Set([...array1,...array2])]
console.log(noRepeatArray)   //[1,2,3,4,5,6,7]


//对象合并
let obj1 = {name:'Bob',age:18}
let obj2 = {name:'Tom',address:'中国'}
let joinObj = {...obj1,...obj2}
console.log(joinObj)  //{name: 'Tom', age: 18, address: '中国'}

三、列表精确搜索，使用find代替filter

let obj1 = [{name:'Bob',age:18,address:'中国'},{name:'Tom',age:19,address:'中国2'},{name:'Jerry',age:20,address:'中国3'}]
let targetObj = obj1.find(item=>item.age===18)
console.log(targetObj)  //{name: 'Bob', age: 18, address: '中国'}

四、获取对象属性值在对象可为空时使用可选链操作符 IE不支持

 

五、拼接字符串时直接使用模板字符串，有操作直接在模板字符串里操作

let name="Bob"
let current = `${name}${name.repeat(3)}`
console.log(current)  //'BobBobBobBob'

六、扁平化数组使用方法Object.values().flat(Infinity)

//纯数组
let arr = [
    [1,2,3],
    [3,3,3],
    [8,
        [1,6]
    ]
]
let current = Object.values(arr).flat(Infinity)
console.log(current)  //[1, 2, 3, 3, 3, 3, 8, 1, 6]


//对象包含数组
let arr = {
    name:[1,2,3],
    age:[3,3,3],
    address:[8,[1,6]]
}
let current = Object.values(arr).flat(Infinity)
console.log(current)  //[1, 2, 3, 3, 3, 3, 8, 1, 6]



//数组包含对象
let arr = [
    {name:[1,2,3]},
    {age:[3,3,3]},
    [8,
        [1,6]
    ]
]
let current = Object.values(arr).flat(Infinity)
console.log(current)  //[{name:[1,2,3]},{age:[3,3,3]},8,1,6]