屬性描述器(Property Descriptor)

enumerable

const grade = {
  John: 'Freshman',
  Kevin: 'Sophomore',
  Jay: 'Junior',
  Leo: 'Senior'
};

Object.defineProperty(grade, 'John', {
  enumerable: false//不可列舉
});

for(let key in grade){//遍歷(traversal)
  console.log(grade[key]);
}

value、writable

const grade = {
  John: 'Freshman',
  Kevin: 'Sophomore',
  Jay: 'Junior',
  Leo: 'Senior'
};

Object.defineProperty(grade, 'John', {
  value: {},
  writable: false
});

grade.John = 'First year';

console.log(grade);

const grade = {
  John: 'Freshman',
  Kevin: 'Sophomore',
  Jay: 'Junior',
  Leo: 'Senior'
};

Object.defineProperty(grade, 'John', {
  value: {},
  writable: false
});

grade.John.a = 'First year';//只能做到淺層保護

console.log(grade);

configurable

const grade = {
  John: 'Freshman',
  Kevin: 'Sophomore',
  Jay: 'Junior',
  Leo: 'Senior'
};

Object.defineProperty(grade, 'John', {
  configurable: false
});

delete grade.John;// configurable為false時，無法刪除屬性

console.log(grade);

Getter與Setter

getter是讀取屬性時的行為，setter是對屬性重新賦值的行為。

const color = {
  one: 'blue',
  two: 'green',
  three: 'red',
  set changeColor(c){
    console.log(`setter`);
    this.one = c;
  },
  get changeColor(){
    console.log(`getter`);
    return `${this.one} + ${this.two}`;
  }
};

color.changeColor = 'purple';

console.log(color, color.changeColor);

for in 與 for of

• 迭代物件屬性使用for...in，它會輸出key
• 迭代陣列使用for...of，它會輸出value
• Object.keys()取得所有屬性名稱，且它所回傳的是陣列

//for...in
const wallet = {
  John: 1000,
  Kevin: 500
};

for(let i in wallet){
  console.log(i);
}

//for...of
const books = ['JavaScript', 'Node.js'];

for(let i of books){
  console.log(i);
}

//for...of 搭配 Object.keys()
const wallet = {
  John: 1000,
  Kevin: 500
};

for(let i of Object.keys(wallet)){
  console.log(`${i}:${wallet[i]}`);
}

Object.values() 與 Object.entries()

• ES2017 (ES8)新增的語法
• Object.values()是直接取得所有屬性的值，並回傳陣列。
• Object.entries()是取得所有屬性名稱與值，並回傳陣列。

const wallet = {
  John: 1000,
  Kevin: 500
};

console.log(Object.values(wallet),Object.entries(wallet));

參考文獻:

JavaScript 核心篇 (opens new window)