js處理數組的方法

IT那活兒發布于2023-01-11 13:20 / 1609人閱讀

js處理數組的方法

點擊上方“IT那活兒”，關注后了解更多內容，不管IT什么活兒，干就完了！！！

我們在前端開發中，會接觸到js數組的使用。數組提供了很多方法，這些方法對我們來說，可以很方便的達到我們想要的結果。在前后端分離后，通過接口調用獲取數據的情況下，少不了對數組的處理，以下是js數組中常見的幾種處理方式。

什么是數組

數組是按次序排列的一組值。每個值的位置都有編號（從0開始），整個數組用方括號表示。

迭代方法

1. map()

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

var arr = [1, 2, 3, 4, 5];
        var arr1 = arr.map(function (item) {
            return item * item;
        });
        console.log(arr1); //[1,4,9,16,25]

2. forEach()

arr.forEach()：它只是對數組中的每一項運行傳入的函數。沒有返回值。

注意點：

1）沒有返回值：

var arr = [1, 2, 3, 4, 5];
        var solt = arr.forEach((v, i, a) => {
            console.log(v);
        });
        console.log(solt); // undefined

2）不能中止或跳出 forEach 循環：

var arr = [1, 2, 3, 4, 5]
        arr.forEach((v, i, a) => {
            console.log(v);
            if (v === 3) {
                break;
            }
        }); // 報錯
        arr.forEach((v, i, a) => {
            console.log(v);
            if (v === 3) {
                console.log( );
                return false;
            }
        }); //1   //2 //3 // //4   //5

3）跳過空值：

var arr = [1, 3, , 13, 2];
        var newarr = [];
        arr.forEach(function (item, index) { 
            arr[index] = 2;
        })
        console.log(arr); //[2,2,empty,2,2]

4）循環次數由數組初始長度決定：

var arr = [1, 2, , 3, 4];
        var newarr = [];
        arr.forEach(function (item, index) {
            if (arr[index] == 4) {
                arr.push(10);
                arr.push(6);
            }
            console.log("數組循環了" + index + "次");
        });
        console.log(arr);
        //數組循環了0次 //數組循環了1次 //數組循環了3次 //數組循環了4次
//[1, 2, empty, 3, 4, 10, 6]

棧方法

棧方法是指Last-In-First-Out后進先出。

1. push()

arr.push()：可向數組的末尾添加一個或多個元素，并返回新的數組長度。

var arr = [1,2,3,4,5];
        console.log(arr.push(6)); //6 返回數組長度
        console.log(arr); //[1,2,3,4,5]

2. pop()

arr.pop()：可向數組的末尾刪除一個元素，并返回新的數組。

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

隊列方法

1. shift()

arr.shift()：可向數組的前面刪除一個元素，并返回刪除的元素。

var arr = [1,2,3,4,5];
        console.log(arr.shift()); //1 返回刪除元素
        console.log(arr); //[2,3,4,5]

2. unshift()

arr.unshift()：可向數組的前面添加一個或多個元素，并返回新的數組長度。

var arr = [1,2,3,4,5];
        console.log(arr.unshift(6)); //6 返回新數組長度
        console.log(arr); //[6,1,2,3,4,5]

操作方法

concat()

arr.concat()：連接兩個或多個數組，并返回一個新數組。

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

位置方法

1. indexOf()

arr.indexOf()：根據內容找到在數組中第一次出現的索引位置，找不到返回-1。

var arr = [1, 2, 3, 4, 5, 2];
        var arr1 = arr.indexOf(2);
        console.log(arr1) ; //1
        var arr2 = arr.indexOf(9);
        console.log(arr2); //-1

2. lastIndexOf()

arr.lastIndexOf()：根據內容找到在數組中最后一次出現的索引位置，找不到返回-1。

var arr = [1, 2, 3, 4, 5, 2];
        var arr1 = arr.lastIndexOf(2);
        console.log(arr1); //5
        var arr2 = arr.lastIndexOf(6);
        console.log(arr2); //-1

重排序方法

reverse()

arr.reverse()：反轉數組中元素的順序，并返回反轉后的數組。

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

本文作者：池思敏

本文來源：IT那活兒（上海新炬王翦團隊）

云服務器 GPU云服務器 js創建數組的方法 js數組方法 js數組操作方法 js數組取值方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/129580.html

讓開發事半功倍-js數組處理方法

摘要：日常開發中，如果熟悉一般的數組處理方法，常能事半功倍，有更多時間學習其他技術，形成正向循環。這里總結常用的數組處理方法。日常開發中，如果熟悉一般的數組處理方法，常能事半功倍，有更多時間學習其他技術，形成正向循環。這里總結常用的js數組處理方法。遍歷查找 Array.filter() 過濾返回新數組，不改變原數組不檢查空數組 let holidays = [1, 3, 5,...

happen 2019-08-26 13:44 評論0 收藏0
JavaScript知識點總結

摘要：參與任何數值計算的結構都是，而且。。面向人類的理性事物，而不是機器信號。達到無刷新效果。的工作原理總是指向一個對象，具體是運行時基于函數的執行環境動態綁定的，而非函數被聲明時的環境。原型對象上有一個屬性，該屬性指向的就是構造函數。 1.JS面向對象的理解面向對象的三大特點：繼承、封裝、多態 1、JS中通過prototype實現原型繼承 2、JS對象可以通過對象冒充，實現多重繼承， 3...

sean 2019-08-22 13:51 評論0 收藏0
淺談JS中 reduce() 的用法

摘要：一語法其中，表示將要原數組表示上一次調用回調時的返回值，或者初始值表示當前正在處理的數組元素表示當前正在處理的數組元素的索引，若提供值，則索引為，否則索引為表示初始值。一、語法 arr.reduce(function(prev,cur,index,arr){...}, init); 其中，arr 表示將要原數組；prev 表示上一次調用回調時的返回值，或者初始值 init;cur 表...

gplane 2019-08-23 16:41 評論0 收藏0
【重溫基礎】21.高階函數

摘要：歡迎您的支持系列目錄復習資料資料整理個人整理重溫基礎篇重溫基礎對象介紹重溫基礎對象介紹重溫基礎介紹重溫基礎相等性判斷重溫基礎閉包重溫基礎事件本章節復習的是中的高階函數，可以提高我們的開發效率。本文是重溫基礎系列文章的第二十一篇。今日感受：想家。本人自己整理的【Cute-JavaScript】資料，包含：【ES6/ES7/ES8/ES9】，【JavaScript基礎...

wua_wua2012 2019-08-23 15:05 評論0 收藏0
【重溫基礎】JS中的常用高階函數介紹

摘要：也可以直接調用內置方法常用高階函數方法的作用是接收一個函數作為參數，對數組中每個元素按順序調用一次傳入的函數并返回結果，不改變原數組，返回一個新數組。 Ps. 晚上加班到快十點，回來趕緊整理整理這篇文章，今天老大給我推薦了一篇文章，我從寫技術博客中收獲到了什么？- J_Knight_，感受也是很多，自己也需要慢慢養成記錄博客的習慣，即使起步艱難，難以堅持，但還是要讓自己加油加油。前...

gitmilk 2019-08-23 13:53 評論0 收藏0