最近看了一些html5和js方面的书,受益匪浅,因为看的东西比较多,却都没有怎么静心来做整理,慢慢来吧,可能最近自己有点儿小紧张。今天跟大家分享下JavaScript的forEach方法(其实是从《HTML5程序设计》这本书里看到的一种方法)。

首先说下JavaScript的forEach的标准格式。

为数组中的每个元素执行指定操作。

array1.forEach(callbackfn[, thisArg])

参数

定义

array1

必需。 一个数组对象。

callbackfn

必需。 一个接受最多三个参数的函数。 对于数组中的每个元素,forEach 都会调用callbackfn 函数一次。

thisArg

可选。 可在 callbackfn 函数中为其引用 this 关键字的对象。 如果省略 thisArg,则undefined 将用作 this 值。

如果 callbackfn 参数不是函数对象,则将引发 TypeError 异常。

对于数组中的每个元素,forEach 方法都会调用 callbackfn 函数一次(采用升序索引顺序)。 不为数组中缺少的元素调用该回调函数。

除了数组对象之外,forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数语法

回调函数的语法如下所示:

function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

回调函数的参数如下所示。

回调参数

定义

value

数组元素的值。

index

数组元素的数字索引。

array1

包含该元素的数组对象。

修改数组对象

forEach 方法不直接修改原始数组,但回调函数可能会修改它。

好吧,上面是从微软的http://technet.microsoft.com/zh-cn/ff679980%28v=vs.85%29页面copy过来的,有兴趣的直接去那里看就好了。也就是说一般方法的格式是:

arrayx.forEach(function(value,index,arrayy){…})

但对于NodeList要用下面的写法。

[].forEach.call(lists,function(valule.index.arrayy){…})

Why can’t I use forEach or map on a NodeList?

NodeList are used very much like arrays and it would be tempting to use Array.prototype methods on them. This is, however, impossible.

JavaScript has an inheritance mechanism based on prototypes. Array instances inherit array methods (such as forEach or map) because their prototype chain looks like the following:

myArray --> Array.prototype --> Object.prototype --> null (the prototype chain of an object can be obtained by calling several times Object.getPrototypeOf)

forEach, map and the likes are own properties of the Array.prototype object.

Unlike arrays, NodeList prototype chain looks like the following:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype contains the item method, but none of the Array.prototype methods, so they cannot be used on NodeLists.

实例

  1. [].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  2. localStorage['bucket' + i] = elem.getAttribute('data-bucket');
  3. });
转载自奶牛博客

JavaScript forEach方法的更多相关文章

  1. JavaScript forEach() 方法

    JavaScript forEach() 方法  JavaScript Array 对象 实例 列出数组的每个元素: <button onclick="numbers.forEach( ...

  2. javascript forEach方法与jQuery each区别

    1.forEach方法 语法: array.forEach(function(currentValue, index, arr), thisValue) 参数: 示例: <!DOCTYPE ht ...

  3. forEach 方法 (Array) (JavaScript)

    为数组中的每个元素执行指定操作. 语法 array1.forEach(callbackfn[, thisArg]) 参数 参数 定义 array1 必选.一个数组对象. callbackfn 必选.最 ...

  4. JavaScript数组方法--flat、forEach、map

    今天到flat了,一个第一次知道该方法还是看到一个面试题,别人给了个答案,用到了flat才知道的方法. 前面也写过关于这道面试题的文章,<一道关于数组的前端面试题>. 这里再来说说吧! f ...

  5. JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()

    ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...

  6. JavaScript 数组方法总结

    最近公司没项目.所以所幸学学JS.毕竟很多人和我一样.属于培训机构出来的.JS基础也很差. 面试的时候面试官问你 .你会JS不.你会毫不犹豫的回答会.因为你确实用过.但是真正会的或许只是以前项目中需要 ...

  7. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  8. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  9. javascript遍历方法总结

    forEach 循环 JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.lengt ...

随机推荐

  1. 转:Zend_Cache的使用

    一.Zend_Cache快速浏览 Zend_Cache 提供了一个缓存任何数据的一般方法. 在Zend Framework中缓存由前端操作,同时通过后端适配器(File, Sqlite, Memcac ...

  2. Substrings

    hdu1238:http://acm.hdu.edu.cn/showproblem.php?pid=1238 题意:给你n个串,求一个子串,这个子串在所有串中都出现,或者在逆串中出现.求最大的这个子串 ...

  3. ES Head is not working with elasticsearch-1.4.0.Beta1

    ES Head is not working with elasticsearch-1.4.0.Beta1: https://github.com/elastic/elasticsearch/issu ...

  4. Android SharedPreferences登录记住密码

    SharedPreferences是Android中存储简单数据的一个工具类.可以想象它是一个小小的Cookie,它通过用键值对的方式把简单 数据类型(boolean.int.float.long和S ...

  5. java Future 模式

    考慮這樣一個情況,使用者可能快速翻頁瀏覽文件中,而圖片檔案很大,如此在瀏覽到有圖片的頁數時,就會導致圖片的載入,因而造成使用者瀏覽文件時會有停頓 的現象,所以我們希望在文件開啟之後,仍有一個背景作業持 ...

  6. 【转】Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果--不错

    原文网址:http://blog.csdn.net/xiaanming/article/details/10163203 转载请注明出处:http://blog.csdn.net/xiaanming/ ...

  7. python3、selenium、autoit3,通过flash控件上传文件

    autoit.au3 #include <Constants.au3> WinWait(); //暂停执行脚本,直到上传对话框出现 WinActive("打开") Wi ...

  8. tinyxml开源库的基本用法

    最近项目中的某个功能需要写xml,由于项目中已经引入了tinyxml,所以不再寻找其他开源库. 前提:你得有个xml对象,声明tinyxml的对象:基于tinyxml的内存管理,TiXmlDocume ...

  9. R学习日记——分解时间序列(季节性数据)

    上篇说明了分解非季节性数据的方法.就是通过TTS包的SMA()函数进行简单移动平均平滑.让看似没有规律或没有趋势的曲线变的有规律或趋势.然后再进行时间序列曲线的回归预测. 本次,开始分解季节性时间序列 ...

  10. C# POST数据到指定页面,并跳转至该页面

    /// <summary> /// 跨页面POST数据 /// </summary> public class RemotePost : Dictionary<strin ...