JS：遍历器

遍历器：取出数据容器中每一个元素的工具

 

1、for循环是最重要的遍历器工具之一（兼容性很好）

        var arr = [1, 2, 3, 4];
        for (var i = 0; i < arr.length; i++) {
            console.log(arr[i]);　　//1 2 3 4 
        }

 

2、for in

方法：for (var key in object) { }

key是字符串，除了数组，还能遍历对象;

        var obj = {name:'lili',age:10};
        for (var i in obj){
            console.log(i);         //name age
            console.log(obj[i]);    //lili 10
        }    

 

3、forEach()方法

方法：forEach(callbackfn: (value: number, index: number, array: number[]) => void, thisArg?: any): void

value 当前的元素

index 打印值的下标

传入的函数

        var arr = [1, 2, 3, 4];
        arr.forEach(function (el){console.log(el);});    //1 2 3 4

 

3.1、myforEach()

是自己封装的一个方法，可以用来遍历数据

        var arr = [1, 2, 3, 4];
        Array.prototype.myforEach = function(callback){
            for(var i = 0;i<this.length;i++){
                callback(this[i]);
            }
        }
        var re = arr.myforEach(function(el){
            console.log(el);    //1 2 3 4
        })

当没有myforEach方法时，在Array的原型上添加了一个myforEach成员，并将它的方法封装起来使用

 

4、map

返回值

返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

        var arr=[1,2,3,4];
        var re=arr.map(function(el){
            console.log(el);
        })
        console.log(re);//1 2 3 4 [undefined,undefined,undefined,undefined]

undefined是函数的返回值

 

5、filter

返回值若是true，则返回数组中的数组，也可以设置条件语句

返回的是一个新数组

    　　 var arr = arr = [1, 2, 3, 4];
        var re = arr.filter(function (el, index, arr) {
            // console.log(el);
            // return true;布尔
            if (el > 1) {
                return true
            } else {
                return false
            }
        });
        console.log(re);　　

打印结果：[2, 3, 4]

 

6、some

方法：(predicate: (value: number, index: number, array: number[]) => unknown, thisArg?: any): boolean

返回一个布尔值

        var arr = arr = [1, 2, 3, 4];
        var re = arr.some(function (el, index, arr) {

            return el > 4

        });
        console.log(re);　　//false

 

6.1、mysome

探究，some已经筛选得到了true，还会不会再调用

        Array.prototype.mysome=function(callback) {
        for(var i=0;i<this.length;i++){
            if(callback(this[i],i,this)){return true}
        }
        return false            
    }

        var arr = arr = [1, 2, 3, 4];
        var re = arr.some(function (el, index, arr) {
            console.log(el);
            return el > 2

        });
        console.log(re);

打印结果：

 

 

7、every

8、reduce

方法：reduce(callbackfn: (previousValue: number, currentValue: number, currentIndex: number, array: number[]) => number): number (+2 overloads)

    　　 var arr = [1, 2, 3, 4];
        arr.reduce(function(a,b){
            console.log(a,b);
            return a+b;
        })

打印结果：

 reduce(fn(){ },number)

number:基础值，那么打印值就是函数返回值加上基础值

 

9、reduceRight

可以计算购物车总价格

 

 

for - in

es5

            var obj={age:20,name:"karen"};

            obj.__proto__={life:1};

            for (var key in obj) {

                console.log(key);　　//age name life

            }

*会遍历原型上的自定义属性。

 

for - of

es6

            var obj={0:20,1:"karen",length:2};

            obj.__proto__={life:1};

            for (var key of obj) {

                console.log(key);　　//报错

            }

 

*for - of 不能遍历对象

 

            var arr=[1,2,3,4];

            for (let s of arr) {

                console.log(s);　　//1 2 3 4

            }