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