記錄--你可能忽略的10種JavaScript快樂寫法

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

• 代碼的簡潔、美感、可讀性等等也許不影響程式的執行，但是卻對人（開發者）的影響非常之大，甚至可以說是影響開發者幸福感的重要因素之一；
• 了解一些有美感的代碼，不僅可以在一定程度上提高程式員們的開發效率，有些還能提高代碼的性能，可謂是一舉多得；

筆者至今難以忘記最開始踏入程式員領域時接觸的一段List內嵌for的Python代碼：

array = [[16, 3, 7], [2, 24, 9], [4, 1, 12]]
row_min = [min(row) for row in array ]
print(row_min)

這可能就是動態語言非常優秀的一點，而JavaScript同樣作為動態語言，其中包含的優秀代碼片段也非常之多，比如我們通過JavaScript也可以非常輕松地實作上述的功能：

const array = [[16, 3, 7], [2, 24, 9], [4, 1, 12]]
const row_min = array.map(item => Math.min(...item))
console.log(row_min)

能寫出優秀的代碼一直是筆者所追求的，以下為筆者在開發閱讀程序積累的一些代碼片段以及收集了互聯網上一些優秀代碼片段，希望對你有所幫助

概述

這里，考慮到有些技巧是大家見過的或者說是已經爛熟于心的，但總歸有可能有些技巧沒有留意過，為了讓大家更加清楚的找到自己想要查閱的內容以查漏補缺，所以這里筆者貼心地為大家提供了一張本文內容的索引表，供大家翻閱以快速定位，如下：

陣列去重

這不僅是我們平常撰寫代碼時經常會遇到的一個功能實作之一，也是許多面試官在考查JavaScript基礎時喜歡考查的題目，比較常見的基本有如下兩類方法：

1）通過內置資料結構自身特性進行去重

主要就是利用JavaScript內置的一些資料結構帶有不包含重復值的特性，然后通過兩次資料結構轉換的消耗[] => set => []從而達到去重的效果，如下演示：

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go'];
const uniqueArr = Array.from(new Set(arr));
// const uniqueArr = [...new Set(arr)];

2）通過遍歷并判斷是否存在進行去重

白話描述就是：通過遍歷每一項元素加入新陣列，新陣列存在相同的元素則放棄加入，偽代碼：[many items].forEach(item => (item <不存在于> uniqueArr) && uniqueArr.push(item))

至于上述的<不存在于>操作，可以是各種各樣的方法，比如再開一個for回圈判斷新陣列是否有相等的，或者說利用一些陣列方法判斷，如indexOf、includes、filter、reduce等等

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go'];
const uniqueArr = [];
arr.forEach(item => {
	// 或者!uniqueArr.includes(item)
	if(uniqueArr.indexOf(item) === -1){
		uniqueArr.push(item)
	}
})

結合filter()，判斷正在遍歷的項的index，是否是原始陣列的第一個索引：

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go'];
const uniqueArr = arr.filter((item, index) => {
	return arr.indexOf(item, 0) === index;
})

結合reduce()，prev初始設為[]，然后依次判斷cur是否存在于prev陣列，如果存在則加入，不存在則不動：

const arr = ['justin1go', 'justin2go', 'justin2go', 'justin3go', 'justin3go', 'justin3go'];
const uniqueArr = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);

陣列的最后一個元素

對于獲取陣列的最后一個元素，可能平常見得多的就是arr[arr.length - 1]，我們其實可以使用at()方法進行獲取

const arr = ['justin1go', 'justin2go', 'justin3go'];
console.log(arr.at(-1)) // 倒數第一個值
console.log(arr.at(-2)) // 倒數第二個值
console.log(arr.at(0)) // 正數第一個  
console.log(arr.at(1)) // 正數第二個

注：node14應該是不支持的，目前筆者并不建議使用該方法，但獲取陣列最后一個元素是很常用的，就應該像上述語法一樣簡單...

陣列物件的相互轉換

• 相信大家比較熟悉的是從物件轉換為陣列的幾種方法如：Object.keys()、Object.values()、Object.entries；
• 但其實還可以通過Object.fromEntries()將一個特定陣列轉換回物件：

    const entryified = [
        ["key1", "justin1go"],
        ["key2", "justin2go"],
        ["key3", "justin3go"]
    ];

    const originalObject = Object.fromEntries(entryified);
    console.log(originalObject);

短路操作

被合理運用的短路操作不僅非常的優雅，還能減少不必要的計算操作

1）基本介紹

主要就是||或操作、&&且操作當第一個條件（左邊那個）已經能完全域定整個運算式的值的時候，編譯器就會跳過該運算式后續的計算

• 或操作a || b：該操作只要有一個條件為真值時，整個運算式就為真；即a為真時，b不執行；
• 且操作a && b：該操作只要有一個條件為假值時，整個運算式就為假；即a為假時，b不執行；

2）實體

網路傳輸一直是前端的性能瓶頸，所以我們在做一些判斷的時候，可以通過短路操作減少請求次數：

