Javascritp Array數組方法總結

来源:https://www.cnblogs.com/blogcxz/archive/2019/06/27/11100033.html
-Advertisement-
Play Games

合併數組 concat() 用法一 （合併兩個數組） 用法二 （合併多個數組） 數組轉字元串 join()、toString() 兩種方法都返回新的字元串 join() 方法 toString() 方法 相同點： 都可以將數組轉字元串。 區別： join還有另外的用法：join() 可接受一個參數作 ...


合併數組 - concat()

用法一 （合併兩個數組）


var hege = ["Cecilie", "Lone"];

var stale = ["Emil", "Tobias", "Linus"];

var children = hege.concat(stale);

console.log(children );      // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

用法二 （合併多個數組）


var parents = ["Jani", "Tove"];

var brothers = ["Stale", "Kai Jim", "Borge"];

var children = ["Cecilie", "Lone"];

var family = parents.concat(brothers, children);

console.log(family);          // ["Jani", "Tove", "Stale", "Kai Jim", "Borge", "Cecilie", "Lone"]

數組轉字元串 - join()、toString()

兩種方法都返回新的字元串

join() 方法


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.join();

console.log(a);                // "Banana,Orange,Apple,Mango"

toString() 方法


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.toString();

console.log(a);                // "Banana,Orange,Apple,Mango"

相同點：

都可以將數組轉字元串。

區別：

join還有另外的用法：join() 可接受一個參數作為元素之間的連接符號


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.join("-");

console.log(a);            //  "Banana-Orange-Apple-Mango"

刪除數組最後一個元素 - pop()

pop 返回元素的最後一個元素，原數組最後一個刪除。


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.pop();

console.log(a);                //  "Mango"

console.log(fruits );          //  ["Banana", "Orange", "Apple"]

添加元素 - push()

push 返回的是數組的長度，原數組最後面添加一個新元素


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.push("Kiwi");

console.log(a);                // 5

console.log(fruits);          //   ["Banana", "Orange", "Apple", "Mango", "Kiwi"]

數組反轉 - reverse()


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.reverse();

console.log(fruits);        // ["Mango", "Apple", "Orange", "Banana"]

刪除數組第一個元素 - shift()

shift 返回數組的第一個元素，原數組第一個元素被刪除


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a= fruits.shift();

console.log(a);              //  "Banana"

consoel.log(fruits);        //   ["Orange", "Apple", "Mango"]

截取數組元素 - slice(start,end)

slice 返回截取的元素組成的數組，原數組不會發生變化。

slice接受兩個參數，起始位置和結束位置，第一個參數起始位置如果為負數，表示從數組尾部開始算，如 -1 代表最後一個。如果不傳入結束位置，表示從起始位置起到數組結尾的所有元素。


var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

var a= fruits.slice(1,3);

console.log(a);                //  ["Orange", "Lemon"]

console.log(fruits);          //   ["Banana", "Orange", "Lemon", "Apple", "Mango"]

數組排序 - sort(func)

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

sort 可接受一個參數 func，非必傳，如果要傳入必須是函數，在不傳參的情況下，sort 表示按字元串編碼的順序進行排序，如果要對數組進行排序需傳入函數。

不傳參：


var  arr= ["George", "John", "Thomas", "James", "Adrew", "Martin"];

arr.sort();

console.log(fruits);          //  ["Adrew", "George", "James", "John", "Martin", "Thomas"]

// 沒有傳入函數，所以結果是按照0123456789的順序進行排列

var nums = [21,14,26,11,105];

nums.sort();

console.log(nums);            //  [105, 11, 14, 21, 26]

傳參：


function sortNumber(a, b){

        return a - b

}

var nums = [21,14,26,11,105];

nums.sort(sortNumber);

console.log(nums);            // [11, 14, 21, 26, 105]

在指定位置添加/刪除/替換元素 - splice( start, count , .....)

splice 接受多個參數，第一個是起始位置，第二個為刪除個數，之後的參數為添加/刪除/替換的元素。

