編程語言通常暗藏著各種技巧，熟練使用這些技巧可以提高開發(fā)效率。JavaScript 就是一門技巧性很強(qiáng)的語言，掌握常見的語法技巧不但可以加深對(duì)語言特性的理解，還可以簡(jiǎn)化代碼，提高編碼效率。本文分享 10 個(gè)常用的技巧，希望能成為你的開發(fā)工具箱的一部分。

1arguments 對(duì)象轉(zhuǎn)成數(shù)組

arguments對(duì)象是函數(shù)內(nèi)可訪問的類數(shù)組對(duì)象，包含了傳給函數(shù)的參數(shù)值。

但它跟數(shù)組又不太一樣，雖然可以訪問值和獲取長(zhǎng)度，卻無法使用數(shù)組的其他方法。

所幸的是，我們可以很方便地把它轉(zhuǎn)成普通的數(shù)組：

var?argArray?=?Array.prototype.slice.call(arguments);

2數(shù)組求和

最容易想到的方法是用循環(huán)，但其實(shí)有更快捷的方式：

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

3短路條件語句

?

if?(hungry)?{goToFridge(); }

以上代碼可以簡(jiǎn)化成布爾變量和函數(shù)調(diào)用組成的表達(dá)式：

hungry?&&?goToFridge()

4
用邏輯或設(shè)置變量默認(rèn)值

為了避免變量未定義（undefined）導(dǎo)致的運(yùn)行時(shí)異常，可以通過邏輯或表達(dá)式給變量設(shè)置默認(rèn)值：

function?doSomething(arg1){?arg1?=?arg1?||?32;?//?如果?arg1?未設(shè)置，用?32?作為默認(rèn)值 }

5逗號(hào)操作符

逗號(hào)操作符（,）從左到右計(jì)算每個(gè)操作數(shù)的值，并返回最后一個(gè)操作數(shù)的值。

let?x?=?1;x?=?(x++,?x);console.log(x);?//?2x?=?(2,?3);console.log(x);?//?3

6用 length 重新設(shè)置數(shù)組大小

通過改變數(shù)組length的值，可以直接改變數(shù)組的大小，可用于調(diào)整數(shù)組大小或者清空數(shù)組。

var?array?=?[11,?12,?13,?14,?15];?? console.log(array.length);?//?5??array.length?=?3;?? console.log(array.length);?//?3?? console.log(array);?//?[11,12,13]array.length?=?0;?? console.log(array.length);?//?0?? console.log(array);?//?[]

7巧用數(shù)組解構(gòu)賦值交換兩個(gè)變量的值

解構(gòu)賦值是 ES6 新增的語法，可用于從數(shù)組提取元素，或者從對(duì)象提取屬性值到單獨(dú)的變量。這里用數(shù)組解構(gòu)可以很方便地交換兩個(gè)變量的值：

let?a?=?1,?b?=?2 [a,?b]?=?[b,?a] console.log(a)?//?->?2 console.log(b)?//?->?1

8數(shù)組元素隨機(jī)排序（洗牌算法）

?

var?list?=?[1,?2,?3,?4,?5,?6,?7,?8,?9]; console.log(list.sort(function()?{return?Math.random()?-?0.5 }));? //?[4,?8,?2,?9,?1,?3,?6,?5,?7]

9對(duì)象動(dòng)態(tài)屬性名

這也是 ES6 新增的語法，可以通過變量的形式指定屬性名：

const?dynamic?=?'color'; var?item?=?{brand:?'Ford',[dynamic]:?'Blue' } console.log(item);? //?{?brand:?"Ford",?color:?"Blue"?}

10數(shù)組去重

面試常考題，如果不考慮自己實(shí)現(xiàn)，可以通過Set方便地完成數(shù)組去重：

const?my_array?=?[1,?2,?2,?3,?3,?4,?5,?5] const?unique_array?=?[...new?Set(my_array)]; console.log(unique_array);?//?[1,?2,?3,?4,?5]

總結(jié)

以上是生活随笔為你收集整理的JavaScript 开发10个实用技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。