首页 > 代码库 > JavaScript中的遍历
JavaScript中的遍历
一、对象遍历
ES6一共有5种方法可以遍历对象的属性。
1、for-in
在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的(enumerated)属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性,不含Symbol属性。屏蔽了原型中不可枚举属性(即设置了[[DontEnum]]标记的属性)的实例属性也会在for-in循环中返回,因为规定,所有开发人员定义的属性都是可枚举的——只有IE除外。
2、Object.keys(obj)
Object.keys()方法取得对象上所有可枚举的实例属性。该方法接收一个对象为参数,返回一个包含所有可枚举属性的字符串数组,不含Symbol属性。
3、Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames()得到所有实例属性,无论是否可枚举,不含Symbol属性。
4、Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols(obj)返回一个数组,包含对象自身的所有 Symbol 类型的属性(不包括继承的属性)
5、Reflect.ownKeys(obj)
Reflect.ownKeys(obj)方法用于返回对象的所有实例属性,基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和,包含Symbol属性。
以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则
l 首先遍历所有属性名为数值的属性,按照数字排序
l 其次遍历所有属性名为字符串的属性,按照生成时间排序
l 最后遍历所有属性名为Symbol值的属性,按照生成时间排序
二、数组遍历
数组实际上也是一种对象,所以也可以使用上面对象遍历的任意一个方法(但要注意尺度),另外,数组还拥有其他遍历的方法。
l 最基本的 for 循环、while 循环遍历(缺陷是多添加了一个计数变量)
l ES6 引入:for…of
1、数组内置的一些遍历方法:
1.1、forEach()方法:对数组中的每一项运行给定函数。这个方法没有返回值。
var numbers=[1,2,3,4,5]; numbers.forEach(function(item,index,array){ console.log("item:"+item+" index:"+index+" array:"+array);});
结果:
1.2、map()方法:对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组,原数组不变。
var numbers=[1,2,3,4,5]; var result=numbers.map(function(item,index,array){ return item*2;});console.log(numbers);console.log(result);
结果:
2、一些有用的数组内置方法
2.1、every()方法:对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
2.2、filter()方法:对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
2.3、some()方法:对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。
2.4、find()方法:返回第一个通过测试的元素
2.5、findIndex()方法: 返回第一个通过测试的元素的索引
2.6、reduce()方法: 习惯性称之为累加器函数,对数组的每个元素执行回调函数,最后返回一个值(这个值是最后一次调用回调函数时返回的值)
这个函数的回调函数有 4 个参数
accumulator: 上一次调用回调函数返回的值
currentValue: 当前在处理的值
currentIndex: 当前在处理的值的索引
array
initialValue: 可选项,其值用于第一次调用 callback 的第一个参数
例子:
[1,10,5,3,8].reduce(function(accumulator,currentValue){ return accumulator*currentValue;}); // 1200
2.7、reduceRight(): 用法和上面的函数一样,只不过遍历方向正好相反。
三、Set遍历操作
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set 本身是一个构造函数,用来生成 Set 数据结构。
Set结构的实例有四个遍历方法,可以用于遍历成员。
l keys():返回键名的遍历器
l values():返回键值的遍历器
l entries():返回键值对的遍历器
l forEach():使用回调函数遍历每个成员
需要特别指出的是,set的遍历顺序就是插入顺序。
1、keys方法、values方法、entries方法返回的都是遍历器对象。由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。
let set = new Set([‘red‘, ‘green‘, ‘blue‘]);for (let item of set.keys()) { console.log(item);}// red// green// bluefor (let item of set.values()) { console.log(item);}// red// green// bluefor (let item of set.entries()) { console.log(item);}// ["red", "red"]// ["green", "green"]// ["blue", "blue"]
2、forEach()
Set结构的实例的forEach方法,用于对每个成员执行某种操作,没有返回值。
let set = new Set([1, 2, 3]);set.forEach((value, key) => console.log(value * 2) )// 2// 4// 6
四、Map遍历操作
Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。
Map原生提供三个遍历器生成函数和一个遍历方法。
l keys():返回键名的遍历器。
l values():返回键值的遍历器。
l entries():返回所有成员的遍历器。
l forEach():遍历Map的所有成员。
需要特别注意的是,Map的遍历顺序就是插入顺序。
let map = new Map([ [‘F‘, ‘no‘], [‘T‘, ‘yes‘],]);for (let key of map.keys()) { console.log(key);}// "F"// "T"for (let value of map.values()) { console.log(value);}// "no"// "yes"for (let item of map.entries()) { console.log(item[0], item[1]);}// "F" "no"// "T" "yes"// 或者for (let [key, value] of map.entries()) { console.log(key, value);}// 等同于使用map.entries()for (let [key, value] of map) { console.log(key, value);}
JavaScript中的遍历