javaScript遍历对象、数组、类数组总结

一、对象直接量的遍历

var o={
a:1,
b:2,
c:3,
d:5

}

Object.keys(o) :遍历自己的属性，原型上的和继承过来的都不遍历

Object.keys(o) //  ["a", "b", "c", "d"]---输出的是数组key值

delete o.a;//true
Object.keys(o) //  ["b", "c", "d"]

for  in  ---输出属性key值的数组 实现Object .keys()

var props=[];var i=0;
for (props[i++] in o);

props;// ["b", "c", "d"] ---输出的是数组key值

 for  ... in:遍历可遍历的属性，原型上和继承的都遍历

for  in  --输出属性的key值

for(var i in o){console.log(i)}  // b c d

for  in  --输出属性的value值

for(var i in o){console.log(o[i])}  // 2  3  5  

二、构造函数的遍历

function Person(name,age){

this.name=name;

this.age=age;

}

Person.prototype.cc=function(){return "cc";}

Person.prototype.rr="rrhello"

var person=new Person('jane',13);

Object.keys(person);//["name", "age"]---只遍历自己的属性，不遍历prototype和继承来的属性

for...in遍历属性key值---遍历自己的以及progtype以及继承的

for(var i in person){console.log(i)}// name  age  cc rr

for...in遍历属性key值

for(var i in person){console.log(person[i])}// jane  13     ƒ (){return "cc";}    rrhello

for...in遍历自己的属性

for (var key in person) { if (person.hasOwnProperty(key)) { console.log(key); } }//name  age

三、遍历数组

 

ECMAScript 6已经逐渐普及，经过二十多年的改进，很多功能也有了更成熟的语句，比如 for 循环

这篇博客将介绍一下从最初的 for 循环，到 ES6 的 for-of 等四种遍历方法

先定义一个数组：

const myArray = [1, 5, 9];
myArray.name = 'wise'

在控制台中打印这个数组，会看到这个数组的全貌：

 

1、 for

相信大部分开发工作者，最初遍历数组的方法都是使用 for 循环：

for ( let i = 0; i < myArray.length; i++ ) {
    console.log(myArray[i]);
}

缺点：作为初代循环语句，for 语句仅仅解决了遍历这一功能，但冗长的代码还是显得过于笨重

 

 

2、 for-in

相比 for 语句，for-in 就轻巧得多，但是 for-in 通常用来遍历对象，如果遍历数组的话...

for ( let key in myArray ) {
    console.log(key);
}

直接遍历的话，会打印数组的 index，而 index 是 string 类型

如果编程的时候不注意，很可能在无意中进行了字符串的计算： "1"+"1"="11"

 

所以使用 for-in 遍历数组的正确姿势应该是：

for ( let key in myArray) {
    console.log(myArray[key]);
}

和 for 循环不同，for-in 语句还将自定义属性 "name" 的值 "wise" 打印了出来

所以用 for-in 遍历数组这种事，还是别在开发的时候干了

 

3、 forEach

 

ES5 发布之后，js 新增了内建方法 forEach，这确实是一个遍历数组的好方法：

myArray.forEach(function (value) {
     console.log(value);
});

缺点：但是 forEach 的本质还是一个方法，并不是语句

所以它并不能响应 break 和 continue 语句

 

4、 for-of

仔细分析一下上面三种方法，如果仅限于遍历数组的话，似乎最初的 for 语句反而最合适

直到 ES6 横空出世，新的循环语句 for-of 开始崭露头角

for ( let key of myArray ) {
     console.log(key);
}

 

没错，for-of 就是最直接最清爽的遍历数组的办法

如果用一句话概括 for-in 与 for-of 的区别的话，那就是：

for-in 循环用来遍历对象属性，for-of 循环用来遍历数组

遍历数组的几种方法总结：

var a = [1, 2, 3];

// for循环

for(var i = 0; i < a.length; i++) { console.log(a[i]); }

// while循环

var i = 0; while (i < a.length) { console.log(a[i]); i++; } ---正向

var l = a.length; while (l--) { console.log(a[l]); }--逆向

//forEach ()

var colors = ['red', 'green', 'blue'];

colors.forEach(function (color) { console.log(color); });

//ES6 for...of

for ( let key of myArray ) {
     console.log(key);
}

6、 for-of 不仅如此

作为一个 ES6 新增的语句，for-of 和其他 ES6 语法的结合，才是它的强大之处

 

遍历 Set 类型：

const mySet = new Set('wwiissee');

for ( let value of mySet ) {
    console.log(value);
}

 

遍历 Map 类型：

const myMap = new Map([
  ['name', 'wise'],
  ['info', 'wrong'],
  ['home', 'cnblogs']
]);

for ( let [key, value] of myMap ) {
    console.log(key + ' is ' + value);
}

四、类似数组 对象（key为数字+length）

在JavaScript中，有些对象被称为“类似数组的对象”（array-like object）。意思是，它们看上去很像数组，可以使用length属性，但是它们并不是数组，所以无法使用一些数组的方法。

类似数组的对象只有一个特征，就是具有length属性。换句话说，只要有length属性，就可以认为这个对象类似于数组。但是，对象的length属性不是动态值，不会随着成员的变化而变化。

var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; //注意：这个length属性必需带上才是类似数组对象

obj[0] // 'a'

obj[2] // 'c'

obj.length // 3

obj[3]='d';

obj.length // 3   length属性不是动态值，不会随着成员的变化而变化

obj.push('d') // TypeError: obj.push is not a function

典型的类似数组（伪类数组）的对象:是函数的arguments对象，以及大多数DOM元素集，还有字符串。

// arguments对象

function args() { return arguments }

var arrayLike = args('a', 'b');

arrayLike[0] // 'a'

arrayLike.length // 2 --这个参数的个数长度，会随参数个数变化的

arrayLike instanceof Array // false

扩展：理解arguments

function f(){
   for(var i=0;i<arguments.length;i++){
       console.log(arguments[i])//打印出实参
    }

}
f(3,5,7,8,9)// 3 5  7  8  9

function g(x,y,z,k){
  var a=arguments.length;
   console.log(a);
 var b=arguments.callee.length;/arguments.callee/获取匿名函数，通过length获取形参个数
   console.log(b);
  if(a!=b){

   throw new Error("传递的参数不匹配")

    }else{

      return  x+y+z+k
    }
}
g(1,2,3,4)//4   4   10
VM904:3 4
VM904:5 4
10
g(1,2,3)// 3   4     Uncaught Error: 传递的参数不匹配
 

 

// DOM元素集

var elts = document.getElementsByTagName('h3');

elts.length // 3

elts instanceof Array // false

// 字符串

'abc'[1] // 'b'

'abc'.length // 3

'abc' instanceof Array // fals

 数组的slice方法将类似数组的对象，变成真正的数组。（类似数组对象--->  数组）

var arr = Array.prototype.slice.call(arrayLike);

var obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; 
var arr2 = Array.prototype.slice.call(obj);//["a", "b", "c"]
 

遍历类似数组的对象：for          forEach() 

// for循环

function logArgs() { for (var i = 0; i < arguments.length; i++) { console.log(i + '. ' + arguments[i]); } }
logArgs('a','b','c','d',1,3)  //   0. a   1. b   2. c    3. d    4. 1    5. 3

// forEach方法

function logArgs() { Array.prototype.forEach.call(arguments, function (elem, i) { console.log(i+'. '+elem); }); }

由于字符串也是类似数组的对象，所以也可以用Array.prototype.forEach.call遍历

Array.prototype.forEach.call('abc', function(chr) { console.log(chr); }); // a // b // c