for…in和for…of都是用来遍历属性的
for…in循环:只能获得对象的键名,不能获得键值
for…of循环:允许遍历获得键值 (es6的新方法)
// 1.遍历对象的区别
function Foo() {
this.name = '努力';
this.age = 18
}
Foo.prototype.getName = function () {
return this.name
}
var foo = new Foo();
for(var inkey in foo) {
if(foo.hasOwnProperty(inkey)){
console.log(inkey)
}
}
// for...of用来遍历具有interator接口的数据结构
// 在此处使用会报错
for(var ofKey of foo){
console.log(ofKey);
}
// 2.遍历数组
// for...in遍历数组输出的是数组的索引值,而并不是数组本身
var arr = ['one','two','three']
for(var arrInKey in arr){
console.log(arrInKey);
}
// for...of会输出数组每一个值
for(var arrOfKey of arr){
console.log(arrOfKey);
}
// 3.forEach 不能使用break continue关键字
// for in和for of是可以使用的
var arr = ['one','two','three'];
for(var arryofKey of arr){
console.log(arryofKey)
if(arryofKey === 'two'){
break;
}
}
// 4.for of遍历对象,可以使用Object.keys方法去获取所有属性遍历
var foo = new Foo();
function Foo() {
this.name = '努力';
this.age = 18
}
for(var objKey of Object.keys(foo)) {
console.log(objKey)
}
// 5.arguments
function foo2(){
for(var argKey of arguments){
console.log(argKey)
}
}
foo2(1,2,3,4)
// 6.不能遍历到symbol属性
var as = Symbol('a')
var bs = Symbol('b')
var obj = {
[as]:'as',
[bs]:'bs',
name:'king',
age:30
};
for (var objInkey in obj){
console.log(objInkey);
}
// 使用Object.getOwnPropertySymbols()可以遍历symbol属性
var symbolKeys = Object.getOwnPropertySymbols(obj)
// for in 获取的是索引
for( var key2 in symbolKeys){
console.log(key2)
}
// for of可以获取到值
for( var key2 of symbolKeys){
console.log(key2)
}
总结:
for in 主要遍历对象
for of遍历具有interator接口的数据结构
关于遍历器
遍历器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。
任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
Iterator的作用有三个:
一是为各种数据结构,提供一个统一的、简便的访问接口;
二是使得数据结构的成员能够按某种次序排列;
三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of使用。
补充:
在ES6中,有些数据结构原生具备Iterator接口(比如数组),即不用任何处理,就可以被for...of循环遍历,
有些就不行(比如对象)。原因在于,这些数据结构原生部署了Symbol.iterator属性,另外一些数据结构没有。凡是部署了Symbol.iterator属性的数据结构,就称为部署了遍历器接口。调用这个接口,就会返回一个遍历器对象。
在ES6中,有三类数据结构原生具备Iterator接口:数组、某些类似数组的对象、Set和Map结构。
for...of循环可以使用的范围包括数组、Set和Map结构,某些类似数组的对象。