這麼多數組方法，你掌握了麽？

来源:https://www.cnblogs.com/xiao-yaolx/archive/2019/12/27/12107868.html
-Advertisement-
Play Games

今天總結一下常用的JS數組方法，以免搞忘了或者記混了，大家覺得還有哪些數組方法在項目里用的特別多我沒提到的可以補充。。 1.map ：遍曆數組的每一項並對其進行操作。 有返回值 且 不改變原數組。 var arr = [1, 2, 3, 4, 5, 6]; var res = arr.map(ite ...


今天總結一下常用的JS數組方法，以免搞忘了或者記混了，大家覺得還有哪些數組方法在項目里用的特別多我沒提到的可以補充。。

 1.map ：遍曆數組的每一項並對其進行操作。  有返回值  且  不改變原數組。

 var arr = [1, 2, 3, 4, 5, 6];
      var res = arr.map(item => {
        return item * 2;
      });
      console.log(arr); //[1, 2, 3, 4, 5, 6]
      console.log(res); //[2, 4, 6, 8, 10, 12]

2. forEach ：遍曆數組每一項並可對其操作，但是結果無用功。  因為forEach沒有返回值 且 不改變原數組 可以針對數組的長度對你想要改變的變數進行修改。

  var arr1 = [3, 4, 5, 6, 7];
      var nums = 0;
      arr1.forEach(item => {
        console.log(item);
        nums++;
      });
      console.log(arr1, nums);//[3,4,5,6,7],5

3. some： 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的值。每一項都會遍歷。

    const result = [];
      var arr2 = [
        { name: "lx", age: 35 },
        { name: "lxx", age: 20 },
        { name: "l1x", age: 5 },
        { name: "1lx", age: 15 },
        { name: "zlx", age: 25 },
        { name: "xlx", age: 22 }
      ];
      arr2.some(item => {
        //   console.log(item.age)
        console.log(item.age % 5 == 0); // 5true  false
        if (item.age % 5 == 0) {
          result.push({ age: item.age });
        } else {
          result.push({ unage: item.age });
        }
      });
      console.log(result);

4.every ： 該方法  測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。當有一項與條件成立時 後面的項停止遍歷。同樣返回值是一個Boolean類型。

     
  var arr3 = [3, 2, 3, 4, 5, 6, 7];
      function test(item) {
        return item > 1;
      }
      console.log(arr3.every(test)); //true

5.filter: 顧名思義 過濾  該數組方法就是能夠做到拿到你想要得到的那條數據的一個數組  註意是數組！ 不會改變原數組

     
  var arr4 = [
        { name: "lx", age: 28 },
        { name: "l1x", age: 5 },
        { name: "1lx", age: 15 },
        { name: "zlx", age: 25 },
        { name: "xlx", age: 22 }
      ];
      let res4 = arr4.filter(item => {
        return item.age == 25;
      });
      console.log(res4); // [{…}]0: {name: "zlx", age: 25} length: 1__proto__: Array(0)

6. concat: 合併 該方法是將兩個數組或多個數組合併成一個數組 不會改變原數組 可以採用擴展運算符... 結果是一樣的

      
 var arr5 = [13, 5, 6, 7];
      var arr6 = [23, 5, 6, 7];
      let res6 = arr6.concat(arr5);
      let res7 = [...arr5, ...arr6];
      //求數組並集
      res7 = [...new Set([...arr5, ...arr6])];
      console.log(res7); // [13, 5, 6, 7, 23]
      // 求數組交集
      var bs = new Set(arr5);
      var sa = new Set(arr6); //{23,5,6,7}
      let res8 = arr5.filter(item => sa.has(item));
      console.log(res8);
7. reduce: 這個方法相當強大  基本上所有操作都可以實現 方法對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總為單個返回值。 參數callback，       //initialValue（不傳 預設取數組的第一個元素）       // reducer 函數接收4個參數:       // Accumulator (acc) (累計器)       // Current Value (cur) (當前值)       // Current Index (idx) (當前索引)       // Source Array (src) (源數組)        
//簡單的例子
      var arr7 = [1, 2, 3, 4, 5];
      var ress7 = arr7.reduce((acc, cur) => {
        return acc + cur;
      }, 0);
      console.log(ress7); //15

 註意：下麵分場景分別介紹一下reduce這個方法的強大之處

//reduce場景1：累加對象數組中的值
      var arr8 = [
        { name: "lx", age: 28 },
        { name: "l1x", age: 5 },
        { name: "1lx", age: 15 },
        { name: "zlx", age: 25 },
        { name: "xlx", age: 22 }
      ];
      var initValue = 0;
      const ress8 = arr8.reduce((acc, cur) => {
        return acc + cur.age;
      }, 0);
      console.log(ress8); //95
 //場景2： 將二維數組降一維
      var arr9 = [[1, 2], 4, 8, 9];
      let res9 = arr9.reduce((acc, cur) => {
        return acc.concat(cur);
      }, []);
      console.log(res9); // [1, 2, 4, 8, 9]
 //場景3： 計算數組中每個元素出現的個數
      var arr10 = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];
      let res10 = arr10.reduce((acc, cur) => {
        if (cur in acc) {
          acc[cur]++;
        } else {
          acc[cur] = 1;
        }
        return acc;
      }, {});
      console.log(res10);
      // 場景4： 按屬性對Object分類
      var people = [
        { name: "Alice", age: 21 },
        { name: "Max", age: 20 },
        { name: "Jane", age: 20 }
      ];
      var resPeople = people.reduce((acc, obj) => {
        var key = obj["age"];
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
      }, {});
      console.log(resPeople);
