微信号:gh_bd8d6a989787

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

JavaScript中数组和对象的迭代

2017-02-06 08:31 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

    标签:dev,javascript,jslang

    本文介绍了三种从数组和对象中提取信息的方法:

    1、for循环,

    2、数组的方法(由ECMAScript 5[1]提供)

    3、列属性键

    下面是总结出了应用这些方法的最好的实践

    1、for语句循环

    所有的for循环都可以与以下语句共同使用:

    break [label]:跳出循环

    continue [label]:跳出当前循环迭代,并立即开始下一循环

    label:标签是一种后跟冒号的标识符。在一个循环前面,使用标签可以打破或者继续该循环,甚至可以嵌套入循环当中;标签用在块的前面,可以打破该块。在以上这两种情况中,标签的定义将成为break或continue的参数。以下是打破块的实例:

    1.1 for语句

    语法:

    规则:

    数组迭代的传统方法

    可以使用var函数,但是作用域始终是独立的。下面是举例:

    1.2for...in语句

    语法:

    规则:

    用于迭代包括继承的属性键在内的属性键。

    不能用于数组,语句遍历数组索引和属性键,因此,一旦有人向数组中添加属性,就会出现问题。

    可以使用var函数,但是作用域始终是独立的。

    迭代时可以删除属性。

    陷阱:在数组索引和属性键中迭代 

    陷阱:在继承的属性中迭代。

  输出:

    跳过继承的属性:通过hasOwnProperty()

    1.3 for each...in 

    非标准的(仅限火狐),语句遍历对象的值。不要使用它。


    2、数组的迭代方法

    2.1 迭代

    遍历数组中的元素,这种方式不会返回结果。但是可以在回叫中产生一个负效应,他们都有以下特征码:

    参数:

    回叫具有以下特征码(有时它不返回值,有时是布尔值)。

    thisValue参数允许您在回叫中指定要通过此访问的对象。

    迭代方法:

    Array.prototype.forEach()类似于for ... in,但只会遍历对象自己的属性。

    Array.prototype.every():如果每个元素回叫时返回true,返回true。

    Array.prototype.some():如果至少一个元素回叫时返回true,返回true。

    举例:

    陷阱:

    forEach()不支持break,请使用every():

    如果函数有break且为true,则every()返回false,否则,返回false。这允许你对迭代成功结束做出回应(使用for循环回略微棘手)。注意:你需要返回一个true去继续函数。如果你想避免这种情况,使用some()并返回true来跳出函数。

    2.2 转换

    转换的方法可以输入数组并产生输出数组,而且回叫控制输出的产生方式。这里的回叫与迭代中的回叫具有相同的特征码:

    方法:

    Array.prototype.map(callback,[thisValue]):每个输出数组的元素都是回叫应用于输入元素的结果。

    Array.prototype.filter(callback,[thisValue]):输出数组只包含那些回叫返回true的输入元素。

    2.3 reduce

    对于reduce,回叫具有不同的特征码:

    方法:

    Array.prototype.reduce(callback, [initialValue]):通过将回调应用到数组元素的对(previousElement,currentElement)来计算值。

    Array.prototype.reduceRight(callback,[initialValue]):与reduce()相同,但计算从右到左。

    举例:

    3.列出属性键:

    Object.keys(obj):列出对象所有可枚举的属性键。举例:

    Object.getOwnPropertyNames():列出对象所有的属性键,包括不可枚举的属性键在内。

    注释:通过最基本方法无法列出不可枚举的键的主要原因是迭代机制会隐藏这些键,包括继承的属性。

    4.练习:

    迭代数组

    要求:

    简单的for循环

    迭代方法之一

    不要使用for...in 或者 foreach...in

    迭代对象

    要求:

    for...in和hasOwnProperty()相结合,使用上述的方式。

    将Object.keys()或Object.getOwnPropertyNames()与forEach()相结合迭代数组。

    其他任务:

    迭代一个对象的属性(键值)对:遍历每个键,通过键来检索相应的值。另一种语言会使这更简单,但JavaScript不能。

    引用:

     1.What’s new in ECMAScript 5


英文原文:http://www.2ality.com/2011/04/iterating-over-arrays-and-objects-in.html
译者:姜源


 
web前端程序员 更多文章 Python部落招聘前端实习生 JavaScript中数组的迭代方法 CSS选择器:属性选择器 六个漂亮的ES6技巧 2017年要学习的3个CSS新特性
猜您喜欢 mongodb分页优化 程序员一定要反转二叉树么 听说这是本届世界杯的天机!! 解放双手:如何在本地调试远程服务器上的Node代码 Provide Options, Not Excuses