js數組方法詳解（最新最全）

来源:https://www.cnblogs.com/xzsty/archive/2019/01/22/10304649.html
-Advertisement-
Play Games

數組是js中最常用到的數據集合，其內置的方法有很多，熟練掌握這些方法，可以有效的提高我們的工作效率，同時對我們的代碼質量也是有很大影響。本文所有的慄子都是在es7環境下測試的，如果有問題歡迎留言交流 創建數組 我將創建數組的方式分為以下四大類 一、字面量方式 使用對象字面量方式創建數組是我們最常用的 ...


數組是js中最常用到的數據集合，其內置的方法有很多，熟練掌握這些方法，可以有效的提高我們的工作效率，同時對我們的代碼質量也是有很大影響。本文所有的慄子都是在es7環境下測試的，如果有問題歡迎留言交流

創建數組

我將創建數組的方式分為以下四大類

一、字面量方式

使用對象字面量方式創建數組是我們最常用的一種方式

const array1 = [1, 2, 3, 4, 5];

二、使用Array構造方法

無參構造

使用無參構造可以創建一個長度為0的空數組

const array1 = new Array();

帶參構造

  1. 如果只傳一個數值參數，則表示創建一個初始長度為指定數值的空數組
const array2 = new Array(3);
  1. 如果傳入一個非數值的參數或者參數個數大於1，則表示創建一個包含指定元素的數組
const array3 = new Array(1, 2, 3, 'array'); // [1, 2, 3, "array"]

const array4 = new Array('23'); // ["23"]

三、Array.of方法創建數組(es6新增)

ES6為數組新增創建方法的目的之一，是幫助開發者在使用Array構造器時避開js語言的一個怪異點。Array.of()方法總會創建一個包含所有傳入參數的數組，而不管參數的數量與類型。

let arr = Array.of(1, 2);
console.log(arr.length);//2

let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3

let arr2 = Array.of('2');
console.log(arr2.length);//1
console.log(arr2[0]);//'2'

在使用Array.of()方法創建數組時，只需將想要包含在數組內的值作為參數傳入。

四、Array.from方法創建數組(es6新增)

在js中將非數組對象轉換為真正的數組是非常麻煩的。在ES6中，將可迭代對象或者類數組對象作為第一個參數傳入，Array.from()就能返回一個數組。

function arga(...args) {
    let arg = Array.from(arguments);
    console.log(arg);
}

arga('arr1', 26, 'from'); // ['arr1',26,'from']

映射轉換

如果你想實行進一步的數組轉換，你可以向Array.from()方法傳遞一個映射用的函數作為第二個參數。此函數會將數組對象的每一個值轉換為目標形式，並將其存儲在目標數組的對應位置上。

function arga(...args) {
    return Array.from(arguments, value => value + 1);
}

let arr = arga('arr', 26, 'pop');
console.log(arr);//['arr1',27,'pop1']

如果映射函數需要在對象上工作，你可以手動傳遞第三個參數給Array.from()方法，從而指定映射函數內部的this值

const helper = {
  diff: 1,
  add(value) {
    return value + this.diff;
  }
}

function translate() {
  return Array.from(arguments, helper.add, helper);
}

let arr = translate('liu', 26, 'man');
console.log(arr); // ["liu1", 27, "man1"]

數組方法

創建數組完成之後，接下來我們就來看一下數組中的每一個方法是什麼功能及其詳細用法。下麵的方法是按照字母順序寫的

concat

concat() 方法用於連接兩個或多個數組。

該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

const array1 = [22, 3, 31, 12];
const array2 = [19, 33, 20];
const newArray = array1.concat(10, array2, 9);
console.log(array1); // [22, 3, 31, 12]
console.log(newArray); // [22, 3, 31, 12, 10, 19, 33, 20, 9]

通過上面的例子可以看出：concat傳入的參數可以是具體的值，也可以是數組對象。可以是任意多個。

copyWithin(es6新增)

copyWithin() 方法用於從數組的指定位置拷貝元素到數組的另一個指定位置中。

該方法會改變現有數組

//將數組的前兩個元素複製到數組的最後兩個位置
let arr = [1, 2, 3, 'arr', 5];

arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

預設情況下，copyWithin()方法總是會一直複製到數組末尾，不過你還可以提供一個可選參數來限制到底有多少元素會被覆蓋。這第三個參數指定了複製停止的位置（不包含該位置本身）。

let arr = [1, 2, 3, 'arr', 5, 9, 17];

//從索引3的位置開始粘貼
//從索引0的位置開始複製
//遇到索引3時停止複製
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

every

every()方法用於判斷數組中每一項是否都滿足條件，只有所有項都滿足條件，才會返回true。

const array1 = [22, 3, 31, 12];
const isRight1 = array1.every((v, i, a) => {
  return v > 1;
});

const isRight2 = array1.every((v, i, a) => {
  return v > 10;
});
console.log(isRight1); // true
console.log(isRight2); // false

fill(es6新增)

