JS数组遍历的6种方法
2023-05-20 11:03
JavaScript
201
0
0
0
标题录入
封面图
JS数组遍历的6种方法 ####1. for 遍历数组 1.1 for 的普通遍历 ``` var name = ['Peter','Stark','Jack']; // for 循环 for(var i = 0; i < name.length; i++) { console.log(name[i]); } ``` 1.2 for 优化版遍历 ``` var name = ['Peter','Stark','Jack']; // 先缓存 name.length for(var i = 0, len = name.length; i < len; i++) { console.log(name[i]); } ``` ####2、while 遍历数组 ``` // while 循环 var i = 0; while (i < name.length) { console.log(name[i]); i++; } //while 逆向遍历 var i = name.length; while (i--) { console.log(name[i]); } ``` ####3. for...in 方法 数组既可遍历对象,也可遍历数组。遍历数组时也会遍历非数字键名,所以不推荐 for..in 遍历数组 3.1 遍历数组 ``` var a = [1, 2, 3]; for (var key in a) { console.log(a[key]); } ``` 3.2 遍历对象 ``` const object = { name: 'Peter', age: 12, isHuman: true }; for (let key in object) { console.log(key + '---' + object[key]); } ``` ####4. for...of 方法 (ES6) ``` var arr = ['a','b','c']; for(let item of arr) { console.log(item); } ``` ####5. forEach() 方法 用来遍历数组中的每一项,不影响原数组,性能差 缺陷 你不能使用break语句中断循环,也不能使用return语句返回到外层函数。 5.1 遍历普通数组 ``` var arr = [1,2,3,4]; arr.forEach = (function(item) { console.log(item); }) ``` 5.2 forEach() 遍历对象类型数组 ``` const info = [ {id: 1000, name: 'zhangsan'}, {id: 1001, name: 'lisi'}, {id: 1002, name: 'wangwu'} ] arr.forEach( function(item) { console.log(item.id + '---' + item.name); }) ``` ####6. map() 方法 支持return,相当与原数组克隆了一份,把克隆的每项改变了,不影响原数组 ``` var arr = [1,2,3,4]; arr.map( function(item) { return item; }) ``` 当然有了 箭头函数 => 后更方便 ``` var arr = ['a','b','c']; var newArray = arr.map(x => x); alert(newArray); // ['a','b''c'] map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果 var newArray = arr.map(function (item) { return [expression]; }) ``` 例如 ``` var arr = [1,2,3,4]; var newArray = arr.map( x => x * x ) alert(newArray); ```
上一篇:
JavaScript split() 方法
下一篇:
JS字符串截取(3种方法)
标题录入,一次不能超过6条
怎么证明自己的选择是对的?
T:0.004130s,M:238.21 KB
返回顶部
留言
留言
评论