让 JS 代码更简洁
2019-03-10 本文已影响4人
Zszen
文章结尾我会附上视频地址,有自己想法的可以留言交流,谢谢🙏
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;i<nums.length;i++){
total+=nums[i];
taxs.push(nums[i]*1.1)
if(nums[i]>100){
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