JavaScript遍历方法对比以及适用对象.md

遍历方法

1、for循环

语法:

1
for\(let i=0; i<length; i++\){ 代码}

说明:因为String对象具有length属性,所以可以直接使用String.length进行遍历

适用对象:Array,String,obj没有length,不可以使用for循环

2、for in

语法:

1
for( let index in对象){ 在此执行代码}

说明:for in 遍历的是key值

使用对象:Array String Object

3、for of

语法:

1
for(let value of 对象){ 在此执行代码}

说明:for of遍历的value值
只要具有遍历器接口Iterator,都可以使用for of 遍历,比如NodeList Set Map Array String 类数组

使用对象:Array String

for in 与for of 区别
  1. 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of
  2. for...in循环出的是key,for...of循环出的是value
  3. 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
  4. for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

4、forEach

语法:

1
array.forEach(function(currentValue, index, arr), thisArg)

说明:arr当前元素所属的数组对象。

使用对象:Array 只有array对象有

其他数组遍历、map from filter some every等

再加上forEach,这些都是针对于Array进行遍历的,

String遍历

一种变换的方法,使用split将字符串切割为字符串数组,再对数组进行遍历。

Object遍历

除了前面写到的for in遍历Object对象,还有以下几种方法对Object进行遍历

2、Object.keys

语法:

1
2
3
4
Object.keys(obj)   //个表示给定对象的所有可枚举属性的字符串数组。
// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

说明:Object.keys返回一个由key值组成的可枚举属性的字符串数组,再对数组进行遍历既可以遍历Object

3、Object.getOwnPropertyNames

语法:

1
Object.getOwnPropertyNames(obj)  //在给定对象上找到的属性对应的字符串数组。

说明:返回一个数组,该数组对元素是 obj自身拥有的枚举或不可枚举属性名称字符串

4、Object.values()

语法:

Object.values(obj)  //一个包含对象自身的所有可枚举属性值的数组。、
//示例  随机键值的类数组对象
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

说明:Object.values()返回一个数组,其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

5、Object.entries()

语法:

Object.entries(obj)  //给定对象自身可枚举属性的键值对数组。
//示例
const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

说明:Object.entries()返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

参考:JavaScript如何遍历Object