js中數組的api整理

来源:https://www.cnblogs.com/10JQKA/archive/2019/04/04/10650340.html
-Advertisement-
Play Games

首先列出所有的方法： join(), sort(), slice(), splice(), concat(), reverse(), push()+pop(), shift()+unshift(), forEach(), map(), some(), every(), filter(), reduc ...


首先列出所有的方法：

join(), sort(), slice(), splice(), concat(), reverse(), push()+pop(), shift()+unshift(), forEach(), map(), some(), every(), filter(), reduce()+reduceRight(), indexOf()+lastIndexOf(),

Array.form(), Array.of(), copyWithin(), find()+findIndex(), fill(), entries()+keys()+values(), includes()

以下是詳細介紹

1.join()

join(separator): 將數組的元素組起一個字元串，以separator為分隔符，省略的話則用預設用逗號為分隔符，該方法只接收一個參數：即分隔符。(不改變原數組)

var arr = [1,2,3,4];
console.log(arr.join()); //1,2,3,4
console.log(arr.join("/")); //1/2/3/4

通過join()方法可以實現重覆字元串，只需傳入字元串以及重覆的次數，就能返回重覆後的字元串，函數如下：

function repeatString(str, n) {
    return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc

2.sort()

sort()：按升序排列數組項——即最小的值位於最前面，最大的值排在最後面。

在排序時，sort()方法會調用每個數組項的 toString()轉型方法，然後比較得到的字元串，以確定如何排序。即使數組中的每一項都是數值， sort()方法比較的也是字元串，因此會出現以下的這種情況：

var arr1 = ["d", "a", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [11, 24, 41, 3];
console.log(arr2.sort()); // [11, 24, 3, 41]
console.log(arr2); // [13, 24, 3, 51](原數組被改變)

為瞭解決上述問題，sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位於哪個值的前面。比較函數接收兩個參數，如果第一個參數應該位於第二個之前則返回一個負數，如果兩個參數相等則返回 0，如果第一個參數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函數：

function compare(a, b) {
    return a-b
}
arr2 = [11, 24, 41, 3];
console.log(arr2.sort(compare)); // [3, 11, 24, 41]
或者console.log(arr2.sort((a,b)=>{return a-b}));

如果需要通過比較函數產生降序排序的結果，只要交換比較函數返回的值return b-a即可。

 3.slice()

slice()：返回從原數組中指定開始下標到結束下標之間的項組成的新數組。slice()方法可以接受一或兩個參數，即要返回項的起始和結束位置。在只有一個參數的情況下， slice()方法返回從該參數指定位置開始到當前數組末尾的所有項。如果有兩個參數，該方法返回起始和結束位置之間的項——但不包括結束位置的項。

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原數組不變)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

arrCopy只設置了一個參數，也就是起始下標為1，所以返回的數組為下標1（包括下標1）開始到數組最後。 
arrCopy2設置了兩個參數，返回起始下標（包括1）開始到終止下標（不包括4）的子數組。 
arrCopy3設置了兩個參數，終止下標為負數，當出現負數時，將負數加上數組長度的值（6）來替換該位置的數，因此就是從1開始到4（不包括）的子數組。 
arrCopy4中兩個參數都是負數，所以都加上數組長度6轉換成正數，因此相當於slice(2,5)。

4.splice()

splice()：很強大的數組方法，它有很多種用法，可以實現刪除、插入和替換。

刪除：可以刪除任意數量的項，只需指定 2 個參數：要刪除的第一項的位置和要刪除的項數。例如， splice(0,2)會刪除數組中的前兩項。

插入：可以向指定位置插入任意數量的項，只需提供 3 個參數：起始位置、 0（要刪除的項數）和要插入的項。例如，splice(2,0,4,6)會從當前數組的位置 2 開始插入4和6。
替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如，splice (2,1,4,6)會刪除當前數組位置 2 的項，然後再從位置 2 開始插入4和6。

splice()方法始終都會返回一個數組，該數組中包含從原始數組中刪除的項，如果沒有刪除任何項，則返回一個空數組。

var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
var arrRemoved2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arrRemoved2); // []
var arrRemoved3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arrRemoved3); //[7]

