讓 JS 代碼更簡潔

文章結(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末怪与,一起剝皮案震驚了整個(gè)濱河市夺刑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌分别,老刑警劉巖遍愿,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異耘斩,居然都是意外死亡沼填,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門括授,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坞笙,“玉大人岩饼,你說我怎么就攤上這事⊙σ梗” “怎么了籍茧?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長却邓。 經(jīng)常有香客問我硕糊,道長,這世上最難降的妖魔是什么腊徙? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任简十,我火速辦了婚禮,結(jié)果婚禮上撬腾,老公的妹妹穿的比我還像新娘螟蝙。我一直安慰自己,他們只是感情好民傻,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布胰默。 她就那樣靜靜地躺著,像睡著了一般漓踢。 火紅的嫁衣襯著肌膚如雪牵署。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天喧半,我揣著相機(jī)與錄音奴迅,去河邊找鬼。 笑死挺据,一個(gè)胖子當(dāng)著我的面吹牛取具,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扁耐,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼暇检,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了婉称?” 一聲冷哼從身側(cè)響起块仆,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎王暗,沒想到半個(gè)月后悔据,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瘫筐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年蜜暑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片策肝。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡肛捍,死狀恐怖隐绵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拙毫,我是刑警寧澤依许,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站缀蹄,受9級特大地震影響峭跳,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缺前,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一蛀醉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧衅码,春花似錦拯刁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至奶躯,卻和暖如春帚桩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嘹黔。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工账嚎, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人参淹。 一個(gè)月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓醉锄,卻偏偏與公主長得像乏悄,于是被迫代替她去往敵國和親浙值。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品檩小,去做同樣的事情开呐,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,775評論 2 17
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,209評論 0 3
  • 01javascript語法規(guī)范 <!DOCTYPE html> javascript語法...
    ouyangqinbin閱讀 1,312評論 0 0
  • 學(xué)習(xí)目標(biāo): 理解面向?qū)ο箝_發(fā)思想 掌握 JavaScript 面向?qū)ο箝_發(fā)相關(guān)模式 掌握在 JavaScript ...
    金桔檸檬加冰閱讀 407評論 0 0
  • 引導(dǎo)購買的兩個(gè)原則 第一规求、避免極端筐付。就是在有3個(gè)或者更多選擇的時(shí)候,很多人不會(huì)選擇最低或者最高的版本阻肿,而更傾向于選...
    羅南南閱讀 413評論 0 0