前端JS中常用的数组方法集合

最新推荐文章于 2024-05-24 23:45:01 发布

断ᝰ念尘

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量22

点赞数

文章标签： javascript 前端 ajax html5 css vue.js

本文链接：https://blog.csdn.net/Single_Boys/article/details/131816740

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const animals = ['pigs', 'goats', 'sheep']

      // 1.push：将指定的元素添加到数组的末尾，并返回新的数组长度。
      //   console.log(animals.push('cows')) //  4
      //   console.log(animals) // ['pigs', 'goats', 'sheep', 'cows']

      //   console.log('---------------------------');

      // 2.pop：方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
      //   console.log(animals.pop()) // sheep
      //   console.log(animals) // ['pigs', 'goats']

      //   console.log('---------------------------');

      // 3.unshift: 将指定元素添加到数组的开头，并返回数组的新长度。
      //   console.log(animals.unshift('小黑子')) // 4
      //   console.log(animals) //  ['小黑子', 'pigs', 'goats', 'sheep']

      //   console.log('---------------------------');

      // 4.shift:从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
      //   console.log(animals.shift()) // pigs
      //   console.log(animals) // ['goats', 'sheep']

      //   console.log('---------------------------');

      // 5.sort: 就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。
      //   console.log(animals.sort()) // ['goats', 'pigs', 'sheep']

      //   console.log('---------------------------');

      // 6.reverse：就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。
      //   console.log(animals.reverse()) //  ['sheep', 'goats', 'pigs']

      //   console.log('---------------------------');

      // 7.foreach: 对数组的每个元素执行一次给定的函数。
      //   animals.forEach((item) => {
      //     console.log(item)
      //   })  // pigs  goats  sheep

      //   console.log('---------------------------');

      // 8.map: 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
      //   const newArr = animals.map((item) => item + '动物')
      //   console.log(newArr) // ['pigs动物', 'goats动物', 'sheep动物']

      //   console.log('---------------------------');

      // 9.filter: 过滤数组(创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。)，返回满足条件的数组元素，返回新数组
      //   const newArr = animals.filter((item) => item.length > 4)
      //   console.log(newArr) // ['goats', 'sheep']

      //   console.log('---------------------------');

      // 10.splice：通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容
      //   10.1 删：从下标为1的位置开始，删除一个元素 goats
      //   animals.splice(1, 1)
      //   console.log(animals) // ['pigs', 'sheep']
      //   10.2 增：在下标为 1 的位置开始，不删除任何元素，插入 'grape' 和 'kiwi'
      //   animals.splice(1, 0, 'grape', 'kiwi')
      //   console.log(animals) // ['pigs', 'grape', 'kiwi', 'goats', 'sheep']
      //   10.3 替换：在索引为 0 的位置开始，删除 1 个元素 ['pigs']，插入 'apricot' 和 'blackberry'
      //   animals.splice(0, 1, 'apricot', 'blackberry')
      //   console.log(animals) // ['apricot', 'blackberry', 'goats', 'sheep']

      //   console.log('---------------------------');

      // 11.reduce：返回累计处理的结果，用于求和
      //   如果未提供初始值，则将使用数组的第一个元素作为初始累加器值，并从数组的第二个元素开始迭代
      //   如果提供了初始值，则将使用初始值作为初始累加器值，并从数组的第一个元素开始迭代。
      //   const arr = [1, 2, 3, 4, 5]
      //   const sum = arr.reduce((prev, current) => {
      //     return prev + current
      //   }, 0)
      //   console.log(sum) // 15

      //   console.log('---------------------------');

      // 12：join：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
      //   console.log(animals.join('+')) // pigs+goats+sheep

      //   console.log('---------------------------');

      // 13：find: 查找元素，返回符合测试条件（test()方法）的第一个数组元素值，如果没有则返回undefined
      //   const found = animals.find((item) => item.length >= 5)
      //   console.log(found)  // goats

      //   console.log('---------------------------');

      // 14：every：检测数组中所有元素是否都符合指定条件，如果所有元素都满足条件返回true，否则返回false
      //   const fun = animals.every((item) => {
      //     //     // 检查数组中的所有元素是否以字母 's' 开头
      //     return item.startsWith('s')
      //   })
      //   console.log(fun) // false

      //   console.log('---------------------------');

      // 15：some：检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回true，否则返回false
      //   const newArr = animals.some((item) => {
      //     return item.startsWith('s')
      //   })
      //   console.log(newArr) // true

      //   console.log('---------------------------');

      // 16：concat：方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
      //   const arr = [1, 2, 3, 4]
      //   const arr1 = [7, 8, 9]

      //   const arr3 = arr.concat(arr1)
      //   console.log(arr3) //  [1, 2, 3, 4, 7, 8, 9]

      //   console.log('---------------------------');

      // 17：findIndex： 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1
      //   查找数组中以字母's' 开头的元素的下标
      const index = animals.findIndex((item) => item.charAt(0) === 's')
      console.log(index) // 2

      //   console.log('---------------------------');
    </script>
  </body>
</html>