5.concat()

concat() ：將參數添加到原數組中。這個方法會先創建當前數組一個副本，然後將接收到的參數添加到這個副本的末尾，最後返回新構建的數組。在沒有給 concat()方法傳遞參數的情況下，它只是複製當前數組並返回副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原數組未被修改)

從上面測試結果可以發現：傳入的不是數組，則直接把參數添加到數組後面，如果傳入的是數組，則將數組中的各個項添加到數組中。但是如果傳入的是一個二維數組呢？

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代碼中，arrCopy2數組的第五項是一個包含兩項的數組，也就是說concat方法只能將傳入數組中的每一項添加到數組中，如果傳入數組中有些項是數組，那麼也會把這一數組項當作一項添加到arrCopy2中。

6.reverse()

reverse()：反轉數組項的順序。

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原數組改變)

7.push()+pop()

push(): 可以接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改後數組的長度。 
pop()：數組末尾移除最後一項，減少數組的 length 值，然後返回移除的項。

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count); // 5
console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

8.shift()+unshift()

shift()：刪除原數組第一項，並返回刪除元素的值；如果數組為空則返回undefined 。 
unshift:將參數添加到原數組開頭，並返回數組的長度 。

這組方法和上面的push()和pop()方法正好對應，一個是操作數組的開頭，一個是操作數組的結尾。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom"]

9.forEach()

forEach()：對數組進行遍歷迴圈，對數組中的每一項運行給定函數。這個方法沒有返回值。參數都是function類型，預設有傳參，參數分別為：遍歷的數組內容；對應的數組索引，數組本身。

var arr = [1, 2, 3, 4, 5];
    arr.forEach(function(item, index, array){
    console.log(item + '-' + index + '-' + (array === arr));
});
// 輸出為：
//1-0-true
//2-1-true
//3-2-true
//4-3-true
//5-4-true

10.map()

map()：指“映射”，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。

下麵代碼利用map方法實現數組中每個數求平方。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(item => item*item);
console.log(arr2); //[1, 4, 9, 16, 25]

11.some()

some()：判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(x => x<3); 
console.log(arr2); //true
var arr3 = arr.some(x => x<1); 
console.log(arr3); // false

12.every()

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

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(x => x<10); 
console.log(arr2); //true
var arr3 = arr.every(x => x<3); 
console.log(arr3); // false

13.filter()

