让 JS 代码更简洁

文章结尾我会附上视频地址，有自己想法的可以留言交流，谢谢

1. 输出对象快速查看

低效输出 console.log(obj)，你需要点开控制台的log才能看到结果
高效输出console.table(obj)，直接以表格方式把对象的键值显示出来，还支持多数据对比显示console.table({a,b})

2.检查代码执行性能

console.time('标签')
//执行代码块
console.timeEnd('标签')

3.log输出时获得函数执行的调用队列

console.trace('log信息')很方便的获得了调用函数的位置

4.快速格式化字符串

当有一个对象需要对其进行输出显示时，

const animal={name:"奶牛",age:3,weight:100,height:140,color:"白色"}

低效方式：

function getInfo(obj){
    return `我家的${obj.name}是${obj.color}的。`
}

高效方式

function getInfo({name,color}){
    return `我家的${name}是${color}的。`
}
//或者
function getInfo(obj){
    const {name,color} = obj
    return `我家的${name}是${color}的。`
}

5.输入格式化字符串中的参数给函数

第一个参数数组的个数是被输入变量分割后的字符串
之后的参数为输入变量值

function format(strs, age){
    return `${strs[0]},${age},${strs[1]}`
}
const result = format`我家的牛${animal.age} 岁了`
//结果：我家的牛,3,岁了

6.合并对象键值

将老鼠赋予动物的属性，并赋予年龄属性

const animal = {class:"动物"}
const rat = {name:"老鼠"}

低效方法：

rat['class'] = animal.class
rat['age'] = 1

或者

for(var key in animal){
  rat[key] = animal[key]
}
rat['age'] = 1

高效方法1：

Object.assign(rat ,animal, rat)
Object.assign(rat,{age:1})

视频教程这里是错的，直接使用了const ratResult = Object.assign(rat,animal)，这样会把rat的值覆盖掉，如果animal上有相同的值, 而且输入顺序就是被覆盖的顺序
高效方法2：

const ratFinal = {...animal,...rat}

7.数组添加元素

低效写法：

arr.push(4)
arr.push("code")
arr.push("0")

高效写法：
你可以直接把内容批量添加进去

arr = [...arr, 4,"code","0"]
arr = [4,"code","0", ...arr]
arr = [4,"code" , ...arr ,"0"]

8.快速对一组数据进行求和，均值，阀值，整体修正值

const nums = [27,104,150,54,193,113,6,144,8]

低效写法：

const total = 0;
const taxs = [];
const highVals = [];
for(const i =0;i100){
        highVals.push(nums[i])
    }
}

高效写法：

const total = nums.reduce((added,currentUnit)=> added + currentUnit)
const taxs = nums.map(unit=>unit*1.1)
const highVals = nums.filter(unit => unit>100)

9.Promise 同步与异步

定一个函数，这只是一个范例，并不抛错

const random = ()=>{
    return Promise.resolve(Math.random())
}

低效写法：

var total = 0;
(()=>{
    let first;
    let second;
    let third;
    return random().then(v=>{
        first=v
        returnrandom()
    }).then(v=>{
        second=v
        return random()
    }).then(v=>{
        third=v
        return first+second+third
    }).then(v=>{
        total = v;
        console.log(`Result ${total}`) 
    })
})()

高效写法1：

var total=0;
(async()=>{
    const first = await random();
    const second = await random();
    const third = await random();
    total =first+second+third
    console.log(`Result ${total}`) 
})()

高效写法2：

var total=0;
Promise.all([random(),random(),random()]).then((vals)=>{
    total = vals.reduce((a,b)=>a+b)
    console.log(`Result ${total}`) 
})

高效写法3：

var total = 0;
(async() =>{
    const [a,b,c] = await Promise.all([random(),random(),random()]);
    total = a+b+c;
    console.log(`Result inside ${total}`)
})();
console.log(`Result outside ${total}`)

async 并不会保证异步执行后外部能等待得到结果，它只保证内部代码的调理运行

视频地址：
https://www.youtube.com/watch?v=Mus_vwhTCq0
百度网盘地址:
链接: https://pan.baidu.com/s/1RCL3ErdOYsvsS1QmeB4NMg 提取码: ti1a