文章結(jié)尾我會(huì)附上視頻地址慨灭,有自己想法的可以留言交流,謝謝??
1. 輸出對象快速查看
低效輸出 console.log(obj)
烦味,你需要點(diǎn)開控制臺的log才能看到結(jié)果
高效輸出console.table(obj)
礁鲁,直接以表格方式把對象的鍵值顯示出來箍铭,還支持多數(shù)據(jù)對比顯示console.table({a,b})
2.檢查代碼執(zhí)行性能
console.time('標(biāo)簽')
//執(zhí)行代碼塊
console.timeEnd('標(biāo)簽')
3.log輸出時(shí)獲得函數(shù)執(zhí)行的調(diào)用隊(duì)列
console.trace('log信息')
很方便的獲得了調(diào)用函數(shù)的位置
4.快速格式化字符串
當(dāng)有一個(gè)對象需要對其進(jìn)行輸出顯示時(shí)绎晃,
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.輸入格式化字符串中的參數(shù)給函數(shù)
第一個(gè)參數(shù)數(shù)組的個(gè)數(shù)是被輸入變量分割后的字符串
之后的參數(shù)為輸入變量值
function format(strs, age){
return `${strs[0]},${age},${strs[1]}`
}
const result = format`我家的牛${animal.age} 歲了`
//結(jié)果:我家的牛,3,歲了
6.合并對象鍵值
將老鼠賦予動(dòng)物的屬性灵妨,并賦予年齡屬性
const animal = {class:"動(dòng)物"}
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})
視頻教程這里是錯(cuò)的解阅,直接使用了
const ratResult = Object.assign(rat,animal)
落竹,這樣會(huì)把rat的值覆蓋掉,如果animal上有相同的值, 而且輸入順序就是被覆蓋的順序
高效方法2:
const ratFinal = {...animal,...rat}
7.數(shù)組添加元素
低效寫法:
arr.push(4)
arr.push("code")
arr.push("0")
高效寫法:
你可以直接把內(nèi)容批量添加進(jìn)去
arr = [...arr, 4,"code","0"]
arr = [4,"code","0", ...arr]
arr = [4,"code" , ...arr ,"0"]
8.快速對一組數(shù)據(jù)進(jìn)行求和货抄,均值述召,閥值,整體修正值
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 同步與異步
定一個(gè)函數(shù)蟹地,這只是一個(gè)范例积暖,并不拋錯(cuò)
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 并不會(huì)保證異步執(zhí)行后外部能等待得到結(jié)果,它只保證內(nèi)部代碼的調(diào)理運(yùn)行
視頻地址:
https://www.youtube.com/watch?v=Mus_vwhTCq0
百度網(wǎng)盤地址:
鏈接: https://pan.baidu.com/s/1RCL3ErdOYsvsS1QmeB4NMg 提取碼: ti1a