JavaScript數組的方法大全（最新）

来源:https://www.cnblogs.com/LannyChung/archive/2023/02/20/17138183.html
-Advertisement-
Play Games

JavaScript數組方法大全 趁著有時間，總結了下數組所有的屬性和方法，記錄博客，便於後續使用 at() at方法，用於獲取數組中，對應索引位置的值，不能修改。 語法：array.at(count); 參數：count，數組的索引值 返回值：返回該索引在數組中對應的值，如果count大於等於數組 ...


JavaScript數組方法大全

趁著有時間，總結了下數組所有的屬性和方法，記錄博客，便於後續使用

  • at()

    • at方法，用於獲取數組中，對應索引位置的值，不能修改。
    • 語法：array.at(count);
    • 參數：count，數組的索引值
    • 返回值：返回該索引在數組中對應的值，如果count大於等於數組的長度時，返回undefined
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const len = arr.at(1)
console.log(len);// 2

  • concat()

    • concat方法用於連接兩個或多個數組
    • 語法：array.concat(arr1,arr2,arr...);
    • 參數: arr1, ...arrx，可選。該參數可以是具體的值，也可以是數組對象。可以是任意多個。參數為空時，將拷貝調用該方法的數組作為副本返回。
    • 返回值：Array，返回一個新的數組。該數組是通過把所有 arrayX 參數添加到 arrayObject 中生成的。如果要進行 concat() 操作的參數是數組，那麼添加的是數組中的元素，而不是數組。
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.concat();
const arr2 = arr.concat(['我是lanny',12],['嘿嘿'],'啦啦啦');
console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, '我是lanny', 12, '嘿嘿', '啦啦啦'];

  • constructor

    • constructor屬性，返回數組的構造函數，其返回值是對函數的引用，而不是函數的名稱，對於 JavaScript 數組，constructor 屬性返回function Array() { [native code] }，對於 JavaScript 對象，constructor 屬性返回：function Object() { [native  code] }
    • 可以通過如下形式，對數據的類型進行判斷
    • const arr = [1,2,3]
    • console.log(arr.constructor === Array);// true

  • copyWithin

    • copyWithin用於從數組的指定位置拷貝元素到數組的另一個指定位置中。
    • 語法：array.copyWithin(target, start, end)
    • 參數：target-必需。複製到指定目標索引位置。start-可選。元素複製的起始位置。end-可選。停止複製的索引位置 (預設為 array.length)。如果為負值，表示倒數。
    • 註意，該方法會改變原數組
    • const arr = [1,2,3,4,5,6,7,8,9,10];
arr.copyWithin(0,4,9);
console.log(arr);// [5, 6, 7, 8, 9, 6, 7, 8, 9, 10]

  • entries()

    • entries方法返回一個數組的迭代對象，該對象包含數組的鍵值對 (key/value)。迭代對象中數組的索引值作為 key， 數組元素作為 value.
    • 語法：array.entries()
    • 返回值：Array Iterator一個數組的迭代對象。
    • const arr = ['lanny','jhon','alex','emily'].entries();
for (const [key,value] of arr) {
      console.log(key,value)
}
//0 'lanny'
//1 'jhon'
//2 'alex'
//3 'emily'

  • every()

    • every方法用於檢測數組所有元素是否都符合指定條件, 指定函數檢測數組中的所有元素：如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測。如果所有元素都滿足條件，則返回 true。
    • 語法：array.every(function(currentValue, index,arr),thisValue);
    • 註意： every() 不會對空數組進行檢測。every() 不會改變原始數組。
    • 參數：
      • function(currentValue, index,arr)
        • 必須。函數，數組中的每個元素都會執行這個函數。
        • currentValue：必須。每次遍歷迴圈時，當前元素的值。
        • index-可選。當前元素的索引值。
        • arr-可選。當前元素屬於的數組對象。
      • thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
    • 返回值：boolean，true或者false。
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const condition = arr.every(function(currentValue,index,arr){
     console.log(this);//arr
     return typeof currentValue === 'number'
 },arr)
 console.log(condition) // true

  • fill()

    • fill方法用於將一個固定值替換數組的元素。
    • 語法：array.fill(value,start,end);
    • 參數：value-必需。填充的值。start-可選。開始填充位置。end-可選。停止填充位置 (預設為 array.length)。
    • 返回值：Array，返回新替換的值作為數組的唯一項。
    • 註意：該方法會改變原數組
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.fill('嘟嘟',0,1);
console.log(arr);//['嘟嘟', 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1);//['嘟嘟']

  • filter()

    • filter方法用於過濾，返回指定函數中要求的條件，filter() 不會改變原始數組、不會對空數組進行檢測。
    • 語法：array.filter(function(currentValue,index,arr), thisValue);
    • 參數：
      • function(currentValue, index,arr)
        • 必須。函數，數組中的每個元素都會執行這個函數。
        • currentValue：必須。每次遍歷迴圈時，當前元素的值。
        • index-可選。當前元素的索引值。
        • arr-可選。當前元素屬於的數組對象。
      • thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
    • 返回值：Array，返回一個新數組，滿足所執行的函數條件
    • const arr = [1,2,3,"啦啦",6,7,"小L",9,10];