// 場景5：數組去重
      var arr11 = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"];
      var res11 = arr11.reduce((acc, cur) => {
        if (acc.indexOf(cur) === -1) {
          acc.push(cur);
        }
        return acc;
      }, []);
      console.log(res11);
      //場景6： 按順序執行Promise
      function peomise1(a) {
        return new Promise((resolve, reject) => {
          //當非同步代碼執行成功後才會執行resolve
          setTimeout(() => {
            resolve(a * 5);
          }, 1000);
        });
      }
      function peomise2(a) {
        return new Promise((resolve, reject) => {
          //當非同步代碼執行成功後才會執行resolve
          setTimeout(() => {
            resolve(a * 2);
          }, 2000);
        });
      }
      function peomise3(a) {
        return new Promise((resolve, reject) => {
          //當非同步代碼執行成功後才會執行resolve
          setTimeout(() => {
            resolve(a * 6);
          }, 1000);
        });
      }
      console.log(Promise.resolve(3));
 //reduce 方式 順序執行並返回一個結果
      function runPromise(arr, input) {
        return arr.reduce((acc, cur) => acc.then(cur), Promise.resolve(input));
      }
      const promiseArr = [peomise1, peomise3, peomise2];
      runPromise(promiseArr, peomise1(3)).then(console.log);

8.slice： 方法返回一個新的數組對象，這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。同樣不會對原數組改變

     
  let arr12 = [24, 3, 6, 8, 7, 9];
      //省略第二個參數end  會一直拷貝到數組結尾處的元素
      let res12 = arr12.slice(3);
      console.log(res12); // [8,7,9]

9. splice(start[, deleteCount[, item1[, item2[, ...]]]]): 這個方法之前一直和slice分不清楚，其實它們有個最大的不同點就是，這個方法是改變原數組的，不會重新開闢一個空間去改變數組長度。

     參數 start​ 指定修改的開始位置（從0計數）。如果超出了數組的長度，則從數組末尾開始添加內容；如果是負值，則表示從數組末位開始的第幾位（從-1計數，這意味著-n是倒數第n個元素並且等 價於array.length-n）；如果負數的絕對值大於數組的長度，則表示開始位置為第0位。

deleteCount 可選 整數，表示要移除的數組元素的個數。

