JavaScript中的遍历

Posted 2020-09-08 sakuramoon

一、对象遍历

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
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (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);
}