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
  • 移動開發（一）：使用.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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類