item1, item2, ... 可選  要添加進數組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數組元素。

     
  let arr13 = [1, 3, 5, 7, 9, 7, 2, 6, 57, 7];
      //增  第一個參數代表位置索引
      arr13.splice(1, 0, "2"); // [1, "2", 3, 5, 7, 9, 7, 2, 6, 57, 7]
      //刪  第二個參數表示刪除元素的個數，當省略時表示從索引處到數組結尾處全刪
      arr13.splice(2); //[1,"2"]
      //改
      arr13.splice(0, 1, "哈哈");
      console.log(arr13); // ["哈哈",  "2"]
       
//例題熟悉一下這兩個方法： 從第 2 位開始刪除 0 個元素，插入“drum”
      var myFish = ["angel", "clown", "mandarin", "sturgeon"];
      myFish.splice(1, 0, "drum");
      console.log(myFish); //["angel", "drum", "clown", "mandarin", "sturgeon"]
      //從第 3 位開始刪除 1 個元素
      var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
      myFish.splice(3, 1);
      console.log(myFish); // ["angel", "clown", "drum", "sturgeon"]

10. pop：沒有參數，負責刪除數組的最後一個元素,改變原數組

      
 var arr14 = [1, 4, 5, 9];
      arr14.pop(); //[1, 4, 5]
      console.log(arr14);

11. push: 像數組末尾添加一個元素或多個元素 arr.push(element1, ..., elementN)

      
 var arr14 = [1, 4, 5, 9];
      arr14.push("3"); //[1, 4, 5,9,"3"]
      arr14.push("3", 2);
      console.log(arr14);

12.shift: 刪除數組的第一個元素 改變原數組

   var arr15 = [1, 4, 5, 9];
      arr15.shift(); //[4, 5, 9]
      console.log(arr15);

13.unshift: 在數組首位添加一個或多個元素

  var arr16 = [6, 1, 4, 5, 9, 8];
      arr16.unshift("5", 3); //["5", 3, 6, 1, 4, 5, 9, 8]
      console.log(arr16);
14. fill : 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。       arr.fill(value[, start[, end]])   參數：value 填充數組元素的值         start 起始索引  預設0          end 終止索引 預設this.length 
  var arr17 = [2, 3, 4];
      arr17.fill(6); //[6,6,6]
      arr17.fill("7", 0, 2); //["7", "7", 6]
      console.log(arr17);

15. flat: 大家對這個方法一定不熟悉，我在一次做項目的時候用到了它，下麵看看它的作用 方法很強大 扁平化數組  但是有相容性的影響

     // 參數表示扁平化的層級
      var arr18 = [2, 6, 8, [9, 10, 26]];
      let res18 = arr18.flat(1); //[2, 6, 8, 9, 10, 26]
      //Infinity 可以扁平任意深度的數組
      // let res18 = arr18.flat(Infinity)  //[2, 6, 8, 9, 10, 26]
      console.log(res18);

16.join： 方法將一個數組（或一個類數組對象）的所有元素連接成一個字元串並返回這個字元串。如果數組只有一個項目，那麼將返回該項目而不使用分隔符。

 // 不改變原數組
      var arr19 = [2, 2, 6, 3, 4, 5, 6, "y"];
      var res19 = arr19.join(","); //2,2,6,3,4,5,6,y
      var res20 = arr19.join(""); //2263456y
      console.log(res20);

17. find ： 方法返回數組中滿足提供的測試函數的第一個元素  的值。否則返回 undefined。  註意是第一個

 var arr21 = [
        { name: "lz", age: 21 },
        { name: "lx", age: 21 },
        { tine: "xx", ageL: 23 }
      ];
      let res21 = arr21.find(ele => ele.age === 21)
      console.log(res21) //{name: "lz", age: 21}  返回元素
      //想要所有符合條件的  就可以用filter方法
      let res22 = arr21.filter(ele => ele.age === 21)
      console.log(res22) //返回數組  [{…}, {…}]

