JavaScript 物件方法
通用方法
// 將屬性從源物件複製到目標物件
Object.assign(target, source)
// 從現有物件建立物件
Object.create(object)
// 返回物件的鍵/值對陣列
Object.entries(object)
// 從鍵/值列表建立物件
Object.fromEntries()
// 返回物件鍵的陣列
Object.keys(object)
// 返回物件屬性值的陣列
Object.values(object)
// 根據函式對物件元素進行分組
Object.groupBy(object, callback)
JavaScript Object.assign()
Object.assign() 方法將屬性從一個或多個源物件複製到目標物件。
示例
// 建立目標物件
const person1 = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// 建立源物件
const person2 = {firstName: "Anne",lastName: "Smith"};
// 將源分配給目標
Object.assign(person1, person2);
自己動手試一試 »
JavaScript Object.entries()
ECMAScript 2017 為物件添加了 Object.entries() 方法。
Object.entries() 返回一個物件中鍵/值對的陣列。
示例
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.entries(person);
自己動手試一試 »
Object.entries() 使在迴圈中使用物件變得容易。
示例
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
}
自己動手試一試 »
Object.entries() 也使將物件轉換為 Map 變得容易。
示例
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));
自己動手試一試 »
Object.entries() 自 2017 年 3 月起在所有現代瀏覽器中受支援
JavaScript Object.fromEntries()
fromEntries() 方法從鍵/值對列表中建立物件。
示例
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];
const myObj = Object.fromEntries(fruits);
自己動手試一試 »
JavaScript Object.values()
Object.values() 類似於 Object.entries()，但返回一個物件值的單維陣列。
示例
const person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
let text = Object.values(person);
自己動手試一試 »
Object.values() 自 2017 年 3 月以來在所有現代瀏覽器中都得到支援
JavaScript Object.groupBy()
ES2024 向 JavaScript 添加了 Object.groupBy() 方法。
The Object.groupBy() 方法根據回撥函式返回的字串值對物件的元素進行分組。
The Object.groupBy() 方法不會更改原始物件。
示例
// 建立一個數組
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// Callback function to Group Elements
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Group by Quantity
const result = Object.groupBy(fruits, myCallback);
自己動手試一試 »
瀏覽器支援
Object.groupby() 是一個 ES2024 功能。
自 2024 年 3 月起，新瀏覽器均支援此功能。
| Chrome 117 | Edge 117 | Firefox 119 | Safari 17.4 | Opera 103 |
| 2023 年 9 月 | 2023 年 9 月 | 2023 年 10 月 | 2024 年 10 月 | 2023 年 5 月 |
警告
ES2024 功能相對較新。
舊版瀏覽器可能需要替代程式碼（Polyfill）。
Object.groupBy() vs Map.groupBy()
Object.groupBy() 和 Map.groupBy() 之間的區別是
Object.groupBy() 將元素分組到 JavaScript 物件中。
Map.groupBy() 將元素分組到 Map 物件中。
JavaScript Object.keys()
Object.keys() 方法返回一個包含物件鍵的陣列。
示例
// 建立一個物件
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// 獲取鍵
const keys = Object.keys(person);
自己動手試一試 »
JavaScript for...in 迴圈
JavaScript for...in 語句迴圈遍歷物件的屬性。
語法
for (let variable in object) {
// 要執行的程式碼
}
for...in 迴圈內的程式碼塊將為每個屬性執行一次。
迴圈遍歷物件的屬性
示例
const person = {
fname:" John",
lname:" Doe",
age: 25
};
for (let x in person) {
txt += person[x];
}
自己動手試一試 »