const arr1 = arr.filter((item)=>typeof item === 'string');
console.log(arr1);//["啦啦", "小L"]

  • find()

    • find方法返回通過測試（函數內判斷）的數組的第一個元素的值。find() 方法為數組中的每個元素都調用一次函數執行：當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，之後的值不會再調用執行函數。如果沒有符合條件的元素返回 undefined。註意: find() 對於空數組，函數是不會執行的、 find() 並沒有改變數組的原始值。
    • 語法：array.find(function(currentValue,index,arr), thisValue);
    • 參數：
      • function(currentValue, index,arr)
        • 必須。函數，數組中的每個元素都會執行這個函數。
        • currentValue：必須。每次遍歷迴圈時，當前元素的值。
        • index-可選。當前元素的索引值。
        • arr-可選。當前元素屬於的數組對象。
      • thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
    • 返回值：any，任意類型，滿足函數條件的第一個對應值，如果都不滿足，返回undefined。
    • const arr = [1,2,3,4,5,"嘟嘟",7,"嘿嘿",9,10];
const value = arr.find((item)=>typeof item === 'number'));//2
console.log(value);// 1

  • findIndex()

    • findIndex方法返回傳入一個測試條件（函數）符合條件的數組第一個元素位置。方法為數組中的每個元素都調用一次函數執行：當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之後的值不會再調用執行函數。如果沒有符合條件的元素返回 -1。註意: findIndex() 對於空數組，函數是不會執行的、findIndex() 並沒有改變數組的原始值。
    • 語法：array.findIndex(function(currentValue, index, arr), thisValue);
    • 參數：
      • function(currentValue, index,arr)
        • 必須。函數，數組中的每個元素都會執行這個函數。
        • currentValue：必須。每次遍歷迴圈時，當前元素的值。
        • index-可選。當前元素的索引值。
        • arr-可選。當前元素屬於的數組對象。
      • thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
    • 返回值：number，索引值，返回符合條件的元素的索引位置，之後的值不會再調用執行函數。如果沒有符合條件的元素返回 -1。
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const index = arr.findIndex((item=>item === 9);
console.log(index);//8  註意，是索引位置

  • findLast()

    • 該方法與find方法相同，唯一區別是，遍歷調用函數查找時，是倒序查找，從數組末尾，向前查找的 
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const last = arr.findLast((item)=>typeof item === 'number');
console.log(last);//10

  • findLastIndex()

    • 該方法與findIndex方法相同，唯一區別是，遍歷調用函數查找時，是倒序查找，從數組末尾，向前查找的. 
    • const arr = [1,2,3,4,5,6,7,8,9,10];
const lastIndex = arr.findLastIndex((item)=>typeof item === 'number');
console.log(lastIndex);//9 註意，是索引位置

  • flat()

    • 該方法用於將嵌套的多維數組，轉換成一維數組，該方法會自動刪除，空的索引值,且不會改變原數組。
    • 語法：array.flat(hierarchy)
    • 參數值：hierarchy-數組的嵌套層級，number，或者 Infinity-不管嵌套多少層
    • 返回值：Array，轉換之後的一維數組。
    • const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]];
