JavaScript中的遍历器

JavaScript中 Map Set详解

Map和Set

1、for

 //1.for  最重要  兼容性好
        var arr = [10, 20, 30, 40]
        for (let i = 0; i < arr.length; i++) {
            arr[i]
        }

2、for in 循环

// for in 循环主要用于遍历普通对象， i 代表对象的 key 值， obj[i] 代表对
//应的 value, 当用它来遍历数组时候， 多数情况下也能达到同样的效果， 但是你
//不要这么做， 这是有风险的， 因为 i 输出为字符串形式， 而不是数组需要的数
//字下标， 这意味着在某些情况下， 会发生字符串运算， 导致数据错误， 比如：
 //'52' +1 = '521' 而不是我们需要的 53。另外for in 循环的时候， 不仅遍历
//自身的属性， 还会找到 prototype 上去， 所以最好在循环体内加一个判断，
//就用 obj[i].hasOwnProperty(i)， 这样就避免遍历出太多不需要的属性。
      var obj={name:"karen",age:"13"}
       for(var key in obj){
         console.log(key,obj[key]);
           }
     var arr = [10, 20, 30, 40]
    for (var i in arr) {
        console.log(i, arr[i]);
       }

3、Array forEach 循环

//forEach循环， 循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道
//数组长度, 他有三个参数， 只有第一个是必需的， 代表当前下标下的 value。
//另外请注意， forEach 循环在所有元素调用完毕之前是不能停止的， 它没break
//语句， 如果你必须要停止， 可以尝试try-catch 语句， 就是在要强制退出的时
//候，抛出一个 error 给catch 捕捉到， 然后在catch 里面return， 这样就能中
//止循环了， 如果你经常用这个方法， 最好自定义一个这样的 forEach 函数在你
//的库里
 var arr = [10, 20, 30]
        var re = arr.forEach(function (el) {
            console.log(el);
        }) //函数调用了3次  没有返回值
        console.log(re);

3、1自己封装一个foreach

var arr = [10, 20, 30]
        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);
        })

        var arr = [10, 20, 30]
        var re = arr.forEach(function (el, index, arr) {
            console.log(el, index, arr); //元素，元素下标，元素所属数组
        })

4、Array map() 方法

//map() 方法返回一个新数组， 数组中的元素为原始数组元素调用函数处理后的
//值。注意： map 和 forEach 方法都是只能用来遍历数组， 不能用来遍历普通对
//象。
      var re = arr.map(function (el) {
                console.log(el);
                return 100
            })
            console.log(re, arr);

        var arr = [10, 20, 30]
        var re = arr.map(function (el, index, arr) {
    console.log(el, index, arr); //元素，元素下标，元素所属数组
        })

  var arr=[{name:"karen",birth:"2001-02-03"},{name:"jack",birth:"2002-02-03"}]
        var arr2=arr.map(function(el){
        	el.age=new Date().getFullYear()-new Date(el.birth).getFullYear()
        	return el
        })
        console.log(arr2)
        [{name:"karen",birth:"2001-02-03",age:21},{name:"jack",birth:"2002-02-03",age:20}]

5、Array filter() 方法

//filter 方法是 Array 对象内置方法， 它会返回通过过滤的元素， 不改变原来的
//数组。
 var arr = [10, 20, 30, 40]
        var re = arr.filter(function (el, index, arr) {
            console.log(el);
            if (el > 20) {
                return true
            } else {
                return false
            }
        })
        console.log(re);

        var arr=[{tag:0,name:"karen"},{tag:1,name:"jack"},{tag:1,name:"marry"}]
        var arr2=arr.filter(function(el){
          	return el.tag
        })
        console.log(arr2)

6、Array some() 方法

//some() 方法用于检测数组中的元素是否满足指定条件（ 函数提供）, 返回 
//boolean 值， 不改变原数组。
    var arr = [10, 29, 304, 43]
        var re = arr.some(function (el) {
            return el > 29
            //返回true后不再执行
        })
        console.log(re);

        //预测笔试题设计mysome
        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=[10,200,500,400]
        var re=arr.mysome(function(el){
        	console.log(el)
        	return el>100
        })
        console.log(re

7、Array reduce() 方法

//reduce() 方法接收一个函数作为累加器， 数组中的每个值（ 从左到右） 开始缩
//减， 最终计算为一个值。
 var re = [10, 20, 30, 40] //调用了3次
        var re = arr.reduce(function (n1, n2) {
            console.log(n1, n2, 222);
            //return 90//返回值作为下一次调用的n1
            return n1 + n2
        }, 111) //调用了4次
        console.log(re);

8、Array every() 方法

let arr = [1, 2, 3];
let tt = arr.some(function(i) {
return i > 1;
})
// 检测数组中元素是否都大于1
// false
//every() 方法用于检测数组所有元素是否都符合指定条件（ 通过函数提供）， 
//返回 boolean 值， 不改变原数组。