引言
就问你,你在写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个):
- 第一个参数:为可选参数,该参数表示数组的每个元素之间的连接符号,若省略该参数,则默认为逗号
join()
方法使用实例
var arr = [1, 2, 3, 4] arr.join() //返回 "1,2,3,4" arr.join('-') //返回 "1-2-3-4"
2、sort()
sort()
方法是将数组中的每个元素按一定条件排序后并返回排序后的新数组(会改变原数组)
参数(共1个):
- 第一个参数:可选参数,该参数为回调函数,该回调函数需传入两个参数
a
和b
。当回调函数返回一个小于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个):
- 第一个参数:删除或插入元素的起始位置
- 第二个参数:从起始位置开始往后需要删除的元素个数。若该元素省略,则表示从起始位置开始到最后的所有元素都删除
- 第三个参数及之后的所有参数:将该值作为数组的元素依次插入到第一个参数表示的位置上
我们直接来看几个简单的例子
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为 []