17個(gè)每個(gè)開發(fā)人員都應(yīng)該知道的頂級 JavaScript 技巧
英文 | https://levelup.gitconnected.com/17-clever-javascript-tricks-that-every-developer-should-use-e7f299e49896
翻譯 | 楊小二
let array = [100, 200, 200, 120, 238, 201, 201]let newArray = Array.from(new Set(array));console.log(newArray) // [ 100, 200, 120, 238, 201 ]
2、數(shù)組的最后一個(gè)元素
當(dāng)你需要獲取數(shù)組的最后一個(gè)元素時(shí)， slice 方法在 JavaScript 中非常有用。 只需將負(fù)數(shù)作為參數(shù)傳遞，它就會從最后一個(gè)索引開始對數(shù)組進(jìn)行切片。
Slice 方法的最大好處是它不會影響你的原始數(shù)組。
let array = [1, 3, 4, 5, 6, 9, 10, 12]console.log(array.slice(-1)) // [12]console.log(array.slice(-2)) // [10, 12]console.log(array.slice(-4)) // [6, 9 ,10, 12]
3、帶有“Reduce”的數(shù)組的平均值
Reduce 方法是一種非常棒的遍歷數(shù)組并獲得單個(gè)輸出的方法。 使用 Reduce 方法的一個(gè)示例是獲取數(shù)組中值的平均值。
let array = [100, 120, 150, 101, 301]let sum = array.reduce((previous, current)=> current += previous)let average = sum / array.lengthconsole.log(average) // 154.4
首先，我們聲明一個(gè)包含值的數(shù)組，然后，我們使用 Reduce 方法計(jì)算所有值的總和，最后，我們將總和除以數(shù)組的長度以獲得平均值。
4、具有唯一值的數(shù)組
擁有重復(fù)的數(shù)組對我們來說總是一個(gè)麻煩。 在 JavaScript 中，你可能使用map或filter來清除數(shù)組中的重復(fù)值。 但是我們還有另一種選擇，那就是使用Set 對象。 看看下面的例子。
let array = [1, 3, 3, 1, 2, 4, 5, 6 ,5, 2]const uniqueArray = [...new Set(array)]console.log(uniqueArray) // [1, 3, 2, 4, 5, 6]
5、縮短數(shù)組
想象一下，你有一個(gè)包含 100 個(gè)項(xiàng)目的數(shù)組，并且你想縮短它。 在 JavaScript 中，你可能會使用 splice 方法，但我將向你展示另一種截?cái)鄶?shù)組的方法。
let array = [100, 200, 300, 400, 500, 600, 700]//shortening your arrayarray.length = 4console.log(array) // [100, 200, 300, 400]
6、將對象與擴(kuò)展方法結(jié)合
假設(shè)你想將多個(gè)對象合并為一個(gè)。 在 JavaScript 中，你可以使用 Spread 方法，這是實(shí)現(xiàn)此目的的好方法。 在下面的示例代碼中，我使用 spread 方法組合了兩個(gè)對象。
示例如下：
let object1 = {'a' : 1, 'b' : 2, 'c': 3}let object2 = {'d' : 4, 'e' : 5}//combining the objectsconst combine = {...object1 , ...object2}console.log(combine) // {'a' : 1, 'b' : 2, 'c': 3, 'd' : 4, 'e' : 5}
7、在數(shù)組中查找索引
假設(shè)你必須找到數(shù)組中特定元素的索引。 你可能會為此使用 findindex() 方法。 但是，在這個(gè)技巧中，我將向你展示另一種以更有效的方式完成相同工作的方法。
let array = [1, 4, 78, 90, 23, 123, 100, 230]//IndexOf Methodconsole.log(array.indexOf(123)) // 5console.log(array.indexOf(23)) // 4console.log(array.indexOf(1)) // 0
8、展平數(shù)組
你是否有一個(gè)大型二維數(shù)組并想將其展平以制作單個(gè)一維數(shù)組？ 這個(gè)技巧可能會對你有所幫助。 查看下面的示例代碼。
let array = [1, 2, [3, 4], [5, 6, 7, ]];const newArray = array.flat()console.log(newArray) // [1, 2, 3, 4, 5, 6, 7]
9、以好的方式交換值
我敢打賭，你們中的許多新 JavaScript 程序員或任何語言程序員都曾使用變量 temp 在兩個(gè)值之間交換。
但是我將向你展示如何在不使用臨時(shí)變量或第三方變量的情況下交換它們。
let a = 5;let b = 7;console.log(a, b); // 5 7[a, b] = [b, a];console.log(a, b); // 7 5
10、用隨機(jī)范圍內(nèi)值填充數(shù)組
const RandomIntArray = (min, max, n = 1) => Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min)RandomIntArray(5, 20, 4) // [ 8, 17, 13, 9]
11、合并兩個(gè)數(shù)組
假設(shè)你有兩個(gè)數(shù)組并且你想將它們組合起來。 此方法將幫助你快速完成此操作。
let array1 = [1, 2, 3, 4, 5, 6, 7];let array2 = [8, 9, 10, 11, 12];const merge = array1.concat(array2)console.log(merge) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
12、獲取當(dāng)前對象的類型
這個(gè)技巧將幫助你了解任何對象的類型。 假設(shè)你使用 JavaScript 從網(wǎng)站請求數(shù)據(jù)，并且你想知道你收到的數(shù)據(jù)類型是字符串、整數(shù)等。
const GetType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();console.log(GetType("Programming")) // Stringconsole.log(GetType(123)) //Integer
13、當(dāng)前網(wǎng)址
這個(gè)技巧將幫助你獲取正在運(yùn)行 Javascript 的當(dāng)前 URL。 假設(shè)你想查看你當(dāng)前看到的網(wǎng)頁的網(wǎng)址，那么你可以使用下面的代碼。
let GetCurrentURL = () => window.location.href;GetCurrentURL() //https://medium.com/
14、計(jì)算數(shù)組中出現(xiàn)的次數(shù)
假設(shè)你有很大的重復(fù)值數(shù)組，并且你想計(jì)算特定元素的出現(xiàn)次數(shù)。
const CountOcc = (array, val) => array.reduce((x, v) => (v === val ? x + 1 : x), 0);console.log(CountOcc([3, 3, 4, 1, 2, 5, 3, 6],3)) // 3console.log(CountOcc([3, 4, 4, 1, 3, 6],4)) // 2
15、錯(cuò)誤處理
在每種編程語言中，出現(xiàn)錯(cuò)誤都是一種痛苦。 這個(gè)技巧將幫助你處理 JavaScript 編程中出現(xiàn)的錯(cuò)誤。
try {try condition}catch (exception_var) {catch condition}
16、修剪空格
本技巧將指導(dǎo)你使用正則表達(dá)式修剪字符串中的空格。 當(dāng)你擁有原始數(shù)據(jù)并且想要?jiǎng)h除空格時(shí)，此提示將非常有用。
let string = " a b cd e ";let Trim = string.replace(/\s+/g, '');console.log(Trim)
17、數(shù)字化整數(shù)
本技巧將向你展示如何將任何整數(shù)轉(zhuǎn)換為數(shù)組格式。
查看下面的代碼示例。
const DigitizeInt = n => [...`${n}`].map(i => parseInt(i));DigitizeInt(4560) // [4, 5, 6, 0]DigitizeInt(131) // [1,3,1]
最后的想法
我希望你覺得這篇文章有用和有趣。 我主要閱讀 stackoverflow 和 Quora 網(wǎng)站以獲取新的 JavaScript 技巧。 隨時(shí)分享 JavaScript 的技巧和竅門。
如果你覺得這篇文章有幫助，請與你的朋友分享這篇文章。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號
