九個(gè)實(shí)用的 JavaScript 技巧
JavaScript 的最初目的是為網(wǎng)站添加一些功能的簡(jiǎn)單語言。令人驚訝的是，如今它無處不在，而且更加復(fù)雜。
隨著 Web 應(yīng)用程序變得越來越復(fù)雜，JavaScript 也發(fā)展得如此之快。編寫簡(jiǎn)潔、可讀且可維護(hù)的 JavaScript 程序不再像以前那么容易了。
本文將總結(jié) 9 個(gè)實(shí)用的 JavaScript 技巧，幫助您編寫更好的前端代碼，感受這種優(yōu)雅編程語言的美妙之處。
現(xiàn)在，讓我們一起來看看吧。
1. 以 JavaScript 方式打破嵌套循環(huán)
許多編程語言都有用于跳出循環(huán)的break關(guān)鍵字。
然而，該關(guān)鍵字僅用于跳出當(dāng)前循環(huán)。如果您必須打破嵌套循環(huán)，則可能很難保持代碼整潔。
例如，如何實(shí)現(xiàn)以下代碼？
for (let i in arr1) {
for (let j in arr2) {
for (let k in arr3) {
if (k === j - 4) {
// need to break out of the second loop
}
if (k === i - 3) {
// need to break out of the outermost loop
}
}
}
}在其他語言中，您可能需要將布爾變量聲明為外部循環(huán)的“flags”，并在進(jìn)入相應(yīng)循環(huán)時(shí)檢查中斷的“標(biāo)志”。此方法有效，但如果有很多布爾標(biāo)志，會(huì)使您的代碼有點(diǎn)混亂。
JavaScript 針對(duì)這種場(chǎng)景提供了語法級(jí)的解決方案——label。
您可以使用標(biāo)簽來標(biāo)識(shí)循環(huán)，然后參考該標(biāo)簽來打破相應(yīng)的循環(huán)。
因此，上述代碼的JavaScript實(shí)現(xiàn)方式如下：
loop1:
for (let i in arr1) {
loop2:
for (let j in arr2) {
for (let k in arr3) {
if (k === j - 4) {
break loop2
}
if (k === i - 3) {
break loop1
}
}
}
}Loop1 和 Loop2 是這兩個(gè)外部循環(huán)的標(biāo)簽，因此使用其標(biāo)簽可以輕松打破匹配的循環(huán)。無需將其他變量聲明為“flags”。
2. 利用擴(kuò)展運(yùn)算符進(jìn)行解構(gòu)賦值
擴(kuò)展運(yùn)算符是整潔 JavaScript 程序的關(guān)鍵。
let leaders = {
me: "Yang",
T: "Elon",
A: "Tim",
MS: "Bill"
}
let {me, ...others} = leaders
console.log(me)
// "Yang"
console.log(others)
// {T: "Elon", A: "Tim", MS: "Bill"}如上面的示例所示，我們使用了一個(gè)簡(jiǎn)單的三個(gè)點(diǎn)的擴(kuò)展運(yùn)算符，將leader[“me”]的值分配給名為me的變量，并將其他鍵值對(duì)分配給數(shù)組others。
在 React 中，此技巧通常用于在構(gòu)建 UI 組件時(shí)從 props 接收多個(gè)值。
3. 淺復(fù)制對(duì)象或數(shù)組的幾種方法
眾所周知，JavaScript 中的對(duì)象和數(shù)組等非原始數(shù)據(jù)類型是通過引用傳遞的。
因此，如下例所示，更改“新”數(shù)組也會(huì)更改原始數(shù)組：
let a = [1, 2, 3]
let b = a
b.push(8)
console.log(a, b)
// [ 1, 2, 3, 8 ] [ 1, 2, 3, 8 ]要真正將數(shù)組 a 復(fù)制到新數(shù)組 b，JavaScript 中至少有 4 種方法。
使用 slice() 方法
slice()方法是提取數(shù)組的一部分。鑒于它在新數(shù)組中返回提取的部分，我們可以提取整個(gè)數(shù)組并將返回的數(shù)組作為副本：
let a = [1, 2, 3]
let b = a.slice()
b.push(8)
console.log(a, b)
// [ 1, 2, 3 ] [ 1, 2, 3, 8 ]使用擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符不僅擅長(zhǎng)解構(gòu)賦值，還能夠從數(shù)組或?qū)ο笾薪獍?xiàng)目：
let a = [1, 2, 3]
let b = [...a]
b.push(8)
console.log(a, b)
// [ 1, 2, 3 ] [ 1, 2, 3, 8 ]使用內(nèi)置的 Array.from() 方法
事實(shí)上，有一個(gè)專門設(shè)計(jì)的方法來進(jìn)行復(fù)制——Array.from()：
let a = [1, 2, 3]
let b = Array.from(a)
b.push(8)
console.log(a, b)
// [ 1, 2, 3 ] [ 1, 2, 3, 8 ]使用 concat() 方法
concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。由于此方法返回一個(gè)新數(shù)組而不更改現(xiàn)有數(shù)組，因此我們也可以利用它進(jìn)行復(fù)制：
let a = [1, 2, 3]
let b = [].concat(a)
b.push(8)
console.log(a, b)
// [ 1, 2, 3 ] [ 1, 2, 3, 8 ]對(duì)于物體，這三個(gè)點(diǎn)也能完美地工作：
let leader = {
name:'Yang',
age:'30'
}
let fake_leader = {...leader}
fake_leader['skill']='coding'
console.log(leader,fake_leader)
// { name: 'Yang', age: '30' } { name: 'Yang', age: '30', skill: 'coding' }另一種方法是使用內(nèi)置的 Object.assign() 方法：
let leader = {
name:'Yang',
age:'30'
}
let fake_leader = Object.assign({},leader)
fake_leader['skill']='coding'
console.log(leader,fake_leader)
// { name: 'Yang', age: '30' } { name: 'Yang', age: '30', skill: 'coding' }這種類型的復(fù)制實(shí)際上稱為淺復(fù)制，這意味著它只有一層深。它僅復(fù)制元素的引用，而不復(fù)制元素本身。因此，如果元素是對(duì)象或數(shù)組，復(fù)制的數(shù)組仍將引用相同的對(duì)象或數(shù)組。
例如，如果數(shù)組 a 包含一個(gè)內(nèi)部數(shù)組（兩級(jí)深），則淺拷貝無法真正復(fù)制它們，并且編輯數(shù)組 b 的內(nèi)部數(shù)組也會(huì)更改 a 的：
let a = [1, [2, 2, 2], 3]
let b = [].concat(a)
b[1].push(8)
console.log(a, b)
// [ 1, [ 2, 2, 2, 8 ], 3 ] [ 1, [ 2, 2, 2, 8 ], 3 ]4. 使用 JSON 技巧進(jìn)行深度復(fù)制
要實(shí)現(xiàn)深度復(fù)制，一個(gè)流行的技巧是結(jié)合使用 JSON.stringify() 和 JSON.parse()。
這個(gè)想法是將對(duì)象（或數(shù)組）序列化為 JSON 格式的字符串，然后將其解析回新對(duì)象。此過程有效且優(yōu)雅地創(chuàng)建原始數(shù)組或?qū)ο蟮纳顚痈北荆?/span>
let a = [1, [2, 2, 2], 3]
let b = JSON.parse(JSON.stringify(a))
b[1].push(8)
console.log(a, b)
// [ 1, [ 2, 2, 2 ], 3 ] [ 1, [ 2, 2, 2, 8 ], 3 ]基于 JSON 的技巧在大多數(shù)簡(jiǎn)單情況下都很有用。但是，我們需要知道，要使該方法有效，對(duì)象必須是 JSON 可序列化的。
我們看一個(gè)反例：
const obj = {
func: function() {
console.log("hello world!");
}
}
const cp_obj=JSON.parse(JSON.stringify(obj))
console.log(cp_obj['func'])
// undefinedobj['func'] 的值是一個(gè)函數(shù)。它不能再通過 JSON 技巧進(jìn)行復(fù)制。
在這種情況下，我們可以利用一個(gè)著名的第三方 JS 庫(kù) lodash：
const _ = require('lodash');
const obj = {
func: function() {
console.log("hello world!");
}
}
const cp_obj=_.cloneDeep(obj)
cp_obj['func']()
// hello world!如上所示，lodash 中的 cloneDeep 方法完美克隆了 obj 內(nèi)的函數(shù)，并且可以在新的 cp_obj 上成功執(zhí)行。
5. 熟練地實(shí)現(xiàn)For循環(huán)
如果您仍在 JavaScript 中使用 C/C++ 風(fēng)格的 for 循環(huán)，那么，您肯定需要提升您的技能。
當(dāng)然，下面的代碼是正確的，但它還不夠“JavaScript”。
const arr = ['Y', 'a', 'n', 'g']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// Y
// a
// n
// g在 JavaScript 中編寫上述代碼的慣用方法如下：
使用 forEach() 方法
forEach 方法非常適合迭代數(shù)組的元素：
const author = [ 'Y', 'a', 'n', 'g' ];
author.forEach((c)=>{console.log(c)})
// Y
// a
// n
// g使用map()函數(shù)
如果您閱讀開源 JavaScript 程序，您可能會(huì)遇到 map() 函數(shù)。它是 JavaScript 中最流行的方法之一：
const author = [ 'Y', 'a', 'n', 'g' ];
author.map((c)=>{console.log(c)})
// Y
// a
// n
// gmap() 函數(shù)的行為與 forEach() 基本相似，但有一個(gè)顯著差異：
map() 方法返回一個(gè)與原始數(shù)組長(zhǎng)度相同的新數(shù)組，其中每個(gè)元素都是對(duì)相應(yīng)元素調(diào)用函數(shù)的結(jié)果。原始數(shù)組保持不變。forEach() 方法不返回任何內(nèi)容。
以下代碼說明了如何使用map()函數(shù)獲取新數(shù)組：
const author = ['Y', 'a', 'n', 'g'];
const cute_author = author.map((c) => c + ':)')
console.log(cute_author)
// [ 'Y:)', 'a:)', 'n:)', 'g:)' ]
console.log(author)
// [ 'Y', 'a', 'n', 'g' ]但是，我們無法使用 forEach() 函數(shù)獲取新數(shù)組：
const author = ['Y', 'a', 'n', 'g'];
const cute_author = author.forEach((c) => c + ':)')
console.log(cute_author)
// undefined
console.log(author)
// [ 'Y', 'a', 'n', 'g' ]使用 for...of... 結(jié)構(gòu)
ES6 是 JavaScript 的一個(gè)里程碑。這個(gè)版本引入了許多好的功能。“for...of...”方法就是其中之一。
const author = [ 'Y', 'a', 'n', 'g' ];
for (let char of author){
console.log(char);
}
// Y
// a
// n
// g使用 for...in... 結(jié)構(gòu)
“for...in...”語法也能夠?qū)崿F(xiàn)與我們相同的功能。但我們應(yīng)該注意“for…in…”和“for…of…”之間的區(qū)別。下面的代碼片段對(duì)此進(jìn)行了解釋：
const author = [ 'Y', 'a', 'n', 'g' ];
for (let idx in author){
console.log(author[idx]);
}
// Y
// a
// n
// g6. 刪除數(shù)組重復(fù)值的最快方法
ES6 為 JavaScrip 引入了一種新的數(shù)據(jù)結(jié)構(gòu)——集合。集合是唯一的項(xiàng)目的集合。
由于集合的特性，它使得刪除數(shù)組的重復(fù)值變得更加簡(jiǎn)單。
const a = [1, 2, 1, 6, 6, 6, 9]
const unique_a = [...new Set(a)]
console.log(unique_a)
// [ 1, 2, 6, 9 ]如上面的程序所示，我們可以利用展開運(yùn)算符和 Set() 方法來方便地獲取數(shù)組的唯一元素。
7. 用一行代碼反轉(zhuǎn)字符串
要在 JavaScript 中反轉(zhuǎn)字符串，我們不需要編寫 for 循環(huán)。
執(zhí)行此操作需要 3 個(gè)步驟：
- 將字符串拆分為數(shù)組
- 反轉(zhuǎn)數(shù)組
- 將數(shù)組轉(zhuǎn)換為字符串
這 3 個(gè)步驟需要利用 3 種不同的內(nèi)置方法，如下所示：
const author = "Yang Zhou";
const reversedAuthor = author.split("").reverse().join("");
console.log(reversedAuthor);
// uohZ gnaY這是一句不錯(cuò)的俏皮話，但說實(shí)話，JS 反轉(zhuǎn)字符串的方式并不像 Python 那樣優(yōu)雅。由于其優(yōu)美的切片語法，Python 可以更簡(jiǎn)潔地完成同樣的事情：
author = 'Yang Zhou'
reversed_author = author[::-1]
print(reversed_author)
# uohZ gnaY順便說一句，檢查 JavaScript 字符串是否為回文的一個(gè)簡(jiǎn)單方法是將字符串與其反轉(zhuǎn)版本進(jìn)行比較：
const author = 'YangnaY'
const isPalindrome = author.split("").reverse().join("") === author
console.log(isPalindrome)
// true8.快速計(jì)算數(shù)組中的元素
如何計(jì)算 JavaScript 數(shù)組中的每個(gè)元素？
使用for循環(huán)一項(xiàng)一項(xiàng)地遍歷項(xiàng)目并在此過程中對(duì)它們進(jìn)行計(jì)數(shù)？
這是一個(gè)解決方案，但根本不是一個(gè)優(yōu)雅的解決方案。我想說 lodash 是一個(gè)超級(jí)有用的 JS 庫(kù)：
const _ = require('lodash');
const author = ['Y', 'a', 'a', 'a', 'n', 'n', 'g', 'g', 'g', 'g']
console.log(_.countBy(author))
// { Y: 1, a: 3, n: 2, g: 4 }如果你不想使用第三方庫(kù)，自己實(shí)現(xiàn)類似的功能并不難：
const countBy = (arr) => {
let count = {};
arr.forEach((e) => {
count[e] = (count[e] || 0) + 1;
});
return count;
}
const author = ['Y', 'a', 'a', 'a', 'n', 'n', 'g', 'g', 'g', 'g']
const charCount = countBy(author);
console.log(charCount);
// { Y: 1, a: 3, n: 2, g: 4 }如果您只需要計(jì)算一個(gè)特定項(xiàng)目，則 filter() 方法是一個(gè)不錯(cuò)的選擇：
const author = ['Y', 'a', 'a', 'a', 'n', 'n', 'g', 'g', 'g', 'g']
// Filter all elements equal to 'a' and return the length (count)
const countOfa = author.filter(x => x === 'a').length
console.log(countOfa)
// 39. 使用逗號(hào)運(yùn)算符簡(jiǎn)化代碼
由于逗號(hào)運(yùn)算符的語法，逗號(hào)在 JavaScript 中更加強(qiáng)大。
逗號(hào) (,) 運(yùn)算符計(jì)算每個(gè)表達(dá)式（從左到右）并返回最后一個(gè)表達(dá)式的值。如果你能熟練地利用它的力量，這對(duì)簡(jiǎn)化你的代碼將會(huì)非常有幫助。
例如，以下程序演示了如何利用逗號(hào)運(yùn)算符通過一行代碼實(shí)現(xiàn)兩個(gè)不同的目的：
let sum = 0;
const squares = [1, 2, 3, 4, 5].map((x) => (sum += x, x * x));
console.log(squares);
// [1, 4, 9, 16, 25]
console.log(sum);
// 15鑒于逗號(hào)運(yùn)算符始終返回最后一個(gè)表達(dá)式的結(jié)果，我們可以利用此功能來避免編寫許多 return 關(guān)鍵字。
例如，以下代碼的 get_author() 函數(shù)返回更改后的 arr：
const get_author = arr => {
arr.push('g')
return arr
}
console.log(get_author(['Y','a','n']))
// [ 'Y', 'a', 'n', 'g' ]這是讓逗號(hào)運(yùn)算符炫耀的最佳場(chǎng)景：
const get_author = arr => (arr.push('g'), arr)
console.log(get_author(['Y', 'a', 'n']))
// [ 'Y', 'a', 'n', 'g' ]以上就是我今天與您分享的全部?jī)?nèi)容，希望您會(huì)喜歡。
最后，感謝您的閱讀，祝編程愉快！
