for in,map 和forEach

zhaofeiweb

已于 2022-01-19 17:28:55 修改

阅读量1.8k

点赞数

文章标签： javascript 前端 vue.js

于 2018-07-09 14:08:43 首次发布

本文链接：https://blog.csdn.net/zhaofeiweb/article/details/80969200

版权

for in 既可以遍历数组又可以遍历对象

 //for in 遍历对象 
    for(var x in obj) {
        // x 为对象的键，obj[x] 为键值
        list = list.filter((item,index)=>{
            //list 代表的是 代表一个数组
            //item 代表数组中的每一项 ，是一个对象
            //console.log("item",item);
            return item[x] == obj[x];
        })
    }

map 和forEach

forEach(): 针对每一个元素执行提供的函数。
map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来
forEach()方法不会返回执行结果，而是undefined。
forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){  
  console.log(this);    
 return item / 2;},this);
console.log(str);

for…of

ES6提出的语句，在可迭代对象（Array，Map，Set，String，TypedArray，arguments）上创建一个迭代循环。

遍历数组

let array = [10,20,30];
for(let val of array){
    console.log(val);
}
// 10
// 20
// 30

遍历String

let str = "boo";
for(let val of str){
    console.log(val);
}
// "b"
// "o"
// "o"

遍历Map

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

for(let [key,value] of map){
    console.log(value);
}
// 1
// 2
// 3

遍历Set

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

遍历DOM集合

let divs = document.querySelectorAll("div");
for(let div of divs){
    div.className = "red";
}

遍历生成器

function* fibonacci(){
    let [prev,curr] = [0,1];
    for(;;){
        [prev,curr] = [curr,curr+prev];
        yield curr;
    }
}

for(let n of fibonacci()){
    if(n>1000) break;
    console.log(n);
}

for…in

for…in 语句以任意顺序遍历一个对象的可枚举属性的属性名。

for (variable in object) {...}

var obj = {a:1, b:2, c:3};
for(var prop in obj){
    console.log(prop);
}
//a
//b
//c

for(var prop in obj){
    console.log(obj[prop]);
}
//1
//2
//3

但是for-in会遍历对象本身的所有可枚举属性和从它原型继承而来的可枚举属性，因此如果想要仅迭代对象本身的属性，要结合hasOwnProperty（）来使用：

var triangle = {a:1, b:2, c:3};

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
    console.log("o." + prop + " = " + obj[prop]);
}

//原型上的可枚举数据也被迭代出来
//o.color = red
//o.a = 1
//o.b = 2
//o.c = 3

//使用hasOwnProperty（）

for (var prop in obj) {
  if( obj.hasOwnProperty( prop ) ) {
    console.log("o." + prop + " = " + obj[prop]);
  } 
}
//o.color = red