當(dāng)前位置：首頁(yè) > 科技 > 軟件

九個(gè)實(shí)用的 JavaScript 技巧

來(lái)源：責(zé)編：時(shí)間：2023-08-14 22:01:21 388觀看

導(dǎo)讀JavaScript 的最初目的是為網(wǎng)站添加一些功能的簡(jiǎn)單語(yǔ)言。令人驚訝的是，如今它無(wú)處不在，而且更加復(fù)雜。隨著 Web 應(yīng)用程序變得越來(lái)越復(fù)雜，JavaScript 也發(fā)展得如此之快。編寫(xiě)簡(jiǎn)潔、可讀且可維護(hù)的 JavaScript 程序不再像

JavaScript 的最初目的是為網(wǎng)站添加一些功能的簡(jiǎn)單語(yǔ)言。令人驚訝的是，如今它無(wú)處不在，而且更加復(fù)雜。

隨著 Web 應(yīng)用程序變得越來(lái)越復(fù)雜，JavaScript 也發(fā)展得如此之快。編寫(xiě)簡(jiǎn)潔、可讀且可維護(hù)的 JavaScript 程序不再像以前那么容易了。

本文將總結(jié) 9 個(gè)實(shí)用的 JavaScript 技巧，幫助您編寫(xiě)更好的前端代碼，感受這種優(yōu)雅編程語(yǔ)言的美妙之處。

現(xiàn)在，讓我們一起來(lái)看看吧。

1. 以 JavaScript 方式打破嵌套循環(huán)

許多編程語(yǔ)言都有用于跳出循環(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            }        }    }}

在其他語(yǔ)言中，您可能需要將布爾變量聲明為外部循環(huán)的“flags”，并在進(jìn)入相應(yīng)循環(huán)時(shí)檢查中斷的“標(biāo)志”。此方法有效，但如果有很多布爾標(biāo)志，會(huì)使您的代碼有點(diǎn)混亂。

JavaScript 針對(duì)這種場(chǎng)景提供了語(yǔ)法級(jí)的解決方案——label。

您可以使用標(biāo)簽來(lái)標(biāo)識(shí)循環(huán)，然后參考該標(biāo)簽來(lái)打破相應(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)。無(wú)需將其他變量聲明為“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} = leadersconsole.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ù)類(lèi)型是通過(guò)引用傳遞的。

因此，如下例所示，更改“新”數(shù)組也會(huì)更改原始數(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() 方法

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è)專門(mén)設(shè)計(jì)的方法來(lái)進(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' }

這種類(lèi)型的復(fù)制實(shí)際上稱為淺復(fù)制，這意味著它只有一層深。它僅復(fù)制元素的引用，而不復(fù)制元素本身。因此，如果元素是對(duì)象或數(shù)組，復(fù)制的數(shù)組仍將引用相同的對(duì)象或數(shù)組。

例如，如果數(shù)組 a 包含一個(gè)內(nèi)部數(shù)組（兩級(jí)深），則淺拷貝無(wú)法真正復(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ì)象。此過(guò)程有效且優(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'])// undefined

obj['func'] 的值是一個(gè)函數(shù)。它不能再通過(guò) 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 中編寫(xiě)上述代碼的慣用方法如下：

使用 forEach() 方法

forEach 方法非常適合迭代數(shù)組的元素：

const author = [ 'Y', 'a', 'n', 'g' ];author.forEach((c)=>{console.log(c)})// Y// a// n// g

使用map()函數(shù)

如果您閱讀開(kāi)源 JavaScript 程序，您可能會(huì)遇到 map() 函數(shù)。它是 JavaScript 中最流行的方法之一：

const author = [ 'Y', 'a', 'n', 'g' ];author.map((c)=>{console.log(c)})// Y// a// n// g

map() 函數(shù)的行為與 forEach() 基本相似，但有一個(gè)顯著差異：

map() 方法返回一個(gè)與原始數(shù)組長(zhǎng)度相同的新數(shù)組，其中每個(gè)元素都是對(duì)相應(yīng)元素調(diào)用函數(shù)的結(jié)果。原始數(shù)組保持不變。forEach() 方法不返回任何內(nèi)容。

以下代碼說(shuō)明了如何使用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' ]

但是，我們無(wú)法使用 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' ]

使用 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...”語(yǔ)法也能夠?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// g

6. 刪除數(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 ]

如上面的程序所示，我們可以利用展開(kāi)運(yùn)算符和 Set() 方法來(lái)方便地獲取數(shù)組的唯一元素。

7. 用一行代碼反轉(zhuǎn)字符串

要在 JavaScript 中反轉(zhuǎn)字符串，我們不需要編寫(xiě) 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ò)的俏皮話，但說(shuō)實(shí)話，JS 反轉(zhuǎn)字符串的方式并不像 Python 那樣優(yōu)雅。由于其優(yōu)美的切片語(yǔ)法，Python 可以更簡(jiǎn)潔地完成同樣的事情：

author = 'Yang Zhou'reversed_author = author[::-1]print(reversed_author)# uohZ gnaY

順便說(shuō)一句，檢查 JavaScript 字符串是否為回文的一個(gè)簡(jiǎn)單方法是將字符串與其反轉(zhuǎn)版本進(jìn)行比較：

const author = 'YangnaY'const isPalindrome = author.split("").reverse().join("") === authorconsole.log(isPalindrome)// true

8.快速計(jì)算數(shù)組中的元素

如何計(jì)算 JavaScript 數(shù)組中的每個(gè)元素？

使用for循環(huán)一項(xiàng)一項(xiàng)地遍歷項(xiàng)目并在此過(guò)程中對(duì)它們進(jìn)行計(jì)數(shù)？

這是一個(gè)解決方案，但根本不是一個(gè)優(yōu)雅的解決方案。我想說(shuō) 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)類(lèi)似的功能并不難：

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

