for遍历

2019-04-28  本文已影响0人  无言无意

Array所有方法详解 http://30ke.cn/doc/js-array-method


1.forEach

let arr = [1,2,3,4,5];
arr.forEach((i)=>{
    console.log(i);//1 2 3 4 5
});

这种循环的问题在于无法中途跳出循环,break和return命令不能奏效.
map和filter都返回数组,map返回的与原数组长度相同


2.map

let arr = ['a','b','c','d'];
let newArr = arr.map((val,key)=>{
    if(val=='c'){
        return val;}
});
console.log(newArr);//[undefined,undefined,'c',undefined];

3.filter

let arr = ['a','b','c','d'];
let newArr = arr.filter((val,key)=>{
    if(val=='c'){
        return val;
        }
});
console.log(newArr);//['c']

只返回符合条件的结果一个值
every和some返回布尔值


4.for-in

遍历对象所有的可枚举属性(主要是为了遍历对象而设计的,不适用于遍历数组)功能类似于Object.keys().

let obj = {
    name:'xiaoming',
    age:15
}
for(let item in obj){
    console.log(item);//name age
}

不可枚举的对象:如constructor,数组的length

let arr = [10, 20, 30, 40, 50];
 
for (let item in arr) {
    console.log(item); // '0' '1' '2' '3' '4'
}

数组的键名是数字,但是for-in循环是以字符串作为键名‘0’、‘1’、‘2’等.

5.for-of

所有实现了[Symbol.iterator]接口的对象都可以被遍历。可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、Generator 对象,以及字符串
for..of获取索引
.entries()返回键值对
.keys()返回键名
.values()返回键值
类似数组的对象:如字符串DOM NodeList 对象、arguments对象等

let str = 'hi';
for(let i of str){
    console.log(s);
}//h i

let item = document.querySelectorAll('p');
for(let a of item){
    a.classList.add('test');
}

(function(){
    for(let x of arguments){
        console.log(x);
    }
})('a','b');
//'a'
//'b'

并非所有类似数组的对象都有iterator接口,使用Array.from()将其转化为数组

let ar = {length:2,0:'a',1:'b'};
for(let i of ar){
    console.log(i);//报错
}
for(let i of Array.from(ar)){
    consle.log(i);//'a' 'b'
}

普通对象不能直接使用for-of会报错,因为没有iterator接口,for-in可以直接使用,若非要使用for-of需要使用Object.keys方法将键名生成一个数组,然后遍历这个数组。

for(let key of Object.keys(obj)){
    console.log(key+' '+obj[key]);
}

原帖链接<https://segmentfault.com/a/1190000015333058>

上一篇下一篇

猜你喜欢

热点阅读