Object.{keys,values}方法隨筆

for…in 語句

for…in 可以任意順序的遍歷一個 Object (對象)裏面自有的、原型鏈上面的、可枚舉的、非 Symblo 的屬性。
對於每一個屬性，都會被執行。

*注 可循環枚舉原型鏈上的屬性。

可枚舉屬性: 能被 for…in 語句迭代出來的就屬性
不可枚舉屬性: 原型鏈上的屬性原則上都屬於不可枚舉屬性，不能被 for…in 語句迭代出來，但是每一個屬性都會被執行

Object.keys()

Object.keys() 方法會返回一個字符串數組，如果鍵-值都不可枚舉，則返回鍵組成的數組。

Object.keys() 會返回一個所有元素都是字符串的數組，該數組的元素都屬於給定對象的可枚舉屬性，其遍歷順序和 for…in
遍歷的順序一致。

const NUMS = [1, 2, 3];
console.log(Object.keys(NUMS))              // ['0', '1', '2']

const Person = {
  name: 'Mary',
  job: 'IT',
  age: '20',
  sex: '男'
}

const KEYS = Object.keys(Person);
console.log(KEYS);                          // ["name", "job", "age", "sex"]

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  } 
});
myObj.foo = 1;
console.log(Object.keys(myObj));            // ['foo']

Object.values()

Object.values() 返回一個數組。

Object.values() 返回一個數組，其元素是給定對象可枚舉屬性的值，其遍歷順序和 for…in
遍歷的順序一致。

const Person = {
  name: 'Mary',
  job: 'IT',
  age: '20',
  sex: '男'
}

const VALUES = Object.values(Person);
console.log(VALUES);                      //  ["Mary", "IT", "20", "男"]

// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj));       // ['bar']

// non-object argument will be coerced to an object
console.log(Object.values('foo'));        // ['f', 'o', 'o']

所以當需要遍歷一個 Object 的屬性時，請儘量避免 for…in 語句的使用，我們可以使用 Object.keys() 方法。
或者 propertyIsEnumerable() 方法判斷該屬性是否是可枚舉屬性， hasOwnProperty() 方法判斷可枚舉屬性裏面是否
包含該屬性。