我的编程空间,编程开发者的网络收藏夹
学习永远不晚

javascript数组里的27个方法总合详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

javascript数组里的27个方法总合详解

1.concat()

concat() 方法用于连接两个或多个数组。方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。

var str1 = [1,2,3,4,5,6]
var str2 = ['a','b','c','d','e']
console.log(str1.concat(str2));// [1, 2, 3, 4, 5, 6, 'a', 'b', 'c', 'd', 'e']

2.copyWithin()

copyWithin() 复制数组的一部分数据覆盖到数组的另一个位置。会修改数组,但是不会修改数组的长度。

var str1 = [1,2,3,4,5,6]
// 从索引为0开始复制,到索引1结束(不包括结束位置),替换到索引为2的位置,
console.log(str1.copyWithin(2,0,1));    //[1, 2, 1, 4, 5, 6]
// 因为省略一个参数,所以从索引为3位置后的所有元素,从索引为1开始复制替换
console.log(str1.copyWithin(1,3));    //[1, 4, 5, 6, 5, 6]

3.Object.entries()

返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组

var str3 = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(str3));  //['2', 'b']['7', 'c']['100', 'a']

4.every()

every()方法用来判断数组的所有元素是否都满足指定的条件。

var str1 = [1,2,3,4,5,6]
// 创造一个函数来作为判断条件
function checkAdult(value,index) {
     return value > 0;
 }
// every() 方法用来判断数组的所有元素是否都满足指定的条件。
console.log(str1.every(checkAdult));    //true

5.fill()

fill()方法用来把数组所有元素替换成静态元素

var str1 = [1,2,3,4,5,6]
console.log(str1.fill(1));  //[1, 1, 1, 1, 1, 1]

6.filter()

它用于把Array的某些元素过滤掉,然后返回剩下的元素。

var str1 = [1,2,3,4,5,6]
console.log(str1.filter(function(x){return x > 2}));    //[3, 4, 5, 6]

7.find()和findIndex()

find()返回数组中第一个通过测试的元素的值。

findIndex()返回数组中通过测试的第一个元素的索引。

var str1 = [1,2,3,4,5,6]
console.log(str1.find(function(x){return x > 2}));  //3
console.log(str1.findIndex(function(x){return x > 2}));  //2

8.forEach()

forEach()为每个数组元素都调用函数。

var str1 = [1,2,3,4,5,6]
str1.forEach(x => console.log(x));    //依次输出123456

9.from()

以对象创建数组。

console.log(Array.from('string'));  //['s', 't', 'r', 'i', 'n', 'g']

10.includes()

includes()检查数组是否包含指定的元素。第二个参数可以指定从哪个位置开始检测

var str1 = [1,2,3,4,5,6]
console.log(str1.includes(2,0));  //true

11.indexOf()和lastIndexOf()

indexOf()在数组中搜索元素并返回其索引。第二个参数可以指定从哪个位置开始搜索

lastIndexOf()在数组的末尾开始搜索元素并返回其索引。第二个参数可以指定从哪个位置开始搜索

var str1 = [1,2,3,4,5,6]
console.log(str1.indexOf(2,0));  //1
console.log(str1.lastIndexOf(2,5));     //1

12.isArray()

可以用来判断是否为数组对象

var str1 = [1,2,3,4,5,6]
console.log(Array.isArray(str1));  //true

13.join()

将数组的所有元素连接成一个字符串。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

var str2 = ['a','b','c','d','e']
const a = str2.join()
console.log(a);         //a,b,c,d,e
const a = str2.join('')
console.log(a);         //abcde

14.keys()

返回一个数组,数组里的属性是数组所对应的键

var str3 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(str3));     //['2', '7', '100']
//字符串则返回索引
console.log(Object.keys("string"));     //['0', '1', '2', '3', '4', '5']

15.map()

为每个数组元素调用函数的结果来创建新数组。

var str1 = [1,2,3,4,5,6]
const a = str1.map(item => item * 10)
console.log(a);     // [10, 20, 30, 40, 50, 60]

16.pop()

删除数组的最后一个元素,并返回该元素。方法会改变数组的长度。

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

17.push()

将新元素添加到数组的末尾,并返回新的长度。方法会改变数组的长度。

var str1 = [1,2,3,4,5,6]
console.log(str1.push(7), str1);     // 7 , [1, 2, 3, 4, 5, 6, 7]

18.reduce()和reduceRight()

reduce()执行顺序是从左到右                reduceRight()执行顺序是从右到左

为数组中的每一个元素依次执行回调函数,一般用于累加器。

有四个参数,第一个为初始值, 或者计算结束后的返回值。第二个为当前元素。第三个为当前元素的索引。第四个为当前元素所属的数组对象。

initiavalue:当数组为空时,可以设置传递给函数的初始值,放在对象的后面

var str1 = [1,2,3,4,5,6]
// 累加器的使用
console.log(str1.reduce(function(total,num,index,add){return total+num}));// 21
//initiavalue的使用
var arr=[]
console.log(arr.reduce(function(total){return total},0));    //0

19.reverse()

反转数组中元素的顺序。

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

20.shift()

删除数组的第一个元素,并返回该元素。

var str1 = [1,2,3,4,5,6]
console.log(str1.shift(),str1);     // 1 , [2, 3, 4, 5, 6]

21.slice()

选择数组的一部分,并返回新数组。