fill()方法能使用特定值填充數組中的一個或多個元素。當只是用一個參數時，該方法會用該參數的值填充整個數組。

let arr = [1, 2, 3, 'cc', 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];

如果不想改變數組中的所有元素，而只是想改變其中一部分，那麼可以使用可選的起始位置參數與結束位置參數（不包括結束位置的那個元素）

let arr = [1, 2, 3, 'arr', 5];

arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]

arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];

filter

filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。該方法不會改變原數組

const array1 = [22, 3, 31, 12];
const array2 = array1.filter((v, i, a) => {
  if (v > 13) {
    return v;
  }
});
console.log(array1); // [22, 3, 31, 12]
console.log(array2); // [22, 31]

find()與findIndex()(es6新增)

find()與findIndex()方法均接受兩個參數：一個回調函數，一個可選值用於指定回調函數內部的this。該回調函數可接受三個參數：數組的某個元素，該元素對應的索引位置，以及該數組本身。該回調函數應當在給定的元素滿足你定義的條件時返回true，而find()和findIndex()方法均會在回調函數第一次返回true時停止查找。

二者唯一的區別是：find()方法返回匹配的值，而findIndex()返回匹配位置的索引。

let arr = [1, 2, 3, 'arr', 5, 1, 9];

console.log(arr.find((value, keys, arr) => {
    return value > 2;
})); // 3 返回匹配的值

console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
})); // 2 返回匹配位置的索引

forEach

forEach() 方法用於調用數組的每個元素，並將元素傳遞給回調函數。

let sum = 0;
const array1 = [22, 3, 31, 12];
array1.forEach((v, i, a) => {
  sum += v;
});

console.log(sum); // 68

includes(es7新增)

includes() 方法用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false。

參數有兩個，其中第一個是（必填）需要查找的元素值，第二個是（可選）開始查找元素的位置

const array1 = [22, 3, 31, 12, 'arr'];
const includes = array1.includes(31);
console.log(includes); // true

const includes1 = array1.includes(31, 3); // 從索引3開始查找31是否存在
console.log(includes1); // false

需要註意的是：includes使用===運算符來進行值比較，僅有一個例外：NaN被認為與自身相等。

let values = [1, NaN, 2];
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true

indexOf

indexOf() 方法可返回數組中某個指定的元素位置。

該方法將從頭到尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。如果找到一個 item，則返回 item 的第一次出現的位置。開始位置的索引為 0。

如果在數組中沒找到指定元素則返回 -1。

參數有兩個，其中第一個是（必填）需要查找的元素值，第二個是（可選）開始查找元素的位置

const array1 = [22, 3, 31, 12, 'arr'];
const index = array1.indexOf(31);
console.log(index); // 2

const index1 = array1.indexOf(31, 3);
console.log(index1); // -1

join

join() 方法用於把數組中的所有元素轉換一個字元串。

元素是通過指定的分隔符進行分隔的。預設使用逗號作為分隔符

const array1 = [22, 3, 31, 12, 'arr'];
const str = array1.join('~');
console.log(str); // 22~3~31~12~arr

const str1 = array1.join();
console.log(str1); // 22,3,31,12,arr

lastIndexOf

lastIndexOf() 方法可返回一個指定的元素在數組中最後出現的位置，在一個數組中的指定位置從後向前搜索。

如果要檢索的元素沒有出現，則該方法返回 -1。

該方法將從尾到頭地檢索數組中指定元素 item。開始檢索的位置在數組的 start 處或數組的結尾（沒有指定 start 參數時）。如果找到一個 item，則返回 item 從尾向前檢索第一個次出現在數組的位置。數組的索引開始位置是從 0 開始的。

如果在數組中沒找到指定元素則返回 -1。

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
const index1 = array1.lastIndexOf(31);
console.log(index1); // 6

const index2 = array1.lastIndexOf(31, 5);
console.log(index2); // 2

const index3 = array1.lastIndexOf(35);
console.log(index3); // -1

map

map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。

map() 方法按照原始數組元素順序依次處理元素。

該方法不會改變原數組

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
const array2 = array1.map((v, i, a) => {
  return v + 1;
});

console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43]
console.log(array2); // [23, 4, 32, 13, "arr1", 20, 32, 57, 44]

pop

pop() 方法用於刪除數組的最後一個元素並返回刪除的元素。

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
const item = array1.pop();

console.log(item); // 43
console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56]

push

push()方法從數組末尾向數組添加元素，可以添加一個或多個元素。

const array1 = [22, 3, 31, 12, 'arr', 19, 31, 56, 43];
array1.push(11, 16, 18);
console.log(array1); // [22, 3, 31, 12, "arr", 19, 31, 56, 43, 11, 16, 18]

reduce

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。

const array1 = [22, 3, 31, 12];
const sum = array1.reduce((total, number) => {
  return total + number;
});

console.log(sum); // 68

reduceRight

reduceRight() 方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從數組的末尾向前將數組中的數組項做累加。

