js数组遍历(for in ,for of ,map,foreach,filter)的区别
2018-11-23 17:05
741 查看
一.for in 和for of 的区别
1.for in 遍历数组时,索引实际上是字符串类型的数字,不能进行运算,我们来输出一下:
let arr = [1,3,5,4]
for (let index in arr) { console.log(typeof index) }
结果:
2.遍历的顺序有可能不是数组内部的顺序(这个我没有试出来,如果找到例子,以后我再更新)
3.for in 会遍历数组内所有可枚举的属性,包括原型上的属性和方法
let arr = [1,3,5,4] arr.name = "数组" for (let index in arr) { console.log(arr[index]) }
结果:
所以,for in更适合遍历对象,尽量不要使用for in 遍历数组
使用for in 遍历对象时,index为该对象的键,Object[index]能取到每个键对应的值,来看下面的例子:
let obj = { name:"张三", age:21, work:"前端" } for (let index in obj) { console.log("key为---",index,"val为---",obj[index]) }
结果:
2.foreach
foreach会从头到尾对数组里的每个元素遍历一遍 ,他不会生成新数组,也不改变原数组,回调函数接收三个值,分别是 数组的元素,索引和当前数组
let arr = ["a","b","c","d"] arr.forEach((el,index,array) => { if(el == "b" ) return console.log(el,index,array) })
结果:
在上边的例子中我加了一个判断,如果满足元素等于b,return出去,按理说遍历时满足这个条件后边就不遍历了,但是foreach不会,他会接着向下进行
3.map
和foreach类似,map也会把数组的每一项都遍历一遍,他会返回一个新数组,但是原数组保持不变,值得注意的是,map不会对空数组进行检测
let arr = [1,2,3,4,5] let b = arr.map((el,val,array) => { return el > 2 }) console.log(b)
结果:
4.filter
filter为过滤的意思,也就是说它会把满足条件的元素拿出来形成一个新的数组
let arr = [1,2,3,4,5,6,7,8,9] let result = arr.filter(el => { return el % 2 == 0 }) console.log(result)
结果:
巧妙的运用filter去除数组中重复的元素:
let phone = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子'] let result = phone.filter((el,index,arr) => { return arr.indexOf(el) == index }) console.log(result)
结果:
相关文章推荐
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
- js数组中forEach,map,filter的区别
- js---js中数组遍历方法forEach与map()有什么区别?
- js数组的遍历方法filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
- js中的循环遍历数组中的元素,ES6(for-of)、ES5(forEach、for-in)、通用(for(i=0;i<length;i++))
- js---原生JS数组arr遍历方法forEach()和map()遍历的区别以及兼容写法
- 遍历方法 for、for in、for of、forEach、map的区别
- js数组遍历some,foreach,map,filter,every对比
- js数组中forEach/some/every/map/filter/reduce的区别
- js中数组过滤、遍历、迭代every、some、filter、map、forEach、reduce、reduceRight
- js数组遍历some,foreach,map,filter,every对比
- 循环遍历总结(for/foreach/forin/forof/map/some/filter)
- js中foreach,for in,for of的使用及区别,遍历对象,遍历数组使用的不一样 JavaScript
- JS中的 map, filter, some, every, forEach, for...in, for...of 用法总结
- Java中foreach和for在循环遍历数组、集合方面的区别
- for...in、for...of、forEach、map的区别
- js中使用for 循环和 for in 遍历数组区别
- 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
- JS中some(),every(),forEach(),map(),filter()区别
- 浅析PHP中for与foreach两个循环结构遍历数组的区别