//1、for in 循环
/=====================================/
//=>语法: for (variable in object) {...}
//for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。
//=> variable (变量):每次迭代时,将不同的属性名分配给变量
//=> object (对象) :被迭代枚举其属性的对象
var obj = {a:'A',b:'B',1:'c',2:'d',};
//obj对象有两个属性是数字,分别为1和2,值分别为'c'和'd'
for (var key in obj){
//key存储的值为字符串类型的
// console.log(typeof key); //=> string
console.log(obj[key]); // = > c d A B
}
// 结果为 =>c d A B , 在 for in 循环遍历的时候,把对象的数字属性名排在前面
//并且排列的时候按照数字由小到大排列,非数字的属性名按照之前编写的顺序排列
//循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性
//for...in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性,例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性
var oobj = {a: 1, b: 2, c: 3};
function Fn() {
this.color = 'red';
}
Fn.prototype = oobj; //Fn的原型指向oobj这个对象
var obj2 = new Fn(); //new一个Fn这个构造函数的实例
console.log(obj2.a); //obj2.a是obj2对象原型上的属性 = > 1
//obj.propertyIsEnumerable(prop) 方法返回一个布尔值,表示指定的属性是否可枚举。
console.log(obj2.propertyIsEnumerable('a')); // => false 不可枚举,但是仍然可以遍历到
console.log(obj2.propertyIsEnumerable('color')); // = > true 可枚举
console.log(obj2.hasOwnProperty('color')); // => true
for (var prop in obj2) {
console.log('obj2.' + prop + '=' + obj2[prop]); // => obj2.color=red obj2.a=1 obj2.b=2 obj2.c=3
//obj.hasOwnProperty(prop) 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性
//可以通过这个方法可以做条件判断,属性是私有的还是公有的,输出私有的属性
if (obj2.hasOwnProperty(prop)) {
console.log('obj2.' + prop + '=' + obj2[prop]); // obj2.color=red
}
}
// for...in不应该用于迭代一个 Array,其中索引顺序很重要
//数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。不能保证for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。
//因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环(或者使用 Array.prototype.forEach() 或 for...of 循环)。
/=====================================/
//2、for of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句
//语法: for (variable of object) {...} 相当于 for (let 值 of 数组 ) {...}
//variable表示值,object是一个定义了迭代行为的对象,如:数组
//遍历数组Array
let arr = [1, 2, 3];
for (let value of arr) {
value += 1;
console.log(value); // => 2 3 4
}
//遍历String
let iterable = "abcd";
for (let value of iterable) {
console.log(value); // => a b c d
}
//遍历类数组对象arguments
(function() {
for (let argument of arguments) {
console.log(argument); // 1 2 3
}
})(1, 2, 3);
// 对于for...of的循环,可以由break, throw 或return终止
function* foo(){
yield 1;
yield 2;
yield 3;
};
for (let o of foo()) {
console.log(o);
break; // closes iterator, triggers return
}
/=====================================/
//** 【 for...in 和 for...of 的区别】 **
//无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
//for...in 语句以原始插入顺序迭代对象的可枚举属性。
//for...of 语句遍历可迭代对象定义要迭代的数据。
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let arryNum = [3, 5, 7];
arryNum.foo = 'hello';
for (let i in arryNum) {
console.log(i); // => 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i in arryNum) {
if (arryNum.hasOwnProperty(i)) {
console.log(i); // => 0, 1, 2, "foo"
}
}
for (let i of arryNum) {
console.log(i); // => 3, 5, 7
}
//3、Array.prototype.forEach() 对数组的每个元素执行一次提供的函数,相当于遍历数组中的每一项,对每一项执行一次函数
//语法:
/* array.forEach(callback(currentValue, index, array){
* //do something
* }, this)
*
* array.forEach(callback[, thisArg])
* /
//回调函数callback 为数组中每个元素执行的函数,该函数接收三个参数
//currentValue -> 数组中正在处理的当前元素。
//index可选 -> 数组中正在处理的当前元素的索引
//array可选 ->forEach()方法正在操作的数组。
//thisArg可选 ->可选参数。当执行回调 函数时用作this的值(参考对象)。
// forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。
// callback 函数会被依次传入三个参数:数组当前项的值、数组当前项的索引、数组对象本身
参考资料:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach