JS中数组方法总结

JS中数组使用场景很多,方法也非常多,也很容易记混,最近用的有点频繁,特地来总结一下
大部分框架和内容来自于【干货】js 数组详细操作方法及解析合集,感谢作者的总结,我仅作部分补充和修改

前言

其实所有的方法可以分为三大类

  • 改变原数组的方法(9个)
  • 不改变原数组的方法(8个)
  • 遍历方法(12个)

接下来我就分类介绍

改变原数组的方法

顾名思义,当数组执行完这些方法后,自身会被改变,共有以下九个

1
2
ES5: arr.splice()/ arr.sort() / arr.pop()/ arr.shift()/  arr.push()/ arr.unshift()/arr.reverse()
ES6: arr.copyWithin() / arr.fill

splice()

作用
从指定位置删除一定数量的元素或者添加元素,如果有删除,则返回被所有删除的元素的数组
参数

  1. index: 必选,表示删除或者添加的起始位置,若为负数,则倒着数;起始位置也是会被删除的
  2. amount: 可选,删除的数量,如果0,则不删除;如果不写,默认从起始位置删到末尾
  3. item:可选,添加的元素,可添加任意个,并且是添加在起始位置前面,配合删除可以起到替换的作用;item可以为任何类型,但是item为数组也只能作为整体加入,而不能拼接到一起
1
2
3
4
5
6
7
8
9
let arr = [1,2,3,4,5]
arr.splice(2,3,6,7,8)
console.log(arr) // [ 1, 2, 6, 7, 8 ]
//注意区别
let arr1 = [1,2,3,4,5]
let arr2 = [6,7,8]
let arrF = arr1.splice(2,3,arr2)
console.log(arr1) // [ 1, 2, [ 6, 7, 8 ] ]
console.log(arrF) // [ 3, 4, 5 ]

sort()

作用
显然就是用来排序的,并返回排序完成的数组,其实这个返回值本来就是自身,所以不需要使用返回值
参数
可选,如果为空,对于英文来说,默认按字母升序排列,从第一个子母到最后一个字母一个排;对于汉字和数字,会转化为Unicode码,再进行比较,和字母排序一样,结果就是100<5。当然,对于汉字和数字,我们需要自己写比较函数作为参数

1
2
3
4
5
6
7
8
let arr = ["acc","abb","aab","aac"]
let arrF = arr.sort()
console.log(arr) // [ 'aab', 'aac', 'abb', 'acc' ]
console.log(arrF) // [ 'aab', 'aac', 'abb', 'acc' ]

let arr1 = [40,2,5,100,3]
arr1.sort()
console.log(arr1) // [ 100, 2, 3, 40, 5 ]

比较函数做参数
其工作原理是判断比较函数的返回值的正负。比较函数默认有两个参数a和b,也就是我们要比较的两个元素,不管函数怎么执行的,只要函数的返回值 < 0 ,则a排在前面;返回值 > 0,则b排在前面;返回值 = 0,则a和b相对位置保持不变
两种常用的排序

  • 数字排序,其实很简单,做一个减法就行,我写的是箭头函数,比较简洁,不理解的可以自行Google

    1
    2
    3
    let arr = [40,2,5,100,3]
    arr.sort((a, b) => a-b)
    console.log(arr) // [ 2, 3, 5, 40, 100 ]
  • 汉字排序,利用localeCompare()函数,localeCompare()作为字符串排序函数,可以指定地区/语言,如果a排前面就返回一个小于0的值,所以综合起来就可以了

    1
    2
    3
    let arr = ['武汉', '北京', '上海', '天津']
    arr.sort((a, b) => a.localeCompare(b, 'zh'))
    console.log(arr) // [ '北京', '上海', '天津', '武汉' ]

我们数据结构课上学过很多排序方法,比如什么冒泡排序呀,选择排序呀,C语言要想实现这些就只能自己手写代码。而在JS中,我们只需要关注如何比较两个数的大小,而不用关心内部的实现原理,实在是简单了不少。不过据了解,Array.sort()的实现在V8(Chrome)中用的是快速排序,感兴趣的同学可以看看这篇文章——深入了解javascript的sort方法

copyWithin()

作用
ES6的方法,将数组内指定位置的元素复制到数组其他位置,并返回这个数组,当然也就是原数组
参数

  1. target: 必须,替换的位置,可以为负数,表示倒数
  2. start:可选,从该位置开始读取数据默认为0
  3. end:可选,到该位置停止读取数据,默认为数组长度,也就是读取到最后,比最大的下标还要大1呢

值得注意的是,start处的数据包括在内,但是end处的数据并没有包含在内,只读取到end的前一位,范围就是 [start,end) ,注意括号的不同,然后将读取的数据依次替换掉target及以后的元素,并且是是替换而不是插入,所以数组的长度是不会改变的;这三个参数都是数字

1
2
3
let arr = [1,2,3,4,5]
arr.copyWithin(0,2)
console.log(arr) // [ 3, 4, 5, 4, 5 ]

fill()

作用
ES6的方法,给一个值,再给一个范围,她就把这个范围内所有的元素都变成你给的这个值
参数
第一个参数必选,也就是你想填充的元素,剩余两个参数可选,和copyWithin()的后两个参数一模一样,如果都为空,则默认全部填充替换

