鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統(tǒng)將于今天下午正式登場，官方在發(fā)布會之前也已經(jīng)正式給出了可升級的機型產(chǎn)品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
JavaScript 的最初目的是為網(wǎng)站添加一些功能的簡單語言。令人驚訝的是，如今它無處不在，而且更加復(fù)雜。
隨著 Web 應(yīng)用程序變得越來越復(fù)雜，JavaScript 也發(fā)展得如此之快。編寫簡潔、可讀且可維護的 JavaScript 程序不再像以前那么容易了。
本文將總結(jié) 9 個實用的 JavaScript 技巧，幫助您編寫更好的前端代碼，感受這種優(yōu)雅編程語言的美妙之處。
現(xiàn)在，讓我們一起來看看吧。
許多編程語言都有用于跳出循環(huán)的break關(guān)鍵字。
然而，該關(guān)鍵字僅用于跳出當(dāng)前循環(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”，并在進入相應(yīng)循環(huán)時檢查中斷的“標志”。此方法有效，但如果有很多布爾標志，會使您的代碼有點混亂。
JavaScript 針對這種場景提供了語法級的解決方案——label。
您可以使用標簽來標識循環(huán)，然后參考該標簽來打破相應(yīng)的循環(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”。
擴展運算符是整潔 JavaScript 程序的關(guān)鍵。
let leaders = { me: "Yang", T: "Elon", A: "Tim", MS: "Bill"}let {me, ...others} = leadersconsole.log(me)// "Yang"console.log(others)// {T: "Elon", A: "Tim", MS: "Bill"}如上面的示例所示，我們使用了一個簡單的三個點的擴展運算符，將leader[“me”]的值分配給名為me的變量，并將其他鍵值對分配給數(shù)組others。
在 React 中，此技巧通常用于在構(gòu)建 UI 組件時從 props 接收多個值。
眾所周知，JavaScript 中的對象和數(shù)組等非原始數(shù)據(jù)類型是通過引用傳遞的。
因此，如下例所示，更改“新”數(shù)組也會更改原始數(shù)組：
let a = [1, 2, 3]let b = ab.push(8)console.log(a, b)// [ 1, 2, 3, 8 ] [ 1, 2, 3, 8 ]要真正將數(shù)組 a 復(fù)制到新數(shù)組 b，JavaScript 中至少有 4 種方法。
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 ]擴展運算符不僅擅長解構(gòu)賦值，還能夠從數(shù)組或?qū)ο笾薪獍椖浚?/span>
let a = [1, 2, 3]let b = [...a]b.push(8)console.log(a, b)// [ 1, 2, 3 ] [ 1, 2, 3, 8 ]事實上，有一個專門設(shè)計的方法來進行復(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() 方法用于合并兩個或多個數(shù)組。由于此方法返回一個新數(shù)組而不更改現(xiàn)有數(shù)組，因此我們也可以利用它進行復(fù)制：
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' }這種類型的復(fù)制實際上稱為淺復(fù)制，這意味著它只有一層深。它僅復(fù)制元素的引用，而不復(fù)制元素本身。因此，如果元素是對象或數(shù)組，復(fù)制的數(shù)組仍將引用相同的對象或數(shù)組。
例如，如果數(shù)組 a 包含一個內(nèi)部數(shù)組（兩級深），則淺拷貝無法真正復(fù)制它們，并且編輯數(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 ]要實現(xiàn)深度復(fù)制，一個流行的技巧是結(jié)合使用 JSON.stringify() 和 JSON.parse()。
這個想法是將對象（或數(shù)組）序列化為 JSON 格式的字符串，然后將其解析回新對象。此過程有效且優(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ù)簡單情況下都很有用。但是，我們需要知道，要使該方法有效，對象必須是 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 技巧進行復(fù)制。
在這種情況下，我們可以利用一個著名的第三方 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í)行。
如果您仍在 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 方法非常適合迭代數(shù)組的元素：
const author = [ 'Y', 'a', 'n', 'g' ];author.forEach((c)=>{console.log(c)})// Y// a// n// g如果您閱讀開源 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ù)組，其中每個元素都是對相應(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)// undefinedconsole.log(author)// [ 'Y', 'a', 'n', 'g' ]ES6 是 JavaScript 的一個里程碑。這個版本引入了許多好的功能?！癴or...of...”方法就是其中之一。
const author = [ 'Y', 'a', 'n', 'g' ];for (let char of author){ console.log(char);}// Y// a// n// g“for...in...”語法也能夠?qū)崿F(xiàn)與我們相同的功能。但我們應(yīng)該注意“for…in…”和“for…of…”之間的區(qū)別。下面的代碼片段對此進行了解釋：
const author = [ 'Y', 'a', 'n', 'g' ];for (let idx in author){ console.log(author[idx]);}// Y// a// n// gES6 為 JavaScrip 引入了一種新的數(shù)據(jù)結(jié)構(gòu)——集合。集合是唯一的項目的集合。
由于集合的特性，它使得刪除數(shù)組的重復(fù)值變得更加簡單。
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ù)組的唯一元素。
要在 JavaScript 中反轉(zhuǎn)字符串，我們不需要編寫 for 循環(huán)。
執(zhí)行此操作需要 3 個步驟：
這 3 個步驟需要利用 3 種不同的內(nèi)置方法，如下所示：
const author = "Yang Zhou";const reversedAuthor = author.split("").reverse().join("");console.log(reversedAuthor);// uohZ gnaY這是一句不錯的俏皮話，但說實話，JS 反轉(zhuǎn)字符串的方式并不像 Python 那樣優(yōu)雅。由于其優(yōu)美的切片語法，Python 可以更簡潔地完成同樣的事情：
author = 'Yang Zhou'reversed_author = author[::-1]print(reversed_author)# uohZ gnaY順便說一句，檢查 JavaScript 字符串是否為回文的一個簡單方法是將字符串與其反轉(zhuǎn)版本進行比較：
const author = 'YangnaY'const isPalindrome = author.split("").reverse().join("") === authorconsole.log(isPalindrome)// true如何計算 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').lengthconsole.log(countOfa)// 3由于逗號運算符的語法，逗號在 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鑒于逗號運算符始終返回最后一個表達式的結(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' ]這是讓逗號運算符炫耀的最佳場景：
const get_author = arr => (arr.push('g'), arr)console.log(get_author(['Y', 'a', 'n']))// [ 'Y', 'a', 'n', 'g' ]以上就是我今天與您分享的全部內(nèi)容，希望您會喜歡。
最后，感謝您的閱讀，祝編程愉快！
本文鏈接：http://www.tebozhan.com/showinfo-26-5735-0.html九個實用的 JavaScript 技巧
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號