splice 返回刪除元素的數組

用法一 （添加元素）


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.splice(2,0,"Lemon","Kiwi");

console.log(fruits );            //  ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]

用法二 （替換元素）


// 從第二個位置起刪除兩個元素，接受新的兩個元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2,"Lemon","Kiwi");

console.log(a);                  // ["Apple", "Mango"]

console.log(fruits);            //  ["Banana", "Orange", "Lemon", "Kiwi"]

用法三 （刪除元素）


var fruits = ["Banana", "Orange", "Apple", "Mango"];

var a = fruits.splice(2,2);

console.log(a);                  // ["Apple", "Mango"]

console.log(fruits);            //  ["Banana", "Orange"]

在數組開頭添加元素 - unshift()


var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.unshift("Lemon","Pineapple");

console.log(fruits);            // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]

檢查某元素是否存在於數組中 - indexOf()、lastIndexOf()

indexOf 和 lastIndexOf 都接受兩個參數，第一是需要檢查的元素。第二個是從那個索引位置開始檢查

indexOf 表示從 0 開始，lastIndexOf 表示最後一個元素開始


var  arr = [1,23,4,5,6,7,89];

arr.indexOf(89)                //    6

arr.indexOf(89,2)              //    6

arr.lastIndexOf(89)            //    6

arr.lastIndexOf(89,5)          //    -1

數組遍歷 - map()、forEach()

相同點：

  • 都是數組的遍歷方法，可以遍曆數組中的每一個元素

  • forEach和map方法里每次執行匿名函數都支持3個參數，參數分別是item（當前每一項），index（索引值），arr（原數組）

  • 都不會改變原數組

  • 匿名函數的 this 都指向 windows

不同點：

  • map 方法會返回一個新的數組，數組中的元素為處理後的值，forEach 方法不會返回新的數組

  • map 方法不會對空數組進行檢測，forEach對於空數組是不會調用回調函數的。

  • map 方法不支持低端瀏覽器


var arr = [1,2,3,4];

var a = arr.map(function(item,index,arr){

    return item * item;

})

console.log(a);        //  [1, 4, 9, 16]

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


var arr = [1,2,3,4];

var a = arr.forEach(function(item,index,arr){

    return item * item;

})

console.log(a);        //  undefined

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

數組過濾 - filter()

filter() 方法是返回某一數組中滿足條件的元素，該方法返回的是一個新的數組。

// 返回元素長度大於 10 的數組元素


var arr =  [12,5,8,16,125,98];

var filters = arr.filter(function(value){

      return value >= 10

});

console.log(filters );        //  [12, 16, 125, 98]

of 遍歷


let arr2=[1,2,234,'sdf',-2];

for(let a of arr2){

  console.log(a)          // 1,2,234,sdf,-2 遍歷了數組arr的值

}

數組累加器 - reduce()、reduceRight()

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

reduce 和 reduceRight 用法一樣，區別在於 reduceRight 是從數組的末尾向前做數組項累加。


array.reduce(function(total, currentValue, currentIndex, arr), initialValue);

total         必需。初始值, 或者計算結束後的返回值。

currentValue    必需。當前元素

currentIndex    可選。當前元素的索引

arr         可選。當前元素所屬的數組對象。

initialValue    初始值


var numbers = [65, 44, 12, 4];

var a = numbers.reduce(function(total,num){

      return total + num;

},0)

console.log(a);          // 125

判斷數組中的元素是否滿足指定條件 - some()、every()

some 方法會遍曆數組的每一個元素，判斷是否滿足條件，返回一個布爾值。

every 方法會遍曆數組的每一個元素，判斷每一項是否滿足條件，如果每項都滿足，才返回true。


var numbers = [65, 44, 12, 4];

var a = numbers.some(function(item){

      return item > 62;

});

console.log(a);          //  true


var numbers = [65, 44, 12, 4];

var a = numbers.every(function(item){

      return item > 62;

});

console.log(a);          //  false

