JavaScript 數組方法

来源:https://www.cnblogs.com/lemonyam/archive/2019/04/05/10657757.html
-Advertisement-
Play Games

數組方法： 1、Array.join([param]) 方法：將數組中所有的元素都轉換為字元串並連接起來，通過字元 param 連接，預設使用逗號，返回最後生成的字元串 2、Array.reverse() 方法：將數組中的元素顛倒順序（在原數組中重新排列它們），返回逆序數組 3、Array.sort ...


數組方法：

　　1、Array.join([param]) 方法：將數組中所有的元素都轉換為字元串並連接起來，通過字元 param 連接，預設使用逗號，返回最後生成的字元串

　　2、Array.reverse() 方法：將數組中的元素顛倒順序（在原數組中重新排列它們），返回逆序數組

　　3、Array.sort([function]) 方法：將數組中的元素按字母表順序排序並返回排序後的數組，可選參數 function 是一個比較函數，它定義了排序的規則

　　4、Array.concat([params]) 方法：創建並返回一個新數組，它的元素包含原數組的元素和 params，若 params 里有一個是數組，則會連接數組的元素，但它不會遞歸扁平化數組的數組，即如果 params 有一個是多維數組，它連接的是多維數組裡子數組，而不是子數組的元素

　　5、Array.slice([beg], [end]) 方法：返回指定數組的一個片段或子數組，範圍是 [beg, end)，不會改變原數組,若參數有負數，則表示相對數組末尾的偏移量

　　6、Array.splice([index], [size], [params]) 方法：在數組中插入或刪除元素的通用方法，返回刪除的子數組，index 指定插入或刪除位置，size 指定刪除個數，params指定插入的元素，會改變數組，若 params 里有數組，則插入數組（註意和 concat 的區別）

　　7、Array.push(params) 方法：在數組尾部添加一個或多個元素，返回數組新長度

　　8、Array.pop() 方法：刪除數組最後一個元素，並返回刪除元素的值

　　9、Array.unshift(params) 方法：在頭部添加一個或多個元素（後面的元素會移動到更高索引位置來獲得足夠的空間），並返回數組新的長度，它插入 params 的方法是一次性全部插入，即插入元素順序和它們在列表裡的順序是一樣的

　　10、Array.shift() 方法：刪除頭部第一個元素，並返回其值，然後自動移動數組的元素以填補頭部空缺

　　11、toString() 和 toLocaleString() 將數組中每個元素轉化為字元串並連接起來，toString() 採用逗號分隔，而 toLocaleString() 則使用本地化分隔符連接這些字元串，輸出不包括方括弧或其他任何形式的包裹數組值得分隔符

 

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

let str = arr.join(" ");
console.log(str);   // 輸出 "1 2 3 4 5"

arr.reverse();
console.log(arr);   // 輸出 [5, 4, 3, 2, 1]

arr.sort(function (a, b) {
    return a-b; // 採用升序排序，若為 b-a 則為降序，排序規則通過該函數設置
});
console.log(arr);   // 輸出 [1, 2, 3, 4, 5]

let arr_t = arr.concat([6, 7, [8, 9], 10]); // 沒有遞歸扁平化數組
console.log(arr_t); // 輸出 [1, 2, 3, 4, 5, 6, 7, [8, 9], 10]

arr_t = arr.slice(0, 3);    // [0, 3) 子數組
console.log(arr_t); // 輸出 [1, 2, 3]

arr_t.splice(0, 0, 4, 5);   // 在下標為 0 處刪除 0 個元素，並插入元素 4 和 5
console.log(arr_t); // 輸出 [4, 5, 1, 2, 3]

let len = arr.push(6, 7);   //在尾部插入元素 6 和 7，返回新長度
console.log("arr: ",arr, "\tlen: ", len);
arr.pop();  arr.pop();  // 把新插入得 2 個元素都 pop 掉，每次只能 pop 一個
console.log(arr);

len = arr.unshift(-1, 0);   // 在頭部一次性插入 2 個元素，註意所插入元素的順序
console.log("arr: ",arr, "\tlen: ", len);
arr.shift();  arr.shift();  // 把新插入得 2 個元素都 shift 掉，每次只能 shift 一個
console.log(arr);

str = arr.toString();
console.log(str);
str = arr.toLocaleString();
console.log(str);

 

ES5 中的數組方法：

 　　ES5 定義了 9 個新的數組方法來遍歷、映射、過濾、檢測、簡化和搜索數組，大多數方法的第一個參數接收一個函數，並對每個元素（或一些元素）調用一次該函數，對不存在的元素不調用傳遞該函數（稀疏數組）。一般情況下，該函數 function(val, index, arr) 第一個參數為數組元素，第二個為下標，第三個為數組本身。調用的函數被看作方法的第二個參數（可選）的方法。ES5 中數組的方法都不會改變原數組！

　　

　　1、forEach() 方法：從頭至尾遍曆數組，為每個元素調用指定的函數，且無法在所有元素都傳遞給調用函數之前終止遍歷。除非在 try 塊里，並拋出一個異常才能終止

let mul = 1， arr = [1, 2 ,3, 4, 5];
arr.forEach(function (value) {
    mul *= value;   // mul = 1*2*3*4*5
});
/*arr.forEach(function (value, index, array) {
    mul *= array[index];
}); 與上面的等價*/
console.log(mul);

 

　　2、map() 方法：將調用數組的每個元素都傳遞給指定函數，並返回一個新數組，它包含該函數的返回值（註意和 forEach 的區別）。若調用的數組是稀疏數組，則返回的也是稀疏數組

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

let arr_t = arr.map(function (value) {
    return value * 2;    //把 arr 里的元素都 *2
}); // map() 具有返回值

console.log(arr_t);    //返回 [2, 4, 6, 8, 10]

　　

