記錄工作中常用的 JS 數組相關操作

来源:https://www.cnblogs.com/fx67ll/p/18235863/js-array-work
-Advertisement-
Play Games

工作中難免會遇到各種各樣的數據結構，較為全面的瞭解數組操作，對於複雜數據結構的處理會非常有用且節省時間。所以想在這裡總結一下工作中常用的數組操作，都是一些非常基礎的知識，大家看個樂就好~ ...


工作中難免會遇到各種各樣的數據結構，較為全面的瞭解數組操作，對於複雜數據結構的處理會非常有用且節省時間

所以想在這裡總結一下工作中常用的數組操作，都是一些非常基礎的知識，大家看個樂就好~

目錄

工作中常用的數組方法

  1. push() - 向數組的末尾添加一個或多個元素，並返回新的長度。
  2. pop() - 刪除數組的最後一個元素並返回該元素。
  3. shift() - 刪除數組的第一個元素並返回該元素，數組中的其他元素向前移動。
  4. unshift() - 向數組的開頭添加一個或多個元素，並返回新的長度。
  5. slice() - 返回數組的一個片段或子數組。
  6. splice() - 用於插入、刪除或替換數組的元素。
  7. map() - 創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數後的返回值。
  8. filter() - 創建一個新數組，包含通過所提供函數實現的測試的所有元素。
  9. reduce() - 對累加器和數組中的每個元素（從左到右）應用一個函數，將其減少為單個值。
  10. forEach() - 對數組的每個元素執行一次提供的函數。
  11. find() - 返回數組中滿足提供的測試函數的第一個元素的值，否則返回 undefined。
  12. findIndex() - 返回數組中滿足提供的測試函數的第一個元素的索引，否則返回 -1。
  13. sort() - 對數組的元素進行排序，並返回數組。
  14. reverse() - 顛倒數組中元素的順序。
  15. concat() - 用於合併兩個或多個數組。
  16. join() - 把數組的所有元素放入一個字元串。
  17. includes() - 判斷一個數組是否包含一個指定的值，根據情況返回 true 或 false。
  18. some() - 測試數組中是不是至少有一個元素通過了被提供的函數測試。
  19. every() - 測試一個數組內的所有元素是否都能通過某個指定函數的測試。

常見數組方法中的用法、以及坑

slice() 和 splice() 方法之間有什麼區別

  • slice()方法返回數組的一個副本，從開始到結束（不包括結束），不改變原數組。
  • splice()方法通過刪除或替換現有元素或添加新元素來修改數組，並返回被修改的元素數組。在需要同時對數組進行元素的刪除和添加操作時非常有用。

如何合併兩個數組

  • 可以使用concat()方法或者展開運算符（...）。例如，arr1.concat(arr2)或[...arr1, ...arr2]。
  • concat()：用於合併多個數組成一個新數組，常用於不改變原數組的情況下創建新的數組集合。

slice()、concat()、[...arr] 方法返回的數組是淺拷貝還是深拷貝

使用slice()或[...arr]是淺拷貝操作。淺拷貝是指只複製對象的第一層屬性，如果屬性是引用類型，複製的是引用。

如何有效地搜索數組中的元素

  • 使用indexOf()或includes()來檢查元素是否存在。
  • 使用find()或findIndex()來查找符合條件的元素或其索引。
  • 這些方法都會在找到符合條件的第一個元素後停止搜索。

如何使用reduce()方法

  • reduce()方法對數組中的每個元素執行一個由您提供的reducer函數（升序執行），將其結果彙總為單個返回值。
  • 例如，計算數組所有值的總和：array.reduce((acc, val) => acc + val, 0)。

sort() 方法是否可以對純數字數組進行正確的排序

  • sort() 方法可以用來按數字大小排序數組中的數字。
  • 在JavaScript中，如果直接使用 sort() 方法而不提供比較函數，它預設會將數組元素轉換成字元串，然後按照字元串的Unicode字典順序進行排序。
  • 這種預設行為對於數字排序通常是不正確的，特別是當數字的位數不一致時。
let numbers = [10, 5, 100, 2, 1000];
numbers.sort();
console.log(numbers); // 輸出: [10, 100, 1000, 2, 5]

sort() 方法如何進行自定義排序

在JavaScript中，Array.prototype.sort() 方法可以接受一個可選的比較函數作為參數，用來定義數組元素的排序方式。
這個比較函數應該接受兩個參數（通常表示為a和b），這兩個參數是數組中將要被比較的兩個元素。比較函數的返回值決定了這兩個元素在最終排序後數組中的順序：

  • 如果比較函數返回一個小於0的值，那麼元素a將排在元素b之前。
  • 如果比較函數返回一個大於0的值，那麼元素b將排在元素a之前。
  • 如果比較函數返回0，那麼元素a和b的順序不變。

sort()方法自定義排序的基礎示例

1. 數字排序

對於數字類型的數組，可以這樣定義比較函數來確保數組按照數值大小升序或降序排列：