18.findIndex: 方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。  註意是第一個

  var arr23 = [
        { name: "lz", age: 21 },
        { name: "lx", age: 21 },
        { tine: "xx", ageL: 23 }
      ];
      let res23 = arr23.findIndex(ele => ele.age === 21)
      console.log(res23) //0 返回索引

19.indexOf： 方法返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

    
   var arr24 = [1,
        { name: "lz", age: 21 },
        { name: "lx", age: 21 },
        { tine: "xx", ageL: 23 }
      ];
      let res24 = arr24.indexOf(1)
      console.log(res24) //0 返回索引

先總結這些，後續會補充，還會總結一些對象常用的方法，只有不斷總結，才能讓自己對這些方法不陌生，才能在項目中能有多種解決方法，選擇一種最優解。


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

-Advertisement-
Play Games
更多相關文章
  • JS高級---實例對象使用屬性和方法層層的搜索 （實例對象-->原型對象-->報錯）
    實例對象使用屬性和方法層層的搜索： 實例對象使用的屬性或者方法, 先在實例中查找, 找到了則直接使用； 找不到則, 再去實例對象的__proto__指向的原型對象prototype中找, 找到了則使用, 找不到則報錯。 <!DOCTYPE html> <html lang="en"> <head> ...
  • JS高級---原型的簡單的語法
    原型的簡單的語法 構造函數，通過原型添加方法，以下語法，手動修改構造器的指向 實例化對象，並初始化，調用方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> fu ...
  • JS高級---利用原型共用數據
    什麼樣子的數據是需要寫在原型中? 需要共用的數據就可以寫原型中 原型的作用之一: 數據共用 //屬性需要共用, 方法也需要共用 //不需要共用的數據寫在構造函數中,需要共用的數據寫在原型中 //構造函數 function Student(name,age,sex) { this.name=name; ...
  • 自寫一個漂亮的ant design form提交標簽
    在ant design 的form組件中 能用於提交的組件比較少，所以我在這寫了一個可以單選、多選標簽提交的組件，調用非常簡單。 代碼： 1 import React,{Fragment} from 'react'; 2 import { Tag,Icon,Input } from 'antd'; ...
  • 用一道大廠面試題帶你搞懂事件迴圈機制
    本文涵蓋 面試題的引入 對事件迴圈面試題執行順序的一些疑問 通過面試題對微任務、事件迴圈、定時器等對深入理解 結論總結 面試題 面試題如下，大家可以先試著寫一下輸出結果，然後再看我下麵的詳細講解，看看會不會有什麼出入，如果把整個順序弄清楚 Node.js 的執行順序應該就沒問題了。 async fu ...
  • 實現一個前端路由，如何實現瀏覽器的前進與後退？
    1. 需求 如果要你實現一個前端路由，應該如何實現瀏覽器的前進與後退 ？ 2. 問題 首先瀏覽器中主要有這幾個限制，讓前端不能隨意的操作瀏覽器的瀏覽紀錄： •沒有提供監聽前進後退的事件。•不允許開發者讀取瀏覽紀錄，也就是 js 讀取不了瀏覽紀錄。•用戶可以手動輸入地址，或使用瀏覽器提供的前進後退來改 ...
  • CORS
    目錄 "引子" "簡介" "Request Header" "Response Header" "Preflight Request" "參考資料" 引子 全稱 Cross Origin Resource Sharing，跨源資源共用，是跨域的解決方案之一，裡面有不少的知識點，在此集中整理。 [Or ...
  • JS高級---構造函數，實例對象和原型對象，三者關係
    構造函數，實例對象和原型對象，三者關係 構造函數裡面有原型（prototype）屬性，即原型對象 原型對象里的constryctor構造器指向構造函數 通過構造函數，實例化，創建的就是實例對象。 實例對象通過__proto__屬性調用原型對象裡面的方法 構造函數可以實例化對象 構造函數中有一個屬性叫 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類