JavaScript中的遍历

Posted sakuramoon

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
// 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);
}

以上是关于JavaScript中的遍历的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 代码片段

你可能不知道的JavaScript代码片段和技巧(下)

你可能不知道的JavaScript代码片段和技巧(上)

javascript如何遍历数组中的每一个元素

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程