小技巧系列 -- coding 技巧汇总前言一个大项目的一个文件的代码就成百上千行，如果采用简洁式写法会使代码变得简洁

前言

一个大项目的一个文件的代码就成百上千行，如果采用简洁式写法会使代码变得简洁、更加具有可读性。不仅从细节上提高编程效率，还便于后期查找和修改代码。

Coding 技巧

积累一下 coding 技巧可以使我们的代码更加简洁化

维护一个 Max 值

使用

Math.max(item , max)

代替

if(item > max) max = item

使用 `A ? B : C` 选择表达式进行条件判断

使用

条件 ? 处理方式 1 : 处理方式 2

代替

if(条件) 处理方式 1 ; else 处理方式 2

例如需求背景是：在用户还没成功获取个人头像之前我们需要给用户渲染一个默认头像出来，这个时候代码的简洁式写法为：

const avatarUrl = getAvatar ? imgUrl : "@/asserts/img/default-avatar.png"

值得注意的是：要注意一个等号和两个等号

清空和截短数组

使用

const arr = [1,2,3,4,5,6,7,8,9]
arr.length = 5
console.log(arr) // [1,2,3,4,5]
arr.length = 0 // 清空数组

代替

const arr1 = [1,2,3,4,5,6,7,8,9]
const arr2 = arr1.slice(0,5) // slice(start,end)
console.log(arr2) // [1,2,3,4,5]

const arr3 = [1,2,3,4,5,6,7,8,9]
arr3.splice(5) // slice(start,length)，length 参数不写则默认截取到数组结束
console.log(arr3) // [1,2,3,4,5]

使用`reduce`进行数组求和

使用

var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // 17

代替

var numbers = [3, 5, 7, 2];
var sum = 0;
for(let i = 0; i < numbers.length; i++){
    sum += numbers[i]
}
console.log(sum);

在`undefined`或`null`时设置默认值

使用

function fn(arg){
    arg = arg || '未命名'; // 如果值是 undefined 或 null 时则用字符串 “未命名” 代替
}

代替

function fn(arg){
    if(arg === undefined || arg === null){
        arg = '未命名'
    }
}

模板字符串的应用

使用

console.log(`您已完成 ${FinishOrders} 条订单，还有 ${NotFinishOrders} 条订单未完成！`)

代替

console.log("您已完成" + FinishOrders + "条订单，还有" + NotFinishOrders + "条订单未完成！")

扩展运算符的应用——利用 Math.max()、Math.min() 求出一个数组的最大值、最小值

使用

const arr = [5,3,8,7,2,9]
Math.max(arr) // NaN，不能直接传入数组，得把数组拆成一个个元素
Math.max(...arr) // 9
Math.min(...arr) // 2

代替

const arr = [5,3,8,7,2,9]
function fn(){
 let max = 0
 arr.forEach((item)=>{
   item > max ? (max = item) : null
   // 或 max = Math.max(max , item)
 })
 return max
}
fn(arr)

扩展运算符的应用——浅拷贝式合并对象（扁平化二元对象也是同样道理）

有两个对象：

const obj1 = {
    name: "Jack",
    age: 20
}
const obj2 = {
    gender: "man",
    address: "ShenZhen",
    grades: [88,66,99]
}

要把 obj1 和obj2 合并成一个新对象，其属性为两个对象的属性

使用

// 浅拷贝
Object.assign(obj1,obj2)
console.log(obj1) // 对象 obj1 是两个对象合并后的结果
// 浅拷贝，推荐 （不会改变原对象）
const obj3 = {
    ...obj1,
    ...obj2
}

代替

const obj3 = {}
for(let item in obj1){
    obj3[item] = obj1[item]
}
for(let item in obj2){
    obj3[item] = obj2[item]
}

另外，深拷贝方法如下：

let str1 = JSON.stringify(obj1)
let str2 = JSON.stringify(obj2)
let str = str1.slice(0,str1.length - 1) + ',' + str2.slice(1)
const obj3 = JSON.parse(str)
console.log(obj3)
console.log(obj3.grades === obj2.grades) // false

扩展运算符的应用——扁平化任意纬度数组

使用

function flattenArray(arr){
    const flatArr = [].concat(...arr)
    return flatArr.some(item => Array.isArray(item)) ? flattenArray(flatArr) : flatArr
}
const arr = [1,[2,3],[4,5,[6,7,[8,9]]]]
console.log(flattenArray(arr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

代替

let flatArr = []
function flattenArray(arr){
    if(arr.some(item => Array.isArray(item)) === false) return arr
    flatArr = []
    for(let item of arr){
        flatArr = flatArr.concat(item)
    }
    arr = flatArr
    flattenArray(arr)
}

const arr = [1,[2,3],[4,5,[6,7,[8,9]]]]
console.log(flattenArray(arr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

持续更新。。。

小技巧系列 -- coding 技巧汇总

前言