let numbers = [10, 5, 100, 2, 1000];
// 升序排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 輸出: [2, 5, 10, 100, 1000]
// 降序排序
numbers.sort((a, b) => b - a);
console.log(numbers); // 輸出: [1000, 100, 10, 5, 2]

2. 字元串排序（考慮大小寫）

對於字元串數組，如果要按字典順序排序，可能還需要考慮大小寫：

let words = ['banana', 'Apple', 'orange'];
// 升序排序，忽略大小寫
words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(words); // 輸出: ['Apple', 'banana', 'orange']

3. 複雜對象數組排序

如果數組包含對象，可以根據對象的某個屬性來排序：

let items = [
    { name: "John", age: 25 },
    { name: "Anna", age: 30 },
    { name: "Mike", age: 22 }
];
// 根據age屬性升序排序
items.sort((a, b) => a.age - b.age);
console.log(items); // 輸出: [{ name: "Mike", age: 22 }, { name: "John", age: 25 }, { name: "Anna", age: 30 }]

sort()方法在工作中應用的註意事項

  • 使用sort()方法時需要註意，它是在原數組上進行排序，而不是返回一個新的排序後的數組。
  • 如果不提供比較函數，sort()將元素轉換為字元串，並按照字元串的Unicode碼點順序排序，這可能不會按照數值大小排序數字。
  • 通過提供自定義的比較函數，可以靈活地控制數組的排序行為，滿足不同的業務需求。

如何去除數組中的重覆元素

1. 使用 Set 對象

Set 是一種允許存儲任何類型唯一值的集合。由於 Set 自動去除重覆的元素，我們可以利用這個特性來去除數組中的重覆項。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]

2. 使用 filter() 方法

filter() 方法創建一個新數組，其包含通過所提供函數實現的測試的所有元素。可以利用這個方法和 indexOf() 來過濾掉重覆的元素。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]

3. 使用 reduce() 方法

reduce() 方法對數組中的每個元素執行一個 reducer 函數（升序執行），將其結果彙總為單個返回值。這個方法也可以用來去除重覆元素。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {
  if (!acc.includes(current)) {
    acc.push(current);
  }
  return acc;
}, []);
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]

4. 使用對象鍵

利用對象的屬性不能重覆的特性，可以快速去除數組中的重覆元素。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueObj = {};
array.forEach(item => {
  uniqueObj[item] = true;
});
const uniqueArray = Object.keys(uniqueObj).map(key => parseInt(key));
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]

如何判斷一個變數是否是數組？有哪些判斷方式？

在JavaScript中，判斷一個變數是否是數組可以通過多種方式實現。這些方法各有優缺點，適用於不同的場景。

  • 最推薦的方法：Array.isArray()，因為它簡單且總是可靠的。
  • 較可靠的方法：Object.prototype.toString.call()，尤其是在涉及多個執行環境時。
  • 其他方法：雖然 instanceof、constructor 和 isPrototypeOf 可以用來判斷數組，但它們在某些情況下可能不夠可靠或容易受到環境的影響。

1. 使用 Array.isArray() 方法（推薦）

Array.isArray() 是 ECMAScript 5 新增的方法，它提供了一種簡單、可靠的方式來判斷一個變數是否是數組。這是判斷數組的最推薦方式。

let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 輸出：true

2. 使用 instanceof 操作符

instanceof 操作符用於測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。

let arr = [1, 2, 3];
console.log(arr instanceof Array); // 輸出：true

但是，instanceof 可能在不同的執行環境（如不同的iframe或window對象）中不一定可靠，因為數組的構造器可能不同。

3. 使用 Object.prototype.toString.call()

這是一個更加通用的方法，可以用來獲取任意對象的類型。對於數組，Object.prototype.toString.call() 返回 "[object Array]"。

let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 輸出：true

這種方法相對可靠，並且在不同的執行環境中也能保持一致性。

4. 使用構造函數屬性 constructor

每個數組都有一個 constructor 屬性，指向它的構造函數。如果這個屬性是 Array，那麼對象通常是數組。但這種方法不是非常可靠，因為 constructor 屬性可以被改寫。

let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 輸出：true

5. 使用 Array.prototype.isPrototypeOf()

這個方法可以用來檢查 Array.prototype 是否存在於某個對象的原型鏈上。

let arr = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(arr)); // 輸出：true

IF 條件中的空數組是 false 還是 true

在 JavaScript 中，空數組（[]）在 if 條件判斷中被視為 true。
這是因為所有對象，包括數組（無論是否為空），在布爾上下文中都被視為 true。
這意味著即使數組沒有任何元素，它仍然被認為是真值。

JS 中的哪些值會被判斷為 Falsy 值

以下是JavaScript中的所有 Falsy 值：

  1. false - 布爾值 false 本身自然是 Falsy。
  2. 0 和 -0 - 數字零和負零。
  3. 0n - BigInt類型的零。
  4. ""（空字元串） - 雙引號或單引號中沒有任何字元。
  5. null - 表示無值。
  6. undefined - 變數已聲明但未賦值時的預設值。
  7. NaN - 表示 "不是一個數字" 的特殊值。

