編程語言通常暗藏著各種技巧规哪,熟練使用這些技巧可以提高開發(fā)效率爆侣。JavaScript 就是一門技巧性很強(qiáng)的語言,掌握常見的語法技巧不但可以加深對語言特性的理解葫录,還可以簡化代碼,提高編碼效率领猾。本文分享 10 個常用的技巧米同,希望能成為你的開發(fā)工具箱的一部分。
1. arguments 對象轉(zhuǎn)成數(shù)組
arguments
對象是函數(shù)內(nèi)可訪問的類數(shù)組對象摔竿,包含了傳給函數(shù)的參數(shù)值面粮。
但它跟數(shù)組又不太一樣,雖然可以訪問值和獲取長度继低,卻無法使用數(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();
}
以上代碼可以簡化成布爾變量和函數(shù)調(diào)用組成的表達(dá)式:
hungry && goToFridge()
4. 用邏輯或設(shè)置默認(rèn)值
為了避免變量未定義(undefined
)導(dǎo)致的運(yùn)行時異常冷溃,可以通過邏輯或表達(dá)式給變量設(shè)置默認(rèn)值:
function doSomething(arg1){
arg1 = arg1 || 32; // 如果 arg1 未設(shè)置钱磅,用 32 作為默認(rèn)值
}
5. 逗號操作符
逗號操作符(,
)從左到右計(jì)算每個操作數(shù)的值梦裂,并返回最后一個操作數(shù)的值。
let x = 1;
x = (x++, x);
console.log(x); // 2
x = (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òu)賦值是 ES6 新增的語法褪迟,可用于從數(shù)組提取元素冗恨,或者從對象提取屬性值到單獨(dú)的變量。這里用數(shù)組解構(gòu)可以很方便地交換兩個變量的值:
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. 對象支持動態(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é)
以上技巧雖然好用傲武,但是大多數(shù)是 ES6 的語法和 API蓉驹,需要考慮瀏覽器兼容性。當(dāng)然揪利,有了 Babel 和 Webpack态兴,解決這個問題也不在話下了。
看到這個頗有氣質(zhì)的 logo疟位,不來關(guān)注下嗎瞻润?