JS数组的常用方法总结 ES5

人间草木96
已于 2024-09-27 18:10:13 修改
阅读量289
点赞数
CC 4.0 BY-SA版权
分类专栏：个人总结面试总结文章标签：前端 JS
于 2018-10-25 16:11:20 首次发布
本文链接：https://blog.csdn.net/qq_43258252/article/details/83381407
个人总结同时被 2 个专栏收录
122 篇文章
订阅专栏
面试总结
88 篇文章
订阅专栏
数组的常用方法总结
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>

  // 1. 数组.push(要添加的值)   在数组尾部添加一个元素
  let arr1 = [15, 20]
  arr1.push(50)
  console.log('TCL: arr1', arr1) // TCL: arr1 (3) [15, 20, 50]

  // 2. 数组.pop()    去除数组尾部的一个元素
  let arr2 = [32, 19, 54]
  arr2.pop()
  console.log('TCL: arr2', arr2) // TCL: arr2 (2) [32, 19]

  // 3. 数组.unshift(要添加的值）   在数组头部添加一个元素
  let arr3 = [5, 2, 9]
  arr3.unshift(31)
  console.log('TCL: arr3', arr3) // TCL: arr3 (4) [31, 5, 2, 9]

  // 4. 数组.shift()   数组头部删除第一个元素
  let arr4 = [5, 2, 9]
  arr4.shift()
  console.log('TCL: arr4', arr4) // TCL: arr4 (2) [2, 9]

  // 5. 数组.splice()   从哪个位置开始， 删除几个元素
  let arr5 = [10, 21, 33, 67, 59]
  arr5.splice(1, 3) // 从第几个索引开始， 删除几个元素
  console.log('TCL: arr5', arr5) // TCL: arr5 (2) [10, 59]

  // 使用splice 高级用法：
  let Arr5 = [3, 8, 9, 13, 17, 22]
  // 从第几个索引开始， 先删除几个元素， 然后从当前位置开始插入第3个参数后面所有的数字 （有多少数据就往后写）
  Arr5.splice(3, 1, 150, 300, 500, 2000)
  console.log('TCL: Arr5', Arr5) // TCL: Arr5 (9) [3, 8, 9, 150, 300, 500, 2000, 17, 22]

  // 6. 数组.sort()  // 它是以ASCII的值为标准进行从小到大的排序（取第一位的第一个字符的ASCII码）
  let arr6 = [10, 7, 31, 21, 17, 5, 10, 'AF', 'AG']
  arr6.sort()
  console.log('TCL: arr6', arr6) // TCL: arr6 (9) [10, 10, 17, 21, 31, 5, 7, 'AF', 'AG']
  //  ASCII码常用值： A：65  a: 97  0: 48

  // 7. 数组.concat(要拼接的数组)
  let arr7 = [1, 5, 3, 6]
  let hrr7 = ['hello', 'world']
  let newArr7 = hrr7.concat(arr7) // 特别注意：拼接后返回一个全新的数组
  console.log('TCL: newArr7', newArr7) // TCL: newArr7 (6) ['hello', 'world', 1, 5, 3, 6]

  // 8. 数组.reverse()  数组元素反转
  let arr8 = [9, 12, 3, 7, 1]
  let newArr8 = arr8.reverse()  // 注意：它会返回一个全新的数组
  console.log('TCL: newArr8', newArr8) // TCL: newArr8 (5) [1, 7, 3, 12, 9]

  // 9. 数组.slice() 数组元素截取
  let arr9 = [9, 12, 3, 7, 1]
  // 请注意，arrayObject.slice(start,end)该方法并不会修改数组，而是返回一个子数组。 start 到 end （不包括该元素）
  let newArr9 = arr9.slice(0, 3)
  console.log('TCL: newArr9', newArr9) // TCL: newArr9 (3) [9, 12, 3]

  // 10. 数组.join()  数组中的所有元素放入一个字符串。
  let arr10 = ['jack', 'mark', 'alice']
  // 请注意，arrayObject.join(separator), separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
  let str10 = arr10.join('/')
  console.log('TCL: str10', str10, typeof (str10)) // TCL: str10 jack/mark/alice string

  // 11. 数组.indexOf()  返回数组中某个指定的元素位置
  let arr11 = [1, 5, 3, 7, 9]
  let index11 = arr11.indexOf(7)
  console.log('TCL: index11', index11) // TCL: index11 3

  // 12. 数组.lastIndexOf()  返回一个指定的元素在数组中最后出现的位置
  let arr12 = [1, 5, 3, 7, 9]
  let index12 = arr12.lastIndexOf(7)
  console.log('TCL: index12', index12) // TCL: index12 3

  // 13. 数组.toString() 把数组转换为字符串，并返回结果 数组中的元素之间用逗号分隔
  let arr13 = ['Banana', 'Orange']
  let str13 = arr13.toString()
  console.log('TCL: str13', str13, typeof (str13)) // TCL: str13 Banana,Orange string

  // 14 Array.of() 方法用于将一组值转换为数组，不考虑参数的数量或类型。
  // Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理：
  // Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个 length 为 7 的空数组。
  let arr14 = Array.of(1, 2, 3, 4, 5)
  console.log('TCL: arr14', arr14) // TCL: arr14 (5) [1, 2, 3, 4, 5]

  // 15. 数组.every() 用于检测数组所有元素是否都符合指定条件（通过函数提供） 注意：every() 不会改变原始数组
  // every() 方法使用指定函数检测数组中的所有元素
  // 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  // 如果所有元素都满足条件，则返回 true
  let arr15 = [32, 33, 16, 40]
  let checkAdult15 = (age) => {
    return age >= 18
  }
  let res15 = arr15.every(checkAdult15)
  console.log('TCL: res15', res15) // TCL: res15 false

  // 16. 数组.some() 检测数组中的元素是否满足指定条件（函数提供） 注意：some() 不会改变原始数组
  // some() 方法会依次执行数组的每个元素
  // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  // 如果没有满足条件的元素，则返回false
  let arr16 = [3, 10, 18, 20]
  let checkAdult16 = (age) => {
    return age >= 18
  }
  let res16 = arr16.some(checkAdult16)
  console.log('TCL: res16', res16) // TCL: res16 true

  // 17. 数组.find() 返回通过测试（函数内判断）的数组的第一个元素的值  注意：find()并没有改变数组的原始值
  // ind() 方法为数组中的每个元素都调用一次函数执行
  // 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
  // 如果没有符合条件的元素返回 undefined
  let arr17 = [3, 10, 18, 20]
  let checkAdult17 = (age) => {
    return age >= 18
  }
  let res17 = arr17.find(checkAdult17)
  console.log('TCL: res17', res17) // TCL: res17 18

  // 18. 数组.findIndex()  方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置 注意:findIndex()并没有改变数组的原始值
  // findIndex() 方法为数组中的每个元素都调用一次函数执行：
  // 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数
  // 如果没有符合条件的元素返回 -1
  let arr18 = [3, 10, 18, 20]
  let checkAdult18 = (age) => {
    return age >= 18
  }
  let res18 = arr18.findIndex(checkAdult18)
  console.log('TCL: res18', res18) // TCL: res18 2

  // 19. 数组.includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
  let arr19 = [3, 10, 18, 20]
  let res19 = arr19.includes(18)
  console.log('TCL: res19', res19) // TCL: res19 true

  // 20. 数组.filter()  方法用来创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  // 返回值是返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组
  let arr20 = [3, 10, 18, 20]
  let checkAdult20 = (age) => {
    return age >= 18
  }
  let newArr20 = arr20.filter(checkAdult20)
  console.log('TCL: newArr20', newArr20) // TCL: newArr20 (2) [18, 20]

  // 21. 数组.reduce()  方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
  // reduce() 可以作为一个高阶函数，用于函数的 compose
  // 注意: reduce() 对于空数组是不会执行回调函数的
  let arr21 = [1, 2, 3, 4, 5]
  let getSum21 = (total, num) => {
    return total + num
  }
  let res21 = arr21.reduce(getSum21, 0)
  console.log('TCL: res21', res21) // TCL: res21 15

  // 22. 数组.reduceRight()  方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加
  // reduceRight() 可以作为一个高阶函数，用于函数的 compose
  // 注意: reduceRight() 对于空数组是不会执行回调函数的
  let arr22 = [1, 2, 3, 4, 7]
  let getSum22 = (total, num) => {
    return total + num
  }
  let res22 = arr22.reduceRight(getSum22, 0)
  console.log('TCL: res22', res22) // TCL: res22 17

  // 23. 数组.fill()  方法用于将一个固定值替换数组的元素
  let arr23 = ['Banana', 'Orange', 'Apple', 'Mango', 'Grapes']
  // 从下标2开始 到  下标4结束 不包括下标4
  arr23.fill('Runoob', 2, 4)
  console.log('TCL: arr23', arr23) // TCL: arr23  (5) ['Banana', 'Orange', 'Runoob', 'Runoob','Grapes']

  // 24. Array.from() 方法可以将一个类数组对象或可迭代对象转换成真实的数组
  let str24 = 'RUNOOB'
  let arr24 = Array.from(str24)
  console.log('TCL: arr24', arr24) // TCL: arr24 (6) [ "R", "U", "N", "O", "O", "B" ]

</script>

</html>
js数组Array对象常用方法总结_js中array对象的常用方法-CSDN博客