1
2
3
4
5
6
let arr = [1,2,3,4,5]
let arr1 = [1,2,3,4,5]
arr.fill("填充")
arr1.fill("填充",1,3)
console.log(arr) // [ '填充', '填充', '填充', '填充', '填充' ]
console.log(arr1) // [ 1, '填充', '填充', 4, 5 ]

pop()

作用
删除数组中最后一个元素,并返回这个元素
无参数

shift()

作用
删除数组中第一个元素,并返回这个元素
无参数

push()

作用
在数组的末尾添加一个或多个元素,并返回新的长度
参数
需要添加的元素,任意个

unshift()

作用
在数组的开头添加一个或多个元素,并返回新的长度
参数
需要添加的元素,任意个

对上面四个方法总结一下
学过数据结构的就知道,上面的四种方法,像极了队列和栈,没错,JS中的数组同时具有队列和栈的特性
pop()和push()接合在一起就可以像栈一样使用数组,遵循先进后出的原则;shift()和unshift()接合在一起就可以像队列一样使用数组,遵循先进先出的原则

reverse()

作用
颠倒数组元素的顺序
无参数

1
2
3
let arr = [1,2,3,4,5]
arr.reverse()
console.log(arr) // [ 5, 4, 3, 2, 1 ]

copyWithin()

作用
ES6的方法,将数组内指定位置的元素复制到数组其他位置,并返回这个数组,当然也就是原数组
参数

  1. target: 必须,替换的位置,可以为负数,表示倒数
  2. start:可选,从该位置开始读取数据默认为0
  3. end:可选,到该位置停止读取数据,默认为数组长度,也就是读取到最后,比最大的下标还要大1呢

值得注意的是,start处的数据包括在内,但是end处的数据并没有包含在内,只读取到end的前一位,范围就是 [start,end) ,注意括号的不同,然后将读取的数据依次替换掉target及以后的元素,并且是是替换而不是插入,所以数组的长度是不会改变的;这三个参数都是数字

1
2
3
let arr = [1,2,3,4,5]
arr.copyWithin(0,2)
console.log(arr) // [ 3, 4, 5, 4, 5 ]

fill()

作用
ES6的方法,给一个值,再给一个范围,她就把这个范围内所有的元素都变成你给的这个值
参数
第一个参数必选,也就是你想填充的元素,剩余两个参数可选,和copyWithin()的后两个参数一模一样,如果都为空,则默认全部填充替换

1
2
3
4
5
6
let arr = [1,2,3,4,5]
let arr1 = [1,2,3,4,5]
arr.fill("填充")
arr1.fill("填充",1,3)
console.log(arr) // [ '填充', '填充', '填充', '填充', '填充' ]
console.log(arr1) // [ 1, '填充', '填充', 4, 5 ]

不改变原数组的方法

顾名思义,不改变原数组就是返回一个新的数组

slice()

作用
返回一个选定范围内所有元素的新的数组,也就是拷贝,原数组不发生改变。要注意的是,新数组为浅拷贝
参数

  1. begin: 可选,起始位置,默认为0,可为负数,即从后往前数。选择范围为起始位置后的元素
  2. end: 可选,结束位置,默认为最后一个元素
1
2
3
let arr = [1,2,3,4,5]
let arr1 = arr.slice(2,4)
console.log(arr1) // [ 3, 4 ]

什么是浅拷贝,也就是对于复杂的数据类型,比如拷贝的是数组和对象,当改变原数组或者是拷贝的数组中的对象属性,另外一个数组也会发生相应的改变,其实就是相当于指针,指向的同一个地址

1
2
3
4
let arr = [{a: 1},{b: 2},{c: 3}]
let arr1 = arr.slice()
arr1[1].b = '改变了'
console.log(arr) // [ { a: 1 }, { b: '改变了' }, { c: 3 } ]

join()

作用
把数组中所有的元素通过指定的分隔符进行分隔,然后返回一个字符串
参数

  1. str: 可选。分隔符,默认为逗号,要用引号引起来
1
2
3
let arr = [1,2,3,4,5]
let atr = arr.join('/')
console.log(str) // 1/2/3/4/5

那数组内的元素是数组或则是对象呢,如果是数组,那里面的数组也会调用join方法,但只能使用默认的逗号,而对象则会转化为[object Object]

1
2
3
let arr = [[1,2],[3,4,5],{a: 6}]
let arr1 = arr.join('+')
console.log(arr1) // 1,2+3,4,5+[object Object]

toString()

作用
和join()一样,也是把数组转化为以逗号连接起来的字符串,但是不能自定义分隔符,同时对于数组元素是数组和对象,也和join()一样的效果

toLocaleString()

作用
数组中的每一个元素都会调用各自的toLocaleString()方法转化为字符串,然后通过join()方法连接起来,只能是逗号,数组的toLocaleString()就是通过逗号连接

1
2
3
let arr = [[1,2],[3,4,5],new Date()]
let arr1 = arr.toLocaleString()
console.log(arr1) // 1,2,3,4,5,2019-9-2 19:42:02

concat()

作用
合并多个数组并返回一个新数组
参数

  1. arr:必须,需要合并的数组,可任意个,当然也不一定是数组,也可以是字符串或则是对象
文章作者: ourongxing
文章链接: https://orxing.top/post/16ab95c9.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 OURONGXING

评论