const array1 = [22, 3, 31, 12];

const sum = array1.reduceRight((total, number) => {
  return total + number;
});

console.log(sum); // 68

reverse

reverse() 方法用於顛倒數組中元素的順序。

const array1 = [22, 3, 31, 12];
array1.reverse();

console.log(array1); // [12, 31, 3, 22]

shift

shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。

const array1 = [22, 3, 31, 12];
const item = array1.shift();

console.log(item); // 22
console.log(array1); // [3, 31, 12]

slice

slice() 方法可從已有的數組中返回選定的元素。

slice()方法可提取字元串的某個部分，並以新的字元串返回被提取的部分。

slice() 方法不會改變原始數組。

const array1 = [22, 3, 31, 12];
const array2 = array1.slice(1, 3);

console.log(array1); // [22, 3, 31, 12]
console.log(array2); // [3, 31]

some

some() 方法用於檢測數組中的元素是否滿足指定條件（函數提供）。

some() 方法會依次執行數組的每個元素：

如果有一個元素滿足條件，則表達式返回true , 剩餘的元素不會再執行檢測。
如果沒有滿足條件的元素，則返回false。

const array1 = [22, 3, 31, 12];
const someTrue1 = array1.some((v, i, a) => {
  return v == 11;
});

const someTrue2 = array1.some((v, i, a) => {
  return v == 31;
});

console.log(someTrue1); // false
console.log(someTrue2); // true

sort

sort() 方法用於對數組的元素進行排序。

排序順序可以是字母或數字，並按升序或降序。

預設排序順序為按字母升序。

const array1 = [22, 3, 31, 12];
array1.sort((a, b) => {
  return a > b ? 1 : -1;
});

console.log(array1); // 數字升序 [3, 12, 22, 31]

splice

splice() 方法用於添加或刪除數組中的元素。

  1. 刪除元素,並返回刪除的元素
const array1 = [22, 3, 31, 12];
const item = array1.splice(1, 2);

console.log(item); // [3, 31]
console.log(array1); // [22, 12]
  1. 向指定索引處添加元素
const array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35);

console.log(array1); // [22, 12, 35, 3, 31, 12]
  1. 替換指定索引位置的元素
const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8);

console.log(array1); // [22, 8, 31, 12]

toLocaleString和toString

將數組轉換為字元串

const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();

console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12

unshift

unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。

該方法將改變數組的數目。
const array1 = [22, 3, 31, 12]; const item = array1.unshift(11); console.log(item); // 5 新數組的長度 console.log(array1); // [11, 22, 3, 31, 12]


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

-Advertisement-
Play Games
更多相關文章
  • HTML和CSS前端教程03-CSS選擇器
    [TOC] 1. CSS定義 層疊樣式表 2. 創建CSS的三種方法 2.1. 元素內嵌（權重最高） 2.2. 文檔內嵌 通過選擇器的方法調用指定的元素並設置相關的CSS 2.3. 外部引用 定義一個style01.css文件 在主文件中應用style 大量HTML使用同一組CSS，就可以將這些樣式 ...
  • JavaScript實現迴圈鏈表
    單鏈表地址：點我 一、迴圈鏈表 節點的next指向下一個節點，節點的prev指向上一個節點 ...
  • 安裝nvm管理不同的node版本
    在工作或者學習中，偶爾會遇到需要切換不同node版本的需求，幸好有神器 可以幫我們解決問題。下麵我們就來講解如何在 系統上安裝 ! :muscle: 下載 第一步，當然要下載 啦， "傳送門" ，目前最新的版本是1.17，註意，筆者下載的是 的壓縮文件。 下載完後直接解壓到隨意的目錄下，比如我解壓到 ...
  • Vue單頁面應用阻止瀏覽器記住密碼
    Vue單頁面應用阻止瀏覽器記住密碼 ——IT唐伯虎 摘要: Vue單頁面應用阻止瀏覽器記住密碼。 現象1：路由切換時再次提示“是否記住密碼” 登錄頁面有個密碼輸入框，輸入賬號密碼進行登錄； 登錄完成後vue路由跳轉到主頁，這時候瀏覽器提示“是否記住密碼”，我選“否”； 然後我點菜單跳轉到另一個路由， ...
  • HTML5網頁點擊分享到whatsapp
    一、在網頁頭部加入分享標題和url，代碼如下： 二、HTML代碼如下： 三、JavaScript代碼如下： ...
  • jQuery手機端點擊彈出分享按鈕代碼
    一、HTML代碼如下： 二、CSS代碼如下： 三、jQuery代碼如下： 四、效果圖如下： 本文摘自站長素材：http://sc.chinaz.com/jiaoben/150907458420.htm ...
  • canvas動畫效果新年祝福話語
    html代碼 css代碼 js代碼 效果圖 ...
  • vis.js 4.21.0 Timeline localization
    from:http://visjs.org/timeline_examples.html https://github.com/almende/vis https://github.com/moment/moment/ https://momentjs.com/ ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類