JS数组方法总结

最新推荐文章于 2024-09-26 01:42:12 发布

CiL#

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量162

点赞数

分类专栏： js-es6 文章标签： javascript

本文链接：https://blog.csdn.net/KMINLIKE/article/details/128342904

版权

js-es6 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

数组原型方法主要有以下这些

join()：用指定的分隔符将数组每一项拼接为字符串 ---不改变原数组

push() ：向数组的末尾添加新元素 ---改变原数组

pop()：删除数组的最后一项 ---改变原数组

shift()：删除数组的第一项 ---改变原数组

unshift()：向数组首位添加新元素 ---改变原数组

slice()：按照条件查找出其中的部分元素 ---不改变原数组

splice()：对数组进行增删改 ---改变原数组

fill(): 方法能使用特定值填充数组中的一个或多个元素

filter():“过滤”功能

concat()：用于连接两个或多个数组 ---不改变原数组

indexOf()：检测当前值在数组中第一次出现的位置索引 ---不改变原数组

lastIndexOf()：检测当前值在数组中最后一次出现的位置索引 ---不改变原数组

every()：判断数组中每一项都是否满足条件

some()：判断数组中是否存在满足条件的项

includes()：判断一个数组是否包含一个指定的值

sort()：对数组的元素进行排序

reverse()：对数组进行倒序

forEach()：ES5 及以下循环遍历数组每一项

map()：ES6 循环遍历数组每一项

copyWithin(): 用于从数组的指定位置拷贝元素到数组的另一个指定位置中

find(): 返回匹配的值

findIndex(): 返回匹配位置的索引

toLocaleString()、toString(): 将数组转换为字符串

flat()、flatMap()：扁平化数组

entries() 、keys() 、values(): 遍历数组

详解：

1.1 join() --不改变原数组

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。默认使用逗号作为分隔符

      var arr = [1, 2, 3]
      console.log(arr.join()) // 1,2,3
      console.log(arr.join('-')) // 1-2-3
      console.log(arr) // [1, 2, 3]（原数组不变）

       // 通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下
      function repeatString (str, n) {
        // 一个长度为n+1的空数组用string去拼接成字符串,就成了n个string的重复
        return new Array(n + 1).join(str)
      }

      // 重复abc 3次， Hi 5次
      console.log(repeatString('abc', 3)) // abcabcabc
      console.log(repeatString('Hi', 5)) // HiHiHiHiHi

1.2 push()和 pop() --改变原数组

push() 方法从数组末尾向数组添加元素，可以添加一个或多个元素。

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

      var arr = ['Lily', 'lucy', 'Tom']
      var count = arr.push('Jack', 'Sean') // 尾部添加
      console.log(count) // 5 返回新增后的数组长度
      console.log(arr) // ["Lily", "lucy", "Tom", "Jack", "Sean"]
      var item = arr.pop() // 删除最后一个元素
      console.log(item) // Sean  // 返回最后一个元素 （被删除的元素）
      console.log(arr) // ["Lily", "lucy", "Tom", "Jack"]

1.3 shift() 和 unshift() --改变原数组

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

      var arr = ['Lily', 'lucy', 'Tom']
      var count = arr.unshift('Jack', 'Sean') // ---头部添加
      console.log(count) // 5 // 返回新增后的数组长度
      console.log(arr) // ["Jack", "Sean", "Lily", "lucy", "Tom"]
      var item = arr.shift() // ---删除第一个元素
      console.log(item) // Jack // 返回数组的第一个元素（被删除的元素）
      console.log(arr) // ["Sean", "Lily", "lucy", "Tom"]

1.4 sort() --改变原数组

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

      var arr1 = ['a', 'd', 'c', 'b']
      console.log(arr1.sort()) // ["a", "b", "c", "d"]

      var arr2 = [13, 24, 51, 3]
      console.log(arr2.sort()) // [13, 24, 3, 51] ---并没有按大小排序

原因是：sort方法会调用每个数组项的toString()方法，得到字符串，然后再对得到的字符串进行排序。虽然数值13比3大，但在进行字符串比较时"13"则排在"3"前面（ASCII字符顺序）。

console.log(arr2) // [13, 24, 3, 51](元数组被改变)

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

      arr2.sort((a, b) => {
        return a - b // --升序（从小到大）
      // return b - a // --降序（从大到小）
      })
      console.log(arr2) // [3, 13, 24, 51]

数组内对象排序

数组项是对象，需要根据数组项的某个属性对数组进行排序

      let person = [
        { name: '张三1', age: 22 },
        { name: '张三2', age: 20 },
        { name: '张三3', age: 28 }
      ]
      // 如果我们需要按照对象中的age属性进行数组排序
      person.sort((a, b) => {
        return a.age - b.age
      })
      console.log(person) // [{name:'张三2',age:20},{name:'张三1',age:22},{name:'张三3',age:28},]

