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];
}
自己动手试一试 »