filter()：“過濾”功能，數組中的每一項運行給定函數，返回滿足過濾條件組成的數組。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter((item, index) => {
　　return index % 3 === 0 || item >= 8;
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

14.reduce()+reduceRight()

這兩個方法都會實現迭代數組的所有項，然後構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最後。而 reduceRight()則從數組的最後一項開始，向前遍歷到第一項。

這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）作為歸併基礎的初始值。

傳給 reduce()和 reduceRight()的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。

下麵代碼用reduce()實現數組求和，數組一開始加了一個初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight((prev, cur, index, array) => {
    return prev + cur;
},10);
console.log(sum); //25

15.indexOf()+lastIndexOf()

indexOf()：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的開頭（位置 0）開始向後查找。 
lastIndexOf：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的末尾開始向前查找。

這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回1。在比較第一個參數與數組中的每一項時，會使用全等操作符。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

16.Array.form()

這個東西就是把一些集合，或者長的像數組的偽數組轉換成真的數組，比如arguments，js選擇器找到dom集合,
還有對象模擬的數組
var obj = {
　　'0' : 1,
　　length : 1
}
Array.from(obj / arguments / 偽數組) //返回的是一個數組
[].slice.call(arguments, 0) //這種方式根from方法是一樣的效果

//Array.from還有第二個參數，是一個回掉函數，功能類似map
Array.from( [1, 2, 3], item => item * 2 )

17.Array.of()

把參數合併成一個數組返回，如果參數為空，則返回一個空數組

Array.of(1,2,3,4,5);//[1,2,3,4,5]

18.copyWithin()

這個不常用，但是很有意思。

參數有3個，1：被替換的起始位置，2：選取替換值的起始位置，3：選取替換值的結束位置

var arr = [1, 'c', 'd', 'a', 'b'];  //假如我想把a，b替換到1的位置
arr.copyWithin(0, 3, 5)   // ["a", "b", "d", "a", "b"]

19.find()+findIndex()

返回數組中第一個符合條件的元素，findIndex返回索引

[1, 2, 3, 4, 5].find((item) => {return item > 3}) //4

20.fill()

功能一：字面意思填滿，實際功能就是把數組中的每一個元素替換成指定值

功能二：指定範圍替換，第一個參數替換值，第二個是起始下標，第三個結束下標（不包含）

功能三：擴展對象

var arr = [1, 2, 3, 4]
arr.fill(5); //[5,5,5,5]
arr.fill(6,1,3); //[1,6,6,5]
[].fill.call({length:3},4); //{0:4,1:4,2:4}

21.entries/keys/values

都取/取鍵/取值

var arr=['a', 'b', 'c']
for(let key of arr.keys()){console.log(key)} //0,1,2                    
for(let value of arr.values()){console.log(value)} //a,b,c               
for(let [key, value] of arr.entries()){console.log([key,value])} //[0,'a'],[1,'b'],[2,'c']

22.includs

判斷數組是否包含某項，返回true/false

[1, 2, 3, 4, 5].includes(4)    //true
[1, 2, 3, 4, NaN].includes(NaN)    //true

 

本文整理主要作為自己複習回顧用，參考鏈接：https://www.cnblogs.com/obel/p/7016414.html   和  https://www.cnblogs.com/sunheng/p/7852744.html


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

-Advertisement-
Play Games
更多相關文章
  • JSON定義及應用
    1 什麼是JSON？ JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation） 是輕量級的文本數據交換格式，JSON 比 XML 更小、更快，更易解析。 2 JSON 語法規則 JSON 語法是 JavaScript 對象表示語法的子集。 數據在名稱 ...
  • ReactNative環境搭建
    1、搭建開發環境 1.1安裝Chocolatey 用管理員打開cmd，執行以下命令： powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('htt ...
  • Pairwise 找到你的另一半
    都說優秀的程式員擅長面向對象編程，但卻經常找不到另一半，這是為什麼呢？因為你總是把自己局限成為一個程式員，沒有打開自己的思維。 這是一個社群的時代啊，在這裡你應該找到與你有相同價值觀但又互補的另一半。 譬如：你編程能力強，估值11分，如果以20分為最佳情侶來計算，你應該找一個設計能力強，估值為9分的 ...
  • box-decoration-break屬性
    box-decoration-break屬性可以指定元素片段在跨行、跨列或跨頁（如列印）時候的樣式渲染表現。預設情況下，元素的跨行或跨列渲染都是裁剪分割，各得一部分。舉個例子<div class="box"> <span class="text">生命的道路上永遠沒有捷徑可言，只有腳踏實地走下去。< ...
  • vue click事件 v-on:click
    v-on:click 點擊 world ...
  • sublime text3快速生成html時,tab鍵失效
    sublime tab鍵失效 ...
  • 關於防止表單多次提交~按鈕多次點擊~限制點擊事件
    為了防止用戶多次提交表單我們可以有多種處理方法,以下做一些簡單的說明 1.通過css設置屬性 pointer-events: none; 這個屬性是css的特殊屬性,他更像是javaScript,它能: 阻止用戶的點擊動作產生任何效果 阻止預設滑鼠指針的顯示 阻止CSS里的 hover 和 acti ...
  • Map the Debris 軌道周期
    返回一個數組，其內容是把原數組中對應元素的平均海拔轉換成其對應的軌道周期. 原數組中會包含格式化的對象內容，像這樣 {name: 'name', avgAlt: avgAlt}. 至於軌道周期怎麼求，戳這裡 on wikipedia (不想看英文的話可以自行搜索以軌道高度計算軌道周期的公式). 求得 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類