1.5 reverse() --改变原数组

reverse() 方法用于反转数组的元素顺序。

      var arr = [13, 24, 51, 3]
      console.log(arr.reverse()) // [3, 51, 24, 13]
      console.log(arr) // [3, 51, 24, 13](原数组改变)

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

      let a = ['abc']
      let newA = a.reverse()
      console.log(newA) // abc
      console.log(a)// abc

1.6 concat() --不改变原数组

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

      var arr = [1, 3, 5, 7]
      var arrCopy = arr.concat(9, [11, 13])
      console.log(arr.concat()) // [1, 2, 3, 4] (复制数组)
      console.log(arrCopy) // [1, 3, 5, 7, 9, 11, 13]
      console.log(arr) // [1, 3, 5, 7](原数组未被修改)

当传入的参数是一个二维数组时：

concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy中。

      let arr = [1, 2, 3, 4]
      let arr2 = [11, [12, 13]]
      let arrCopy = arr.concat(arr2)
      console.log(arrCopy) // [1, 2, 3, 4, 11, Array(2)] --  [1, 2, 3, 4, 11, [12, 13]]
      console.log(arr) // [1, 2, 3, 4] (原数组未改变)

1.7 slice() --不改变原数组

slice() 方法用于数组进行截取

slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。

slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。

在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。

如果有两个参数，该方法返回起始和结束位置之间的项，但不包括结束位置的项。 [start,end)

如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指倒数第一个元素，-2 指倒数第二个元素，以此类推。

      let arr = [1, 3, 5, 8, 12]
      let arrCopy1 = arr.slice(1) // 从数组下标为1的开始截取到末尾
      let arrCopy2 = arr.slice(0, 4) // 从数组下标为0开始截取到下标为4之前的项（不包含下标为4的项）
      let arrCopy3 = arr.slice(1, -2) // 从数组下标为1开始截取到倒数第二项之前的项（不包含倒数第二项的项）
      let arrCopy4 = arr.slice(-5, 4) // 从数组倒数第五项开始截取到下标为4之前的项（不包含下标为4的项）
      let arrCopy5 = arr.slice(-4, -1) // 从数组倒数第四项开始截取到倒数第一项之前的项（不包含倒数第一项的项）
      console.log(arrCopy1) // [3, 5, 8, 12]
      console.log(arrCopy2) // [1, 3, 5, 8]
      console.log(arrCopy3) // [3, 5]
      console.log(arrCopy4) // [1, 3, 5, 8]
      console.log(arrCopy5) // [3, 5, 8]
      console.log(arr) // [1, 3, 5, 8, 12] (原数组未改变)

1.8 splice() --改变原数组

splice()：可以实现删除、插入和替换。

[1].删除元素,并返回删除的元素

splice(index,count)

参数:

index:开始位置的索引

count:要删除元素的个数

返回:返回的是包含被删除元素的数组对象

可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

      var arr = [1, 3, 5, 7, 9, 11]
      var arrRemoved = arr.splice(0, 2) // 从数组下标为0的项开始 删除2项
      console.log(arr) // [5, 7, 9, 11] // 改变原数组
      console.log(arrRemoved) // [1, 3] // 返回被删除的项

[2].向指定索引处添加/插入元素

splice(index, 0, 插入的项)

参数：

index: 插入元素的索引值

第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数--0 表示不删除项）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入 4 和 6。

      var array1 = [22, 3, 31, 12]
      array1.splice(1, 0, 12, 35) // [] 在数组下标为1处 开始插入 12 和 35
      console.log(array1) // [22, 12, 35, 3, 31, 12]

[3].替换指定索引位置的元素

可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入 4 和 6。

      var array2 = [22, 3, 31, 12]
      array1.splice(1, 1, 8) // [3] 下标为1的项开始，删除1项，替换为8
      console.log(array2) // [22, 8, 31, 12]

1.9 indexOf()和 lastIndexOf() --不改变原数组

接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。

indexOf()--------array.indexOf(item,start) （从数组的开头（位置 0）开始向后查找）

item：必须。查找的元素。

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从array[0]开始检索。

lastIndexOf()--------array.lastIndexOf(item,start) （从数组的末尾开始向前查找）

item：必须。查找的元素。

start：可选的整数参数。规定在数组中开始检索的位置。如省略该参数，则将从 array[array.length-1]开始检索。

这两个方法都返回要查找的项在数组中的位置（下标），或者在没找到的情况下返回 - 1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1, 3, 5, 7, 7, 5, 3, 1]
console.log(arr.indexOf(5)) // 2
console.log(arr.lastIndexOf(5)) // 5
console.log(arr.indexOf(5, 2)) // 2
console.log(arr.lastIndexOf(5, 4)) // 2
console.log(arr.indexOf('5')) // -1 没找到
console.log(arr) // [1, 3, 5, 7, 7, 5, 3, 1] （不改变原数组）