首页 > web前端 > js教程 > 正文

了解 JavaScript 中的关键对象方法

Mary-Kate Olsen
发布: 2024-10-18 12:53:04
原创
582 人浏览过

Understanding Key Object Methods in JavaScript

JavaScript の Object には、開発者がオブジェクトを簡単に操作できるようにする便利なメソッドが多数組み込まれています。簡単な説明と例を示しながら、最も重要なもののいくつかを見ていきましょう

  1. Object.create()
  2. Object.assign()
  3. Object.keys()
  4. Object.values()
  5. Object.entries()
  6. Object.freeze()
  7. Object.seal()
  8. Object.preventExtensions()
  9. Object.getPrototypeOf()
  10. Object.setPrototypeOf()
  11. Object.defineProperty()
  12. Object.defineProperties()
  13. Object.getOwnPropertyDescriptor()
  14. Object.getOwnPropertyDescriptors()
  15. Object.getOwnPropertyNames()
  16. Object.is()
  17. Object.isFrozen()
  18. Object.isSealed()
  19. Object.isExtensible()
  20. Object.fromEntries()
  21. Object.hasOwnProperty()
  22. Object.hasOwn()
  23. Object.groupBy() (提案された機能、完全には利用できない可能性があります)

Object.create()
Object.create() は、指定されたプロトタイプ オブジェクトとオプションのプロパティを持つ新しいオブジェクトを作成するために使用される JavaScript のメソッドです。これにより、オブジェクト リテラルやコンストラクターを使用する場合と比較して、オブジェクトのプロトタイプとプロパティをより詳細に制御できます。

const personPrototype = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const john = Object.create(personPrototype);
john.name = "John";
john.greet();  // Output: Hello, my name is John
登录后复制

Object.assign()
Object.assign() は、列挙可能なすべての独自プロパティの値を 1 つ以上のソース オブジェクトからターゲット オブジェクトにコピーするために使用される組み込み JavaScript メソッドです。浅いコピーを実行し、変更されたターゲット オブジェクトを返します。

const target = { a: 1 };
const source = { b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result);  // Output: { a: 1, b: 2, c: 3 }
console.log(target);  // Output: { a: 1, b: 2, c: 3 } (target is also modified)
登录后复制

Object.keys()
オブジェクト自身の列挙可能なプロパティ名 (キー) の配列を返します

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj));  // Output: ['a', 'b', 'c']
登录后复制

Object.values()
オブジェクト自身の列挙可能なプロパティ値の配列を返します

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj));  // Output: [1, 2, 3]
登录后复制

Object.entries()
オブジェクト自身の列挙可能なプロパティ [キー、値] ペアの配列を返します

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj));  // Output: [['a', 1], ['b', 2], ['c', 3]]
登录后复制

Object.freeze()
オブジェクトをフリーズし、新しいプロパティの追加や既存のプロパティの変更や削除を防ぎます

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2;  // No effect, because the object is frozen
console.log(obj.a);  // Output: 1
登录后复制

Object.seal()
オブジェクトをシールして、新しいプロパティの追加を防ぎますが、既存のプロパティの変更は許可します。

const obj = { a: 1 };
Object.seal(obj);
obj.a = 2;  // Allowed
delete obj.a;  // Not allowed
console.log(obj.a);  // Output: 2
登录后复制

Object.preventExtensions()
新しいプロパティがオブジェクトに追加されるのを防ぎますが、既存のプロパティの変更と削除は許可します

const obj = { a: 1 };
Object.preventExtensions(obj);
obj.b = 2;  // Not allowed
console.log(obj.b);  // Output: undefined
登录后复制

Object.getPrototypeOf()
指定されたオブジェクトのプロトタイプ (つまり、内部 [[Prototype]]) を返します

const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto);  // Output: {} (the default Object prototype)
登录后复制

Object.setPrototypeOf()
指定されたオブジェクトのプロトタイプを設定します。

const proto = { greet() { console.log('Hello!'); } };
const obj = {};
Object.setPrototypeOf(obj, proto);
obj.greet();  // Output: 'Hello!'
登录后复制

