js中所有归属于数组的遍历方法

83 阅读 0 评论 55 点赞

我是靠谱客的博主秀丽路灯，这篇文章主要介绍js中所有归属于数组的遍历方法，现在分享给大家，希望可以做个参考。

一个程序员的人生，是逃不过数组和遍历这两个词语的。

在几十年前js刚刚萌生的时候，对于一个数组结构的遍历，大概你都是用这种方法：

复制代码

1
2
3
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

对于一个对象的遍历，你大概会采用这种方法：

复制代码

1
2
3
4
for(var key in myObj){
    console.log(key);//输出键
    console.log(myObj[key]);//输出值
}

但是奉劝你千万别用for in 来遍历一个数组，因为它的key值是字符串，并非是number。

ES5出现以后，提供了foreach方法：

复制代码

1
2
3
4
var name = ['张三', '李四', '王五'];
name.foreach(function(item,index) { 
    console.log(item); 
});

还有老牌框架提供的each方法：

复制代码

1
2
3
$(name).each(function(index,item){//注意了，each和foreach中的参数的顺序是相反的
      console.log(item);   
});

并且，这两种方法曾经使得你在dom上的操作得心应手，无往不利。

可是，仅仅有这两种方法是无法应付操作数据的需求的，我们希望能够更加方便地去操作一些数据。

很有必要的，我们先来谈谈for of。

其实for of并不是一个遍历方法，它的作用是确定当前调用它的数据结构有没有默认的遍历方法，如果有就调用这个默认的遍历方法，没有抛出错误。比如：

复制代码

1
2
3
4
5
6
7
8
9
let obj = {
    a:1,
    b:2
};
console.log(obj[Symbol.iterator]); //undefined
for(let x of obj){
    console.log(x);   
}
// Uncaught TypeError: obj is not iterable

因为对象没有默认的遍历方法，所以当使用for of去遍历一个对象的时候，就会发生错误。为什么会这样？因为ES6规定，遍历器方法保存在对象的[Symbol.iterator]属性中（这个属性的名字是内置的Symbol值，防止重名）。事实上，每一个数据结构的遍历方法在执行时都会返回一个遍历对象，这个对象的基本特征就是具有next方法。调用next方法时，都会返回一个当前成员的信息对象，具有value和done两个属性。只有当done的对象为true的时候，这时候遍历才会结束。这跟c的底层原理是一样的，高级语言编译成机器语言，遍历时都有一个状态表示当前遍历是否结束。

如果我们想要对象也可以使用for of循环，就要给它加上一个默认的遍历方法，也就是[Symbol.iterator]属性。

复制代码

1
2
3
4
5
6
7
8
9
10
11
obj[Symbol.iterator]=function(){
    return {
        next: function(){
            return { value:1, done:false }
        }
    };
}
for(let x of obj){
    console.log(x);
}

但是done为false，遍历永远不会结束，一直输出1.

我们来改造一下以上的数组，使对象也拥有一个默认的遍历方法。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
obj[Symbol.iterator]=function(){
    var index=0;
    return {
        next: function(){
            if(index<Object.Keys(obj))
            {
                index++;
                return { value:1, done:false }
            }else{
                return { value:1, done:true }
            }
        }
    };
}

这时候再用for of去调用它，就不会出现遍历错误了。

好了，接下来我们看看，es6为我们提供了那些有用的遍历方法

map方法：

复制代码

1
2
3
4
5
6
7
var a1 = ['a', 'b', 'c'];
var a2 = a1.map(function(item，key，ary) {
     return item.toUpperCase();
});
console.log(a1);// ['a','b','c'];
console.log(a2); //['A','B','C'];
//map 是表示映射的，也就是一一对应，遍历完成之后会返回一个新的数组，但是不会修改原来的数组

filter方法：

复制代码

1
2
3
4
5
6
7
8
//filter ，就是一个过滤器 
var a1 = [1,2,3,4,5,6];
var a2 = a1.filter(function(item) { 
     return item <= 3; 
});
 console.log(a2); // [1,2,3];

//filter 它将是遍历每一个元素，用每一个元素去匹配，如果返回true，就会返回一个次数，最后将所有符合添加的次数组合成一个数组，最后将这个数组返回，不改变原数组

reduce方法(从左到右依此遍历，一般用来做加减乘除用算用的)：

复制代码

1
2
3
4
5
6
7
8
9
var a1 = [1, 2, 3];
var total = a1.reduce(function(first, second) { 
     return first + second; 
}，0);
console.log(total) // Prints 6

//注意 1、就是 return first+second 其实相当于  return first+=second； 也就是说每次的first 是上一次的和
    //2、就是function{}后面的参数，如果 有值 那么第一次加载的时候 first  = 0； second = 1；如果没有值 ， first = 1 ， second = 2；如果后面的参数是个字符串，那么就是会是字符串拼接、

every方法（且）：

复制代码

1
2
3
4
5
6
7
8
9
10
function isNumber(value){ 
    return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.every(isNumber)); // logs false
//常用于检查一个数组的所有元素是否都符合某个标准
//注意：数组中每一个元素在callback上都被返回true时就返回true，否则为false

some (或)方法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
function isNumber(value){ 
return typeof value == 'number';
}
var a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // logs true
var a2 = [1, '2', 3];
console.log(a2.some(isNumber)); // logs true
var a3 = ['1', '2', '3'];
console.log(a3.some(isNumber)); // logs false
//常用于检查一个数组中的元素是否存在一个元素符合某一个标准
//注意：只要数组中有一项在callback上被返回true，就返回true