9. 使用逗號(hào)運(yùn)算符簡(jiǎn)化代碼

由于逗號(hào)運(yùn)算符的語(yǔ)法，逗號(hào)在 JavaScript 中更加強(qiáng)大。

逗號(hào) (,) 運(yùn)算符計(jì)算每個(gè)表達(dá)式（從左到右）并返回最后一個(gè)表達(dá)式的值。如果你能熟練地利用它的力量，這對(duì)簡(jiǎn)化你的代碼將會(huì)非常有幫助。

例如，以下程序演示了如何利用逗號(hào)運(yùn)算符通過(guò)一行代碼實(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é)果，我們可以利用此功能來(lái)避免編寫(xiě)許多 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ì)喜歡。

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

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇：破解代碼：每個(gè)Web開(kāi)發(fā)者都應(yīng)該知道的七個(gè)秘密

下一篇：使用Python從頭開(kāi)始構(gòu)建決策樹(shù)算法

標(biāo)簽：

熱門(mén)焦點(diǎn)

盧偉冰長(zhǎng)文解析K60至尊版對(duì)Redmi有著里程碑式的意義

在今天的Redmi后性能時(shí)代戰(zhàn)略發(fā)布會(huì)結(jié)束之后，Redmi總經(jīng)理盧偉冰又帶來(lái)了一篇長(zhǎng)文，詳解了為什么 Redmi 要開(kāi)啟后性能時(shí)代？為什么選擇和 MediaTek、Pixelworks 深度合作？以及后性
對(duì)標(biāo)蘋(píng)果的靈動(dòng)島華為帶來(lái)實(shí)況窗功能

繼蘋(píng)果的靈動(dòng)島之后，華為也在今天正式推出了“實(shí)況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場(chǎng)演示顯示，華為的實(shí)況窗可以更高效的展現(xiàn)出實(shí)時(shí)通知，比如鎖屏上就能看到外賣(mài)、打車(chē)、銀行
vivo TWS Air開(kāi)箱體驗(yàn)：真輕臻好聽(tīng)

在vivo S15系列新機(jī)的發(fā)布會(huì)上，vivo的最新款真無(wú)線藍(lán)牙耳機(jī)vivo TWS Air也一同發(fā)布，本次就這款耳機(jī)新品給大家?guī)?lái)一個(gè)簡(jiǎn)單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
十個(gè)簡(jiǎn)單但很有用的Python裝飾器

