建议收藏 | 最全的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为 []
相关文章
|
20天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
18天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
114 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
41 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
21天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
24 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
38 7