Object.defineProperty()
プロパティ記述子の追加オプション (書き込み可能、​​構成可能など) を使用して、オブジェクトの新しいプロパティを定義するか、既存のプロパティを変更します。

const obj = {};
Object.defineProperty(obj, 'a', {
  value: 42,
  writable: false,  // Cannot modify the value
});
obj.a = 100;  // No effect because writable is false
console.log(obj.a);  // Output: 42
登录后复制

Object.defineProperties()
プロパティ記述子を使用してオブジェクトに複数のプロパティを定義します。

const obj = {};
Object.defineProperties(obj, {
  a: { value: 42, writable: false },
  b: { value: 100, writable: true }
});
console.log(obj.a);  // Output: 42
console.log(obj.b);  // Output: 100
登录后复制

Object.getOwnPropertyDescriptor()
オブジェクトのプロパティの記述子を返します。

const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(descriptor);  
// Output: { value: 1, writable: true, enumerable: true, configurable: true }
登录后复制

Object.getOwnPropertyDescriptors()
オブジェクト自身のプロパティのすべてのプロパティ記述子を含むオブジェクトを返します

const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// Output: { a: { value: 1, writable: true, enumerable: true, configurable: true } }
登录后复制

Object.getOwnPropertyNames()
オブジェクト上で直接見つかったすべてのプロパティ (列挙不可能なものも含む) の配列を返します。

const obj = { a: 1 };
Object.defineProperty(obj, 'b', { value: 2, enumerable: false });
console.log(Object.getOwnPropertyNames(obj));  // Output: ['a', 'b']
登录后复制

Object.is()
2 つの値が同じかどうかを比較します (=== などですが、NaN などの特殊なケースを処理します)

console.log(Object.is(NaN, NaN));  // Output: true
console.log(Object.is(+0, -0));    // Output: false
登录后复制

Object.isFrozen()
オブジェクトがフリーズしているかどうかを確認します

const obj = Object.freeze({ a: 1 });
console.log(Object.isFrozen(obj));  // Output: true
登录后复制

Object.isSealed()
オブジェクトが封印されているかどうかを確認します。

const obj = Object.seal({ a: 1 });
console.log(Object.isSealed(obj));  // Output: true
登录后复制

Object.isExtensible()
新しいプロパティをオブジェクトに追加できるかどうかを確認します。

const obj = { a: 1 };
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj));  // Output: false
登录后复制

Object.fromEntries()
キーと値のペアの配列をオブジェクトに変換します

const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries);
console.log(obj);  // Output: { a: 1, b: 2 }
登录后复制

Object.hasOwnProperty()
オブジェクトが指定されたプロパティを独自の (継承されていない) ものとして持っているかどうかを確認します

const obj = { a: 1 };
console.log(obj.hasOwnProperty('a'));  // Output: true
登录后复制

Object.hasOwn()
Object.hasOwn() は、Object.hasOwnProperty() の代替として ES2022 で導入された新しいメソッドです。プロトタイプ チェーンを検索せずに、オブジェクトに指定されたキーを持つ直接 (独自の) プロパティがあるかどうかをチェックします。

const obj = {
  name: 'Alice',
  age: 25
};

console.log(Object.hasOwn(obj, 'name'));  // true
console.log(Object.hasOwn(obj, 'gender'));  // false
登录后复制

Object.groupBy
Object.groupBy is a relatively new feature proposed for JavaScript in ECMAScript 2024 that allows you to group objects based on a common criterion. It is not yet widely available across all environments, so it may not work in many browsers or JavaScript engines until fully implemented.

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 25 },
  { name: 'David', age: 30 },
];

// Group objects by age
const groupedByAge = Object.groupBy(array, item => item.age);

console.log(groupedByAge);

/*
Expected Output:
{
  25: [
    { name: 'Alice', age: 25 },
    { name: 'Charlie', age: 25 }
  ],
  30: [
    { name: 'Bob', age: 30 },
    { name: 'David', age: 30 }
  ]
}
*/

登录后复制

以上是了解 JavaScript 中的关键对象方法的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板