const arr1 = arr.flat(Infinity);
console.log(arr1);//['a', 0, 5, 18, 29, '嘿嘿', {key:'002'}]

  • flatMap()

    • 先對數組中每個元素進行處理，再對數組執行 flat() 方法。
    • 語法：array.flatMap(function(currentValue,index,arr),thisValue)；
    • 參數：
      • function(currentValue, index,arr)
        • 必須。函數，數組中的每個元素都會執行這個函數。
        • currentValue：必須。每次遍歷迴圈時，當前元素的值。
        • index-可選。當前元素的索引值。
        • arr-可選。當前元素屬於的數組對象。
      • thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
    • 返回值：Array，返回處理之後的數組。
    • const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]]
const arrFlat = arr.flatMap(item=>{
    if(typeof item === 'string'){
        return item + '已處理'
    }else{
        return item
    }
})
console.log(arrFlat);// ['a已處理', 0, 5, [18,29], ['嘿嘿',{key:'002']]

  • forEach()

    • forEach().方法用於調用數組的每個元素，並將元素傳遞給回調函數，即遍曆數組，在函數中進行操作。forEach() 對於空數組是不會執行回調函數的。該方法沒有返回值，即undefined
    • 語法：array.forEach(callbackFn(currentValue, index, arr), thisValue);
    • 參數：
      • function(currentValue, index,arr)
        • 必須。函數，數組中的每個元素都會執行這個函數。
        • currentValue：必須。每次遍歷迴圈時，當前元素的值。
        • index-可選。當前元素的索引值。
        • arr-可選。當前元素屬於的數組對象。
      • thisValue 可選。對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。
    • 返回值：無，undefined。
    • const arr = [1,"嘟嘟",3,4,5,6,7,8,9,10];
arr.forEach((item,index)=>{
    if(typeof item === 'number'){
        arr[index] = item * 2
    }
})
console.log(arr);// [2, '嘟嘟', 6, 8, 10, 12, 14, 16, 18, 20]

  • indexOf()

    • indexOf方法可返回數組中某個指定的元素位置。該方法將從頭到尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。如果在數組中沒找到指定元素則返回 -1。
    • 語法：array.indexOf(item,start);
    • 參數：item必須。查找的元素。start可選的整數參數。規定在數組中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字元串的首字元開始檢索。
    • 返回值：number，索引值，元素在數組中的位置，如果沒有搜索到則返回 -1。 
      const arr = ["嘟嘟",2,3,4,5,6,7,8,9,10];
const index = arr.indexOf('嘟嘟')
console.log(index);// 0

  • lastIndexOf()

    • lastIndexOf()方法可返回一個指定的元素在數組中最後出現的位置，從該字元串的後面向前查找。如果要檢索的元素沒有出現，則該方法返回 -1。該方法將從尾到頭地檢索數組中指定元素 item。開始檢索的位置在數組的 start 處或數組的結尾（沒有指定 start 參數時）。如果找到一個 item，則返回 item 從尾向前檢索第一個次出現在數組的位置。數組的索引開始位置是從 0 開始的。如果在數組中沒找到指定元素則返回 -1。
    • 語法：array.lastIndexOf(item,start)；
    • 參數：item必需。規定需檢索的字元串值。start可選的整數參數。規定在字元串中開始檢索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略該參數，則將從字元串的最後一個字元處開始檢索。
    • 返回值：number，索引值，元素在數組中的位置，如果沒有搜索到則返回 -1。 
    • const arr = [0,1,2,4,1,5];
const index = arr.lastIndexOf(1);
console.log(index);//4 索引位置，倒數

  • join()

    • join()方法用於把數組中的所有元素轉換一個字元串。元素是通過指定的分隔符進行分隔的，該方法不會改變原數組。
    • array.join(separator);
    • 參數：separator可選。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。
    • 返回值：String返回一個字元串。該字元串是通過把 arrayObject 的每個元素轉換為字元串，然後把這些字元串連接起來，在兩個元素之間插入 separator 字元串而生成的。 
    • const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arr1 = arr.join('');
console.log(arr1);// "1234嘟嘟678910"

  • keys()

    • keys()方法用於從數組創建一個包含數組鍵的可迭代對象.如果對象是數組返回 true，否則返回 false。
    • 返回值：一個數組可迭代對象。 
    • const arr = ['lanny','jhon','alex','emily'];
