10th Week Blog 1 For each....in......

1、for...in 

以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。

语法：

1	for (variable in object) {...}

参数：

variable

在每次迭代时,将不同的属性名分配给变量。

object

被迭代其枚举属性的对象。

 

for..in 不应该被用来迭代一个下标顺序很重要的 Array .

数组索引仅是可枚举的整数名，其他方面和别的普通对象属性没有什么区别。for...in 并不能够保证返回的是按一定顺序的索引，但是它会返回所有可枚举属性，包括非整数名称的和继承的。

因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。

仅迭代自身的属性

如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行  hasOwnProperty() 来确定某属性是否是对象本身的属性 (也能使用propertyIsEnumerable)。另外，如果你知道外部不存在任何的干扰代码，你可以扩展内置原型与检查方法。

例子

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

var triangle = {a:1, b:2, c:3};

function ColoredTriangle() {
  this.color = "red";
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if( obj.hasOwnProperty( prop ) ) {
    console.log("o." + prop + " = " + obj[prop]);
  } 
}

// Output:
// "o.color = red"

摘自https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in#Description

2、for each...in

使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行.

for each...in 是 ECMA-357 (E4X) 标准的一部分, 大部分非Mozilla浏览器都没有实现该标准, E4X并不是 ECMAScript 标准的一部分.

作为ECMA-357(E4X)标准的一部分,for each...in语句已被废弃,E4X中的大部分特性已被删除,但考虑到向后兼容,for each...in只会被禁用而不会被删除,可以使用ES6中新的for...of语句来代替.

语法：

for each (variable in object) {
  statement
}

参数：

variable

用来遍历属性值的变量,前面的var关键字是可选的.该变量是函数的局部变量而不是语句块的局部变量.

object

该对象的属性值会被遍历.

statement

遍历属性值时执行的语句. 如果想要执行多条语句, 请用({ ... }) 将多条语句括住.

 

一些对象的内置属性是无法被遍历到的,包括所有的内置方法,例如String对象的indexOf方法.不过,大部分的用户自定义属性都是可遍历的.

警告:永远不要使用for each...in语句遍历数组,仅用来遍历常规对象。

例子

var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};

for each (var item in obj) {
  sum += item;
}

print(sum); // 输出"26",也就是5+13+8的值

摘自https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for_each...in

3、for循环

用于创建一个循环,它包含了三个可选的表达式,三个可选的表达式包围在圆括号中并由分号分隔,后面跟随一个语句或一组语句在循环中执行.

语法：

for ([initialization]; [condition]; [final-expression])
   statement

参数：

initialization一个表达式 (包含赋值语句) 或者变量声明。典型地被用于初始化一个计数器。该表达式可以使用var关键字声明新的变量。初始化中的变量不是该循环的局部变量，而是与该循环处在同样的作用域中。该表达式的结果无意义。

condition一个条件表达式被用于确定每一次循环是否能被执行。如果该表达式的结果为true， 循环体内的语句将被执行。 这个表达式是可选的。如果被忽略，那么就被认为永远为true。如果计算结果为false，那么执行流程将被跳到for语句结构后面的第一条语句。

final-expression每次循环的最后都要执行的表达式。执行时机是在下一次condition的计算之前。通常被用于更新或者递增计数器变量。

statement只要condition的结果为true就会被执行的语句。 要在循环体内执行多条语句，使用一个 block 结构 ({ ... }) 来包含要执行的语句。没有任何语句要执行，使用一个 empty 语句 (;)。

一般使用

以下例子声明了变量i并被初始赋值为0，for语句检查i的值是否小于9，如果小于9，则执行语句块内的语句，并且最后将i的值递增。

for (var i = 0; i < 9; i++) {
   console.log(i);
   // more statements
}

忽略表达式

for语句的所有的表达式都是可选的

举个例子，初始化语句（initialization）中的表达式没有被指定：

var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}

就像initialization，condition也是可选的。如果你忽略了，为了不要创建了死循环（无限循环），你必须确保循环体内存在可以退出循环的语句，使用break。

for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
   // more statements
}

你当然可以忽略所有的表达式。同样的，确保使用了 break 语句来退出循环并且你还需要修改（递增）一个变量，以确保能够正常执行break语句。

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

使用空语句的例子

以下为在[final-expression]部分中循环计算一个节点的偏移位置,它不需要执行一个语句或者一组语句,因此使用了空语句。

function showOffsetPos (sId) {
  var nLeft = 0, nTop = 0;

  for (var oItNode = document.getElementById(sId); // initialization
       oItNode; // condition
       nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent) // final-expression
       /* empty statement */ ;
  
  console.log("Offset position of \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
}

// Example call:

showOffsetPos("content");

// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"

摘自https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for