js处理数组的方法

IT那活儿发布于2023-01-11 13:20 / 1608人阅读

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数组取值方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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