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

来源:https://www.cnblogs.com/smileZAZ/archive/2023/03/31/17277094.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 代碼的簡潔、美感、可讀性等等也許不影響程式的執行,但是卻對人(開發者)的影響非常之大,甚至可以說是影響開發者幸福感的重要因素之一; 瞭解一些有美感的代碼,不僅可以在一定程度上提高程式員們的開發效率,有些還能提高代碼的性能,可謂是一舉 ...


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

前言

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

筆者至今難以忘記最開始踏入程式員領域時接觸的一段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)

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

概述

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

應用場景標題描述補充1補充2
數組去重 通過內置數據解構特性進行去重[] => set => [] 通過遍歷並判斷是否存在進行去重[many items].forEach(item => (item <不存在於> uniqueArr) && uniqueArr.push(item))
數組的最後一個元素 獲取數組中位置最後的一個元素 使用at(-1)
數組對象的相關轉換 對象到數組:Object.entries() 數組到對象:Obecjt.fromEntries()
短路操作 通過短路操作避免後續表達式的執行 a或b:a真b不執行 a且b:a假b不執行
基於預設值的對象賦值 通過對象解構合併進行帶有預設值的對象賦值操作 {...defaultData, ...data}
多重條件判斷優化 單個值與多個值進行對比判斷時,使用includes進行優化 [404,400,403].includes
交換兩個值 通過對象解構操作進行簡潔的雙值交換 [a, b] = [b, a]
位運算 通過位運算提高性能和簡潔程度
replace()的回調 通過傳入回調進行更加細粒度的操作
sort()的回調 通過傳入回調進行更加細粒度的操作 根據字母順序排序 根據真假值進行排序

數組去重

這不僅是我們平常編寫代碼時經常會遇到的一個功能實現之一,也是許多面試官在考查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迴圈判斷新數組是否有相等的,或者說利用一些數組方法判斷,如indexOfincludesfilterreduce等等

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應該是不支持的,目前筆者並不建議使用該方法,但獲取數組最後一個元素是很常用的,就應該像上述語法一樣簡單...

數組對象的相互轉換

    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 = { 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

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 當前,數據對金融機構業務和發展的重要性日益凸顯,釋放數據生產力已經成為金融機構進行全面數字化轉型的核心,這就要求金融機構以數據資產為綱不斷提升自身數據資產管理能力。 本期DTALK我們邀請到雅拓信息解決方案專家 尹曉中,為大家帶來《數據資產管理——金融機構數據價值釋放的必經之路》。 分享大綱劇透: ...
  • 本次需求場景主要為實現將flinksql中collect()函數輸出的Mutiset(VARCHAR<100>)多行結果轉換為字元串。 一、FlinkSQL自定義函數分類 Flink SQL 的自定義函數是用戶可以自行編寫的一種函數,用於擴展 Flink SQL 的功能。自定義函數可以在 SQL 查 ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: JennyYu 文章來源:GreatSQL社區投稿 背景 接到客戶訴求說一條SQL長時間運行不出結果,讓給看看怎麼回事,SQL不複雜,優化措施也 ...
  • 1. 針對相同的表進行的連接 1.1. 相同的表的自連接和不同表間的普通連接並沒有什麼區別,自連接里的“自”這個詞也沒有太大的意義 1.2. 與多表之間進行的普通連接相比,自連接的性能開銷更大 1.2.1. 特別是與非等值連接結合使用的時候 1.2.2. 用於自連接的列推薦使用主鍵或者在相關列上建立 ...
  • 說明 有讀者反饋: 學習uniapp ios 插件開發不知道從哪些文章看起,沒有一個清晰的學習路線 本文就做一個解答。 首先本系列的文章是作者精心排過序的,如果想要完整的學習uniapp ios原生插件開發技術的話,建議是按文章順序瀏覽。 當然您如果有相關的開發經驗,且只對某一技術實現感興趣的話,也 ...
  • Discovery第18期直播已於3月30日圓滿結束,本期直播邀請天眼查做客直播間,從天眼查與華為Push用戶增長服務合作歷程切入,聚焦用戶增長,分享提升應用活躍度和渠道ROI的經驗與見解。一起來回顧本期精彩內容吧! 【精彩對話】 Q1: 天眼查為什麼選擇華為Push用戶增長服務實現拉新、促活和轉化 ...
  • background中的cover與contain的區別 contain:將圖片縮放至寬度或者高度能夠完全適應容器,並且保持圖片寬高比不變。如果容器寬高比與圖片寬高比不同,則容器會留白,不會出現圖片的裁剪。例如,對於一個寬度為200px、高度為200px的容器,背景圖片使用background-si ...
  • 好家伙, 現在,我想要把我的飛機大戰塞到我的主頁里去,想辦法把文件導入 然後,直接死在第一步,圖片渲染都成問題 先用vue寫一個測試文件 來測試canvas的繪製 <template> <div> <div ref="stage"></div> <button @click="drawsth()"> ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...