JavaScript数组forEach()、map()、reduce()方法
1. js 数组循环遍历。
数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了。
除此之外,也可以使用较简便的forEach 方式
2. forEach 函数。
Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下:
- <!--Add by oscar999-->
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title> New Document </title>
- <meta name="Author" CONTENT="oscar999">
- </head>
- <body>
- <script>
- var arryAll = [];
- arryAll.push(1);
- arryAll.push(2);
- arryAll.push(3);
- arryAll.push(4);
- arryAll.forEach(function(e){
- alert(e);
- })
- </script>
- </body>
- </html>
但是以上,代码在IE中却无法正常工作。
因为IE的Array 没有这个方法
- alert(Array.prototype.forEach);
执行以上这句得到的是 "undefined", 也就是说在IE 中 Array 没有forEach的方法。
3. 让IE兼容forEach方法
- //Array.forEach implementation for IE support..
- //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
- if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(callback, thisArg) {
- var T, k;
- if (this == null) {
- throw new TypeError(" this is null or not defined");
- }
- var O = Object(this);
- var len = O.length >>> 0; // Hack to convert O.length to a UInt32
- if ({}.toString.call(callback) != "[object Function]") {
- throw new TypeError(callback + " is not a function");
- }
- if (thisArg) {
- T = thisArg;
- }
- k = 0;
- while (k < len) {
- var kValue;
- if (k in O) {
- kValue = O[k];
- callback.call(T, kValue, k, O);
- }
- k++;
- }
- };
- }
详细介绍可以参照:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
4. 如何跳出循环?
Js 此种状况的forEach 不能使用continue, break; 可以使用如下两种方式:
1. if 语句控制
2. return . (return true, false)
return --> 类似continue
以下例子是取出数组中2的倍数和3的倍数的数;
- <!--Add by oscar999-->
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title> New Document </title>
- <meta name="Author" CONTENT="oscar999">
- </head>
- <body>
- <script>
- if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(callback, thisArg) {
- var T, k;
- if (this == null) {
- throw new TypeError(" this is null or not defined");
- }
- var O = Object(this);
- var len = O.length >>> 0; // Hack to convert O.length to a UInt32
- if ({}.toString.call(callback) != "[object Function]") {
- throw new TypeError(callback + " is not a function");
- }
- if (thisArg) {
- T = thisArg;
- }
- k = 0;
- while (k < len) {
- var kValue;
- if (k in O) {
- kValue = O[k];
- callback.call(T, kValue, k, O);
- }
- k++;
- }
- };
- }
- var arryAll = [];
- arryAll.push(1);
- arryAll.push(2);
- arryAll.push(3);
- arryAll.push(4);
- arryAll.push(5);
- var arrySpecial = [];
- arryAll.forEach(function(e){
- if(e%2==0)
- {
- arrySpecial.push(e);
- }else if(e%3==0)
- {
- arrySpecial.push(e);
- }
- })
- </script>
- </body>
- </html>
使用return 达到以上效果
- arryAll.forEach(function(e){
- if(e%2==0)
- {
- arrySpecial.push(e);
- return;
- }
- if(e%3==0)
- {
- arrySpecial.push(e);
- return;
- }
- })
至于如何写类似break 的效果,目前尚未找到比较好的办法。
有搜索一下,有的说return false 可以达成, 试了一下, 效果和return 和return ture 是一样的。
5.map()
对数组中每一个元素都运行函数, 返回由每次函数执行的结果组成的数组。果你想对数据里的每一个元素进行处理,可以采用forEach来替换 for循环,和forEach不同的是,它最终会返回一个新的数组,数组的元素是每次处理先前数组中元素返回的结果。
var arr3 = [1,2,9,5,4];
//数组中每个元素都要翻10倍
var arr4 = arr3.map(function(ele,index,arr2){
return ele*10;
});
console.log(arr4.toString());//10,20,90,50,40
6.reduce()
对数组中的所有元素调用指定的回调函数。 该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。
function appendCurrent(previousValue, currentValue){
return previousValue + "::" + currentValue;
}
var elements = ["abc","def",123,456];
var result = elements.reduce(appendCurrent);
document.write(result);
//output: abc::def::123::456
JavaScript数组forEach()、map()、reduce()方法的更多相关文章
- JavaScript数组forEach循环
JavaScript数组forEach循环 今天写JavaScript代码把forEach循环数组忘记写法了,在此记录一下以防止未来忘记. let a = [1, 2, 3]; a.forEach(f ...
- javascript数组常用的遍历方法
本篇文章给大家带来的内容是关于javascript数组常用的遍历方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 本文主要介绍数组常见遍历方法:forEach.m ...
- JavaScript 数组函数 map()
JavaScript 数组函数 map() 学习心得 map()函数是一个数组函数: 它对数组每个原素进行操作,不对空数组进行操作: 不改变原本的数组,返回新数组: arr.map(function( ...
- JavaScript 数组(Array)对象的方法
JavaScript 数组(Array)对象的方法 concat() 描述:用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 原型:arrayObject.conc ...
- js数组中的find(), findIndex(), filter(), forEach(), some(), every(), map(), reduce()方法的详解和应用实例
1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该 ...
- JS数组中every(),filter(),forEach(),map(),some()方法学习笔记!
ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...
- JavaScript数组的22种方法
原文:http://www.cnblogs.com/xiaohuochai/p/5682621.html javascript中数组的22种方法 前面的话 数组总共有22种方法,本文将其分为对象继 ...
- JavaScript数组遍历map()的原型扩展
在 JavaScript 1.6 里,javascript 数组增加了几个非常有用的方法:indexOf.lastIndexOf.every. filter. forEach. map. some,其 ...
- 合并JavaScript数组的N种方法
这是一篇简单的文章,关于JavaScript数组使用的一些技巧.我们将使用不同的方法结合/合并两个JS数组,以及讨论每个方法的优点/缺点. 让我们先考虑下面这情况: var a = [ 1, 2, 3 ...
- Javascript数组(1)--基本属性及方法
数组Array是Javascript语言中非常重要的两种引用类型数据之一,另外一种为对象Object.Array的数据模型可分为两种进行存储:堆栈结构.队列结构. 昨天,确切说是前天了,去和大学同学见 ...
随机推荐
- 【java】工厂模式Factory,利用反射改进
package 反射; interface Product{ public void produce(); } class socks implements Product{ @Override pu ...
- 【MySQL】查看支持的字符集show character set;
- springboot 入门四-时间类型处理
springboot 自带了jackson来处理时间,但不支持jdk8 LocalDate.LocalDateTime的转换. 对于Calendar.Date二种日期,转换方式有二种: 一.统一app ...
- 如何用VSCode愉快的写Python
在学习Python的过程中,一直没有找到比较趁手的第三方编辑器,用的最多的还是Python自带的编辑器.由于本人用惯了宇宙第一IDE(Visual Studio),所以当Visual Studio C ...
- geoserver集成以及部署arcgis server瓦片数据
关注重点: 一般来说,geoserver是不支持arcgis server格式瓦片数据部署的,至少我本机的geoserver版本(2.8.5)以及之前的版本并没有集成进来,不知道目前官网的最新版是否支 ...
- 【WebGL】《WebGL编程指南》读书笔记——第3章
一.前言 根据前面一章的内容,继续第三章的学习. 二.正文 一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) ...
- ln 命令详解
ln 命令 作用:它的功能是为某一个文件在另外一个位置建立一个同步的链接 参数:必要参数: -b 删除,覆盖以前建立的链接 -d 允许超级用户制作目录的硬链接 -f 强制执行 -i 交互模式, ...
- eslint常见规则总结
google: eslint+rules es6: impot When you import the module's default, don't use brace {} 意思是,当你使用默认的 ...
- Sql 的 RAISERROR用法
http://www.yesky.com/imagesnew/software/tsql/ts_ra-rz_5ooi.htm RAISERROR 返回用户定义的错误信息并设系统标志,记录发生错误.通过 ...
- Python的变量和常量
解释器执行Python的过程: (python3,c:/test.py) 1:启动python解释器(内存中). 2:将c:/test.py内容从硬盘读到内存中(这一步和文本编辑器是一样的). 3 ...