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

发布时间:2024年01月22日


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() 方法,如果成功转换为数组,则说明原始值是数组。

文章来源:https://blog.csdn.net/qq_37255976/article/details/135755386
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。