JavaScript数组相关知识点整理

qq_46187765

已于 2024-08-05 14:53:41 修改

阅读量862

点赞数 7

分类专栏：前端基础文章标签： javascript 前端

于 2024-08-05 11:23:13 首次发布

本文链接：https://blog.csdn.net/qq_46187765/article/details/138129451

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、创建数组

1.使用数组字面量[]

往[]里面添加的内容都会被视为将要创建数组的全部内容

2.使用Array构造器

无参构造

创建一个空数组

有参构造

如果只传一个数值参数，则表示创建一个指定长度的空数组，数组的每一项都是undefined;

如果传入一个非数值的参数或者参数个数大于 1，则表示创建一个包含指定元素的数组。

3.Array.from

将可迭代对象或者类数组对象转为数组并返回。

      const arrFrom = function(...args) {
        return Array.from(args)
      }
      const arr = arrFrom(1, 'a', 9)
      console.log(arr) // [1, 'a', 9]

可以向 Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将数组对象的每一个值转换为目标形式，并将其存储在目标数组的对应位置上。

      const arrFrom = function(...args) {
        return Array.from(args, value => value + 1)
      }
      const arr = arrFrom(1, 'a', 9)
      console.log(arr) // [2, 'a1', 10]

4.Array.of

Array.of()方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型。

二、数组方法

1.join()和split()

join()方法把数组转换成使用指定字符分隔符（默认是','）连接的字符串;

split()方法把字符串按照指定分隔符（默认是','）分割成字符串数组。

2.push()和pop()

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

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

3.shift()和unshift()

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

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

4.slice()和splice()

slice()：

slice()方法根据传入的参数决定返回原数组中的某一段组成的新数组;

slice()方法接收两个参数(startIndex,endIndex);

传入1个参数的时候返回从startIndex到末尾部分组成的新数组；

传入2个参数时返回从startIndex到endIndex部分组成的新数组，不包括endIndex本身；

传入的索引参数为负数的时候，用该负数加上数组长度替换即可。

      const strArr = ['a', 'c', 'e', 'b', 'd', 'e']
      console.log(strArr.slice(2))// ['e', 'b', 'd', 'e']
      console.log(strArr.slice(2, 4))// ['e', 'b']
      console.log(strArr.slice(-1, -3))// []
      console.log(strArr.slice(-3, -1))// ['b', 'd']

splice()：

根据传入的参数可以对数组进行删除、插入和替换的操作。

splice()方法最多有3个参数，第3个参数可以视为可变形参，可以理解为第3个参数及其后面的参数都视为第3个参数整体，splice(startIndex,count,...args)

1个参数时，表示返回从startIndex到末尾的部分组成的新数组，并将该部分从原数组中去除；

2个参数时，表示返回从startIndex截取count个元素组成的新数组，并将该部分从原数组中去除;

3个参数时，表示返回从startIndex截取count个元素组成的新数组，并将该部分从原数组中去除，然后将...args部分添加到索引为startIndex的位置。

      let strArr = ['a', 'c', 'e', 'b', 'd', 'e']
      console.log(strArr.splice(2)) // ['e', 'b', 'd', 'e']
      console.log(strArr) // ['a', 'c']
      strArr = ['a', 'c', 'e', 'b', 'd', 'e']
      console.log(strArr.splice(2, 3)) // ['e', 'b', 'd']
      console.log(strArr) // ['a', 'c', 'e']
      strArr = ['a', 'c', 'e', 'b', 'd', 'e']
      console.log(strArr.splice(2, 0, [1, 2, 3])) // []
      console.log(strArr) // ['a', 'c', Array(3), 'e', 'b', 'd', 'e']
      strArr = ['a', 'c', 'e', 'b', 'd', 'e']
      console.log(strArr.splice(2, 4, 1, 2, 3, 4)) // ['e', 'b', 'd', 'e']
      console.log(strArr) // ['a', 'c', 1, 2, 3, 4]

注意：splice()方法返回的时原数组被截取的部分，截取的添加都会作用于原数组，splice()操作会改变原数组。

5.forEach()

对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是 function 类型，最多有3个参数，分别为：遍历的数组内容；对应的数组索引，数组本身。

注意：forEach()遍历时候的参数item类似于值传递，基础类型不会改变，引用类型的改变会作用于原数组。对于 forEach 方法，它本身是无法通过 break 或者 return 来中途停止循环的。

      const strArr = ['a', 'c', 'e', {}]
      strArr.forEach(item => {
        if (typeof item === 'string') {
          item = item + 'b'
          return
        }
        item.name = 'kayn'
      })
      console.log(strArr) // ['a','c','e',{'name': 'kayn'}]

6.map()

