記錄工作中常用的 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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類