前端JavaScript篇之Javscript数组的常用方法有哪些？JavaScript判断数组的方式有哪些？

星儿AI探索者
88 阅读6分钟

@TOC

Javscript数组的常用方法有哪些？

  1. push():

    • 描述： 在数组末尾添加一个或多个元素，并返回新数组的长度。
    • 思路： 将指定的元素追加到数组的末尾。

  2. pop():

    • 描述： 移除并返回数组末尾的元素。
    • 思路： 删除数组中的最后一个元素，并返回被删除的元素。

  3. unshift():

    • 描述： 在数组开头添加一个或多个元素，并返回新数组的长度。
    • 思路： 在数组的开头插入指定的元素，使其成为新的第一个元素。

  4. shift():

    • 描述： 移除并返回数组开头的元素。
    • 思路： 删除数组中的第一个元素，并返回被删除的元素。

  5. concat():

    • 描述： 合并两个或更多数组，并返回新的合并后的数组，不会修改原始数组。
    • 思路： 将多个数组连接在一起，形成一个新的数组。

  6. slice():

    • 描述： 从数组中提取指定位置的元素，返回一个新的数组，不会修改原始数组。
    • 思路： 根据开始和结束的索引值，截取数组的一部分，生成新的数组。

  7. splice():

    • 描述： 从指定位置删除或替换元素，可修改原始数组。
    • 思路： 在指定位置删除指定数量的元素，并可以插入新的元素。

  8. indexOf():

    • 描述： 查找指定元素在数组中的索引，如果不存在则返回-1。
    • 思路： 返回数组中第一次出现指定元素的位置索引。

  9. lastIndexOf():

    • 描述： 从数组末尾开始查找指定元素在数组中的索引，如果不存在则返回-1。
    • 思路： 从数组的末尾开始，返回指定元素最后一次出现的位置索引。

  10. includes():

  • 描述： 检查数组是否包含指定元素，返回一个布尔值。
  • 思路： 判断数组中是否存在指定的元素。
  1. join():
  • 描述： 将数组中的所有元素转为字符串，并使用指定的分隔符连接它们。
  • 思路： 将数组中的元素用指定的分隔符连接成一个字符串。
  1. reverse():
  • 描述： 颠倒数组中元素的顺序，会修改原始数组。
  • 思路： 将数组中的元素顺序颠倒。
  1. sort():
  • 描述： 对数组中的元素进行排序，默认按照字母顺序排序，会修改原始数组。
  • 思路： 对数组中的元素进行升序排序。
  1. filter():
  • 描述： 创建一个新数组，其中包含符合条件的所有元素。
  • 思路： 使用指定的条件筛选数组中的元素，形成新的数组。
  1. map():
  • 描述： 创建一个新数组，其中包含对原始数组中的每个元素进行操作后的结果。
  • 思路： 对数组中的每个元素进行操作，生成一个新的数组。
  1. reduce():
  • 描述： 将数组中的元素进行累积操作，返回一个单一的值。
  • 思路： 从左到右依次对数组中的元素进行累积操作，得到最终的结果。
  1. forEach():
  • 描述： 对数组中的每个元素执行提供的函数。
  • 思路： 遍历数组，对每个元素执行指定的操作，没有返回值。

以上方法为 JavaScript 数组中常用的操作，通过组合运用这些方法，可以完成丰富的数组处理任务。