const nextStep = isSkip || await getSecendCondition();
if(nextStep) {
	openModal();
}

還有一個經典的代碼片段：

function fn(callback) {
	// some logic
	callback && callback()
}

基于默認值的物件賦值

• 很多時候，我們在封裝一些函式或者類時，會有一些配置引數，
• 但這些配置引數通常來說會給出一個默認值，而這些配置引數用戶是可以自定義的
• 除此之外，還有許許多多的場景會用到的這個功能：基于默認值的物件賦值，

function fn(setupData) {
	const defaultSetup = {
		email: "[email protected]",
		userId: "justin3go",
		skill: "code",
		work: "student"
	}
	return { ...defaultSetup, ...setupData }
}

const testSetData = https://www.cnblogs.com/smileZAZ/archive/2023/03/31/{ skill:"sing" }
console.log(fn(testSetData))

如上{ ...defaultSetup, ...setupData }就是后續的值會覆寫前面key值相同的值，

多重條件判斷優化

if(condtion === "justin1go" || condition === "justin2go" || condition === "justin3go"){
	// some logic
}

如上，當我們對同一個值需要對比不同值的時候，我們完全可以使用如下的編碼方式簡化寫法并降低耦合性：

const someConditions = ["justin1go", "justin2go", "justin3go"];
if(someConditions.includes(condition)) {
	// some logic
}

交換兩個值

一般來說，我們可以增加一個臨時變數來達到交換值的操作，在Python中是可以直接交換值的：

a = 1
b = 2
a, b = b, a

而在JS中，也可以通過解構操作交換值；

let a = 1;
let b = 2;
[a, b] = [b, a]

簡單理解一下：

• 這里相當于使用了一個陣列物件同時存盤了a和b，該陣列物件作為了臨時變數
• 之后再將該陣列物件通過解構操作賦值給a和b變數即可

同時，還有種比較常見的操作就是交換陣列中兩個位置的值：

const arr = ["justin1go", "justin2go", "justin3go"];
[arr[0], arr[2]] = [arr[2], arr[0]]

位運算

關于位運算網上的討論參差不齊，有人說位運算性能好，簡潔；也有人說位運算太過晦澀難懂，不夠易讀，這里筆者不發表意見，僅僅想說的是盡量在使用位運算代碼的時候寫好注釋！

下面為一些常見的位運算操作，參考鏈接

1 ) 使用&運算子判斷一個數的奇偶

// 偶數 & 1 = 0
// 奇數 & 1 = 1
console.log(2 & 1)    // 0
console.log(3 & 1)    // 1

2 ) 使用~, >>, <<, >>>, |來取整

console.log(~~ 6.83)    // 6
console.log(6.83 >> 0)  // 6
console.log(6.83 << 0)  // 6
console.log(6.83 | 0)   // 6
// >>>不可對負數取整
console.log(6.83 >>> 0)   // 6

3 ) 使用^來完成值交換

var a = 5
var b = 8
a ^= b
b ^= a
a ^= b
console.log(a)   // 8
console.log(b)   // 5

4 ) 使用&, >>, |來完成rgb值和16進制顏色值之間的轉換

/**
 * 16進制顏色值轉RGB
 * @param  {String} hex 16進制顏色字串
 * @return {String}     RGB顏色字串
 */
  function hexToRGB(hex) {
    var hexx = hex.replace('#', '0x')
    var r = hexx >> 16
    var g = hexx >> 8 & 0xff
    var b = hexx & 0xff
    return `rgb(${r}, ${g}, ${b})`
}

/**
 * RGB顏色轉16進制顏色
 * @param  {String} rgb RGB進制顏色字串
 * @return {String}     16進制顏色字串
 */
function RGBToHex(rgb) {
    var rgbArr = rgb.split(/[^\d]+/)
    var color = rgbArr[1]<<16 | rgbArr[2]<<8 | rgbArr[3]
    return '#'+ color.toString(16)
}
// -------------------------------------------------
hexToRGB('#ffffff')               // 'rgb(255,255,255)'
RGBToHex('rgb(255,255,255)')      // '#ffffff'

replace()的回呼函式

之前寫過一篇文章介紹了它，這里就不重復介紹了，F=>傳送

sort()的回呼函式

sort()通過回呼函式回傳的正負情況來定義排序規則，由此，對于一些不同型別的陣列，我們可以自定義一些排序規則以達到我們的目的：

• 數字升序：arr.sort((a,b)=>a-b)
• 按字母順序對字串陣列進行排序：arr.sort((a, b) => a.localeCompare(b))
• 根據真偽值進行排序：

const users = [
  { "name": "john", "subscribed": false },
  { "name": "jane", "subscribed": true },
  { "name": "jean", "subscribed": false },
  { "name": "george", "subscribed": true },
  { "name": "jelly", "subscribed": true },
  { "name": "john", "subscribed": false }
];

const subscribedUsersFirst = users.sort((a, b) => Number(b.subscribed) - Number(a.subscribed))

本文轉載于:

https://juejin.cn/post/7203243879255277623

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：react 入門

下一篇：background中的cover與contain的區別