争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

javascript遍历方法的介绍(代码示例)

时间:2024/5/16作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于javascript遍历方法的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

有用到object对象的转换成数组,然后又想到了遍历方法,所以,也想记录下

1. 终止或者跳出循环

  • break跳出循环体,所在循环体已结束

  • continue跳出本次循环,进行下一次循环,所在的循环体未结束

  • return 终止函数执行

for (let i = 0; i < 5; i++) {
    if (i == 3) break;
    console.log("The number is " + i);
    /* 只输出 0 , 1 , 2 , 到3就跳出循环了 */
}
for (let i = 0; i <= 5; i++) {
    if (i == 3) continue;
    console.log("The number is " + i);
    /* 不输出3,因为continue跳过了,直接进入下一次循环 */
}

2.遍历方法

  • 假数据

const temporaryArray = [6,2,3,4,5,1,1,2,3,4,5];
const objectArray = [
    {
        id: 1,
        name: 'd'
    }, {
        id: 2,
        name: 'd'
    }, {
        id: 3,
        name: 'c'
    }, {
        id: 1,
        name: 'a'
    }
];
const temporaryObject = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
};
const length = temporaryArray.length;
  • 普通for循环遍历

for(let i = 0; i < length; i++) {
    console.log(temporaryArray[i]);
}
  • for in 循环

/* for in 循环主要用于遍历普通对象,
* 当用它来遍历数组时候,也能达到同样的效果,
* 但是这是有风险的,因为 i 输出为字符串形式,而不是数组需要的数字下标,
* 这意味着在某些情况下,会发生字符串运算,导致数据错误
* */
for(let i in temporaryObject) {
    /* hasOwnProperty只加载自身属性 */
    if(temporaryObject.hasOwnProperty(i)) {
        console.log(temporaryObject[i]);
    }
}
  • for of 循环,用于遍历可迭代的对象

for(let i of temporaryArray) {
    console.log(i);
}
  • forEach 第一个值为数组当前索引的值,第二个为索引值,只能遍历数组,无返回值,也无法跳出循环

let a = temporaryArray.forEach(function(item, index) {
    console.log(index, item);
});
  • map 返回新数组,只能遍历数组

temporaryArray.map(function(item) {
    console.log(item);
});
  • filter 是数组的内置对象,不改变原数组,有返回值

temporaryArray.filter(function(item) {
    console.log(item%2 == 0);
});
  • some判断是否有符合的值

let newArray = temporaryArray.some(function(item) {
    return item > 1;
});
console.log(newArray);
  • every判断数组里的值是否全部符合条件

let newArray1 = temporaryArray.every(function(item) {
    return item > 6;
});
console.log(newArray1);
  • reduce(function(total, currentValue, currentIndex, array) {}, [])

total:初始值或者计算结束后的返回值, currentValue遍历时的当前元素值,currentIndex当前索引值,array当前数组
如果没有指定参数-空数组[],累积变量total默认是第一个元素的值
在指定参数空数组后,累积变量total的初始值就变成了空数组

let temporaryObject3 = {};
let newArray2 = objectArray.reduce(function(countArray, currentValue) {
    /* 利用temporaryObject3里存放id来判断原数组里的对象是否相同,若id相同,则继续下一步,不同则将该对象放入新数组中
     * 则countArray为去重后的数组
      * */
    temporaryObject3[currentValue.id] ? '' : temporaryObject3[currentValue.id] = true && countArray.push(currentValue);
    return countArray;
}, []);
console.log(newArray2);

以上就是javascript遍历方法的介绍(代码示例)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:javascript遍历办法的介绍(代码示例)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版