JavaScript中的数组方法总结+详解

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量132 收藏
点赞数
分类专栏： js 文章标签： javascript
原文链接：https://blog.csdn.net/qq_43223007/article/details/110201463?utm_medium=distribute.pc_category.none-task-blog-hot-1.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1.nonecase
版权

JavaScript 数组的力量隐藏在数组方法中。

1. javaScript常用数组方法

顺序方法名功能返回值是否改变原数组版本
1push()(在结尾)向数组添加一或多个元素返回新数组长度YES5-
2unshift()（在开头)向数组添加一或多个元素返回新数组长度YES5-
3pop()删除数组的最后一位返回被删除的数据YES5-
4shift()删除首个数组元素，并把所有其他元素“位移”到更低的索引返回被删除的数据YES5-
5reverse()反转数组中的元素返回反转后数组YES5-
6sort()以字母顺序(字符串Unicode码点)对数组进行排序返回新数组YES5-
7splice()在指定位置删除指定个数元素再增加任意个数元素 （实现数组任意位置的增删改)返回删除的数据YES5-
8concat()通过合并（连接）现有数组来创建一个新数组返回合并之后的数组NES5-
9join()用特定的字符,将数组拼接形成字符串 (默认",")返回拼接后的新数组NES5-
10slice()裁切指定位置的数组被裁切的元素形成的新数组NES5-
11toString()将数组转换为字符串新数组NES5-
12valueOf()查询数组原始值数组的原始值NES5-
13indexOf()查询某个元素在数组中第一次出现的位置存在该元素,返回下标,不存在 返回 -1NES5-
14lastIdexOf()方向查询数组某个元素在数组中第一次出现的位置存在该元素,返回下标,不存在 返回 -1NES5-
15forEach()(迭代) 遍历数组,每次循环中执行传入的回调函数无/(undefined)NES5-
16map()(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组有/自定义NES5-
17filter()(迭代) 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中满足条件的元素组成的新数组NES5-
18every()(迭代) 判断数组中所有的元素是否满足某个条件全都满足返回true 只要有一个不满足 返回falseNES5-
19some()(迭代) 判断数组中是否存在,满足某个条件的元素只要有一个元素满足条件就返回true,都不满足返回falseNES5-
20reduce()(归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中最终操作的结果NES5-
21reduceRight()(归并)用法同reduce,只不过是从右向左同reduceNES5-
22includes()判断一个数组是否包含一个指定的值.是返回 true，否则falseNES6

2.方法详解

1.push();

功能: 在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)

 var arr = [1, 2, "c"];
    var rel = arr.push("A", "B");
    console.log(arr); // [1, 2, "c", "A", "B"]
    console.log(rel); //  5  (数组长度)

2.unshift();

功能: 在数组第一位添加一个或多个元素，并返回新数组的长度，改变原数组。(添加多个元素用逗号隔开)

 var arr = [1, 2, "c"];
    var rel = arr.unshift("A", "B");
    console.log(arr); // [ "A", "B",1, 2, "c"]
    console.log(rel); //  5  (数组长度)

3.pop();

功能：删除数组的最后一位，并且返回删除的数据，会改变原来的数组。(该方法不接受参数,且每次只能删除最后一个)

   var arr = [1, 2, "c"];
    var rel = arr.pop();
    console.log(arr); // [1, 2]
    console.log(rel); // c

4.shift();

功能：删除数组的第一位数据，并且返回新数组的长度，会改变原来的数组。(该方法同pop()；一样不接受参数,且每次只能删除数组第一个，但是该方法和pop();返回值不同)

    var arr = [1, 2, "c"];
    var rel = arr.shift();
    console.log(arr); // [2, "c"]
    console.log(rel); // 1

5.reverse();

功能：将数组的数据进行反转，并且返回反转后的数组，会改变原数组

  var arr = [1, 2, 3, "a", "b", "c"];
    var rel = arr.reverse();
    console.log(arr); //    ["c", "b", "a", 3, 2, 1]
    console.log(rel); //    ["c", "b", "a", 3, 2, 1]

6.sort();

sort() 方法是最强大的数组方法之一。

sort(); 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。
例1：

  var arr1 = [10, 1, 5, 2, 3];
    arr1.sort();
    console.log(arr1);

打印结果：在这里插入图片描述
结果并不是我们想要的排序结果，因为它是根据unicode编码来排序的,这也显示了其不稳定性。

语法： arr.sort(function(a,b))
参数： function可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
具体用法：

  • 如果 function(a, b) {return: a - b;} ，=> a - b > 0 那么 a 会被排列到 b 之前; (从小到大排序)
  • 如果 function(a, b) {return: b - a;} ，=> b - a > 0 那么b会被排列到 a 之前； (从大到小排序)

那么我们就可以运用以上所说的function(a,b)去完成对数字的排序:

    var arr = [10, 1, 5, 2, 3];
    arr.sort(function (a, b) {
      return a - b;
    });
    console.log(arr);

打印结果：在这里插入图片描述
元素为对象时（可按其中某个属性来排序）：

  var arr1 = [
      { name: "老八", age: "38" },
      { name: "赵日天", age: "28" },
      { name: "龙傲天", age: "48" },
    ];
    arr1.sort(function (a, b) {
      console.log(a, b);
      return b.age - a.age;
    });
    console.log(arr1);

打印结果：（按 age 排序（大到小））这是按age排序的

7.splice();

功能：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。可以实现数组的增删改；
　
　 语法： arrayObject.splice(index,howmany,item1,…,itemX)
　 参数：

参数描述
index必需。整数，规定添加/删除项目的位置（元素下标），使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX可选。向数组添加的新项目。

例，删除arr()中第三个元素并添加 ”add1“ "add2"元素

 var arr = ["a", "b", "c", 2, 3, 6];
    var rel = arr.splice(2, 1, "add1", "add2");
    console.log(arr);   //原数组
    console.log(rel);	//新数组

打印结果：在这里插入图片描述

8.concat();

功能： 数组的拼接(将多个数组或元素拼接形成一个新的数组),不改变原数组
如果拼接的是数组 则将数组展开,之后将数组中的每一个元素放到新数组中.
如果是其他类型, 直接放到新数组中
另外，如果不给该方法任何参数，将返回一个和原数组一样的数组（复制数组）

    var arr1 = [1, 2, 3];
    var arr2 = ["a", "b", "c"];
    var arr3 = ["A", "B", "C"];
    var rel = arr1.concat(arr2, arr3);
    console.log(arr1); //原数组
    console.log(rel); //新数组

打印结果：在这里插入图片描述
可以看到原数组 arr1() 并没有被改变，该方法不改变原数组，后续不改变原数组方法将不再打印原数组

9.join();

功能：用特定的字符,将数组拼接形成字符串 (默认",")

   var list = ["a", "b", "c", "d"]; // "a-b-c-d"
    var result = list.join("-");     //"a-b-c-d"
    var result = list.join("/");     //"a/b/c/d"
    var result = list.join("");      //"abcd"
    var result = list.join();        //  a,b,c,d
    console.log(result);

10.slice();

功能： 裁切指定位置的数组，返回值为被裁切的元素形成的新数组 ，不改变原数组
同concat() 方法 slice() 如果不传参数,会使用默认值,得到一个与原数组元素相同的新数组 (复制数组)

语法： arr[].slice(startIndex,endIndex)
参数

参数描述
startIndex起始下标 默认值 0
endIndex终止下标 默认值 length,可以接收负数,(倒着数)

注意！起始下标和终止下标的区间是 左闭右开 [ a ，b) 能取到起始，取不到终止

  var list = ["a", "b", "c", "d"];
    var result = list.slice(1, 3);
    console.log(result);  // ["b", "c"]

11.toString();

功能: 直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join();方法不添加任何参数 相同.

 var list = ["a", "b", "c", "d"];
    var rel = list.toString();
    console.log(rel);   // a,b,c,d   (字符串类型)

12.valueOf();

功能: 返回数组的原始值（一般情况下其实就是数组自身）

   var list = [1, 2, 3, 4];
    var rel = list.valueOf();
    console.log(list); // [1, 2, 3, 4]
    console.log(rel); // [1, 2, 3, 4]

13.indexOf();

功能: 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

 var list = [1, 2, 3, 4];
    var index = list.indexOf(4); //3
    var index = list.indexOf("4"); //-1
    console.log(index);

14.lastIndexOf();

功能: 查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

    var list = [1, 2, 3, 4];
    var index = list.lastIndexOf(4); //3
    var index = list.lastIndexOf("4"); //-1
    console.log(index);

15.forEach();

功能: 遍历数组,每次循环中执行传入的回调函数 。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组.
语法:

arr[].forEach(function(value,index,array){
　 　//do something
})

参数: item:每次循环的当前元素, index:当前项的索引, array:原始数组；

数组中有几项，那么传递进去的匿名回调函数就需要执行几次；

实例1.:

 var list = [32, 93, 77, 53, 38, 87];
    var res = list.forEach(function (item, index, array) {
      console.log(item, index, array);
    });
    console.log(res);

打印结果
在这里插入图片描述
实例2: 数组中元素的和

    var list = [32, 93, 77, 53, 38, 87];
    var sum = 0;
    list.forEach(function (item) {
      console.log(item);
      sum += item;
    });
    console.log(sum);

打印结果
在这里插入图片描述

16.map();

功能: 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 ,
同forEach() 方法,但是map()方法有返回值,可以return出来;
语法:

arr[].map(function(item,index,array){
　　//do something
　　return XXX
})

参数： item:每次循环的当前元素, index:当前项的索引, array:原始数组；

示例:

    var list = [32, 93, 77, 53, 38, 87];
    var res = list.map(function (item, index, array) {
      return item + 5 * 2;
    });
    console.log("原数组", list);
    console.log("新数组", res);

打印结果:
在这里插入图片描述

17.filter();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中.
语法:

arr[].filter(function(item,index,array){
　　//do something
　　return XXX //条件
})

参数： item:每次循环的当前元素, index:当前项的索引, array:原始数组；
示例:

   var list = [32, 93, 77, 53, 38, 87];
    var resList = list.filter(function (item, index, array) {
      return item >= 60; // true || false
    });
    console.log(resList);

打印结果:
在这里插入图片描述

18.every();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true 只要有一个不满足 返回false => 判断数组中所有的元素是否满足某个条件

 var list = [32, 93, 77, 53, 38, 87];
    var result = list.every(function (item, index, array) {
      console.log(item, index, array);
      return item >= 50;
    });
    console.log(result);

打印结果:false

19.some();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true,都不满足返回false => 判断数组中是否存在,满足某个条件的元素
示例:

    var list = [32, 93, 77, 53, 38, 87];
    var result = list.some(function (item, index, array) {
      return item >= 50;
    });
    console.log(result);

打印结果 : true

20.reduce();

功能: 遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中, 返回最终操作的结果;
语法: arr.reduce(function(prev,item,index,array){})
参数:
prev 初始值 (类似求和是 sum=0) 可以设置初始值( 参数),如果不设置初始值默认是数组中的第一个元素,遍历时从第二个元素开始遍历
item 每次循环的当前元素
index 每次循环的当前下标
array 原数组

实例1: 不设置初始值的累加

    var arr = [2, 3, 4, 5];
    var sum = arr.reduce(function (prev, item, index, array) {
      console.log(prev, item, index, array);
      return prev + item;
    });
    console.log(arr, sum);

打印结果
在这里插入图片描述
解析:
第一次循环: prev = 2 ; item(当前循环元素) = 3 ; index(当前循环元素下标) = 1;原数组 =array;
因为没有给prev设置初始值,所以prev 的值为数组中第一个元素,遍历从第二个元素开始
第二次循环:prev = 5; item(当前循环元素) = 4 ; index(当前循环元素下标) = 2;原数组 =array;
prev = 2+3(上次循环的元素) = 5 ;
…
最终prev = 14 ; arr中有四个元素 共循环三次;(因为没设置初始值跳过第一次循环prev默认等于第一个值)

实例2 设置初始值的累加

   	var arr = [2, 3, 4, 5];
    var sum = arr.reduce(function (prev, item, index, array) {
      console.log(prev, item, index, array);
      return prev + item;
    }, 0);
    console.log(arr, sum);

打印结果
在这里插入图片描述
解析: 可以看到与上一次设置初始值相比,最终的结果相同,但是多循环的一次,因为设置了prev的初始值为0,所以循环遍历从第一个元素开始,而不设置初始值,循环从第一个元素开始.

21.reduceRight();

功能: 用法同reduce,只不过是从右向左

22.includes();

功能: 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
实例

let site = ['runoob', 'google', 'taobao'];

site.includes(‘runoob’);
// true

site.includes(‘baidu’);
// false

王小奎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript数组对象及其方法详解
zhangawei123的博客
10-28 1075
本文章讲解JavaScript中的数组对象以及其相关方法。包括了数组的遍历，数组内容的增删改，数组元素的擦护照检索，数组的排序，数组的迭代等方法。内容比较齐全，希望可以帮助大家。
JavaScript中数组对象详解
radcb55226的博客
05-05 735
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript中的数组方法总结+详解+注意事项！！！
weixin_56180673的博客
10-29 437
数组方法的集合及注意事项#合并数组多种方法#数组基本方法#数组方法使用
【JavaScript】—— 数组篇（方法总结+详解）
JPengp的博客
04-17 1056
全网最细！学习JavaScript数组知识一篇就够了！！！
JavaScript中的数组循环遍历方法详解
zyl19950717的博客
05-20 341
在JavaScript中，数组是一种常用的数据结构，而循环遍历数组是处理数组中元素的常见操作。JavaScript提供了多种方法来循环遍历数组，每种方法都有其独特的特点和用途。
细说JavaScript数组（JavaScript数组详解）
zhishunet
01-16 1236
生活中我们经常遇到，比如期末成绩名次表，特点就是具有严格的顺序，都是从第一名开始的顺序依次递减，中间没有间断，这种有序的数据就可以称为数组。
JavaScript 数组【详解】
Jin_Xiang123的博客
12-25 3651
在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。数组中的元素可以通过索引来访问和修改，索引从0开始。JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。操作示例描述创建数组。
JavaScript之数组方法map详解（一）
热门推荐
News777的博客
07-01 1万+
与其它数组迭代方式一样，map的回调函数也有三个参数(可以单独使用，隐藏和)： 注：返回 val 的绝对值 注：返回 val 的平方根 2.2 String 与 Number 类型互转 String 转为 Number Number 转为 String 2.3 取数组对象中某一属性组成新数组 不仅仅于此，你也可以对这一属性或是新数组进行满足需求的一些操作，如： 年龄数组降序 名称数组转成字符串 2.4 提取数组对象的属性值组成新的数组对象 2.5 提取值，改变键值，组成新的数组对
【JavaScript】数组去重的方法详解
浅陌繁星的博客
12-26 338
步骤：先将数组进行排序将排序后的数组进行相邻之间的比较，判断他们是否相同 该方法缺点：步骤：直接对原数组进行遍历从前往后查找，判断是否存在一样的数字 注：虽然该方法不会改变原数组的排序，但是会修改原数组。步骤：首先创建一个新的空数组然后判断原数组中的数据在新数组中是否存在 注：该方法创建了新数组，既没有改变原数组，也没有修改原数组的排序。(1) 首先先简单介绍以下Set1.Set 数据结构的特点：2.Set 数据结构的语法： (2) 实现的数组去重的代码： 注：以上两行代码输出的结果是Set格式的，如果想转
JavaScript中数组Array方法详解
12-12
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数，这意味着这些函数作为任何数组的方法都是可用的。 1、Array.join()方法 Array.join()方法将数组中所有元素都转化为字符串并连接在一起，返回最后...
详解JavaScript中数组的reduce方法
10-20
js函数中有三个在特定场合很好用的函数:...而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。
javaScript数组迭代方法详解
10-22
主要为大家详细介绍了javaScript数组迭代方法，ECMAScript5为数组定义了5个迭代方法，感兴趣的小伙伴们可以参考一下
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 541
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1323
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1094
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 998
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 122
【代码】vue el-select的下拉树形结构。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 155
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
JavaScript数组常用属性与方法详解
"JS基础知识，包括常用的属性和方法，特别是数组的属性与操作方法的详解" 在JavaScript（JS）中，了解和掌握常用的属性和方法是编程的基础。数组作为JS中重要的数据结构，其`length`属性是经常使用的。`arr.length`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值