var str1 = [1,2,3,4,5,6]
// 两个参数 从索引为1开始到索引为3结束,不包括结束位置,形成新数组
console.log(str1.slice(1,3));     //  [2, 3]
// 一个参数 表示从索引为1开始的所有元素形成一个新数组
console.log(str1.slice(1));     //  [2, 3, 4, 5, 6]

22.some()

检查数组中的任何元素是否通过测试。和every()差不多

some如果遇到 true 就不在执行了。    如果都为 false 返回false。        不会改变原数组

var str1 = [1,2,3,4,5,6]
function some(item,index,array){
return item>5
}
console.log(str1.some(some));  //true
function some(item,index,array){
return item>7
}
console.log(str1.some(some));  //false

23.sort()

srot()如果不带参数,是将按字母顺序对数组中的元素进行排序,也就是是按照字符编码的顺序进行排序。

如果为number类型其实也不是按正常的从小到大排序,更像是根据元素的第一位数字的大小排序。

如果想正常进行从大到小  从小到大的排序。可以进行比较值的大小来实现。

从小到大,a-b的含义:a-b大于0,说明a大,则把a放在在后面。a-b小于0,说明b大,则b在后面。如果a-b等于0,则不变。        从大到小就是上面的相反,就不说了(不想写了,程序员的美德就是偷懒)

至于为什么是a - b,b - a可以去看这篇文章https://www.jb51.net/article/238275.htm

var arr1 = ['a', 'd', 'c', 'b'];
arr.sort();  //['a', 'b', 'c', 'd']
var arr2 = [10, 5, 40, 25, 100, 1];
arr2.sort(); //[1, 10 ,100, 25, 40, 5]
//从小到大的排序
var arr2 = [10, 5, 40, 25, 100, 1];
arr2.sort((a,b) => a-b)
console.log(arr2);    // [1, 5, 10, 25, 40, 100]
//从大到小的排序
var arr2 = [10, 5, 40, 25, 100, 1];
arr2.sort((a,b) => b-a)
console.log(arr2);    // [100, 40, 25, 10, 5, 1]

24.splice()

从数组中添加/删除元素。

var str1 = [1,2,3,4,5,6]
// 删除,从索引为1开始,删除2个
console.log(str1.splice(1,2), str1);     // [2, 3] , [1, 4, 5, 6]
// 添加,从索引为1开始到索引为2开始替换为'0'
console.log(str1.splice(1,2,'0','0'), str1);     // [2, 3] , [1, '0', '0', 4, 5, 6]

25.toString()

将数组转换为字符串,并返回结果。

var str1 = [1,2,3,4,5,6]
console.log(str1.toString(), str1);     // 1,2,3,4,5,6  [1, 2, 3, 4, 5, 6]

26.unshift

将新元素添加到数组的开头,并返回新的数组长度值。

var str1 = [1,2,3,4,5,6]
console.log(str1.unshift(0), str1);     // 7  , [0, 1, 2, 3, 4, 5, 6]

27.valueOf()

valueOf() 方法返回其自身。

var str1 = [1,2,3,4,5,6]
str1.push(7)
console.log(str1.valueOf(),str1);     //  [1, 2, 3, 4, 5, 6, 7] , [1, 2, 3, 4, 5, 6, 7]

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!    

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

javascript数组里的27个方法总合详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

27个JavaScript数组常见方法汇总与实例说明

这篇文章主要介绍了JavaScript数组常见方法汇总与实例说明包括数组修改,数组增加,数组遍历,数组排序等操作,需要的朋友可以参考下
2022-12-10

JavaScript中新数组分组方法详解

JavaScript中的新数组分组方法提供了将数组元素分组到对象中的强大功能。reduce()方法和Array.prototype.groupBy方法提供灵活的分组选项,而lodash_.groupBy方法为常见场景提供了方便的解决方案。这些方法简化了数据组织和聚合任务,增强了代码的可读性和可维护性,提升了开发人员的效率。
JavaScript中新数组分组方法详解
2024-04-02

关于JavaScript的Array数组方法详解

这篇文章主要介绍了关于JavaScript的Array数组方法详解,数组是一个固定长度的存储相同数据类型的数据结构,数组中的元素被存储在一段连续的内存空间中,它是最简单的数据结构之一,需要的朋友可以参考下
2023-05-20

Java实现把两个数组合并为一个的方法总结

本文实例讲述了Java实现把两个数组合并为一个的方法。分享给大家供大家参考,具体如下:在Java中,如何把两个String[]合并为一个?看起来是一个很简单的问题。但是如何才能把代码写得高效简洁,却还是值得思考的。这里介绍四种方法,请参考选
2023-05-30

JavaScript判断两个数组相等的4类方法总结

如果我们需要比较两个数组是否相等,不能像比较基本类型(String、Number、Boolean等)一样,使用===(或==)来判断,所以如果要比较数组是否相等,需要使用一些特殊方法。本文为大家整理了四种常见用法,需要的可以参考一下
2023-02-21

javascript数组合并的方法有哪些

这篇文章主要介绍“javascript数组合并的方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript数组合并的方法有哪些”文章能帮助大家解决问题。一、concat()方法Ja
2023-07-06

详解JavaScript数组reduce()方法的高级技巧

reduce() 是 JavaScript 中一个很有用的数组方法,这篇文章主要介绍了JavaScript中reduce()方法的高级技巧,感兴趣的小伙伴可以了解一下
2023-03-24

编程热搜

目录