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