JavaScript 数组遍历的五种方法

JavaScript 数组遍历的五种方法如下:

1. forEach()

array.forEach(function(currentValue, index, arr), thisValue)

forEach() 方法用于调用数组中的每个元素,并将元素传递给回调函数。该方法不会返回新的数组,而是在原始数组中执行回调函数。回调函数可以接收三个参数:当前元素的值,当前元素的索引和数组本身。此外,还可以在 forEach() 方法中传递第二个参数,它作为回调函数中的 this 关键字的值。

下面是一个使用 forEach() 方法迭代数组并打印元素的例子:

const arr = [1, 2, 3, 4];
arr.forEach(function(item) {
  console.log(item);
});

2. map()

array.map(function(currentValue, index, arr), thisValue)

map() 方法通过对数组中的每个元素调用回调函数来创建新数组。该方法返回新的数组,而不会修改原始数组。回调函数的参数与 forEach() 方法相同。此外,还可以在 map() 方法中传递第二个参数,它作为回调函数中的 this 关键字的值。

下面是一个使用 map() 方法将数组中的元素乘以 2 的例子:

const arr = [1, 2, 3, 4];
const newArr = arr.map(function(item) {
  return item * 2;
});
console.log(newArr); // [2, 4, 6, 8]

3. filter()

array.filter(function(currentValue, index, arr), thisValue)

filter() 方法通过筛选数组元素来创建新的数组。该方法返回新的数组,而不会修改原始数组。回调函数的参数与 forEach() 方法相同。此外,还可以在 filter() 方法中传递第二个参数,它作为回调函数中的 this 关键字的值。

下面是一个使用 filter() 方法从数组中筛选出所有偶数的例子:

const arr = [1, 2, 3, 4];
const newArr = arr.filter(function(item) {
  return item % 2 === 0;
});
console.log(newArr); // [2, 4]

4. reduce()

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

reduce() 方法通过对数组中的每个元素调用回调函数来对数组进行求和或归约。该方法返回一个值,而不是数组。回调函数的第一个参数是上一个值(或初始值),第二个参数是当前值,第三个参数是当前索引,第四个参数是数组本身。此外,还可以在 reduce() 方法中传递第二个参数,它作为回调函数的初始值。

下面是一个使用 reduce() 方法对数组进行求和的例子:

const arr = [1, 2, 3, 4];
const sum = arr.reduce(function(total, item) {
  return total + item;
}, 0);
console.log(sum); // 10

5. every()

array.every(function(currentValue, index, arr), thisValue)

every() 方法用于检查数组中的每个元素是否满足指定的条件。如果数组中的所有元素都满足条件,则返回 true,否则返回 false。回调函数的参数与 forEach() 方法相同。此外,还可以在 every() 方法中传递第二个参数,它作为回调函数中的 this 关键字的值。

下面是一个使用 every() 方法检查数组中的所有元素是否是偶数的例子:

const arr = [2, 4, 6, 8];
const isEven = arr.every(function(item) {
  return item % 2 === 0;
});
console.log(isEven); // true

以上是 JavaScript 数组遍历的五种方法的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 数组遍历的五种方法 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码

    下面我来详细讲解JavaScript字符串数字左补位、右补位、取固定长度、截位扩展函数的完整攻略。 JavaScript字符串数字左补位 左补位的需求在某些场景下非常常见,比如对日期格式化时,需要将月份和日期左补位补成两位数,例如1月份,格式化后应该是”01″。下面是一个左补位的示例代码: function leftPad(val, width, ch) {…

    JavaScript 2023年5月28日
    00
  • JavaScript与HTML的结合方法详解

    JavaScript与HTML的结合方法详解 什么是JavaScript? JavaScript是一种具有事件驱动、解释性的脚本语言,可以在HTML文档中插入交互式的动态效果。 JavaScript与HTML的结合方法 1. 在HTML中直接嵌入JavaScript代码 我们可以直接在HTML的<script>标签中写入JavaScript代码,…

    JavaScript 2023年5月18日
    00
  • 原生JS中应该禁止出现的写法

    当使用原生JavaScript编写代码时,需要注意一些写法上的问题,避免引发不必要的错误或者性能问题。以下是几个应该禁止出现的写法。 1. 使用 document.write document.write 是一种在网页中输出HTML的方法,但是它的使用会破坏页面的结构,降低性能,还可能引起安全问题。当使用 document.write 时,浏览器会强制停止所…

    JavaScript 2023年6月10日
    00
  • JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

    JavaScript实现多叉树的递归遍历和非递归遍历 在JavaScript中,通过对象的嵌套可以实现构造多叉树结构。对多叉树进行遍历,递归算法是最简单和最常用的方法,尤其方便实现先序遍历、中序遍历和后序遍历。非递归算法需要使用栈数据结构,借助栈来模拟递归操作会稍微复杂一些。本文将详细讲解如何在JavaScript中实现多叉树的递归遍历和非递归遍历算法。 创…

    JavaScript 2023年5月28日
    00
  • Javascript入门学习第五篇 js函数第2/2页

    首先,我们需要了解什么是JavaScript函数。函数是一种可重复使用的代码块,它接受输入,执行操作,然后返回输出。函数通常用于执行特定的任务或计算,并且它们允许我们在代码中组织和重用代码。以下是函数的基本语法: function functionName(parameter1, parameter2, …){ // 函数代码 return return…

    JavaScript 2023年5月18日
    00
  • 深入理解JavaScript函数参数(推荐)

    深入理解JavaScript函数参数(推荐) 在JavaScript中,函数参数是一个重要的概念,函数的可用性和实用性很大程度上依赖于参数。在本文中,我们将介绍JavaScript函数参数的各种方面,包括: 位置参数 默认参数 剩余参数 命名参数 参数解构 位置参数 位置参数是函数定义中的参数,它们的值由调用函数时传递的参数值确定。例如: function …

    JavaScript 2023年5月27日
    00
  • 用JS做的简单的可折叠的两级树形菜单

    下面我将详细讲解使用JS实现一个简单的可折叠两级树形菜单的攻略。 准备工作 首先,我们需要准备一些基本的html和css代码,用于渲染出菜单的样式和结构。下面是一个简单的示例结构: <div class="menu"> <ul> <li><a href="#">菜单1&l…

    JavaScript 2023年6月11日
    00
  • javascript使用Promise对象实现异步编程

    首先我们来简单了解一下什么是Promise对象。Promise是Javascript中一种处理异步操作的对象,它代表了一个异步操作最终完成或失败的状态,可以取代Javascript中的回调函数,降低回调函数地狱和提高程序可读性。 接下来,我们将介绍如何使用Promise对象实现异步编程,过程中会给出两条示例说明。 1.定义Promise对象 我们首先需要定义…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部