参考案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数组的常用方法</title>
  </head>
  <body>
    <div id="beforeOperation">
      <h2>Array (Before Operation)</h2>
      <pre id="arrayBefore"></pre>
    </div>

    <div id="afterOperation">
      <h2>Array (After Operation)</h2>
      <pre id="arrayAfter"></pre>
    </div>

    <script>
      // Original array
      const originalArray = [1, 2, 3, 4, 5]
      document.getElementById('arrayBefore').innerText = JSON.stringify(originalArray, null, 2)

      // push()
      originalArray.push(6, 7)
      displayResult('push()', originalArray)

      // pop()
      originalArray.pop()
      displayResult('pop()', originalArray)

      // unshift()
      originalArray.unshift(0, -1)
      displayResult('unshift()', originalArray)

      // shift()
      originalArray.shift()
      displayResult('shift()', originalArray)

      // concat()
      const newArray = originalArray.concat([8, 9])
      displayResult('concat()', newArray)

      // slice()
      const slicedArray = originalArray.slice(1, 4)
      displayResult('slice()', slicedArray)

      // splice()
      originalArray.splice(1, 2, 'a', 'b')
      displayResult('splice()', originalArray)

      // indexOf()
      const index = originalArray.indexOf('a')
      displayResult('indexOf()', index)

      // includes()
      const includesResult = originalArray.includes('c')
      displayResult('includes()', includesResult)

      // join()
      const joinedString = originalArray.join('-')
      displayResult('join()', joinedString)

      // reverse()
      originalArray.reverse()
      displayResult('reverse()', originalArray)

      // sort()
      originalArray.sort()
      displayResult('sort()', originalArray)

      // filter()
      const filteredArray = originalArray.filter(item => typeof item === 'number')
      displayResult('filter()', filteredArray)

      // map()
      const mappedArray = originalArray.map(item => item * 2)
      displayResult('map()', mappedArray)

      // reduce()
      const reducedValue = originalArray.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
      displayResult('reduce()', reducedValue)

      // forEach()
      originalArray.forEach(item => console.log(item)) // Just for side effect, no displayResult for forEach

      function displayResult(operation, result) {
        document.getElementById('arrayAfter').innerText += `${operation}: ${JSON.stringify(result, null, 2)}\n\n`
      }
    </script>
  </body>
</html>

JavaScript判断数组的方式有哪些？

在JavaScript中，判断数组的方式可以通过以下方法实现：

1. Array.isArray() 方法：

这是最简单的方法，用于检测一个值是否为数组。

const myArray = [1, 2, 3]
if (Array.isArray(myArray)) {
  console.log("It's an array!")
}

2. instanceof 操作符：

通过使用 instanceof 操作符来检查对象是否是特定类的实例，可以用来判断是否是数组。

const myArray = [1, 2, 3]
if (myArray instanceof Array) {
  console.log("It's an array!")
}

3. Object.prototype.toString.call() 方法：

使用 Object.prototype.toString.call() 方法，这样可以获取对象的内部 [[Class]] 属性，从而判断是否为数组。

const myArray = [1, 2, 3]
if (Object.prototype.toString.call(myArray) === '[object Array]') {
  console.log("It's an array!")
}

4. Array.from() 方法：

尝试使用 Array.from() 方法，如果成功转换为数组，则说明原始值是数组。

const myArray = [1, 2, 3]
if (Array.from(myArray).length === myArray.length) {
  console.log("It's an array!")
}

这些方法可以根据具体的场景和需求选择使用。一般来说，推荐使用 Array.isArray() 方法，因为它是最简单和直观的方式。

持续学习总结记录中，回顾一下上面的内容： Javscript数组的常用方法有哪些？ push()：将指定的元素追加到数组的末尾。 pop()：删除数组中的最后一个元素，并返回被删除的元素。 unshift()：在数组的开头插入指定的元素，使其成为新的第一个元素。 shift()： 删除数组中的第一个元素，并返回被删除的元素。 concat()：将多个数组连接在一起，形成一个新的数组。 slice()：根据开始和结束的索引值，截取数组的一部分，生成新的数组。 splice()：在指定位置删除指定数量的元素，并可以插入新的元素。 indexOf()：返回数组中第一次出现指定元素的位置索引。 lastIndexOf()：从数组的末尾开始，返回指定元素最后一次出现的位置索引。 includes()：判断数组中是否存在指定的元素。 join()：将数组中的元素用指定的分隔符连接成一个字符串。 reverse()：将数组中的元素顺序颠倒。 sort()：对数组中的元素进行升序排序。 filter()：使用指定的条件筛选数组中的元素，形成新的数组。 map()：对数组中的每个元素进行操作，生成一个新的数组。 reduce()：从左到右依次对数组中的元素进行累积操作，得到最终的结果。 forEach()： 遍历数组，对每个元素执行指定的操作，没有返回值。 判断数组的方式： Array.isArray() 方法：这是最简单的方法，用于检测一个值是否为数组。 instanceof 操作符：通过使用 instanceof 操作符来检查对象是否是特定类的实例，可以用来判断是否是数组。 Object.prototype.toString.call() 方法：使用 Object.prototype.toString.call() 方法，这样可以获取对象的内部 [[Class]] 属性，从而判断是否为数组。 Array.from() 方法：尝试使用 Array.from() 方法，如果成功转换为数组，则说明原始值是数组。

avatar
文章
阅读
粉丝