关于coffee的for循环问题

arr = {
  name: 'Tom',
  age: 18,
  sex: 'man',
  width: 55
}
temp = []

for (index in arr) {
  val = arr[index]
  console.log(`=======${index}:start=========`)
  console.log('index:' + index)
  console.log(`=======${index}:end=========`)
  temp.push(val)
}

console.log(temp)

会输出

=======name:start=========
index:name
=======name:end=========
=======age:start=========
index:age
=======age:end=========
=======sex:start=========
index:sex
=======sex:end=========
=======width:start=========
index:width
=======width:end=========
[ 'Tom', 18, 'man', 55 ]

然后是coffee的代码

arr =
  name: 'Tom'
  age: 18
  sex: 'man'
  width: 55

temp = []

for index in arr
  val = arr[index]
  console.log("=======#{index}:start=========")
  console.log('index:' + index)
  console.log("=======#{index}:end=========== \n")
  temp.push(val)

console.log(temp)

结果是

[]

看一下转换成js后的样子

(function() {
  var arr, i, index, len, temp, val;

  arr = {
    name: 'Tom',
    age: 18,
    sex: 'man',
    width: 55
  };

  temp = [];

  for (i = 0, len = arr.length; i < len; i++) {
    index = arr[i];
    val = arr[index];
    console.log(`=======${index}:start=========`);
    console.log('index:' + index);
    console.log(`=======${index}:end=========== \n`);
    temp.push(val);
  }

  console.log(temp);

}).call(this);

所以这里应该用“for of”

arr =
  name: 'Tom'
  age: 18
  sex: 'man'
  width: 55

temp = []

for index of arr
  val = arr[index]
  console.log("=======#{index}:start=========")
  console.log('index:' + index)
  console.log("=======#{index}:end=========== \n")
  temp.push(val)

console.log(temp)

转换后

(function() {
  var arr, index, temp, val;

  arr = {
    name: 'Tom',
    age: 18,
    sex: 'man',
    width: 55
  };

  temp = [];

  for (index in arr) {
    val = arr[index];
    console.log(`=======${index}:start=========`);
    console.log('index:' + index);
    console.log(`=======${index}:end=========== \n`);
    temp.push(val);
  }

  console.log(temp);

}).call(this);

最后看输出

=======name:start=========
index:name
=======name:end===========

=======age:start=========
index:age
=======age:end===========

=======sex:start=========
index:sex
=======sex:end===========

=======width:start=========
index:width
=======width:end===========

[ 'Tom', 18, 'man', 55 ]

在js中

1. 推荐在循环对象属性的时候，使用for…in,在遍历数组的时候的时候使用for…of
2. for…in循环出的是key，for…of循环出的是value
3. 注意，for…of是ES6新引入的特性。修复了ES5引入的for…in的不足
4. for…of不能循环普通的对象，需要通过和Object.keys()搭配使用

作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for…of循环不会循环对象的key，只会循环出数组的value，因此for…of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for…in

如果实在想用for…of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组
然后遍历：

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
}

for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}