JavaScript数组方法总结

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量1.1k 收藏 3
点赞数 4
分类专栏： 前端知识点总结 文章标签： javascript 数组 array
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honeymoon_/article/details/119783631
版权

目录

(一) 数组常用方法

1. toString()

把数组转换为数组值（逗号分隔）的字符串。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
console.log(arr.toString());
console.log(typeof arr.toString());    //数据类型

输出：
在这里插入图片描述

2. join()

把数组里的元素连接成一个字符串。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
console.log(arr.join());
console.log(arr.join(''));
console.log(arr.join('-'));
console.log(arr.join('&'));

输出：
在这里插入图片描述

3. push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.push('JavaScript', 'vue');
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述

4. pop()

删除最后一个元素，并返回该元素的值。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.pop();
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述

5. unshift()

一个或多个元素添加到数组的开头，并返回该数组的新长度。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.unshift(23, '二十三');
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述

6. shift()

从数组中删除第一个元素，并返回该元素的值。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.shift();
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述

7. splice(）

可以对数组进行添加、替换、删除操作。

例：
（1）添加：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
//在索引为2处添加元素
const result = arr.splice(2, 0 , 'two');
console.log('新数组为:' + arr);

输出：
在这里插入图片描述
（2）替换

let arr = [1,2,'你好',4,5,'hello',7,8,9];
//将索引为2处的元素替换成two
const result = arr.splice(2, 1 , 'two');
console.log('新数组为:' + arr);

输出：
在这里插入图片描述
(3) 删除

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.splice(2, 1);
//从索引为2的元素开始，删除一个元素
console.log('新数组为:' + arr);

输出：
在这里插入图片描述

8. slice()

裁剪数组，用数组的某个片段切出新数组。返回一个新的数组，不改变原数组。

例：
（1）slice(start， end)，从start开始截取，不包括end。

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.slice(0, 3);
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述
（2）slice(start)，从start开始截取，一直到末尾。

let arr = [1,2,'你好',4,5,'hello',7,8,9];
const result = arr.slice(3);
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述

9. concat()

合并两个或多个数组。返回一个新数组，不改变原数组。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
let arr1 = ['ten','eleven']
const result = arr.concat(arr1);
console.log('新数组为:' + arr);
console.log('返回值为:' + result);

输出：
在这里插入图片描述

10. includes()

用来判断一个数组是否包含一个指定的值，返回一个布尔值。

例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
console.log(arr.includes('你好'));

输出：
在这里插入图片描述

11. isArray()

用于确定传递的值是否是一个数组。
例：

let arr = [1,2,'你好',4,5,'hello',7,8,9];
console.log(Array.isArray('你好'));
console.log(Array.isArray(arr));

输出：
在这里插入图片描述

12. reverse()

反转数组中的元素，并返回该数组。改变原数组。

例：

let arr1 = [1, 2, 3, 4, 5, 6, 7];
console.log(arr1.reverse());

输出：
在这里插入图片描述

(二) 数组迭代方法

13. forEach()

对数组的每个元素执行一次给定的函数。

例：

let arr1 = [1, 2, '你好'];
arr1.forEach(item => {
   console.log(item);
 });

输出：
在这里插入图片描述

14. map()

对数组的每个元素执行一次给定的函数，返回新的数组。不改变原数组。

例：

let arr1 = [1, 2, '你好'];
let result = arr1.map(item => {
     return item + 'map';
   });
 console.log(arr1);
 console.log(result);

输出：
在这里插入图片描述

15. filter()

数组过滤，返回一个新数组, 包含通过测试的所有数组元素。
filter(value, index, array) ，接收三个参数：元素值、元素索引、数组本身。后两个参数可以省略。

例：

let arr1 = [1, 2, '你好'];
let result = arr1.filter(item => {
   return item <= 1;
 });
 console.log(arr1);
 console.log(result);

输出：
在这里插入图片描述

16. reduce()

对数组中的每个元素执行一个我们提供的函数，结果汇总为单个返回值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
提供的函数接受四个参数：
Accumulator (acc) (累计器)：上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果 initialValue 存在，累加器即为 initialValue，否则须为数组中的第一个元素
Current Value (cur) (当前值)
Current Index (idx) (当前索引)可选
Source Array (src) (源数组)可选
initialValue：作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。可选。

例：

let arr1 = [1, 2, 3, 4];
let function_example = (accumulator, currentValue) => accumulator + currentValue;
 let result1 = arr1.reduce(function_example); //1+2+3+4 = 10
 let result2 = arr1.reduce(function_example, 10); //1+2+3+4+10=20
 console.log(result1);
 console.log(result2);

输出：
在这里插入图片描述
应用：
（1）数组求和，见上文例子
（2）统计元素出现的次数

let arr = ['one', 'two', 'three', 'one', 'two'];
let result = arr.reduce(function (accumulator, currentValue) {
  if (currentValue in accumulator) {
    accumulator[currentValue]++;
  }
  else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});
console.log(result);

输出：
在这里插入图片描述

17. reduceRight()

同reduce()差不多，唯一不一样的地方就是数组中的元素是从右往左。
对数组中的每个元素执行一个我们提供的函数，结果汇总为单个返回值。
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
提供的函数接受四个参数：
（1）Accumulator (acc) (累计器)：上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果 initialValue 存在，累加器即为 initialValue，否则须为数组中的最后一个元素
（2）Current Value (cur) (当前值)
（3）Current Index (idx) (当前索引)可选
（4）Source Array (src) (源数组)可选
initialValue：作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的最后一个元素。 在没有初始值的空数组上调用 reduce 将报错。可选。

例：

let arr1 = ['1', '2', '3', '4'];
let function_example = (accumulator, currentValue) => accumulator + currentValue;
let result1 = arr1.reduce(function_example); 
let result2 = arr1.reduceRight(function_example); 
console.log(result1);
console.log(result2);

输出：
在这里插入图片描述

18. every()

方法检查所有数组值是否通过测试。不改变原数组，不检测空数组。
array.every(function(currentValue,index,arr), thisArg)

第一个参数是回调函数，必须。
element：元素值，必须
index：索引，可选
array：数组本身，可选
第二个参数：执行 callback 时使用的 this 值。可选

例：

let arr1 = [1, 2, 3, 4];
let result = arr1.every(item => {
  return item > 3;
})
let result1 = arr1.every(item => {
  return item > 0;
})
console.log('数组元素值都大于3吗: ' + result);
console.log('数组元素值都大于0吗: ' + result1);

输出：
在这里插入图片描述

19. some()

检查某些数组值是否通过了测试。不改变原数组，不检测空数组。参数同every()。
some() 与every()不一样的地方是，some()是只要有一个元素通过可检测，就返回true，不继续检测了，如果一个数组元素都通过不了的话，返回false。

例：

let arr1 = [1, 2, 3, 4];
let result = arr1.some(item => {
  return item > 3;
})
let result1 = arr1.some(item => {
  return item > 4;
})
console.log('数组元素值有大于3的吗: ' + result);
console.log('数组元素值有大于4吗: ' + result1);

输出：
在这里插入图片描述

20. indexOf()

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
array.indexOf(item, start)
参数1：item，必须，要检索的元素
例：start，可选，从哪开始检索

let arr1 = [1, 2, 3, 4];
console.log(arr1.indexOf(1));
console.log(arr1.indexOf(2));
console.log(arr1.indexOf(5));

输出：
在这里插入图片描述

21. lastIndexOf()

返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找。
array.lastIndexOf(item, start)
参数同indexOf()
例：

let arr1 = [1, 2, 3, 4, 1, 2, 4];
console.log(arr1.lastIndexOf(1));
console.log(arr1.lastIndexOf(2));
console.log(arr1.lastIndexOf(5));

输出：
在这里插入图片描述

22. find()

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
array.find(callback[, thisArg])
参数1：callback包含三个参数：
element：元素值。
index：索引，可选。
array：数组本身，可选。
参数2：thisArg执行回调时用作this 的对象。

例：

let arr1 = [1, 2, 3, 4, 1, 2, 4];
let result = arr1.find(item => item === 1);
let result1 = arr1.find(item => item === 5);
console.log('满足测试的第一个元素值为：' + result);
console.log(result1);

输出：
在这里插入图片描述

23. findIndex()

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
arr.findIndex(callback[, thisArg])
参数同 find()
例：

let arr1 = [1, 2, 3, 4, 1, 2, 4];
let result = arr1.findIndex(item => item === 2);
let result1 = arr1.findIndex(item => item === 5);
console.log('满足测试的第一个元素值2的索引为：' + result);
console.log('满足测试的第一个元素值5的索引为：' + result1);

输出：
在这里插入图片描述

(三) 数组排序方法

24. sort()

对数组的元素进行排序,并返回数组。
arr.sort([compareFunction])
参数1：compareFunction：用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。可选。
compareFunction(a, b)有两个参数：表示两个将要被比较的元素。

例：
(1）升序

let arr1 = [3, 2, 1, 4, 7, 6, 5];
const result1 = arr1.sort((a, b) => a - b );
console.log('a-b升序：' + result1);

输出：
在这里插入图片描述

(2）降序

let arr1 = [3, 2, 1, 4, 7, 6, 5];
const result2 = arr1.sort((a, b) => b - a );
console.log('b-a降序：' + result2);

输出：
在这里插入图片描述

(四) 数组不常用方法

25. at()

at()方法接受一个整数值，并返回该索引处的项，允许正整数和负整数。负整数从数组的最后一项开始倒数。

例：

let arr = [1,2,3,4,5,6,7,8,9];
let indexLeft = 2;
let indexRight = -2;
console.log('索引为2处的值为:' + arr.at(indexLeft));
console.log('索引为-2处的值为:' + arr.at(indexRight));

输出：
在这里插入图片描述

26. values()

返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。
想要了解values()详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values

27. toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开。
想要了解toLocaleString() 详情，请点击MDN官网：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString

28. of()

创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
想要了解of() 详情，请点击MDN官网：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of

29. keys()

返回一个包含数组中每个索引键的Array Iterator对象。
想要了解keys() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys

30. from()

从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
想要了解from() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

31. flatMap()

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
想要了解flatMap() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

32. flat()

会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
想要了解flat() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

33. fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
想要了解fill() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

34. entries()

返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
想要了解entries() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries

35. copyWithin()

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
想要了解entries() 详情，请点击MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin

参考1: https://developer.mozilla.org/zh-CN/
参考2: https://www.w3school.com.cn/index.html

杜蜜月
关注
专栏目录
JavaScript数组常用的方法总结
孙叫兽的博客
09-01 5692
导读：在实际开发中，前端工程师除了写页面布局及样式还要对后端返回的数据进行处理，返回的数据大多数是json格式，一般都是返回一个对象或者数组，下面对常用的数组的使用方法进行总结，方便在开发中手到擒来！ 目录 数组常用方法 ​concat() 方法 join() 方法 pop() 方法 push() 方法 reverse() 方法 shift() 方法 slice() 方法 sort() 方法 splice() 方法 toSource() 方法 toString...
JavaScript数组方法总结分析
10-22
下面是JavaScript数组方法的总结分析： 1. 普通方法： - join()：将数组中的所有元素连接成一个字符串，并返回这个字符串。可以通过指定分隔符来控制元素之间的间隔，默认为逗号。此方法不会改变原数组。 - ...
给你三个数组，请你输出三个数组里都有的数字
书读百遍其意自现
12-06 419
<script> const arr1 = [1, 2, 3, 4, 4, 10]; const arr2 = [1, 1, 1, 4, 5, 10]; const arr3 = [4, 10, 12]; function diffArray(arr1, arr2, arr3) { // 请实现代码 arr4 = []; .
前端面试（二）
dongdongyaoshou的博客
05-07 339
转载：https://github.com/dwqs/blog/issues/17 1.使用 typeof bar === “object” 判断 bar 是不是一个对象有神马潜在的弊端？如何避免这种弊端？ 使用 typeof 的弊端是显而易见的(这种弊端同使用 instanceof)： let obj = {};let arr = []; console.log(typeof
JavaScript内置对象
sarycai的博客
03-16 285
什么是对象 Date 日期对象 返回设置年份方法 返回星期方法 返回设置时间方法 String 字符串对象 返回指定位置的字符 返回指定的字符串首次出现的位置 字符串分割split 提取字符串substring 提取指定数目的字符substr Math对象 向上取整ceil 向下取整floor 四舍五入round 随机数 random Array 数组对象 数组连接concat 指定分隔符连接数组元
JavaScript中的数组方法总结+详解
热门推荐
qq_43223007的博客
11-28 5万+
在JS中,数组方法是非常重要且常用的的方法.在此整理总结一番. JavaScript 数组的力量隐藏在数组方法中。 1. js常用数组方法 方法名 功能 返回值 是否改变原数组 版本 push() 在数组最后一位添加一或多个元素 返回长度 Y ES5- unshift() 在数组前添加一或多个元素 返回长度 Y ES5- 2.方法详解 1.push .........
JavaScript 数组方法总结
Hlleo Wrold
05-23 995
创建数组访问和修改数组（长度 ＆ 元素）添加和删除元素数组遍历元素查找过滤和映射归并和缩减数组的连接数组的扁平化数组的排序数组的反转数组的复制数组的测试数组的填充。
Javascript数组方法总结
m0_54007573的博客
06-18 412
Javascript数组方法总结
JavaScript数组方法大全解
syzdev的博客
03-25 1754
0 前言 本文只讲解标准化方法，而不会讲解实验性方法，如at()、groupBy()、groupByMap()和toSource()。 数组中的部分方法需要提供区间范围begin/start和end，所有含有这类范围的方法，其区间都遵循左闭右开原则，如(1,4)，在数学上可以理解为[1,4)。 部分数组方法会改变原数组，这一点一定要注意。 1 是否改变原数组 1.1 改变原数组的方法 填充与复制方法：fill()、copeWithin()； 栈方法：pop()、push()； 队列方法：shift()
JavaScript数组方法（最全）
weixin_46734347的博客
04-02 3万+
JavaScript数组常用方法(最全) 今天我们对JavaScript的数组以及对象的方法做一个总结，方便与以后的开发与查询，多多收藏哦！ 1. push() push方法可以向数组的末尾添加一个或者多个元素，并返回新的长度. 2. pop() pop() 方法用于删除并返回数组的最后一个元素。 3. unshift() unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 4. shift() shift() 方法用于把数组的第一个元素从其中删除，并返回第一
javascript数组操作总结和属性、方法介绍
12-12
//创建一个数组并赋值要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。2、数组的...
JavaScript数组方法总结：从ES3到ES5
"JavaScript基础进阶之数组方法总结，涵盖了ES3中的常用数组操作，包括连接数组、转换为字符串、增删元素以及排序等方法。" 在JavaScript中，数组是处理数据的重要工具，掌握其内置的方法能极大提高编程效率。这篇...
JavaScript 生成二维码
qq_30049249的博客
11-02 229
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 472
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 134
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 86
创建Vue实例 Vue指令
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 472
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
JavaScript-数组
weixin_64689713的博客
11-04 849
/ 定义一个长度为 4 的数组，但是这 4 项都是 undefined两种定义方法根据实际需求选择即可，两者的底层都是同样的实现逻辑。推荐：方括号定义法！
情怀系列国际版棋牌完整源码具备强大的多语言扩展功能，涵盖了900多款子游戏，专为全球市场的游戏开发和运营设计。
z926098的博客
11-05 223
客户端使用Cocos Creator进行跨平台开发，可以发布为App、H5网页和PC网页。这种跨平台的能力使运营商只需维护一套代码，就能同时管理多个终端。除此之外，系统还支持产品的热更新功能，大幅提升运营效率并降低成本，实现了产品层面的“降维打击”。情怀棋牌源代码的服务器端使用JAVA和Node.js开发，采用RocketMQ作为消息队列中间件，有效防止服务器堵塞、消峰。该源码包涵盖了完整的服务器端代码、服务端900款子游戏源码、客户端代码、客户端700款子游戏、管理后台代码、数据库以及热更新生成脚本等。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值