1. 属性の略称
オブジェクトリテラルの属性名が変数名と同じ場合、属性名を省略して変数名をそのまま属性名として使用できます。
const x = 10;
const y = 20;
// ES6之前
const obj1 = {
x: x, y: y };
// ES6属性简写
const obj2 = {
x, y };
注: 短縮されたオブジェクト メソッドはコンストラクターとして使用できません。使用しない場合はエラーが報告されます。
2. 手法の略称
オブジェクト リテラルでメソッドを定義する場合は、コロンと関数キーワードを省略できます。
// ES6之前
const obj1 = {
method: function() {
// 方法内容
}
};
// ES6方法简写
const obj2 = {
method() {
// 方法内容
}
};
3. 計算された属性名
オブジェクト リテラルでは、計算式を使用してプロパティ名を定義できます。
const prefix = "foo";
const obj = {
[prefix + "Bar"]: 42
};
console.log(obj.fooBar); // 输出 42
4. オブジェクトの分割と代入
プロパティはオブジェクトから抽出して変数に割り当てることができます。
const obj = {
x: 10, y: 20 };
const {
x, y } = obj;
console.log(x, y); // 输出 10 20
5. Object.assign メソッド
1 つ以上のソース オブジェクトのプロパティをターゲット オブジェクトにコピーするために使用されます。
const target = {
a: 1 };
const source = {
b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result); // 输出 { a: 1, b: 2, c: 3 }
6、Object.keys、Object.values および Object.entries
これらの静的メソッドは、オブジェクトのキー、値、およびキーと値のペアの配列を取得するために使用されます。
const obj = {
a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // 输出 ["a", "b", "c"]
console.log(Object.values(obj)); // 输出 [1, 2, 3]
console.log(Object.entries(obj)); // 输出 [["a", 1], ["b", 2], ["c", 3]]
ES6 のプロパティの横断
ES6 には、オブジェクトのプロパティをトラバースするためのメソッドが合計 5 つあります。
-
for…in : オブジェクト自身および継承された列挙可能なプロパティ (シンボル プロパティを除く) をループします。
-
Object.keys(obj) : オブジェクト自体 (継承されたプロパティを除く) のすべての列挙可能なプロパティ (Symbol プロパティを除く) のキー名を含む配列を返します。
-
Object.getOwnPropertyNames(obj) : オブジェクト自体のすべてのプロパティのキー名を含む配列を返します (シンボル プロパティを除き、列挙不可能なプロパティも含みます)。
-
Object.getOwnPropertySymbols(obj) : オブジェクト自体のすべての Symbol プロパティのキー名を含む配列を返します。
-
Reflect.ownKeys(obj) : キー名がシンボルか文字列か、または列挙可能かどうかに関係なく、オブジェクト自体のすべてのキー名 (継承されたものを除く) を含む配列を返します。
上記の走査はすべて、属性走査の同じ順序ルールに従います。
- まず、すべての数値キーを反復処理し、数値の昇順に並べます。
- 次に、すべての文字列キーを反復処理し、結合時間に従って昇順に並べ替えます。
- 最後に、すべてのシンボル キーをスキャンし、結合時間に従って昇順に並べ替えます。
オブジェクトの新しいメソッド
- Object.assign(target, …sources) : このメソッドは、1 つ以上のソース オブジェクトのプロパティをターゲット オブジェクトにコピーし、ターゲット オブジェクトを返すために使用されます。同じ属性名がある場合、後続のソース オブジェクトは前のソース オブジェクトの属性値を上書きします。
const target = {
a: 1 };
const source = {
b: 2, c: 3 };
const result = Object.assign(target, source);
console.log(result);
// 输出：{ a: 1, b: 2, c: 3 }
- Object.keys(obj) : このメソッドは、ターゲット オブジェクトの列挙可能なプロパティのキーで構成される配列を返します。
const obj = {
a: 1, b: 2, c: 3 };
const keys = Object.keys(obj);
console.log(keys);
// 输出：['a', 'b', 'c']
- Object.values(obj) : このメソッドは、ターゲット オブジェクトの列挙可能なプロパティの値で構成される配列を返します。
const obj = {
a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values);
// 输出：[1, 2, 3]
- Object.entries(obj) : このメソッドは、ターゲット オブジェクトの列挙可能なプロパティのキーと値のペアで構成される配列 (2 次元配列) を返します。
const obj = {
a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries);
// 输出：[['a', 1], ['b', 2], ['c', 3]]
- Object.fromEntries(entries) : このメソッドは、キーと値のペアの配列 (2 次元配列) をオブジェクトに変換します。
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj);
// 输出：{ a: 1, b: 2, c: 3 }
- Object.create(proto,propertiesObject) : このメソッドは、新しいオブジェクトを作成し、既存のオブジェクトを新しいオブジェクトのプロトタイプとして使用し、オプションでプロパティ記述子を渡して新しいオブジェクトのプロパティを定義できます。オブジェクトの継承を実現できます。
const parent = {
sayHello() {
console.log('Hello');
}
};
const child = Object.create(parent, {
name: {
value: 'Alice',
writable: true,
enumerable: true,
configurable: true
}
});
console.log(child.name);
child.sayHello(); // 输出：Hello