ES6 Personal Notes ノート - オブジェクトの拡張

1.フェッチ機能、ストアバリュー機能

const obj = {
	get foo(){},
	set foo(x){}
}

// console.log(obj.foo.name);
const descriptor = Object.getOwnPropertyDescriptor(obj,'foo');
console.log(descriptor.get.name,descriptor.set.name);

ES5 compares equals using only two operators "==" and "==="
The former will automatically convert the data type
The latter NaN is not equal to NaN, and +0 is equal to -0

ES6 presents the same-value-equal algorithm

console.log(Object.is(+0,-0),(+0 === -0),Object.is(NaN,NaN),(NaN === NaN));

Used to copy all enumerable properties of the source object to the target object
PS:
	1. only copy the source data's own properties (not including inherited properties)
	2. Also do not copy non-enumerable properties (enumerable:false)
	3. shallow copy is implemented

let target = {a : 1},
	source1 = {b : 2},
	source2 = {c : 3} 
console.log(Object.assign(target,source1,source2),target);

let tar1 = {
	a:{
		b : 'c',
		d : 'e'
}},
	sou1 = {
		a:{
			b : 'hello'
		}
	};
console.info(Object.assign(tar1,sou1));

Common uses.
	1. Adding properties to an object
	2. Adding methods to an object
	3. Cloning objects
	4. Merge multiple objects
	5. Specify default values for properties

// 1
class Point{
	constructor(x,y){
		Object.assign(this,{x,y});
	}
}
// 2
Object.assign(SomeClass.prototype,{
	someMethod(arg1,arg2){
		...
	},
	anothorMethod(.. .args){
		...
	}
});
// 3
function clone(origin){
	let originProto = Object.getPrototypeOf(origin);
	return Object.assign(Object.create(originProto),origin);
}
// 4
// Merge multiple objects into one object
const merge1 = (target,... .sources) => Object.assign(target,... .sources);
// If you want the merge to return a new object, you can rewrite it to also lose, merge on an empty object
const merge2 = (... .sources) => Object.assign({},... .sources);

The enumerable property of the description object is called "enumerability".
If this attribute is false, it means that some operation will ignore the current attribute.

ESS has three operations that ignore properties with false enumerable.
	1. for ... in loop: Iterates over only the object's own and inherited enumerable properties. 
	2.Object. keys (): Returns the key names of all enumerable properties of the object itself. 
	3. JSON. stringify (): Serialize only the object's own enumerable properties.

for... .in
Object.keys(obj)
Object.getOwnPropertyNames(obj)
Object.getOwnPropertySymbols(obj)
Reflect.ownKeys(obj)

// ES5
let obj = Object.create(someOtherObj);
obj.method = function(){...} ;
// ES6
let obj = {
	method : function(){...} ;
};
obj.__proto__ = someOtherObj;

// Object.setPrototypeOf()
// Used to set the prototype object of an object, returning the parameter object itself
// is the officially recommended method for setting prototype objects in ES6
// Format
// Object.setPrototypeOf(Object,prototype);
// Usage
// let o = Object.setPrototype({},null);

// eg
let proto = {};
let obj = { x : 10 };
Object.setPrototypeOf(obj,proto);

proto.y = 20;
proto.z = 40;

console.log(obj.x,obj.y,obj.z,obj.__proto__);

let { keys,values,entries } = Object;
let obj1 = {'a' : 1,'b' : '3','c' : 2};

for(key of keys(obj1)){
	console.log(key);
}

for(value of values(obj1)){
	console.log(value);
}

for(entry of entries(obj1)){
	console.log(entries);
}

// entries uses
// 1. Iterate through the object's properties
// 2. Turn the object into a real Map structure
let obj2 = { foo : 'bar',baz : 42 };
let map1 = new Map(entries(obj2));
console.log(map1)

let arr1 = [1,2,3,4,5];
for(let i in arr1){
	console.log(arr1[i])
}
for(let i of arr1){
	console.log(i)
}

// ES5: return the descriptor of an object's properties
console.log("ES5",Object.getOwnPropertyDescriptor(obj2,'foo'));
// ES6: return the description object for all own properties (not inherited properties) of the specified object
console.log("ES6",Object.getOwnPropertyDescriptors(obj2,));

const firstName = (message 
	&& message.body 
	&& message.body.user
	&& message.body.user.firstName) || 'default';