將當前數組指定位置的元素複製到其他位置並替換 - copyWithin(index,start,end)

index（必需）：從該位置開始替換數據。如果為負值，表示倒數。

start（可選）：從該位置開始讀取數據，預設為 0。如果為負值，表示倒數。

end（可選）：到該位置前停止讀取數據，預設等於數組長度。使用負數可從數組結尾處規定位置。


[1, 2, 3, 4, 5].copyWithin(0,1,3)    //   [2, 3, 3, 4, 5]

JSON數組格式轉換 - Array.from()

Array.from() 轉換的 json 要求必須要有length屬性


let  people = {

    0:'zhangsan',

    '1':24,   

    length:2   

};

let trans=Array.from(people);

console.log(trans);            //  ['zhangsan',24]

將一堆元素轉換成數組 - Array.of()


let arr = Array.of(1,"23","測試","dsa"); 

console.log(arr);            //  [1, "23", "測試", "dsa"]

查找數組中滿足條件的元素 - find()


let arr=[1,2,3,"cxz",-2];

var a = arr.find(function(x){

  return x<="cxz";

});

console.log(a);              // "cxz"

查找數組中滿足條件的元素的下標 - findIndex()


let arr=[1,2,3,"cxz",-2];

var a = arr.findIndex(function(x){

  return x<="cxz";

});

console.log(a);              // 3

判斷數組中是否包含某元素 - includes()

includes 判斷數組中是否包含某元素，返回布爾值


let arr=[1,2,3,"cxz",-2];

var a = arr.includes("cxz");

console.log(a);              //  true

最後歡迎大家關註我的個人公眾號，互聯網碼農，專註互聯網編程技術分享，關註公眾號，回覆關鍵字，可以領取系列編程學習視頻哦，前端、java、ios、安卓、c++、python應用盡有。


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

-Advertisement-
Play Games
更多相關文章
  • mysql 組合兩張表
    select P.FirstName,P.Lastname,A.City,A.State from Person P left join Address A on P.PersonId = A.PersonId; ...
  • 如果下載老版本的Xcode
    打開：https://developer.apple.com/download/more/，選擇符合自己的Xcode版本即可。 ...
  • 個人app如何收集用戶日誌
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/147 個人app如何收集用戶日誌，相信不少人對這個話題感興趣，本文將結合自己的實際經歷，分享下自己的做法。 用郵件收集用戶上報日誌 在上篇文章http://j ...
  • 海思Hi3798MV310機頂盒晶元Datasheet-基本信息
    Hi3798M V310 是用於 IPTV/OTT 機頂盒市場的支持 4KP60 解碼的超高清高性能 SOC晶元。集成 4 核 64 位高性能 Cortex A53 處理器和多核高性能 2D/3D 加速引擎；支持H.265/AVS2 4Kx2K@P60 10bit 超高清視頻解碼，高性能的 H.26 ...
  • elementUI 2個輸入框 時間區間月份選擇
    實現效果: ...
  • element-ui文件上傳 做類型大小的限制
    上代碼： :beforeUpload="beforeAvatarUpload" 底下有方法重要在這裡：methods裡面寫beforeAvatarUpload這個方法 想要什麼限制加什麼限制就好。 ...
  • CSS flex 佈局快速入門
    以前已經學過flex了，一直沒做筆記，現在做下筆記再回憶下。 首先，flex佈局的迷之屬性們，如果一知半解，機械記憶的話，那不到半個月基本忘光光。先感受一下這12個flex佈局屬性，是不是很“迷”人。 父容器屬性 flex-flow flex-direction flex-wrap justify- ...
  • 二、JavaScript的語法
    目錄： 1、變數:存儲數據的容器 2、數據類型 3、string數據類型 4、number數據類型 5、boolean數據類型 6、數據類型的隱式轉換 6、數據類型轉換函數 7、特殊類型 8、算術運算 9、關係運算 10、邏輯運算 11、條件運算符 1、變數:存儲數據的容器 1）變數聲明：使用關鍵字 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類