• JS 循环遍历 总结


    一、循环遍历语句

    for...in... (ES5)

    语法javascript for(keys in obj){}
    适用:遍历对象
    说明
      1.keys表示obj对象的每一个键值对的键(键名),所有循环中,需要使用obj[keys]来取到每一个值。
      2.for-in 循环,遍历时不仅能读取对象自身上面的成员属性,也能延续原型链遍历出对象的原型属性
      3.使用hasOwnProperty判断一个属性是不是对象自身上的属性。obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性,而不是原型属性

    for...of... (ES6)

    语法javascript for(keys of xxx){}
    适用:数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串
    说明:ES6 借鉴 C++、Java、C# 和 Python 语言,引入了for...of循环,作为遍历所有数据结构的统一的方法。
     一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for...of循环遍历它的成员。
    也就是说,for...of循环内部调用的是数据结构的Symbol.iterator方法。
     
    其他
    for (let [key,value] of Object.entries(obj))
    for (let key of Object.keys(obj))
    for (let key of Object.values(obj))

    1.Object.keys()
    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名

    2.Object.values()
    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值

    3.Object.entries()
    返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值对数组

    forEach (ES5)

    语法javascript [].forEach(callbackfn[, thisArg])
    适用: 遍历数组,不改变原数组
    说明:对数组里存在的每个元素调用一次 callbackfn。callbackfn 只被实际存在的数组元素调用;它不会被缺少的数组元素调用。
    如果提供了一个 thisArg 参数,它会被当作 this 值传给每个 callbackfn 调用。如果没提供它,用 undefined 替代。

    callbackfn参数,分别为值、下标、数组本身

    [].forEach(function(value, index, array) {
        // ...
    });
    

    对比jQuery中的$.each方法:

    $.each([], function(index, value, array) {
        // ...
    });
    

    缺点:

    1. 不能使用break语句中断循环
    2. 不能使用return语句返回到外层函数

    map (ES5)

    语法javascript [].map(callbackfn[, thisArg]);
    说明:map方法可以返回一个处理过的新数组,不改变原数组

    callbackfn参数,分别为值、下标、数组本身

    [].map(function(value, index, array) {
      // ...
      return .....
    }); 
    

    二、比较

    for...in缺点

      ①数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
      ②不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
      ③某些情况下,会以任意顺序遍历键名,主要是为遍历对象而设计的,不适用于遍历数组。

    for...of优点

      ①有着同for...in一样的简洁语法,但是没有for...in那些缺点。
      ②不同于forEach方法,它可以与break、continue和return配合使用。
      ③提供了遍历所有数据结构的统一操作接口。

    三、循环控制语句

    1、break:跳出本层循环,继续执行循环结构后面的语句。如果循环有多层,则break只能跳出一层。

    2、continue:跳过本次循环剩余的代码,跳转到表达式处进行下一次的循环判断,继续执行下一次循环。
       ①对与for循环,continue之后执行的语句,是循环变量更新语句i++;
       ②对于while、do-while循环,continue之后执行的语句,是循环条件判断;
       因此,使用这两个循环时,必须将continue放到i++之后使用,否则,continue将跳过i++进入死循环

    3、return:在程序(函数)中遇到return语句,那么代码就退出该函数的执行,返回到函数的调用处;如果是主程序(main()),那么结束整个程序的运行。

    4、exit: 其他语言中使用,如C、C++等。调用exit()函数将会结束当前进程,同时删除子进程所占用的内存空间,把返回信息传给父进程。
    当exit()中的参数为0时,表示正常退出,其他返回值表示非正常退出,执行exit()函数意味着进程结束;
    而return仅表示调用堆栈的返回,其作用是返回函数值,并且退出当前执行的函数体,返回到函数的调用处,
    在main()函数中, return n和exit(n)是等价的。

  • 相关阅读:
    Linux配置虚拟RAID阵列
    D-Bus错误 D-Bus setup failed: Connection "xxx" is not allowed to own the service "org.bluez" due to security policies in the configuration file
    ftp
    echarts图例过多,折线过多颜色不知道怎么分配怎么办??优化如下
    vuex页面刷新数据丢失的解决办法
    obj转换为gltf方法three.js一步一步来--性能优化超厉害的!!!!!超赞操作!!!Obj模型转Gltf模型并超强压缩!!!!!
    three.js一步一步来--加载模型并修改其大小、按照规定的区域把一堆模型摆得整整齐齐~~~
    three.js一步一步来--简单交互--点击物体变红
    线上代码已变更,客户没有刷新浏览器,导致点击菜单后找不到相对路由js文件无法加载XXX路由,解决办法如下
    angular配置多个系统 配置动态路由,缩短模块初次加载时间,快速打开界面,优化用户访问体验
  • 原文地址:https://www.cnblogs.com/136asdxxl/p/9783690.html
Copyright © 2020-2023  润新知