裝飾器（Decorators）是Python中一種強(qiáng)大而靈活的功能，用于修改或增強(qiáng)函數(shù)或類(lèi)的行為。裝飾器本質(zhì)上是一個(gè)函數(shù)，它接受另一個(gè)函數(shù)或類(lèi)作為參數(shù)，并返回一個(gè)新的函數(shù)或類(lèi)。它們通常用
小紅書(shū)1周漲粉49W+，我總結(jié)了小白可以用的N條漲粉筆記

作者：黃河懂運(yùn)營(yíng)一條性教育視頻，被54萬(wàn)人“珍藏”是什么體驗(yàn)？最近，情感博主@公主是用鮮花做的，火了！僅僅憑借一條視頻，光小紅書(shū)就有超過(guò)128萬(wàn)人，為她瘋狂點(diǎn)贊！更瘋狂的是，這
破圈是B站頭上的緊箍咒

來(lái)源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之每年的暑期檔都少不了瞄準(zhǔn)追劇女孩們的古偶劇集，2021年有優(yōu)酷的《山河令》，2022年有愛(ài)奇藝的《蒼蘭訣》，今年卻輪到小破站抓住了追
花7萬(wàn)退貨退款無(wú)門(mén)：誰(shuí)在縱容淘寶珠寶商家造假？

來(lái)源：極點(diǎn)商業(yè)作者：楊銘在淘寶購(gòu)買(mǎi)珠寶玉石后，因?yàn)楸ＷC金不夠賠付，店鋪關(guān)閉，退貨退款難、維權(quán)無(wú)門(mén)的比比皆是。“提供相關(guān)產(chǎn)品鑒定證書(shū)，支持全國(guó)復(fù)檢，可以30天無(wú)理由退換貨。&
疑似小米14外觀設(shè)計(jì)圖曝光：后置相機(jī)模組變化不大

下半年的大幕已經(jīng)開(kāi)啟，而誰(shuí)將成為下半年手機(jī)圈的主角就成為了大家關(guān)注的焦點(diǎn)，其中被傳有望拿下新一代驍龍8 Gen3旗艦芯片的小米14系列更是備受大家矚
三星推出Galaxy Tab S9系列平板電腦以及Galaxy Watch6系列智能手表

2023年7月26日，三星電子正式發(fā)布了Galaxy Z Flip5與Galaxy Z Fold5。除此之外，Galaxy Tab S9系列平板電腦以及三星Galaxy Watch6系列智能手表也同期

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

九個(gè)實(shí)用的 JavaScript 技巧

1. 以 JavaScript 方式打破嵌套循環(huán)

2. 利用擴(kuò)展運(yùn)算符進(jìn)行解構(gòu)賦值

3. 淺復(fù)制對(duì)象或數(shù)組的幾種方法

使用 slice() 方法

使用擴(kuò)展運(yùn)算符

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

使用 concat() 方法

4. 使用 JSON 技巧進(jìn)行深度復(fù)制

5. 熟練地實(shí)現(xiàn)For循環(huán)

使用 forEach() 方法

使用map()函數(shù)

使用 for...of... 結(jié)構(gòu)

使用 for...in... 結(jié)構(gòu)

6. 刪除數(shù)組重復(fù)值的最快方法

7. 用一行代碼反轉(zhuǎn)字符串

8.快速計(jì)算數(shù)組中的元素

9. 使用逗號(hào)運(yùn)算符簡(jiǎn)化代碼

盧偉冰長(zhǎng)文解析K60至尊版對(duì)Redmi有著里程碑式的意義

對(duì)標(biāo)蘋(píng)果的靈動(dòng)島華為帶來(lái)實(shí)況窗功能

vivo TWS Air開(kāi)箱體驗(yàn)：真輕臻好聽(tīng)

十個(gè)簡(jiǎn)單但很有用的Python裝飾器

小紅書(shū)1周漲粉49W+，我總結(jié)了小白可以用的N條漲粉筆記

破圈是B站頭上的緊箍咒

花7萬(wàn)退貨退款無(wú)門(mén)：誰(shuí)在縱容淘寶珠寶商家造假？

疑似小米14外觀設(shè)計(jì)圖曝光：后置相機(jī)模組變化不大

三星推出Galaxy Tab S9系列平板電腦以及Galaxy Watch6系列智能手表

最新推薦

猜你喜歡

熱門(mén)推薦

相關(guān)資訊