　　3、filter() 方法：返回滿足一定條件的調用數組的一個子集，傳遞的函數是用來邏輯判斷的（返回 true 或 false）。同時，該方法會跳過稀疏數組中缺少的元素，即返回的數組總是稠密的

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

let arr_t = arr.filter(function (value) {
    return value % 2 == 1;  // 篩選奇數
});

console.log(arr_t);    // 輸出[1, 3, 5]

　　

　　4、every() 和 some() 方法：對調用數組的每個元素進行判定，返回 true 或 false，every 表示所有元素都滿足條件，而 some 表示有元素滿足條件。它們會儘早終止遍歷，而不是訪問每一個數組元素！

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

let flag = arr.every(function (value) {
    return value > 1;
});
console.log("Every num > 1: ", flag);    // 返回 false

flag = arr.some(function (value) {
    return value > 4;
});
console.log("Some num > 4: ", flag);    // 返回 true

 

　　5、reduce(function, [initVal]) 和 reduceRight(function, [initVal]) 方法：使用指定函數將數組元素進行組合，生成單個值，第一個參數是執行簡化操作的函數，而第二個是初始值，若未指定，則以第一個第一個元素（reduce）或最後一個（reduceRight）作為初始值。它使用的函數與 forEach() 不同，數組元素、索引及本身作為第 2~4 個參數傳遞給函數，第一個參數為到目前為止簡化操作積累的結果（起初為初始值，接下來每次操作後的結果都會存儲在第一個參數里）。reduce() 處理數組從低到高，而 reduceRight() 處理數組從高到低。

let arr = [3, 2, 1];

let pow = arr.reduce(function (accumulator, value) {
    return Math.pow(accumulator, value);    // accumulator^value，初始值為 3
});
console.log(pow);   // 輸出 3^2^1

let sum = arr.reduceRight(function (init, value) {
    return init + value;
}, 0);    // 初始值為 0
console.log(sum);   // 輸出 1+2+3，註意順序

 

　　6、indexOf(val, [index]) 和 lastIndexOf(val, [index]) 方法：搜索整個數組中和 val 恆等的元素，返回第一個相匹配的元素的索引，如果沒找到則返回 -1，index 指定搜索開始的下標。它不接受一個函數作為參數！！indexOf() 從低往高搜索，而 lastIndexOf() 從高往低。若 index 為負數，則它代表相對數組末尾的偏移量。

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

let res = arr.indexOf(3, 2);    // 從下標為 2 開始搜索與 3 恆等的數，並返回下標
console.log(res);   //輸出 2

res = arr.lastIndexOf(3);
console.log(res);   // 輸出3

 


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

-Advertisement-
Play Games
更多相關文章
  • Mysql 5.7 免安裝版 zip安裝
    最近想安裝一個本地資料庫, 發現網上寫的沒一個能安裝成功的, 各種蛋疼, 我還是自己寫一個吧 參考鏈接: https://www.cnblogs.com/by330326/p/5608290.html https://blog.csdn.net/baidu_41909653/article/deta ...
  • 一起學Android之Sqlite
    本文主要講解Andriod開發中Sqlite的簡單應用（增刪改查），僅供學習分享使用 ...
  • 前端筆記知識點整合之HTML5&CSS3（中）選擇器&偽類偽元素&CSS3效果&漸變背景&過渡
    一、CSS3選擇器 CSS3是CSS的第三代版本，新增了很多功能，例如：強大的選擇器、盒模型、圓角、漸變、動畫、2D/3D轉換、文字特效等。 CSS3和HTML5沒有任何關係！HTML5骨架中，可以用CSS2.1也可以用CSS3。XHTML骨架中可以用CSS3的樣式。 在學習CSS之前都是學習選擇器 ...
  • JavaScript基礎-4
    4 流程式控制制 4.1 順序結構 順序結構是程式中最簡單、最基本的流程式控制制，他沒有特定的語法結構，程式會按照代碼的先後順序執行，程式中大多數的代碼都是這樣執行的； 4.2 分支結構 if 分支結構 註意：if 適用於範圍判斷； 執行程式是按照從上到下依次執行； 單分支 if ( 條件表達式 ) { / ...
  • vue 設計一個倒計時秒殺的組件
    簡介： 倒計時秒殺組件在電商網站中層出不窮 不過思路萬變不離其蹤，我自己根據其他資料設計了一個vue版的 核心思路：1、時間不能是本地客戶端的時間 必須是伺服器的時間這裡用一個settimeout代替 以為時間必須統一 2、開始時間，結束時間通過父組件傳入，當伺服器時間在這個開始時間和結束時間的範圍 ...
  • vsCode中誤刪了文件，教你怎麼恢復
    不要慌！下麵開始幫你找到，很簡單！ ...
  • 如何在新工程中添加兩個不同版本的的echarts庫
    emmmmm.....標題我就覺得起的很變態。閑話不多說，先說出現的背景吧～～。 因為業務上的需求，跟一個硬體對接，要做大屏展示大廳客流熱力圖分佈（背景圖是客戶那邊給的）。然後這個機子傳過來的數據就可能20來條。如果用最新的echarts4來做，但是數據太小不足以畫出圖來，但是如果數據太大傳輸也是一 ...
  • 騰訊雲點播視頻存儲(Web端視頻上傳)
    "官方文檔" 前言 所謂視頻上傳，是指開發者或其用戶將視頻文件上傳到點播的視頻存儲中，以便進行視頻處理、分發等。 一、簡介 騰訊雲點播支持如下幾種視頻上傳方式： 1. 控制臺上傳：在點播控制臺上進行操作，將本地視頻上傳到雲點播，適用於直接管理少量視頻的場景，具有方便快捷、無技術門檻的優點； 2. 服 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類