上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

5个for循环简解

[复制链接]
  • TA的每日心情

    6 天前
  • 签到天数: 36 天

    [LV.5]常住居民I

    15

    主题

    160

    帖子

    152

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    152

    国庆纪念章中秋纪念章

    发表于 2022-4-14 10:54:39 | 显示全部楼层 | 阅读模式

    下面介绍for , foreach , map ,for...in , for...of五种方法


    for是最早出现的一方遍历语句,能满足开发人员的绝大多数的需求。
    // 遍历数组
    let arr = [1,2,3];
    for(let i = 0;i < arr.length;i++){
    console.log(i) // 索引,数组下标
    console.log(arr[i]) // 数组下标所对应的元素
    }

    // 遍历对象
    let profile = {name:"April",nickname:"二十七刻",country:"China"};
    for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){
    console.log(keys[i]) // 对象的键值
    console.log(profile[keys[i]]) // 对象的键对应的值
    }

    // 遍历字符串
    let str = "abcdef";
    for(let i = 0;i < str.length ;i++){
    console.log(i) // 索引 字符串的下标
    console.log(str[i]) // 字符串下标所对应的元素
    }

    // 遍历DOM 节点
    let articleParagraphs = document.querySelectorAll('.article > p');
    for(let i = 0;i<articleParagraphs.length;i++){
    articleParagraphs[i].classList.add("paragraph");
    // 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性
    }


    forEach
    是ES5版本发布的。按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。是 for 循环的加强版。
    // 遍历数组
    let arr = [1,2,3];
    arr.forEach(i => console.log(i))

    // logs 1
    // logs 2
    // logs 3
    // 直接输出了数组的元素

    //遍历对象
    let profile = {name:"April",nickname:"二十七刻",country:"China"};
    let keys = Object.keys(profile);
    keys.forEach(i => {
    console.log(i) // 对象的键值
    console.log(profile[i]) // 对象的键对应的值
    })


    map
    也是ES5版本发布的,可以创建一个新数组,新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值。
    let arr = [1,2,3,4,5];
    let res = arr.map(i => i * i);

    console.log(res) // logs [1, 4, 9, 16, 25]


    for...in枚举
    我是ES5版本发布的。以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
    // 遍历对象
    let profile = {name:"April",nickname:"二十七刻",country:"China"};
    for(let i in profile){
    let item = profile[i];
    console.log(item) // 对象的键值
    console.log(i) // 对象的键对应的值

    // 遍历数组
    let arr = ['a','b','c'];
    for(let i in arr){
    let item = arr[i];
    console.log(item) // 数组下标所对应的元素
    console.log(i) // 索引,数组下标

    // 遍历字符串
    let str = "abcd"
    for(let i in str){
    let item = str[i];
    console.log(item) // 字符串下标所对应的元素
    console.log(i) // 索引 字符串的下标
    }


    for...of迭代

    是ES6版本发布的。在可迭代对象包括(Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
    // 迭代数组数组
    let arr = ['a','b','c'];
    for(let item of arr){
    console.log(item)
    }
    // logs 'a'
    // logs 'b'
    // logs 'c'

    // 迭代字符串
    let str = "abc";
    for (let value of str) {
    console.log(value);
    }
    // logs 'a'
    // logs 'b'
    // logs 'c'

    // 迭代map
    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]
    for (let entry of iterable) {
    console.log(entry);
    }
    // logs ["a", 1]
    // logs ["b", 2]
    // logs ["c", 3]

    // 迭代map获取键值
    for (let [key, value] of iterable) {
    console.log(key)
    console.log(value);
    }

    // 迭代set
    let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
    for (let value of iterable) {
    console.log(value);
    }
    // logs 1
    // logs 2
    // logs 3
    // logs 4

    // 迭代 DOM 节点
    let articleParagraphs = document.querySelectorAll('.article > p');
    for (let paragraph of articleParagraphs) {
    paragraph.classList.add("paragraph");
    // 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。
    }

    // 迭代arguments类数组对象
    (function() {
    for (let argument of arguments) {
    console.log(argument);
    }
    })(1, 2, 3);
    // logs:
    // 1
    // 2
    // 3

    // 迭代类型数组
    let typeArr = new Uint8Array([0x00, 0xff]);
    for (let value of typeArr) {
    console.log(value);
    }
    // logs:
    // 0
    // 255


    总结:for语句是最原始的循环语句。定义一个变量i(数字类型,表示数组的下标),按照一定的条件,对i进行循环累加。条件通常为循环对象的长度,当超过长度就停止循环。因为对象无法判断长度,所以搭配Object.keys()使用。
    forEach ES5 提出。自称是for语句的加强版,可以发现它比for语句在写法上简单了很多。但是本质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组,因此,不会改变原数组。返回值是undefine。
    map  ES5 提出。给原数组中的每个元素都按顺序调用一次  callback 函数。生成一个新数组,不修改调用它的原数组本身。返回值是新的数组。
    for...in  ES5 提出。遍历对象上的可枚举属性,包括原型对象上的属性,且按任意顺序进行遍历,也就是顺序不固定。遍历数组时把数组的下标当作键值,此时的i是个字符串型的。它是为遍历对象属性而构建的,不建议与数组一起使用。
    for...of ES6 提出。只遍历可迭代对象的数据。

    for 循环当然是最简单的,因为它没有任何额外的函数调用栈和上下文;
    for...of只要具有Iterator接口的数据结构,都可以使用它迭代成员。它直接读取的是键值。
    forEach,因为它其实比我们想象得要复杂一些,它实际上是array.forEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循环的语法糖,还有诸多参数和上下文需要在执行的时候考虑进来,这里可能拖慢性能;
    map() 最慢,因为它的返回值是一个等长的全新的数组,数组创建和赋值产生的性能开销很大。
    for...in需要穷举对象的所有属性,包括自定义的添加的属性也能遍历到。且for...in的key是String类型,有转换过程,开销比较大。

    实际使用中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案
    如果你需要将数组按照某种规则映射为另一个数组,就应该用 map
    如果你需要进行简单的遍历,用 forEach 或者 for of
    如果你需要对迭代器进行遍历,用 for of
    如果你需要过滤出符合条件的项,用 filter
    如果你需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。

    已有1人评分油猫币 理由
    王一之 + 4 可以用 ```js 来标记代码块。这样有点难看.

    查看全部评分 总评分:油猫币 +4 

    摸鱼中
  • TA的每日心情
    开心
    昨天 08:12
  • 签到天数: 125 天

    [LV.7]常住居民III

    25

    主题

    599

    帖子

    5901

    积分

    荣誉开发者

    精通各种语言的HelloWord!

    Rank: 10Rank: 10Rank: 10

    积分
    5901

    猫咪币纪念章活跃会员三好学生热心会员中秋纪念章国庆纪念章

    发表于 2022-4-14 11:07:22 | 显示全部楼层
    学习学习ggnb
    回复

    使用道具 举报

  • TA的每日心情
    开心
    7 天前
  • 签到天数: 49 天

    [LV.5]常住居民I

    138

    主题

    1822

    帖子

    1994

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    1994

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章

    发表于 2022-4-14 14:29:18 | 显示全部楼层
    可以用 ```js 来标记代码块。这样有点难看
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情

    6 天前
  • 签到天数: 36 天

    [LV.5]常住居民I

    15

    主题

    160

    帖子

    152

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    152

    国庆纪念章中秋纪念章

    发表于 2022-4-14 14:30:13 | 显示全部楼层
    王一之 发表于 2022-4-14 14:29
    可以用 ```js 来标记代码块。这样有点难看

    emmm,确实,忘了可以内嵌代码了
    摸鱼中
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 14:19
  • 签到天数: 24 天

    [LV.4]偶尔看看III

    3

    主题

    47

    帖子

    64

    积分

    初级工程师

    Rank: 4

    积分
    64
    发表于 2022-4-15 10:02:50 | 显示全部楼层
    再提个建议,可以增加关于循环中断方法的知识点
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表