js遍历方法总结

212 阅读3分钟

数组的迭代方法

ECMAScipt为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项运行的参数和(可选的)运行该函数的作用域对象——影响this的值。传入这些方法的函数会接收三个参数:数据项的值、该项在数组中的位置和数组对象本身。

  • 5个迭代方法的作用:对数组中的每一项运行给定函数
  1. every():如果该函数对每一项都返回true,则返回true
  2. some():如果该函数对任一项返回true,则返回true。
  3. filter():返回该函数会返回true的项组成的数组
  4. forEach():这个方法没有返回值,只是单纯的遍历
  5. map():返回每次函数调用的结果(即return的值)组成的数组;如果设置了返回值,则每次循环的返回值会组成一个新的数组。对原数组没有影响。当没有返回值的时候,返回index个的undefined的数组。

注:以上这些方法都会不修改数组中包含的值。支持这些迭代方法的浏览器有IE9+

<script>
    var numbers = [1,2,3,4,5,4,3,2,1];
    //every:每一项都是true才会返回true
    var everyResult = numbers.every(function(item,index,array) {
    	return (item>2);
    });
    console.log(everyResult);//false
    //some:有一项是true就是返回true
    var someResult = numbers.some(function(item,index,array) {
    	return (item>2);
    });
    console.log(someResult);//true
    //filter:过滤数组,会返回true的项组成的数组,对原数组没有影响
    var filterResult = numbers.filter(function(item,index,array){
    	return (item>2);
    });
    console.log(filterResult);//[3,4,5,3];
    console.log(numbers);//[1,2,3,4,5,4,3,2,1];
    //map:返回一个新数组,对原数组没有影响
    var mapRequest = numbers.map(function(item, index, array){
    	return item*2;
    });
    console.log(mapRequest);//[2,4,6,8,10,8,6,4,2];
    console.log(numbers);//[1,2,3,4,5,4,3,2,1];
    //forEach
    numbers.forEach(function(item,index,array){
    	//这个方法没有返回值,本质上与使用for循环迭代数组一样
    	arr[index] = item;//改变数组本身
    	//forEach不能中断,要遍历所有的元素
    	//forEach会自动跳过空数组
    	//没有返回值
    });
</script>
  1. for of

遍历对象

  1. for-in
for (var key in obj) {//取出的属性名赋值给key
    console.log(“本次遍历到的”+key+”的值是”+obj[key]);
    //因为是变量,所有访问用obj[key],obj.key不对,因为key是变量而不是属性名
    //obj.k=obj[“k”];
    //属性名用[]的目的是,对象的属性名默认是字符串,而用了[]可以是任意的数据类型
    //用了[]定义的属性名,调用的时候也要用[],
    //[a]此时a是一个变量,只有另外定义了var a=”ddd”,此时这个a这个的属性名是ddd
}

注:

  • ECMAScript对象的属性没有顺序。具体的讲,所有的属性都会被返回一次,但返回的先后次序因浏览器而异
  • 但如果表示要迭代的对象的变量值为null或undefined,for-in语句会抛出错误,ECMAScrip5更正了这个行为,对这种情况不会抛出错误,而只是不执行循环体。为了保证最大的兼容性,在使用for-in之前,先确认该对象的值不是null或undefined

es6 新增的遍历方法

not finished