forEach()、Array.map()和Array.filter()用法

最新推荐文章于 2022-07-08 14:56:41 发布
最新推荐文章于 2022-07-08 14:56:41 发布
阅读量418 收藏 1
点赞数
分类专栏： JS

Array.forEach()

forEach()方法为每个数组元素调用一次函数（回调函数）。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>
<body>

<h2>JavaScript Array.forEach()</h2>

<p>为每个数组元素调用一次函数。</p>

<p id="demo"></p>

<script>
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;

    function myFunction(value, index, array) {
        txt = txt + value + "<br>";
    }
</script>

</body>
</html>

请注意，该函数有3个参数：

  • 元素值
  • 元素索引
  • 数组本身

上面的示例仅使用value参数。该示例可以重写为：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.forEach()</title>

<body>

<h2>JavaScript Array.forEach()</h2>

<p>为每个数组元素调用一次函数。</p>

<p id="demo"></p>

<script>
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);
    document.getElementById("demo").innerHTML = txt;

    function myFunction(value) {
        txt = txt + value + "<br>";
    }
</script>

</body>
</html>

 

Array.map()

map()方法通过对每个数组元素执行函数来创建新数组。map()方法是不执行没有值的数组元素的函数。map()方法不会更改原始数组。

此示例将每个数组值乘以2：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.map()</title>
<body>

<h2>JavaScript Array.map()</h2>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);

    document.getElementById("demo").innerHTML = numbers2;

    function myFunction(value, index, array) {
        return value * 2;
    }
</script>

</body>
</html>

请注意，该函数有3个参数：

  • 元素值
  • 元素索引
  • 数组本身

当回调函数仅使用value参数时，可以省略索引和数组参数：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array.map()</h2>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
    var numbers1 = [45, 4, 9, 16, 25];
    var numbers2 = numbers1.map(myFunction);

    document.getElementById("demo").innerHTML = numbers2;

    function myFunction(value) {
        return value * 2;
    }
</script>

</body>
</html>

Array.filter()

filter()方法创建一个新数组，其中包含传递测试的数组元素。此示例从值大于18的元素创建新数组：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>

<h2>JavaScript Array.filter()</h2>

<p>使用通过测试的所有数组元素创建一个新数组。</p>

<p id="demo"></p>

<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);

    document.getElementById("demo").innerHTML = over18;

    function myFunction(value, index, array) {
        return value > 18;
    }
</script>

</body>
</html>

请注意，该函数有3个参数：

  • 元素值
  • 元素索引
  • 数组本身
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Array.filter()</title>
<body>

<h2>JavaScript Array.filter()</h2>

<p>使用通过测试的所有数组元素创建一个新数组。</p>

<p id="demo"></p>

<script>
    var numbers = [45, 4, 9, 16, 25];
    var over18 = numbers.filter(myFunction);

    document.getElementById("demo").innerHTML = over18;

    function myFunction(value) {
        return value > 18;
    }
</script>

</body>
</html>

更多数组迭代的方法

 

