资讯专栏INFORMATION COLUMN

循环的几种类型

HtmlCssJs / 2548人阅读

摘要:返回值方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。如果数组中的每个元素都满足测试函数,则返回,否则返回。


循环遍历数组的时候,你还在用for语句走天下吗?

我曾经就是for走天下,最后发现自己给自己挖了一个巨大的坑,层层嵌套的循环,总要花大量的时间去捋清各种逻辑关系,很容易逻辑混乱。终于你经过千辛万苦把逻辑捋清了,实现了功能需求。可是这时候接踵而来的问题来了?性能,扩展性,重用性....等等,合着我费了九牛二虎之力白费了。这时候一把鼻涕一把泪,满是辛酸;

这时候某人说,有很多好用的API,你为什么不去用呢?此刻恍然大悟。

数组(Array)

Array.prototype.forEach() : 方法对数组的每个元素执行一次提供的函数。

        array.forEach(callback(currentValue, index, array){
            //do something
        }, this)

参数
callback:为数组中每个元素执行的函数,该函数接收三个参数:

currentValue(当前值):数组中正在处理的当前元素。

index(索引): 数组中正在处理的当前元素的索引。

array: forEach()方法正在操作的数组。

thisArg可选:可选参数。当执行回调 函数时用作this的值(参考对象)。

返回值:undefined.

Array.prototype.filter(): 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    const new_array = arr.filter(callback[, thisArg])

callback :用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素(通过测试),false则不保留。

thisArg : 可选。执行 callback 时的用于 this 的值。

返回值: 一个新的通过测试的元素的集合的数组

Array.prototype.map(): 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

    let new_array = arr.map(function callback(currentValue, index, array) { 
        // Return element for new_array 
    }[, thisArg])

callback : 生成新数组元素的函数,使用三个参数:

currentValue : callback 的第一个参数,数组中正在处理的当前元素。

index : callback 的第二个参数,数组中正在处理的当前元素的索引。

array: callback 的第三个参数,map 方法被调用的数组。

thisArg:可选的。执行 callback 函数时 使用的this 值。

Array.prototype.every(): 如果数组中的每个元素都满足测试函数,则返回 true,否则返回 false。

Array.prototype.some(): 如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false。

也许明天我们不在用for走天下,取而替代的是 for of

for...of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

for ( variable of iterable)

迭代Array:
let iterable = [10, 20, 30];
for (let value of iterable) {
    console.log(value+1);
}// 11,21,31

迭代String:
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}// a,b,c

variable: 在每次迭代中,将不同属性的值分配给变量。

iterable:可枚举其枚举属性的对象。

for...of与for...in的区别:

for...in 语句以原始插入顺序迭代对象的可枚举属性。针对object

for...of 语句遍历可迭代对象定义要迭代的数据。对于Array,Map,Set,String,TypedArray,arguments 对象等等

在浏览器中调试一遍效果更佳

对象(Object)

对象循环的话目前我知道 for in 是最好的选择啦!用法和 for of 一样

对象是类数组对象,当然我们也可以把对象转化为数组:

1.Object.keys():返回一个数组,包含指定对象的所有自有可遍历属性的名称

2.类数组转化为数组:Array.prototype.slice.call(arguments)

3.Array.from() :对伪数组或可迭代对象(包括arguments Array,Map,Set,String...)转换成数组对象。

...未完待续

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112665.html

相关文章

  • 循环几种类型

    摘要:返回值方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。如果数组中的每个元素都满足测试函数,则返回,否则返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循环遍历数组的时候,你还在用for语句走天下吗? 我曾经就是for走天下,最后发现自己给自己挖了一个巨大的坑,层层嵌套的循环,总要花大量的时间去捋清各种...

    yibinnn 评论0 收藏0
  • 循环几种类型

    摘要:返回值方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。如果数组中的每个元素都满足测试函数,则返回,否则返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循环遍历数组的时候,你还在用for语句走天下吗? 我曾经就是for走天下,最后发现自己给自己挖了一个巨大的坑,层层嵌套的循环,总要花大量的时间去捋清各种...

    clasnake 评论0 收藏0
  • javascript几种常见遍历数据结构的语法

    摘要:接触这么多年,第一次总结一下它的遍历语法。而且你必须借助特定的结构才能遍历数据结构。它的作用是遍历对象的键名。建议仅在遍历数组的时候使用。另一个优点是,它可以遍历任何部署了接口的数据结构,甚至是非的数据类型,即自己定义的数据结构。 接触JavaScript这么多年,第一次总结一下它的遍历语法。以前我大部分时间都在老版本的JavaScript下写代码,所以大部分时间都是用for...in...

    kohoh_ 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<