关于Array常用方法-CSDN博客

本文链接：https://blog.csdn.net/ydrpw/article/details/140995103

javascript中数组常用的属性和方法
示例：

const arr = [1,2,3,4,5] // 一维数组
const arr1 = [1,2,[3,4] // 二维数组
const arr2 = [1,2,[3,[4,5]]] // 三维数组
 const arr3 = [
    {
      name: '张三',
      id: '1',
    },
    {
      name: '李四',
      id: '2',
    },
    {
      name: '王五',
      id: '3',
      children: [
        {
          name: '孙六',
          id: '4',
        },
        {
          name: '拐子七',
          id: '5',
        },
        {
          name: '李老八',
          id: '6',
          children: [
            {
              name: '宋子九',
              id: '7',
            },
          ],
        },
      ],
    },
  ];

length返回或者设置一个数组中的元素个数

arr.length // 5
arr.length = 10
arr.length // 10
arr // [1,2,3,4,5,空属性X5]
arr[6] // undefined

at() 方法接受一个整数值并返回该索引的项目，允许正数和负数。负数从数组中的最后一个项目开始倒数

arr.at(2) // 3
arr.at(-2) // 4
arr1.at(2) // [3,4]
arr2.at(-1) // [3,[4,5]]

concat() 用于合并两个或者多个数组。此方法不会更改当前数组，而是返回新数组

arr.concat(arr1) // [1,2,3,4,5,1,2,[3,4]]

every() 用于判断数组每一项是否满足判断条件，返回布尔值

arr.every(item => item > 2) // false

fill() 用一个固定值填充一个数组中从起使索引到终止索引内的全部元素，不包括终止索引

arr.fill(1,3,4) // [1,2,3,1,1]
// 参数1 要填充的数据 参数2 起使位置 参数3 结束位置

filter() 创建一个新数组，其中包含数组根据函数实现测试的元素

arr.filter(item => item > 3) // [4,5]

find() 返回数组中满足提供的测试函数的第一个值。否则返回undefined

arr.find(item => item > 3) // 4
arr.find(item => item >7) // undefined

findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到返回-1.

arr.findIndex(item => item > 3) // 3
arr.findIndex(item + item > 7) // -1

flat() 数组扁平化，将多维数组递归合成新数组返回

arr1.flat() // [1,2,3,4]
arr2.flat() // [1,2,3,[4,5]]
arr2.flat(2) // [1,2,3,4,5]
// 参数 指定要提取嵌套数组的结构深度，默认值2为1
// 注：这个方法只对数组内容为纯字符串或数字有效果，数组对象需递归
const newArr = [];
  function deepFun(arr) {
    arr.forEach((element) => {
      newArr.push(element);
      if (element.children && element.children.length > 0) {
        deepFun(element.children);
      }
    });
  }
  deepFun(arr3); 
  newArr.length //7

flatMap() map可以便利数组处理数据，并返回新的数组 flatMap()只能展开一层数组

    const arr = [[1], [2], [3]]
    let newArr = arr.flatMap(item => [item*3])
    console.log(newArr); //  [3, 6, 9]
    let newArr2 = arr.map(item => [item*3])
    console.log(newArr2); // [[3], [6], [9]]

forEach() 对当前数组处理原数组发生变化

  arr.forEach(item => item * 2) // [2,4,6,8,10]

Array.form() 对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

Array.from('hello') // ['h','e','l','l','o']
 const arrayLike = {
   0: 'a',
   1: 'b',
   2: 'c',
   length: 3,
 };
 Array.from(arrayLike) // ['a','b','c']

includes() 判断一个数组是否包含一个指定的值，根据情况，如果包含返回true，否则返回false

arr.includes(2) // true
arr.includes('2') //false

indexOf() 返回在数组中可以找到匹配子元素下标位置，否则返回-1

arr.indexOf(1) // 0
arr.indexOf('1') // -1

Array.isArray() 用于确定值是否是一个数组

Array.isArray(arr) // true
Array.isArray({name: '张三'}) // false

join() 将一个数组的索引元素按照参数类型拼接

arr.join(',') // 1,2,3,4,5

lastIndexOf() 返回最后一个元素下标，如果不存在返回-1

const arr = [1,2,3,3,2,1]
arr.lastIndexOf(1) // 5
arr.lastIndexOf('1') // -1

map() 返回新数组，根据函数条件

arr.map(item => item + 1) // [2,3,4,5,6]

Array.of() 和Array() 的区别 1.当参数是正整数时Array.of是一个长度为正整数的数组，Array是长度为正整数的数字，值为undefined 2.当是其它的时候生成当前参数的数组

Array.of(2,3) // [2,3]
Array.of({ 2: '33' }) // [{2: '33}]
Array('3') // ['3']
Array(3) // 数组长度为3，参数为undefined
Array({ 1: '33' }) // [{1: '33}]

pop() 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

arr.pop() // [1,2,3,4]

reduce()

reduce()方法对数组中的每一个执行都会把上一次结果当做参数传入，最后汇总成结果
arr.reduce((a,b) => a + b) // 15
arr.reduce((a,b) => a + b , 1) // 15 + 1
arr.reduce((a,b) => a * b, 2) // 120 * 2

reverse() 将数组中元素的位置颠倒，并返回该数组。该方法会修改当前数组

arr.reverse() // [5,4,3,2,1]

shift() 将数组第一个元素删除。该方法会修改当前数组

arr.shift() // [2,3,4,5]

slice() 从数组中截取begin位置到end位置(不包含end位置)。该方法不会修改当前数组

arr.slice(1) // [2，3，4，5]
arr.slice(1,2) // [2]

some() 测试数组是否存在某个参数,返回的是布尔值

arr.some(item => item > 1) // true

sort() 对数组排序，并返回数组

arr.sort() [1,2,3,4,5]
arr.sort((a,b) => b - a) // [5,4,3,2,1]

splice() 通过删除或替换现有元素或者原地添加新元素。该方法会修改当前数组

arr.splice(1,0,8) // [1,8,2,3,4,5]
arr.splice(1,1,8) // [1,8,3,4,5]

toString() 返回一个字符串

arr.toString() // '1,2,3,4,5'

unshift() 将一个元素或者多个元素添加到数组的开头，该方法会修改原数组

arr.unshift(0,1,0) // [0,1,0,1,2,3,4,5]