判斷為 Falsy 值的相關示例

在實際的編程實踐中，瞭解哪些值是 Falsy 值非常重要，因為它們會影響條件語句的行為。

if (false) {} // 不執行
if (0) {} // 不執行
if (-0) {} // 不執行
if (0n) {} // 不執行
if ("") {} // 不執行
if (null) {} // 不執行
if (undefined) {} // 不執行
if (NaN) {} // 不執行
if ([]) {} // 執行，因為空數組是 true

面試問題合集

恭喜你耐心看完本文了，對照下方的問題列表，自我提問一下吧~

你知道哪些 JS 數組操作？
工作中常用哪些方法？
slice() 和 splice() 方法之間有什麼區別？
如何合併兩個數組？
slice()、concat()、[...arr] 方法返回的數組是淺拷貝還是深拷貝？
如何有效地搜索數組中的元素？
如何使用reduce()方法？
sort() 方法是否可以對純數字數組進行正確的排序？
sort() 方法如何進行自定義排序？
如何去除數組中的重覆元素？
如何判斷一個變數是否是數組？
IF 條件中的空數組是 false 還是 true？
JS 中的哪些值會被判斷為 Falsy 值？

我是 fx67ll.com，如果您發現本文有什麼錯誤，歡迎在評論區討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點一顆Star，Thanks~

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

-Advertisement-
Play Games
更多相關文章
  • 小米盒子3增強版root破解教程（MDZ-18-AA型號）
    一、背景信息 早幾年買的小米盒子3增強版，放在家裡也沒怎麼用，娃最近總要看動畫片，網上去找一些軟體裝上了，但速度很慢，遙控器按下去要等個幾秒才能響應，系統里還到處都是廣告，就想著能不能刷下。 具體配置如下： 型號：小米盒子3增強版 （MDZ-18-AA） 安卓版本：5.2 小米版本：1.5.93 內 ...
  • Android應用程式啟動源碼淺析-(三萬字長文慎點&Android14)
    在Android桌面Launcher源碼淺析中介紹了Android的桌面程式Launcher是如何響應用戶點擊事件並啟動App的，這篇文章繼續介紹App在Android系統層的啟動流程。 一、啟動流程 sequenceDiagram participant User participant Laun ...
  • 鴻蒙HarmonyOS實戰-ArkTS語言基礎類庫（容器類庫）
    前言 容器類庫是指一組用於存儲和管理數據的數據結構和演算法。它們提供了各種不同類型的容器，如數組、鏈表、樹、圖等，以及相關的操作和功能，如查找、插入、刪除、排序等。 容器類庫還可以包含其他數據結構和演算法，如堆、樹、圖等，以及相關的操作和功能，如排序、查找、遍歷等。它們可以用於解決各種不同的問題和場 ...
  • 鴻蒙HarmonyOS實戰-ArkTS語言基礎類庫（併發）
    一、併發 併發是指在一個時間段內，多個事件、任務或操作同時進行或者交替進行的方式。在電腦科學中，特指多個任務或程式同時執行的能力。併發可以提升系統的吞吐量、響應速度和資源利用率，並能更好地處理多用戶、多線程和分散式的場景。常見的併發模型有多線程、多進程、多任務、協程等。 1.併發概述 Ha ...
  • 資源描述框架的用途及實際應用解析
    **RDF（資源描述框架）**是一種用於機器理解網路資源的框架，使用XML編寫。它通過URI標識資源，用屬性描述資源，便於電腦應用程式處理信息。RDF在語義網上促進信息的確切含義和自動處理，使得網路信息可被整合。RDF語句由資源、屬性和屬性值組成。RDF文檔包括`<rdf:RDF>`根元素和`<r... ...
  • 前端 危！！！ 這個項目可以一鍵圖片轉代碼
    這段時間來，AI已經逐步走進我們的工作和生活，作為程式員來說，讓AI寫代碼已經成為稀鬆平常的操作了，今天給大家介紹一個更牛逼的操作，屏幕截屏轉化為代碼，從此前端開發更簡單 screenshot-to-code screenshot-to-code可以將任何屏幕截圖或設計轉換為乾凈的代碼，它是一個簡單 ...
  • Vuex 4與狀態管理實戰指南
    title: Vuex 4與狀態管理實戰指南 date: 2024/6/6 updated: 2024/6/6 excerpt: 這篇文章介紹了使用Vuex進行Vue應用狀態管理的最佳實踐，包括為何需要狀態管理，Vuex的核心概念如store、actions、mutations和getters，以及 ...
  • 記錄--前端起dev從110秒減少到7秒, 開發體驗大幅提升
    ‍ 寫在開頭 點贊 + 收藏 學會 [webpack由淺入深]系列的內容 第一層: 瞭解一個小功能的完整流程. 看完可以滿足好奇心和應付原理級別面試. 第二層: 源碼陪讀, webpack源碼比較靈活, 自己看容易陷入迷惑. 文章里會貼出關鍵流程的代碼來輔助閱讀源碼. 如果你正在 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類