當前位置：首頁 > 科技 > 軟件

九個實用的 JavaScript 技巧

來源：責編：時間：2023-08-14 22:01:21 360觀看

導讀JavaScript 的最初目的是為網站添加一些功能的簡單語言。令人驚訝的是，如今它無處不在，而且更加復雜。隨著 Web 應用程序變得越來越復雜，JavaScript 也發展得如此之快。編寫簡潔、可讀且可維護的 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} = leadersconsole.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 = ab.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'])// undefined

obj['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// g

map() 函數的行為與 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)// undefinedconsole.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// g

6. 刪除數組重復值的最快方法

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("") === authorconsole.log(isPalindrome)// true

8.快速計算數組中的元素

如何計算 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').lengthconsole.log(countOfa)// 3

9. 使用逗號運算符簡化代碼

由于逗號運算符的語法，逗號在 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' ]

以上就是我今天與您分享的全部內容，希望您會喜歡。

最后，感謝您的閱讀，祝編程愉快！

本文鏈接：http://www.www897cc.com/showinfo-26-5735-0.html九個實用的 JavaScript 技巧

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇：破解代碼：每個Web開發者都應該知道的七個秘密

下一篇：使用Python從頭開始構建決策樹算法

標簽：

熱門焦點

6月安卓手機性價比榜：Note 12 Turbo斷層式碾壓

6月份有一個618，雖然這是京東周年慶的日子，但別的電商也都不約而同的跟進了，反正促銷沒壞處，廠商和用戶都能滿意。618期間一些產品也出現了歷史低價，那么各個價位段的產品性價比
消息稱迪士尼要拍真人版《魔發奇緣》：女主可能也找黑人演員

8月5日消息，迪士尼確實有點忙，忙著將不少動畫改成真人版，繼《美人魚》后，真人版《白雪公主》、《魔發奇緣》也在路上了。據外媒消息稱，迪士尼將打造真人版
0糖0卡0脂旭日森林仙草烏龍茶優惠：15瓶到手29元

旭日森林無糖仙草烏龍茶510ml*15瓶平時要賣為79.9元，今日下單領取50元優惠券，到手價為29.9元。產品規格：0糖0卡0脂，添加草本仙草汁，清涼爽口，富含茶多酚，保留
.NET 程序的 GDI 句柄泄露的再反思

一、背景1. 講故事上個月我寫過一篇如何洞察 C# 程序的 GDI 句柄泄露文章，當時用的是 GDIView + WinDbg 把問題搞定，前者用來定位泄露資源，后者用來定位泄露代碼，后面有朋友反
虛擬鍵盤 API 的妙用

你是否在遇到過這樣的問題：移動設備上有一個固定元素，當激活虛擬鍵盤時，該元素被隱藏在了鍵盤下方？多年來，這一直是 Web 上的默認行為，在本文中，我們將探討這個問題、為什么會發生
梁柱接棒兩年，騰訊音樂闖出新路子

文丨田靜出品丨牛刀財經（niudaocaijing）7月5日，企鵝FM發布官方公告稱由于業務調整，將于9月6日正式停止運營，這意味著騰訊音樂長音頻業務走向消亡。騰訊在長音頻領域還在摸索。為
簽約井川里予、何丹彤，單視頻點贊近千萬，MCN黑馬永恒文希快速崛起！

來源：視聽觀察永恒文希傳媒作為一家MCN公司，說起它的名字來，可能大家會覺得有點兒陌生，但是說出來下面一串的名字之后，或許大家就會感到震驚，原來這么多網紅，都簽約這家公司了。根
余承東:AI大模型技術的發展將會帶來下一代智能終端操作系統的智慧體驗

8月4日消息，2023年華為開發者大會（HDC.Together）今天正式開幕，華為發布HarmonyOS 4、全新升級的鴻蒙開發套件、HarmonyOS Next開發者預覽版本等一系列
Android 14發布：首批適配機型公布

5月11日消息，谷歌在今天凌晨舉行了I/O大會，本次發布會谷歌帶來了自家的AI語言模型PaLM 2、谷歌Pixel Fold折疊屏、谷歌Pixel 7a手機，同時發布了Androi

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

九個實用的 JavaScript 技巧

1. 以 JavaScript 方式打破嵌套循環

2. 利用擴展運算符進行解構賦值

3. 淺復制對象或數組的幾種方法

使用 slice() 方法

使用擴展運算符

使用內置的 Array.from() 方法

使用 concat() 方法

4. 使用 JSON 技巧進行深度復制

5. 熟練地實現For循環

使用 forEach() 方法

使用map()函數

使用 for...of... 結構

使用 for...in... 結構

6. 刪除數組重復值的最快方法

7. 用一行代碼反轉字符串

8.快速計算數組中的元素

9. 使用逗號運算符簡化代碼

6月安卓手機性價比榜：Note 12 Turbo斷層式碾壓

消息稱迪士尼要拍真人版《魔發奇緣》：女主可能也找黑人演員

0糖0卡0脂旭日森林仙草烏龍茶優惠：15瓶到手29元

.NET 程序的 GDI 句柄泄露的再反思

虛擬鍵盤 API 的妙用

梁柱接棒兩年，騰訊音樂闖出新路子

簽約井川里予、何丹彤，單視頻點贊近千萬，MCN黑馬永恒文希快速崛起！

余承東:AI大模型技術的發展將會帶來下一代智能終端操作系統的智慧體驗

Android 14發布：首批適配機型公布

最新推薦

猜你喜歡

熱門推薦

相關資訊