蝴蝶教程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Array数组对象中的forEach、map、filter及reduce详析
10-18
在JavaScript的Array数组对象中，有四个非常重要的方法：`forEach`、`map`、`filter`和`reduce`。这些方法提供了强大的功能，能够帮助我们处理数组中的数据，进行迭代、转换、筛选和累加操作。下面我们将逐一详细...
array.js:使ie8等浏览兼容array最新方法
05-10
这些方法包括`forEach`, `map`, `filter`, `reduce`, `every`, `some`, `indexOf`, 和 `lastIndexOf`等。 1. **forEach()**: 这个方法遍历数组中的每个元素，并对每个元素执行一个提供的回调函数。在IE8中，我们...
Array 的五种迭代方法（every/filter/forEach/map/some）
Molly_Xu的博客
04-16 694
ES5定义了五个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象（可选的），作用域对象将影响this的值。传入这些方法中的函数会接收三个参数：数组的项的值、该项在数组中的位置和数组对象本身。 1.every() 和 some() every()是对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。 some()是对数组中的每一项运行
Array中比较有意思的两个方法:filter和foreach
hereson
07-02 284
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout=" absolute " creationComplete="init()" &gt;     &lt;mx:Script&amp
[JavaScript] Array.map() 与 Array.filter()区别
iChangebaobao的博客
07-07 181
两者都是数组原型链中的方法，方法是遍历数组，回调函数对遍历出来的对象进行操作，但两者的返回值有所不同 var kvArray = [{ key: 1, value: 10 }, { key: 3, value: 20 }, { key: 2, value: 30 }]; var mapResult = kvArray.map((v,i)=>{ return v.value = v.value + 's' }) console.log(mapResult) // ['10s', '20s',
php foreach map,PHP用foreach来表达array_walk/array_filter/array_map/array_reduce
weixin_39593460的博客
03-17 190
PHP装逼玩函数式(回调匿名函数):array_walk/array_filter/array_map/array_reduce:遍历数组,回调函数.遍历一次,回调一次.这些逻辑其实都可以用foreach来表达,而且更容易理解.array_walk相当于foreach:$arr = ['Client'=>'jQuery','Server'=>'PHP'];array_walk($arr...
js代码-介绍JS中的 Array.map 方法的使用, 实现遍历、处理、修改的功能
07-14
在提供的`main.js`文件中，可能包含了使用Array.map方法的示例代码，通过阅读和理解这段代码，可以帮助你更好地掌握这个功能强大的数组方法。而`README.txt`文件可能是对`main.js`代码的解释或使用说明，同样值得...
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
09-03
这里我们将详细探讨其中五个常用且实用的方法：`indexOf`、`filter`、`forEach`、`map` 和 `reduce`。 1) `indexOf` `indexOf()` 方法用于查找指定元素在数组中的索引，如果找到则返回该元素的第一个出现位置，否则...
JS Array map和Array filter区别
大吉的博客
04-16 1537
Array.map可以理解为根据条件重新映射原数组，并得到新数组；而Array.filter则可以理解为根据条件过滤原数组，并得到新数组；也就是说，如果你想对每个原数组的元素进行修改，那么请使用map，如果你想对每个原数组的元素根据某些规则删除(该删除去掉某些元素，也就是过滤)，请使用filter 它们都不会改变原生数组！
总结- JS之Array对象的filter()、forEach()、map()
weixin_42479421的博客
07-08 651
filter()和forEach()
PHP用foreach来表达array_walk/array_filter/array_map/array_reduce
weixin_33881050的博客
09-26 182
为什么80%的码农都做不了架构师？>>> ...
javascript array.forEach()和array.map()的区别
那边小伙
05-15 683
forEach不支持return,对原来的数组也没有影响。但是我们可以自己通过数组的索引来修改原来的数组var ary = [12,23,24,42,1]; var res = ary.forEach(function (item,index,input) { input[index] = item*10; }) console.log(res);//-->undefined; conso
php 遍历map数组,array_map/array_filter/array_walk遍历数组的方式和foreach一样,谁要快一些啊？...
weixin_28977715的博客
03-20 303
array_walk相当于foreach:$arr = ['Client'=>'jQuery','Server'=>'PHP'];array_walk($arr, function($v, $k) {echo "键:$k 值:$v\n";});比如去除数组$arr元素的前后空白:array_walk($arr, function(&$v) { $v = trim($v); })...
array.foreach() 和 array.map() 的用法
Jesus的博客
08-08 6316
foreach: foreach相当于for循环。***前：*** var items = ['item1', 'item2', 'item3']; var copy = [];for (var i=0; i<items.length; i++) { copy.push(items[i]) }***后：*** var items = ['item1', 'item2', 'item3']; v
数组Array高阶方法之filter()、map()、sort()、reduce()
weixiao0111的博客
04-09 294
数组Array方法之filter、map、sort、reducefilter()(原数组未改变）map()(原数组未改变）sort() (原数组改变）reduce() filter()(原数组未改变） filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。 和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 例如，在一个Array中
ES6中Array.map()和Array.filter()
ccc0720的博客
06-04 503
Array.filter(),可以将满足条件的数据返回给新的数组 let arr=[1,2,3,4].filter(item=>item>2) console.log(arr);//[3,4] Array.map(),可以将运算结果返回给新的数组 map不会空数组进行检测 map不会改变原始数组 let arr=[1,2,3,4].map(item=>item>2) console.log(arr);//[false,false,true,true] 使用map可以重新格式化数组
Array 的 forEach, filter, map, some, every 有什么不同，使用的场景是什么
weixin_34413802的博客
03-03 309
Array 的 forEach, filter, map, some, every 有什么不同，使用的场景是什么 1.filter filter需要return 不会改变原数组的值 使用场景：对数组中的每一个值都进行筛选，返回符合条件的数据 2.map map需要return 不会改变原数组的值 使用场景 ：对数组中每一个值都...
js Array中 filter、map 的区别
xiaokanfuchen86的博客
02-28 252
两者都是数组原型链中的方法，方法是遍历数组，回调函数对遍历出来的对象进行操作，但两者的返回值有所不同 var kvArray = [{ key: 1, value: 10 }, { key: 3, value: 20 }, { key: 2, value: 30 }]; var mapResult = kvArray.map((v,i)=>{ return v.value = ...
array.stream
最新发布
07-09
你可以在流上使用类似于集合的操作，例如 forEach、filter、map、reduce 等。这样的操作可以更方便地处理和操作数组中的元素。你还可以使用 parallelStream 方法来并行处理数组元素，以提高性能。请问还有其他问题吗...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值