ECMAScript 6 - 객체

1. 속성의 간결한 표현

function f(x, y) {
  return {x, y};
}

//  

function f(x, y) {
  return {x: x, y: y};
}

f(1, 2) // Object {x: 1, y: 2}

쓰기 대상에 광범위하게 응용될 때 대상의 속성 쓰기 간소화

var birth = '2000/01/01';
var Person = {
  name: ' ',

  // birth: birth
  birth,

  //  hello: function ()...
  hello() { console.log(' ', this.name); }

};
1. 속성의 간결한 표현
 
var lastWord = 'last word';

var a = {
  'first word': 'hello',
 [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

주의해야 할 점은 다음과 같습니다.
1. 속성명 표현식과 간결한 표현을 동시에 사용할 수 없으며 오보할 수 있습니다

//  
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

//  
var foo = 'bar';
var baz = { [foo]: 'abc'};

2. 속성 이름 표현식이 객체인 경우 기본적으로 객체가 자동으로 문자열 [object Object]로 바뀝니다.

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}

2.Object.is () 는 두 값이 엄격한지 아닌지를 판단하는 데 사용됩니다

es5의 판단이 같은지 아닌지는 같은 연산자(==)(값이 같은지만 판단)와 엄격한 같은 연산자(===)(값과 유형이 모두 판단), 전자는 자동으로 데이터 유형을 변환하고 후자의 Nan은 자신과 같지 않으며 +0은 -0과 같다는 단점이 있다.es6에서 Object를 제출했습니다.is는 두 값이 엄격하게 같은지 비교하는 데 쓰인다.

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false ， ， 。

Object.is 및 (==) 비교

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

3.Object.객체 결합에 assign() 사용

var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

특수한 용법
4

매개변수가 하나만 있는 경우 Object.assign은 이 인자를 직접 되돌려줍니다

4

이 매개 변수가 대상이 아니면 먼저 대상으로 전환한 다음에 되돌아옵니다

4

매개 변수가 하나인 경우undefined와null은 대상으로 전환할 수 없기 때문에 매개 변수로 사용하면 오류가 발생합니다

4

undefined와null이 첫 번째 인자에 없으면 오류가 발생하지 않습니다

var obj = {a: 1};
Object.assign(obj) === obj // true
 typeof Object.assign(2) // "object"
 Object.assign(undefined) //  
Object.assign(null) //  
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

일반적인 용도
(1) 객체에 속성 추가

class Point {
  constructor(x, y) {
    Object.assign(this, {x, y});
  }
}

(2) 객체에 메소드 추가

Object.assign(SomeClass.prototype, {
  someMethod(arg1, arg2) {
    ···
  },
  anotherMethod() {
    ···
  }
});

//  
SomeClass.prototype.someMethod = function (arg1, arg2) {
  ···
};
SomeClass.prototype.anotherMethod = function () {
  ···
};

(3) 클론 객체

function clone(origin) {
  return Object.assign({}, origin);
}

(4) 여러 객체 결합

const merge =
  (target, ...sources) => Object.assign(target, ...sources);

(5) 속성에 대한 기본값 지정

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
};

function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  console.log(options);
  // ...
}

4. 속성의 반복

ES6에는 모두 5가지 방법으로 객체의 속성을 이동할 수 있습니다.

for...in

for...in은 객체 자체 및 상속을 반복하는 열거 가능 속성(Symbol 속성 제외)을 포함합니다.

Object.keys(obj)

Object.keys는 객체 자체의 모든 열거 가능한 속성 (Symbol 속성이 없음) 을 포함하는 그룹을 되돌려줍니다.

Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames는 객체 자체의 모든 속성을 포함하는 배열을 반환합니다(Symbol 속성은 없지만 열거할 수 없는 속성을 포함합니다).

Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols는 객체 자체의 모든 Symbol 속성을 포함하는 배열을 반환합니다.

Reflect.ownKeys(obj)

Reflect.ownKeys는 객체 자체의 모든 속성을 포함하는 배열을 반환합니다. 속성 이름이 Symbol이거나 문자열이거나 열거 가능 여부에 관계없이.
상기 5가지 방법은 대상의 속성을 훑어보고 같은 속성을 훑어보는 순서 규칙을 준수한다.
4

먼저 모든 속성의 이름이 수치인 속성을 두루 훑어보고 숫자에 따라 정렬한다

4

그 다음에 모든 속성 이름이 문자열인 속성을 옮겨다니며 생성 시간에 따라 정렬한다

4

마지막으로 모든 속성 이름이 Symbol인 속성을 옮겨다니며 생성 시간에 따라 정렬합니다

5.Null 전도 연산자

프로그래밍 실무에서 만약에 대상 내부의 어떤 속성을 읽으면 종종 이 대상이 존재하는지 판단해야 한다.예를 들어, 메시지를 읽습니다.body.user.firstName, 안전하게 쓰는 방법은 다음과 같습니다.

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

이러한 층층이 판단하는 것은 매우 번거롭기 때문에'Null 전도 연산자'(null propagation operator)를 도입했다?.위의 서법을 간소화하다.

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

위 코드가 세 개예요?연산자 중 하나가null이나undefined로 되돌아오기만 하면 더 이상 연산하지 않고undefined로 되돌아옵니다.Null 전도 연산자에는 네 가지 사용법이 있습니다.

obj?.prop
 //  
obj?.[expr]
 //  
func?.(...args)
 //  
new C?.(...args)
 //