10th week (1)

//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




猜你喜欢

转载自www.cnblogs.com/xcee/p/9934439.html