map()方法接收一个函数作为参数，对原数组进行遍历，返回一个新的数组，新数组的每一项为该函数return的内容，相当于对原数组作映射操作后返回映射的新数组。

      const strArr = ['a', 'c', 'e', {}]
      const newArr = strArr.map(item => {
        if (typeof item === 'string') {
          return item + 'b'
        }
        item.name = 'kayn'
        return item
      })
      console.log(strArr) // ['a','c','e',{'name': 'kayn'}]
      console.log(newArr) // ['ab','cb','eb',{'name': 'kayn'}]

注意：map()的item也和forEach()的item一样

7.reduce()和recudeRight()

这两个方法都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值；

reduce()方法从数组的第一项开始，逐个遍历到最后；

reduceRight()则从数组的最后一项开始，向前遍历到第一项。

      const arr = [1, 2, 3, 4, 5]
      const total = arr.reduce((pre, cur, index, arr) => {
        return pre + cur
      }, 10)
      console.log(total) // 25

8.every()和some()

二者都传入一个函数，对数组进行遍历，通过return的结果确定最终结果是true还是false。

every需要每一项都为true才返回true，如果有一项为false则终止循环；

some只需要有一项为true即可返回true，此时终止循环。

      const arr = [1, 2, 3, 4, 5]
      const every = arr.every(item => item > 3)
      const some = arr.some(item => item > 3)
      console.log(every) // false
      console.log(some) // true

9.filter()

filter()方法传入一个函数，对数组进行遍历，返回条件为true的项所组成的新数组。

注意：filter()的item也和forEach()的item一样

      const arr = ['a', 1, {}, 'b', []]
      const filterArr = arr.filter(item => {
        if (typeof item === 'string') {
          return true
        }
        if (item instanceof Array) {
          item.push(1, 2, 3)
        }
        return false
      })
      console.log(arr) // ['a', 1, {}, 'b', [1,2,3]]
      console.log(filterArr) // ['a', 'b']

10.entries()、keys()、values()

entries()，keys()和values() ，用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历

keys()是对键名的遍历；

values()是对键值的遍历；

entries()是对键值对的遍历。

      const arr = ['a', 'b', 'c']
      for (const item of arr.keys()) {
        console.log(item) // 0 1 2
      }
      for (const item of arr.values()) {
        console.log(item) // a b c
      }
      for (const item of arr.entries()) {
        console.log(item) // [0, 'a'] [1, 'b'] [2, 'c']
      }

11.includes()

includes()方法用来判断数组是否包含指定的值，包含则返回true，反之false；

可接收第2个参数，指定从某个索引开始查找；

includes使用===运算符来进行值比较，仅有一个例外：NaN 被认为与自身相等。

      const arr = ['a', 1, {}, 'b', [], NaN]
      console.log(arr.includes(1)) // true
      console.log(arr.includes(1, 2)) // false
      console.log(arr.includes(NaN)) // true

12.indexOf()和lastIndexOf()

二者都是返回指定值在数组中第一次出现的索引，当传入第2个参数的时候表示从传入参数的索引初开始查找，区别就是indexOf()是顺着查找，lastIndexOf()是倒着查找，比较值是否相等使用全等运算符“===”。

      const arr = ['a', 1, {}, 'b', [], NaN]
      console.log(arr.indexOf(1)) // 1
      console.log(arr.indexOf(-1)) // -1
      console.log(arr.indexOf(1, 2)) // -1
      console.log(arr.indexOf(NaN)) // -1
      console.log(arr.lastIndexOf(1)) // 1
      console.log(arr.lastIndexOf(-1)) // -1
      console.log(arr.lastIndexOf(1, 2)) // 1
      console.log(arr.lastIndexOf(NaN)) // -1

13.find()和findIndex()

二者都接收一个函数，该函数有三个参数（遍历项的值，遍历项的索引，数组本身），

用于查找满足函数return条件为true的值/索引，找到则停止查找终止遍历，遍历结束还没查找到直接返回undefined/-1。

      const arr = ['a', 1, {}, 'b', [], NaN]
      const value = arr.find(item => typeof item === 'string')
      const index = arr.findIndex(item => typeof item === 'string')
      console.log(value) // a
      console.log(index) // 0

注意：find()、findIndex()的item也和forEach()的item一样

14.sort()和reverse()

sort()方法

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

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

      const strArr = ['a', 'c', 'e', 'b', 'd']
      console.log(strArr.sort()) // ['a', 'b', 'c', 'd', 'e']
      const numArr = [21, 12, 7, 5, 44]
      console.log(numArr.sort()) // [12, 21, 44, 5, 7]

sort()方法支持传入指定的比较器函数，进行自定义的比较，比较器函数接受两个参数，根据两个参数比较的结果决定是否交换顺序。

JS根据回调函数的返回值来决定元素的排序：

如果返回一个大于 0 的值，则元素会交换位置；

如果返回一个小于 0 的值，则不交换位置；

如果返回一个等于 0 的值，则认为两个元素相等，则不交换位置。

如果省略该比较器参数的话，sort()方法会调用数组中每一项的toString()方法，然后按照unicode编码进行排序，如果有undefined元素，则将它们排到末尾。排序时先比较第一位，第一位相等则比较第二位，依次往下推。

      const ascCompare = function(a, b) {
        return a - b
      }
      const descCompare = function(a, b) {
        return b - a
      }
      console.log(numArr.sort(ascCompare)) // [5, 7, 12, 21, 44]
      console.log(numArr.sort(descCompare)) // [44, 21, 12, 7, 5]

reverse() 方法用于颠倒数组中元素的顺序。

注意：二者都会改变原数组

15.concat()

concat() 方法会将传入的多个参数push到调用的数组后面，如果遇到参数有数组类型会将数组铺开一次。

      const strArr = ['a', 'c', 'e', 'b', 'd']
      const numArr = [21, 12, 7, 5, 44]
      const concatArr = strArr.concat('f', 't', numArr, [[1, 2, 3]], 9)
      console.log(concatArr) // ['a', 'c', 'e', 'b', 'd', 'f', 't', 21, 12, 7, 5, 44, 
      Array(3), 9]
      console.log(strArr)// ['a', 'c', 'e', 'b', 'd']

注意：concat()方法不会改变原数组

16.fill()

fill()方法可以用指定的值去填充数组，根据传入参数的不同填充的方式也不同。

fill方法最多可以有三个参数fill(value,startIndex,endIndex)

1个参数时，使用value填充整个数组，数组有内容则替换为指定的值；

2个参数时，使用value填充从startIndex到末尾的数组部分；

3个参数时，使用value填充从startIndex到endIndex的数组部分，不包含endIndex本身。

      const strArr = ['a', 'c', 'e', 'b', 'd']
      strArr.fill(5)
      console.log(strArr)// [5, 5, 5, 5, 5]
      strArr.fill(4, 2)
      console.log(strArr)// [5, 5, 4, 4, 4]
      strArr.fill(3, 1, 4)
      console.log(strArr)// [5, 3, 3, 3, 4]

17.flat()和flatMap()

flat()方法接收一个深度参数（默认为1），按照指定的参数对数组进行深度遍历，把所有数组合并为一个一维数组，也就是扁平化处理多维数组。

flatMap()接收一个函数对每一项进行加工，然后进行深度为1的扁平化处理，也就是先map()后flat()。

      const arr = ['a', 'b', 'c', ['d'], [['e']], [[['f']]]]
      const numArr = [1, 2, 3]
      console.log(arr.flat()) // ['a', 'b', 'c', 'd', ['e'], [['f']]]
      console.log(arr.flat(2)) // ['a', 'b', 'c', 'd', 'e', ['f']]
      console.log(arr.flat(Infinity)) // ['a', 'b', 'c', 'd', 'e', 'f']
      console.log(numArr.flatMap(item => [item, item * 2, item * 3])) // [1, 2, 3, 2, 4, 6, 3, 6, 9]

18.toLocaleString()和toString()

二者都用于将数组转换为字符串，将数组中的每个元素转换为字符串，并用逗号分隔符将它们连接在一起；

toLocaleString会考虑到元素的本地化表示，在处理包含日期、时间、数字等需要本地化的数据时可以考虑使用该方法。

      const arr = [1, 2, 3, 'a', 'b', 'c']
      const localStr = [new Date(), 999, 123456, 789]
      console.log(arr.toString()) // 1,2,3,a,b,c
      console.log(arr.toLocaleString()) // 1,2,3,a,b,c
      console.log(localStr.toString()) // Mon Aug 05 2024 09:27:40 GMT+0800 (GMT+08:00),999,123456,789
      console.log(localStr.toLocaleString()) // 2024/8/5 09:27:40,999,123,456,789

19.copyWithin()

复制数组的一部分数据覆盖到数组的另一个位置；

接收三个参数(target,startIndex,endIndex)：

target表示目标覆盖的起始索引位置；

startIndex表示开始复制的元素索引位置；

endIndex表示结束复制的元素索引位置，不包含该索引的元素。

      const arr = [1, 2, 3, 'a', 'b', 'c']
      console.log(arr.copyWithin(1, 2, 5)) // [1, 3, 'a', 'b', 'b', 'c']
      console.log(arr) // [1, 3, 'a', 'b', 'b', 'c']

注意：copyWithin()会修改原数组内容，但是不会修改原数组的长度。