JavaScript学习笔记--循环遍历相关方法

for循环

用来遍历数组

---

forEach循环（ES6）

用来遍历数组

forEach(callback(item [,index,arr])[,thisArg]) 参数：

• 函数(当前值，索引，当前数组)
• 传入回调函数的this指向

返回值：

• undefined

遍历数组

let arr=[1,2,3];
let arr2=arr.forEach(item=>{
    console.log(item)   //1 2 3
})
console.log(arr2);  //undefined

遍历对象数组

let arr=[{name:'a',age:10},{name:'b',age:11},{name:'c',age:12}]
arr.forEach(({name,age})=>{
    console.log(`name:${name}--age:${age}`)
})

遍历数组嵌套

let arr=[['a',1],['b',3]];
arr.forEach(([name,count])=>{
    console.log(`name:${name}--count:${count}`)
})

---

for in

for(let item in arr|obj)

• 遍历数组时，item表示的是索引值
• 遍历对象时，item表示的是key值

for in一般用来遍历对象的属性(可枚举的属性)，包括对象的原型方法和属性，可以使用hasOwnProperty方法判断，或者用Object.keys(obj) 遍历，返回对象的实例属性组成的数组

let obj={a:1,b:2,c:3}
for(let k in obj){
    console.log(`obj.${k}:${obj[k]}`)
}
//obj.a=1 obj.b=2 obj.c=3

let arr=[1,2,3]
for(let i in arr){
    console.log(`arr[${i}]=${arr[i]}`)
}
//arr[0]=1 arr[1]=2 arr[2]=3

---

for of

可以用来遍历可迭代对象/含有迭代器对象的集合，如字符串、数组、Set、Map，遍历的是当前值。不能遍历普通对象

遍历数组

let arr=[1,2,3];
for(let val of arr){
    console.log(val);//1 2 3
}

遍历字符串

let str='abc';
for(let s of str){
    console.log(s) //"a" "b" "c"
}

遍历Set对象

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

遍历Map对象

let map=new Map([['name','a'],['age',11],['sex','f']])
    for(let [k,v] of map){
        console.log(`${k}--${v}`)
        //name--a  age--11  sex-f
    }

遍历对象上的属性

for of 不能遍历对象，因为没有迭代器对象，可以用Object.keys(obj)将对象上的属性存到一个数组

let obj={a:1,b:2,c:3}
for (var key of obj) {
    console.log(key + ": " + obj[key]);
    //a:1  b:2  c:3
}

迭代器

迭代器对象含有一个next()方法，该方法返回一个对象，对象有两个属性：

• 一个是value：保存迭代到的值
• 一个是done：boolean值，当没有数据可迭代时返回true,表示迭代结束

使用ES5创建一个迭代器

function CreateIterator(arr){
    let i=0;
    //返回一个对象，含有next方法
    return{
        next(){
            let done=(i>=arr.length);
            let value=!done? arr[i++]:undefined;
            return {value,done}
        }
    }
}
let iterator=CreateIterator([1,2,3]);
let obj=iterator.next();
while(!obj.done){  //判断是否还有可迭代的数据
    console.log(obj,value);
    obj=iterator.next();//再次调用迭代器的next方法
}

ES6新语法，自定义*函数表示生成器，生成一个迭代器对象

function *Generator(arr){
    for(let i=0;i<arr.length;i++){
        yield arr[i];
    }
}
let iterator=Generator([1,2,3]);//得到一个迭代器对象
let obj=iterator.next();
while(!obj.done){
    console.log(obj.value)
    obj=iterator.next();
}