屬性的簡潔表示法

ES6 允許在大括弧裡面直接寫入變數和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。
const foo = 'bar';
const baz = {
    foo
};
console.log(baz); // { foo: 'bar' }

function f(name, age) {
  return {
      name,
      age
  };
}

// 等同於
// function f(name, age) {
//     return {
//         name: name,
//         age: age
//     };
// }

console.log('信息', f('李四', 23));
// 輸出的信息是 {age: 23 name: "李四"}

let birth = '2022-3-27';
const Person = {
    name: '張三',
    //等同於birth: birth
    birth,
    // 等同於hello: function (){}
    hello() {
        console.log('我的名字叫:', this.name);
    }
};
// Person.hello(); // 我的名字叫:張三

//沒有返回值時，預設返回 undefined。下麵這一條語句會被執行兩次
console.log('信息', Person.hello());
// 第1次的值： 我的名字叫:張三
// 第2次的值： undefined

註意，簡寫的對象方法不能用作構造函數，會報錯。
let Person = {
  name: '張三',
  hello: function() {
    console.log('你好呀')
  },
  like() {
    console.log('簡寫的對象方法不能用作構造函數==>error會報錯')
  }
};
new Person.hello() // 不會報錯
new Person.like(); //會報錯

ES6對象屬性遍歷的5種方式

ES6 一共有 5 種方法可以遍歷對象的屬性。
1==>for...in
for...in迴圈遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

const obj = { h: 180,w: 125}
for (let keysName in obj) {
  console.log(keysName);
  // h w 輸出的是key值哈
}


2==>Object.keys(obj)
Object.keys返回一個數組，
包括對象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名。
const obj = {
    height: 180,
    weight: 125,
}
console.log(Object.keys(obj)) //['height', 'weight']


3==>Object.getOwnPropertyNames(obj) 【瞭解即可】
Object.getOwnPropertyNames返回一個數組，
包含對象自身【所有的屬性】。[其自身的可枚舉和不可枚舉屬性的名稱被返回]
【不含 Symbol 屬性】的鍵名。
let obj = {};
let a = Symbol("a");
let b = Symbol.for("b");
obj[a] = "localSymbol";
obj[b] = "globalSymbol";
let objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2
console.log(objectSymbols) // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0]) // Symbol(a)

4==>Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一個數組，包含對象自身的所有 Symbol 屬性的鍵名。


5==>Reflect.ownKeys(obj)
Reflect.ownKeys返回一個數組，包含對象自身的（不含繼承的）所有鍵名。
不管鍵名是 Symbol 或字元串，也不管是否可枚舉。
const obj = {
  height: 180,
  weight: 125,
}
console.log(Reflect.ownKeys(obj))
//['height', 'weight']

以上的 5 種方法遍歷對象的鍵名，都遵守同樣的屬性遍歷的次序規則。

JavaScript中的可枚舉屬性與不可枚舉屬性

在JavaScript中，對象的屬性分為可枚舉和不可枚舉之分，
它們是由屬性的 enumerable 值決定的。
可枚舉性決定了這個屬性能否被for…in查找遍歷到。

屬性的枚舉性會影響以下三個函數的結果：
for…in
Object.keys()
JSON.stringify

Object.is()

ES5 比較兩個值是否相等，只有兩個運算符。
相等運算符（==）和嚴格相等運算符（===）。
它們都有缺點，前者會自動轉換數據類型。
後者的NaN不等於自身，以及+0等於-0。
JavaScript 缺乏一種運算，只要兩個值是一樣的，它們就應該相等。
於是，ES6提出來了一種同值相等的演算法，來解決這個問題。
console.log('==>', Object.is('bar', 'bar'))
// true
console.log(Object.is({}, {}))
// false

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign對象合併

Object.assign()方法用於對象的合併。
將源對象（source）的所有可枚舉屬性，複製到目標對象（target。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 ,b:22};
Object.assign(target, source1, source2);
target // {a:1, b:22, c:3}

Object.assign需要註意的點

需要註意的點:Object.assign()方法的第一個參數是目標對象，後面的參數都是源對象。
由於undefined和null無法轉成對象，所以如果它們作為參數，就會報錯。
Object.assign(undefined) // 報錯
Object.assign(null) // 報錯

如果非對象參數出現在源對象的位置即非首參數，
那麼處理規則有所不同。
首先，這些參數都會轉成對象，如果無法轉成對象，就會跳過。
這意味著，如果undefined和null不在首參數，就不會報錯。
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

特別註意：其他類型的值（即數值、布爾值）不在首參數，也不會報錯。
但是，除了字元串會以數組形式，拷貝入目標對象。

-- 字元串會以數組形式拷貝入目標對象
const str1 = 'abc';
const obj = Object.assign({}, str1);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
為什麼字元串會以數組形式拷貝進入目標對象呢？
這是因為:只有字元串的包裝對象，會產生可枚舉屬性。

-- 數字不會拷入目標對象
const str2 = 123;
const obj = Object.assign({}, str2);
console.log(obj); // {}

-- 最後補充一點：
Object.assign()拷貝的屬性是有限制的，
只拷貝源對象的自身屬性（不拷貝繼承屬性），
也不拷貝不可枚舉的屬性（enumerable: false）。
Object.assign()方法實行的是淺拷貝，而不是深拷貝。

遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關註博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！