首页 > 代码库 > 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.7reduceRight(): 用法和上面的函数一样,只不过遍历方向正好相反。

 

三、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中的遍历