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的数据模型可分为两种进行存储:堆栈结构.队列结构. 昨天,确切说是前天了,去和大学同学见 ...
随机推荐
- 2. whoami,常用包,调优selinux,七种启动模式,系统开机服务
1 whoami 查看当前登录用户 useradd zhang 增加用户 passwd zhang su - zhang 切换用户 e ...
- 【java API基本实现】ArrayList
ArrayList: package com.tn.arraylist; public class ArrayList { Object[] objects=new Object[10]; int i ...
- ES6之Symbol
ES6中Symbol是为了防止属性名冲突而引入的,是独一无二的.Symbol值是通过Symbol函数生成.Symbol值不能与其他类型的值运算否则会报错且Symbol的值可以转换为字符串或者是布尔值但 ...
- UVA 10559 Blocks
题目大意:有一串带颜色的方块,每次可以消掉颜色相同的一段,得到size^2的分数,问最多能得到多少分数.n≤200. 给这题状态跪下来. 显然的区间DP,但设f[i][j]是不够的. 考虑到之前做过的 ...
- php-基于面向对象的MySQL类
class sqlHelper{ private $conn; private $host = 'localhost'; private $user = 'root'; private $pwd = ...
- Talk 3: Rob Pike on Upspin (Gopherfest 2017)
Talk 3: Rob Pike on Upspin Upspin is an experimental project to build a framework for naming and sha ...
- 房上的猫:StringBuffer类
一.使用StringBuffer类 StringBuffer类位于java.lang包中,是String类的增强类 步骤: 1.声明StringBuffer对象并初始化 StringBuffer s ...
- day9集合以及这段时间的总结 未完待续
随笔: # 可变类型:# 列表(可以存放多个值,可以按索引取值,是有序的),# 字典(字典里面是KEY:VALUE类型,key必须是不可变类型,不能按索引取值 因为它们是无序的,按KEY取值),# 集 ...
- SQL基础学习_06_集合运算和联结
集合运算 1. 并集:UNION 例: SELECT shohin_id, shohin_mei FROM Shohin UNION SELECT shohin_id ...
- Robot Framework学习笔记(三)------常用关键字介绍
下面关键字全部由 Builtin 库提供,Builtin 为 Robot Framework 标准类库.Builtin库提供常用的关键字 1.log log 关键字就是编程语言里的"prin ...