建议收藏 | 最全的JavaScript常见的操作数组的函数方法宝典(上)

简介: JavaScript在其内部封装了一个Array对象,使得我们可以方便地使用数组这种简单的数据结构,同时,也在 Array对象的原型上定义了一些常用并且很有用的操作数组的函数。本文就将详细介绍一下每个操作数组的函数是如何使用的

引言


就问你,你在写JavaScript代码的时候,是不是经常用到像这样的数据结构 var arr = [1, 2, 3, 4],如果是的话,那你可就要好好看下文了,每一个函数方法都给你安排明白了。


数组方法


数组的方法一共有很多,见下表


函数 作用
join() 将数组中所有元素都转化为字符串连接在一起
sort() 将数组中的元素排序
reverse() 将数组中的元素颠倒顺序
concat() 将多个数组或数连接起来,组成一个新的数组
slice() 返回指定数组的一个片段或子数组
splice() 在数组指定位置插入或删除元素
push() 在数组的尾部添加一个或多个元素
pop() 删除数组的最后一个元素,并返回该元素
unshift() 在数组的头部添加一个或多个元素
shift() 删除数组第一个元素,并返回该元素
toString() 返回将数组每个元素转化为字符串并用逗号分隔连接起来的字符串
forEach() 从头至尾遍历数组,为每个元素调用指定的函数
map() 将调用的数组的每个元素传递给指定的函数,并返回一个数组
filter() 根据回调函数内的逻辑判断过滤数组元素,并返回一个新的数组
every() 对数组元素应用指定的函数进行判断,返回true或false
some() 对数组元素应用指定的函数进行判断,返回true或false
reduce() 使用指定的函数将数组元素进行组合
reduceRigth() 使用指定的函数将数组元素进行组合
indexOf() 判断一个数在该数组中的索引位置
lastIndexOf() 判断一个数在该数组中的索引位置
find() 遍历数组,找出第一个符合回调函数的元素
findIndex() 遍历数组,找出第一个符合回调函数的元素的索引
fill() 用于填充数组
includes() 判断一个数是否在该数组中


1、join()


join()方法主要是用于将数组内的所有元素连接在一起转化为字符串,并返回这个字符串。


参数(共1个):


  1. 第一个参数:为可选参数,该参数表示数组的每个元素之间的连接符号,若省略该参数,则默认为逗号


join()方法使用实例


var arr = [1, 2, 3, 4]
arr.join()              //返回 "1,2,3,4"
arr.join('-')           //返回 "1-2-3-4"


2、sort()


sort()方法是将数组中的每个元素按一定条件排序后并返回排序后的新数组(会改变原数组)


参数(共1个):


  1. 第一个参数:可选参数,该参数为回调函数,该回调函数需传入两个参数ab。当回调函数返回一个小于0的数时,参数a将排在前面;当返回一个大于0的数时,参数b将排在前面;当返回0时,则这两个值不进行比较排序。若省略该参数,则将每个元素按照字母表的顺序排列。


sort()方法使用实例


var arr = ['cherry', 'apple', 'banana']
arr.sort()           //未传入回调函数作为参数
console.log(arr)     //返回  ['apple', 'banana', 'cherry']


该例子中,省略了第一个参数,所以在排序时默认按照字母表顺序进行排列,若首字母相同,则按第二个字母的先后顺序排列。


接下来看一下第一个参数的详细使用


var arr = [54, 78, 12, 64]
arr.sort(function (a, b) {
    return a - b
})
console.log(arr)        //返回  [12, 54, 64, 78]  升序排列


调用sort()方法,会每次从数组中取出两个数,分别作为参数a和参数b,若回调函数return一个负数,则参数a排在前面;若return一个正数,则参数b排在前面;若return 0,则两个数不进行排序。


该例子就实现了升序排列


那么如果把a - b改成b - a,就能实现降序排列


var arr = [54, 78, 12, 64]
arr.sort(function (a, b) {
    return b - a
})
console.log(arr)        //返回  [78, 64, 54, 12]  降序排列


3、reverse()


reverse()方法是将数组中的元素颠倒,并返回颠倒后的数组(会改变原数组)

这个方法很简单,直接来看例子


var arr = [54, 78, 12, 64]
arr.reverse()
console.log(arr)       //返回  [64, 12, 78, 54]


该方法无非就是将数组转成了逆序数组


4、concat()


concat()方法将调用每一个参数创建并返回一个数组(不会改变原数组)


该方法可以省略参数或者传入多个参数。


当省略参数时,则表示创建一个新的空数组,将原始数组的数据传入这个空数组中,有点类似copy的感觉 当传入1个或多个参数时,则表示创建一个新的空数组,将原始数组的数据和每个参数都添加到这个空数组中。