const firstName = message?.body?.user?.firstName || 'default';

2.Object.is()の場合

ES5 compares equals using only two operators "==" and "==="
The former will automatically convert the data type
The latter NaN is not equal to NaN, and +0 is equal to -0

ES6 presents the same-value-equal algorithm

console.log(Object.is(+0,-0),(+0 === -0),Object.is(NaN,NaN),(NaN === NaN));

3.Object.assign()の場合

Used to copy all enumerable properties of the source object to the target object
PS:
	1. only copy the source data's own properties (not including inherited properties)
	2. Also do not copy non-enumerable properties (enumerable:false)
	3. shallow copy is implemented

let target = {a : 1},
	source1 = {b : 2},
	source2 = {c : 3} 
console.log(Object.assign(target,source1,source2),target);

4. オブジェクトのリファレンス

let tar1 = {
	a:{
		b : 'c',
		d : 'e'
}},
	sou1 = {
		a:{
			b : 'hello'
		}
	};
console.info(Object.assign(tar1,sou1));

Common uses.
	1. Adding properties to an object
	2. Adding methods to an object
	3. Cloning objects
	4. Merge multiple objects
	5. Specify default values for properties

// 1
class Point{
	constructor(x,y){
		Object.assign(this,{x,y});
	}
}
// 2
Object.assign(SomeClass.prototype,{
	someMethod(arg1,arg2){
		...
	},
	anothorMethod(.. .args){
		...
	}
});
// 3
function clone(origin){
	let originProto = Object.getPrototypeOf(origin);
	return Object.assign(Object.create(originProto),origin);
}
// 4
// Merge multiple objects into one object
const merge1 = (target,... .sources) => Object.assign(target,... .sources);
// If you want the merge to return a new object, you can rewrite it to also lose, merge on an empty object
const merge2 = (... .sources) => Object.assign({},... .sources);

The enumerable property of the description object is called "enumerability".
If this attribute is false, it means that some operation will ignore the current attribute.

ESS has three operations that ignore properties with false enumerable.
	1. for ... in loop: Iterates over only the object's own and inherited enumerable properties. 
	2.Object. keys (): Returns the key names of all enumerable properties of the object itself. 
	3. JSON. stringify (): Serialize only the object's own enumerable properties.

5. 属性のトラバーサル

for... .in
Object.keys(obj)
Object.getOwnPropertyNames(obj)
Object.getOwnPropertySymbols(obj)
Reflect.ownKeys(obj)

6. proto__ 属性

// ES5
let obj = Object.create(someOtherObj);
obj.method = function(){...} ;
// ES6
let obj = {
	method : function(){...} ;
};
obj.__proto__ = someOtherObj;

// Object.setPrototypeOf()
// Used to set the prototype object of an object, returning the parameter object itself
// is the officially recommended method for setting prototype objects in ES6
// Format
// Object.setPrototypeOf(Object,prototype);
// Usage
// let o = Object.setPrototype({},null);

// eg
let proto = {};
let obj = { x : 10 };
Object.setPrototypeOf(obj,proto);

proto.y = 20;
proto.z = 40;

console.log(obj.x,obj.y,obj.z,obj.__proto__);

7.Object.keys() Object.values() Object.entries()

let { keys,values,entries } = Object;
let obj1 = {'a' : 1,'b' : '3','c' : 2};

for(key of keys(obj1)){
	console.log(key);
}

for(value of values(obj1)){
	console.log(value);
}

for(entry of entries(obj1)){
	console.log(entries);
}

// entries uses
// 1. Iterate through the object's properties
// 2. Turn the object into a real Map structure
let obj2 = { foo : 'bar',baz : 42 };
let map1 = new Map(entries(obj2));
console.log(map1)

let arr1 = [1,2,3,4,5];
for(let i in arr1){
	console.log(arr1[i])
}
for(let i of arr1){
	console.log(i)
}

8.Object.getOwnPropertyDescriptors()を使用する。

// ES5: return the descriptor of an object's properties
console.log("ES5",Object.getOwnPropertyDescriptor(obj2,'foo'));
// ES6: return the description object for all own properties (not inherited properties) of the specified object
console.log("ES6",Object.getOwnPropertyDescriptors(obj2,));

9. Null導体 ?

const firstName = (message 
	&& message.body 
	&& message.body.user
	&& message.body.user.firstName) || 'default';

const firstName = message?.body?.user?.firstName || 'default';