1. 對象屬性簡寫

1.1 基本語法

// 傳統寫法
const name = 'John';
const age = 25;
const user = {name: name,age: age
};// ES6 簡寫語法
const user = {name,age
};

1.2 實際應用場景

// 1. 函數返回對象
function createUser(name, age, email) {return {name,age,email};
}// 2. React 組件狀態
function useState(initialState) {const state = initialState;const setState = (newState) => {// 更新邏輯};return { state, setState };
}// 3. 模塊導出
const actions = {increment,decrement,reset
};
export default actions;

2. 對象屬性表達式

2.1 基本語法

const prefix = 'user';
const id = 1;// 計算屬性名
const user = {[`${prefix}_${id}`]: 'John',[`${prefix}Email`]: 'john@example.com'
};console.log(user.user_1); // 'John'
console.log(user.userEmail); // 'john@example.com'

2.2 實際應用場景

// 1. 動態鍵名對象
function createStyles(theme) {return {[`button_${theme}`]: {backgroundColor: theme === 'dark' ? '#000' : '#fff',color: theme === 'dark' ? '#fff' : '#000'}};
}// 2. Redux action types
const actionTypes = {[`FETCH_USER_${status}`]: `FETCH_USER_${status}`,[`UPDATE_USER_${status}`]: `UPDATE_USER_${status}`
};// 3. 國際化鍵值對
const i18n = {[`greeting_${language}`]: '你好',[`farewell_${language}`]: '再見'
};

3. 擴展運算符 (…)

3.1 對象展開

// 基本用法
const base = { a: 1, b: 2 };
const extended = { ...base, c: 3 };
console.log(extended); // { a: 1, b: 2, c: 3 }// 對象合并
const defaults = { theme: 'light', language: 'en' };
const userPreferences = { theme: 'dark' };
const finalPreferences = { ...defaults, ...userPreferences };
console.log(finalPreferences); // { theme: 'dark', language: 'en' }

3.2 實際應用場景

// 1. React 組件屬性傳遞
function Button({ children, ...props }) {return (<button {...props}>{children}</button>);
}// 2. 配置合并
const baseConfig = {api: 'https://api.example.com',timeout: 5000
};const devConfig = {...baseConfig,api: 'http://localhost:3000'
};// 3. 狀態更新
setState(prevState => ({...prevState,loading: false,data: newData
}));

4. Object.assign()

4.1 基本用法

// 對象合并
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };const result = Object.assign(target, source1, source2);
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 } - 目標對象被修改

4.2 實際應用場景

// 1. 創建對象的淺拷貝
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);// 2. 合并默認配置
function createConfig(options) {const defaults = {debug: false,timeout: 5000,retries: 3};return Object.assign({}, defaults, options);
}// 3. 不可變狀態更新
const state = { user: { name: 'John' }, theme: 'light' };
const newState = Object.assign({}, state, { theme: 'dark' });

5. Object.is()

5.1 基本用法

// 比較值
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, '5')); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0)); // false// 與 === 的區別
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // trueconsole.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

5.2 實際應用場景

// 1. 精確的值比較
function areSameValues(x, y) {return Object.is(x, y);
}// 2. NaN 檢測
function isReallyNaN(x) {return Object.is(x, NaN);
}// 3. React 中的值比較
function shouldComponentUpdate(nextProps) {return !Object.is(this.props.value, nextProps.value);
}

6. 最佳實踐

6.1 選擇合適的方法

// 1. 簡單對象合并：使用擴展運算符
const merged = { ...obj1, ...obj2 };// 2. 需要深拷貝：使用其他方法
const deepCopy = JSON.parse(JSON.stringify(obj));// 3. 精確值比較：使用 Object.is()
if (Object.is(value1, value2)) {// 相等處理
}

6.2 性能考慮

// 1. 避免過深的對象展開
const obj = {...baseObj,...middlewareObj,...finalObj
};// 2. 使用 Object.assign 處理多個源對象
const result = Object.assign({}, baseConfig,environmentConfig,userConfig
);