for (const item of arr.keys()) {
    console.log(item)// 數組的索引值,依次列印 0/1/2/3
}
    •  
    •  
    •  

     

  • includes()

    • includes()方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false
    • 語法：array.includes(searchElement, fromIndex);
    • 參數：searchElement必須。需要查找的元素值。fromIndex可選。從該索引處開始查找 searchElement。如果為負值，則按升序從 array.length + fromIndex 的索引開始搜索。預設為 0，如果fromIndex大於等於數組長度，則返回 false，該數組不會被搜索。
    • 返回值：布爾值。如果找到指定值返回 true，否則返回 false。
    • const arr = ['嘟嘟', 4, 6, 8, 10, 12, 14, 16, 18, 20];
console.log(arr.includes('嘟嘟'));// true

     


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

-Advertisement-
Play Games
更多相關文章
  • 【FAQ】集成分析服務的常見問題及解決方案
    常見問題一：如何驗證Analytics是否上報/接入成功？以及關鍵日誌含義是什麼？ 在初始化Analytics SDK前添加SDK日誌開關如下： HiAnalyticsTools.enableLog (); 2.初始化SDK代碼如下： HiAnalyticsInstance instance = H ...
  • Android 關於Dialog在全屏彈出會顯示狀態欄和導航欄的問題解決
    項目的奇葩需求，需要彈出Dialog不要顯示狀態欄和導航欄，記錄一下解決方法 原文地址：Android 關於Dialog在全屏彈出會顯示狀態欄和導航欄的問題解決 Stars-one的雜貨小窩 說明 Android的原生的Dialog有個問題，如果你的Activity設置為全屏的，然後顯示Dialog ...
  • 立即執行函數在前端國際化方案中的應用
    說起國際化，開發過跨區域網頁的小伙伴應該都遇到過。我們的網頁需要配置多套語言，方便用戶進行切換。 本文就以 React 為例，介紹其中一種實現方案，並學習一下其中的知識點。 一種國際化方案 方案是這樣的： 為多套語言創建對應的 object，並 export 出去 通過 js 立即執行函數，載入選定 ...
  • react 高效高質量搭建後臺系統 系列 —— 結尾
    其他章節請看： react 高效高質量搭建後臺系統 系列 尾篇 本篇主要介紹表單查詢、表單驗證、通知（WebSocket）、自動構建。最後附上 myspug 項目源碼。 項目最終效果： 表單查詢 需求：給角色管理頁面增加表格查詢功能，通過輸入角色名稱，點擊查詢，從後端檢索出相應的數據。 效果如下： ...
  • Vue學習隨筆（一）Vue的引入
    前言 以往零零散散使用過一些Vue的語法，最近才剛剛系統接觸Vue，現在是剛剛入門的狀態，故在這裡做一個記錄和梳理，歡迎大家一起學習交流，有錯誤的地方也歡迎大家指正。 正篇 夢開始的地方 在寫之前我想先在這裡貼出Vue的一個官方的（應該是）學習教學https://cn.vuejs.org/guide ...
  • 第120篇: DOM編程(常用操作、動態腳本、樣式及動態表格)
    好家伙，我回來了， 本篇為《JS高級程式設計》第十四章“DOM編程”學習筆記 1.DOM編程 我們知道DOM是HTML文檔的編程介面， 我們可以通過HTML代碼實現DOM操作， 也同樣能夠通過JavaScript實現DOM操作。 2.JS操作DOM 我們來簡單的舉個例子： 隨便開一個空白的html頁 ...
  • js獲取blob數據流中攜帶的msg消息
    問題：後端返回的失敗 blob 數據流， 前端如何捕獲展示 業務需求，需要後端控制文件下載頻率，用戶在短時間內不可以重覆下載文件，並返回消息提示 (剩餘 XX 秒)。前端需要把返回數據msg消息展示彈出 數據在瀏覽器的響應里可以看到 但是在列印的 res 中卻找不到對應的msg，也就沒有辦法將對應內 ...
  • 記錄--什麼時候會阻塞HTML文檔渲染過程？
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 HTML頁面載入過程會發生什麼？因為瀏覽器網路拉取資源是多線程的，但是dom樹的操作都是在一個線程中的，所以網頁資源的解析、js載入、dom樹渲染都是一個線程執行，所以就會線程任務就會相互搶占，先來先執行。而當瀏覽器載入html文件時，會 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類