接下来我们来看看具体的例子,首先是不传入任何参数


var arr = [1,2,3,4]
var new_arr = arr.concat()
console.log(new_arr)       //返回  [1,2,3,4]


再来看传入参数的例子


var arr = [1,2,3,4]
var new_arr = arr.concat(5,6,7,8)
console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8]


跟定义说的一样,传入的参数也被当成新创建的数组中的成员添加了进去


其实我们还可以传入数组作为该方法的参数,最后会将数组中每一个元素添加到新的数组中去


var arr = [1,2,3,4]
var new_arr = arr.concat([5,6,7,8])
console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8]


但是,如果数组中还嵌套了数组,那么嵌套的那个数组会被当成一个整体添加到新的数组中去。简而言之,也就是说该方法只能拆分一层的数组参数


var arr = [1,2,3,4]
var new_arr = arr.concat([5,6,7,8,[9,10]])
console.log(new_arr)     //返回  [1,2,3,4,5,6,7,8,[9,10]]


可以很清楚地看到,嵌套的数组[9,10]并没有被拆开添加到新数组中,而是作为整体添加到了新数组中


5、slice()


slice()方法是返回指定的一个数组片段


该方法有两个参数,分别代表了数组片段的起始位置和结束位置,第一个参数不能省略,第二个参数可以省略


接下来看该方法的使用例子


var arr = [1,2,3,4,5,6,7]
arr.slice(1,3)                //返回  [2,3]
arr.slice(3)                  //返回  [4,5,6,7]
arr.slice(4,-1)               //返回  [5,6]
arr.slice(-3)                 //返回  [5,6,7]
arr.slice(-3,-2)              //返回  [5]


第二个参数表示的是数组片段的结束位置,所以取到的片段是从第一个参数表示的位置取到第二个参数表示的位置的前一个元素。


若省略第二个参数,则表示从第一个参数表示的位置一直取到最后一个元素


负数表示元素位置时,是从末尾往前数,分别为-1 、-2 、-3……


6、splice()


splice()方法在数组指定位置插入或删除元素,并返回删除元素组成的数组(会改变原数组)


参数(共3个):


  1. 第一个参数:删除或插入元素的起始位置


  1. 第二个参数:从起始位置开始往后需要删除的元素个数。若该元素省略,则表示从起始位置开始到最后的所有元素都删除


  1. 第三个参数及之后的所有参数:将该值作为数组的元素依次插入到第一个参数表示的位置上


我们直接来看几个简单的例子


var arr = [1,2,3,4,5,6,7]
arr.splice(4)             //返回 [5,6,7],此时arr为[1,2,3,4]
arr.splice(1, 2)          //返回 [2,3],此时arr为[1,4]
arr.splice(1, 0, 'new1', 'new2') //返回[],此时arr为[1,'new1','new2',4]


所以这是一个很方便并且功能很全的数组操作函数,它既可以删除元素,又可以插入元素


7、push()


push()方法是在数组的尾部添加一个或多个元素,并返回数组的长度(会改变原数组)

该函数的有1个或多个参数,函数依次获取每个参数将其插入到数组的末尾

直接来看例子


var arr = []
arr.push(1)       //返回 1, 此时arr为 [1]
arr.push(5)       //返回 2, 此时arr为 [1,5]
arr.push(3,2)     //返回 4, 此时arr为 [1,5,3,2]


8、pop()


pop()方法是删除数组的最后一个元素,并返回该元素(会改变原数组)


该函数不需要传入任何参数


来简单看下例子


var arr = [6,8,7]
arr.pop()          //返回 7, 此时arr为 [6,8]
arr.pop()          //返回 8, 此时arr为 [6]


9、unshift()


unshift()方法是在数组的头部添加一个或多个元素,并返回数组的长度(会改变原数组)


该函数的有1个或多个参数,函数依次获取每个参数将其插入到数组的最前面


来看几个例子


var arr = []
arr.unshift(1)       //返回 1, 此时arr为 [1]
arr.unshift(5)       //返回 2, 此时arr为 [5,1]
arr.unshift(3,2)     //返回 4, 此时arr为 [2,3,5,1]


10、shift()


shift()方法是删除数组第一个元素,并返回该元素(会改变原数组)


该函数不需要传入任何参数


来简单看下例子


var arr = [6,8,7]
arr.shift()          //返回 6, 此时arr为 [8,7]
arr.shift()          //返回 8, 此时arr为 [7]
arr.shift()          //返回 7, 此时arr为 []
相关文章
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
1488 0
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
1499 80
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
438 19
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
1102 159
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
324 32
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~