本篇文章给大家带来的内容是关于Javascript数组中迭代方法的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
我们曾介绍了一些数组的用法。比如:数组如何表现的和「栈」一样,用什么方法表现的和「队列」一样等等一些方法,因为 Javascript 中的数组方法众多,所以我们没有在一篇文章中介绍过多的东西,接下来我们就来了解数组的其他功能吧
正式开始!
数组的迭代方法是我们在开发项目中使用频率非常高、非常重要、非常高效,不仅如此这些方法还能使我们的代码会非常简洁,可以这么说,如果你在开发中不经常使用这些方法的话,简直就是太可怕了。
比如我们如何批量的添加 DOM 节点
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
上面只是举了一个简单的例子,其实我们在日常的开发过程中远不止此,而且要比这个复杂的很多很多,所以如何高效的进行工作的开发是非常有必须要的。下面就从我们比较常用的一个一个的来说起。
该方法对数组的每一个元素执行给定的函数,返回 undefined(或者说无返回值)。
该方法接受两个参数,一个是元素每一项执行的回调函数,一个是可选参数,回调函数运行时 this 的值。
传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
最后我们来看看 forEach() 方法的兼容性,直接上图。
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | 1.5 | 9 | Yes | Yes |
该方法对数组的每一个元素执行给定的函数,返回一个新的数组,新数组的结果是原数组中元素执行方法后的结果。
该方法接受两个参数,一个是元素每一项执行的回调函数,一个是可选参数,回调函数运行时 this 的值。
传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。
1 2 3 4 5 6 7 8 9 10 |
|
在我们日常开发工作中,会遇到非常多的数据格式化的过程,利用这些方法可以大大方便我们的处理。
例如类数组转换为数组的过程
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
例如格式化需要的数据
1 2 3 4 5 6 7 8 9 10 11 |
|
当然我们在实际工作中的数据复杂度远不止此,但是我们可以明显感觉到这些方法处理数据的优势所在。
最后我们来看看 map() 方法的兼容性,直接上图。
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | 1.5 | 9 | Yes | Yes |
该方法也是对数组的每一个元素执行给定的函数,返回一个新的数组,新数组是由每项返回 true 的项组成。简单来说就是筛选出来我们想要的。
该方法接受两个参数,一个是元素每一项执行的回调函数,一个是可选参数,回调函数运行时 this 的值。
传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。
1 2 3 4 5 6 7 8 9 10 |
|
「filter」方法在实际工作中也同样有着很多的作用,例如:我们找出一群人中哪些是小朋友。
1 2 3 4 5 6 |
|
最后我们来看看 filter() 方法的兼容性,直接上图。
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | 1.5 | 9 | Yes | Yes |
该方法是对数组的每一个元素执行给定的函数,
如果数组中的每个元素都满足给定的条件则返回 true,否则返回 false。
该方法接受两个参数,一个是元素每一项执行的回调函数,一个是可选参数,回调函数运行时 this 的值。
传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
我们在来看看 every() 方法的兼容性,直接上图。
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | 1.5 | 9 | Yes | Yes |
该方法是对数组的每一个元素执行给定的函数,
如果数组中的有一个元素满足条件则返回 true,如果全部不满足条件则返回 false。
该方法接受两个参数,一个是元素每一项执行的回调函数,一个是可选参数,回调函数运行时 this 的值。
传入的回调函数会接受三个参数分别是:数组中的元素(item),元素的索引(index,可选),数组本身(array,可选)。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
我们在来看看 some() 方法的兼容性,直接上图。
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | 1.5 | 9 | Yes | Yes |
相关推荐:
javascript中Array数组的迭代方法实例分析_javascript技巧
以上是Javascript数组中迭代方法的详细分析的详细内容。更多信息请关注PHP中文网其他相关文章!