ES6 객체의 확장 및 새로운 방법

1. 속성의 간결한 표현법

ES6 괄호 안에 변수와 함수를 직접 써서 대상의 속성과 방법으로 사용할 수 있도록 한다.다음과 같다. 변수foo는 괄호에 직접 쓰이고 속성 이름은 변수 이름이고 속성 값은 변수 값이다.

간략하게 쓴 대상 방법은 구조 함수로 사용할 수 없으며 오류 보고

const foo = "bar";
const baz = {foo};
console.log(baz); // =>  {foo:"bar"}

//  
const baz = {foo:foo}
//  
const {dataSource} = this.props;
this.setState({dataSource});

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

방법도 간략하게 쓸 수 있다

const o = {
  init(){
    console.log('Hello Word!');
  }
}

const obj = {
  f() {
    this.foo = 'bar';
  }
};

new obj.f() //  

키워드

this 키워드는 항상 함수가 있는 현재 대상super을 가리킨다super 키워드는 현재 대상의 원형 대상?:을 가리킬 때 대상의 방법에서만 사용할 수 있고 다른 곳에서만 사용하면 틀릴 수 있다.

const o = {
  h:"Hello"
}
const p = {
  h:"Word",
  find() {
    return super.h
  }
}
Object.setPrototypeOf(p, o);
p.find() // "hello"

3. 체인 판단 연산자

프로그래밍 실무에서 만약에 대상 내부의 어떤 속성을 읽으면 안전을 위해 이 대상이 존재하는지 판정해야 한다

var o = {
  x:1,
  y:2
}

var a = o && o.x ;
// => undefined
var b = o && o.z;
// => undefined

또는 삼원 연산자ES2020를 사용하여 하나의 대상이 존재하는지 아닌지를 판단한다

var a = o ? o.x : 10;

상기 두 가지 방식과 같이 만약에 차원 깊이 판단이 매우 번거롭다면 ?.'체인 판단 연산자'null를 도입했다.

체인식으로 직접 호출할 때 왼쪽의 대상이 undefined 또는 undefined인지 판단하고 만약 그렇다면 더 이상 연산하지 않고 되돌아간다a.

var o = {
  x:1,
  y:2,
  z:{
    w:3
  }
}
var a  = o?.z?.w;

이 연산자를 사용하면 몇 가지 주의점이 있다. 1. 단락 메커니즘

a?.[++x];
//  
a == null ? undefined : a[++x];

undefined가 null 또는 x이라면 delete는 점증 연산을 하지 않는다. 즉, 체인 판단 연산자가 진실이 되면 오른쪽 표현식은 값을 구하지 않는다는 것이다.2. ?. 연산자

delete a?.b
//  
a == null ? undefined ?  delete a.b;

3. 괄호의 영향. 만약에 속성 체인에 원괄호가 있다면 체인 판단 연산자는 원괄호 외부에 영향을 주지 않고 원괄호 내부에만 영향을 미친다.

(a?.b).c
//  
(a == null ? undefined : a.b).c

4、오타 신고 장소(이하 쓰기 금지)

//  
new a?.()
new a?.b()
//  
a?.`{b}`
a?.b`{c}`
//   super
super?.()
super?.foo
//  
a?.b = c

5. 오른쪽은 십진수 값을 이전 코드와 호환하기 위해 ?. 뒤에 십진수 그룹을 따라가면 null는 완전한 연산자로 간주되지 않고 삼원 연산자에 따라 처리된다. 그 소수점은 뒤의 십진수 숫자에 귀속되어 하나의 소수를 형성한다.

a?.3:0
//  
a ? .3 : 0

4. 널판단 연산자

대상의 속성을 읽을 때, 어떤 속성 값이 undefined 또는 || 이면 기본값을 지정해야 할 때가 있으며, 흔히 볼 수 있는 방법은 || 연산자를 통해 기본값을 지정하는 것이다.

var o = {
  x:0,
  t:"",
  s:false
}
var a = o.x || 200;   // => 200
var b = o.t || "word"; // => "word"
var c = o.s || true;   // => true

상기 세 줄 코드는 모두 null 연산자를 통해 기본값을 지정하지만 이렇게 쓰는 것은 잘못된 것이다. 개발자의 뜻은 속성의 값이 undefined 또는 0이면 기본값이 적용되지만 속성 값이 false 또는 빈 문자ES2020라면 기본값도 적용된다.상기 상황을 피하기 위해 ? 새로운 Null 판단 연산자||를 도입했다. 연산자 왼쪽의 값null이나 undefined만 오른쪽의 값으로 되돌아온다.

var a = o.x ?? 200;     // => 0
var b = o.t ?? "word"; // => ""
var c = o.s ?? true;   // => false

??에는 연산자 우선순위 문제가 있는데 &&와||의 우선순위가 어느 것이 높고 어느 것이 낮습니까?현재 규칙은 여러 논리 연산자가 함께 사용되면 우선 순위를 괄호로 표시해야 하며, 그렇지 않으면 오류가 발생할 수 있다.

5. 대상의 새로운 방법

1、Object.is()

ES6는 같은 값의 상등 알고리즘을 제기했다. 모든 환경에서 두 값이 같으면 상등해야 한다Object.is()는 두 값이 엄격하게 상등한지 비교하는데 엄격한 비교 연산자===와 기본적으로 일치한다.

var o = {
  x:0,
  y:0
}
Object.is(o.x,o.y); // => true

===와는 다른 점은

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

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

2、Object.assign()

기본 사용법Object.assign 방법은 대상의 합병에 사용되며 원본 대상의 모든 열거 가능한 속성을 목표 대상에 복제한다.

첫 번째 파라미터는 목표 대상

뒤에 있는 매개 변수는 모두 원본 대상

var target = {};
var source = {a:1,b:2};
Object.assign(target,source); 
target // => {a:1, b:2, c:3}

대상 객체와 소스 객체에 동일한 이름의 속성이 있거나 여러 소스 객체에 동일한 이름의 속성이 있으면 뒤의 속성이 앞의 속성을 덮어씁니다.

var target = {a:1,c:4};
var source = {a:2,b:3};
Object.assign(target,source); 
target // => {a:2,c:4,b:3}   a 

매개 변수가 하나일 경우 Object.assign 매개 변수가 직접 반환됩니다

.

var o = {a:1};
Object.is(o,Object.assign(o)); // true

매개 변수가 객체가 아닌 경우 먼저 객체로 돌아간 다음

typeof Object.assign(2) // "object"

undefined와null은 대상으로 전환할 수 없기 때문에 매개 변수로 사용하면 바로 오류를 보고합니다.

Object.assign(undefined); 
Object.assign(null);
// TypeError: Cannot convert undefined or null to object

개체가 아닌 매개변수가 원본 개체의 위치에 나타나면 개체로 전환되고 개체로 전환되지 않으면 생략됩니다.

var o = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

참고 사항:

얕은 복사Object.assign()는 얕은 복사를 실현했다. 만약에 원본 대상의 어떤 속성 값이 대상이라면 목표 대상의 복사는 이 대상의 인용을 얻는다.

var o1 = {a:{b:1}};
var o2 = Object.assign({},o1);
o2.a.b = 2;
o1.a.b; // => 2

동명 속성의 교체

var target = {a:1,b:2};
var source = {a:"word"};
Object.assign(target,source);
// {a:"word",b:2}

수조의 처리Object.assign()는 수조를 처리할 수 있으나 수조를 대상으로 간주한다.

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

//  
Object.assign({0:1,1:2,2:3},{0:4,1:5});
//  ：{0:4,1:5,2:3}
Array.from({0:4,1:5,2:3,length:3});
// [4,5,3]

수치 함수의 처리Object.assign()는 값의 복제만 할 수 있으며, 복제할 값이 수치 함수라면 값을 구한 후에 복제한다.

var target = {}
var source = {
  get x () { return 1 }
}
Object.assign(target,source);
// => {x:1}

공통 경로:

객체에 속성 추가

class Point {
  constructor(x,y){
    Object.assign(this,{x,y}); //  
  }
}
var point = new Point(1,2);
// {x:1,y:2};
point instanceof Point; // => true  point     Point  
point instanceof Object; // => true  Object 

여러 객체를 병합하여 객체를 병합한 후 새 객체로 반환

var o1 = {x:1};
var o2 = {y:2};
var merge = (...sources) => Object.assign({}, ...sources); //  
var newObj = merge(o1,o2);
// => {x:1,y:2}

3、 __proto__ 등록 정보

__proto__ 속성(앞뒤 두 개의 밑줄), 현재 대상을 읽거나 설정하는 데 사용되는 prototype 대상, 현재 모든 브라우저(IE11 포함)에 이 속성이 배치되어 있습니다.실현상__proto__에서 호출된 것은Object.prototype.__proto__이다.
이 속성은 ES6의 본문에 쓰이지 않고 부록에 쓰여져 있는데 __proto__ 앞뒤의 쌍밑줄이 대외적인 API가 아닌 내부 속성이기 때문이다.따라서 의미적 측면에서든 호환적 측면에서든 사용하지 말고 아래의 것으로 대체한다.Object.setPrototypeOf()(쓰기)Object.getPrototyprOf()(읽기)Object.create()(생성)Object.setPrototypeOf() 대상을 설정하는 데 사용되는 prototype 대상은 매개 변수 자체를 되돌려줍니다

첫 번째 파라미터가 undefined 또는 null일 경우 오류가 발생합니다.

//  
Object.setPrototypeOf(object, prototype)

//  
var p = {};
var o = {x:1};
Object.setPrototypeOf(o,p); //  p o 
p.y = 2;
p.z = 3;

"x" in o; // => true  
"y" in o; // => true  
"z" in o; // => true  

Object.getPrototypeOf() 한 대상을 읽는 데 사용되는 원형 대상

첫 번째 파라미터가 undefined 또는 null일 경우 오류가 발생합니다.

var p = {x:1};
var o = Object.create(p);
Object.getPrototypeOf(o);
// {x:1}
Object.is(Object.getPrototypeOf(o),p); 
// true

4、Object.keys()

반환수조

수 그룹 구성원은 매개 변수 대상 자체의 모든 범람 가능한 속성의 키 이름

이다.

상속된 속성을 반환하지 않음

사용 가능for ... of 재활용

var o = { a:1, b:2 ,c:3};
Object.keys(o);  // => ["a","b","c"]

for (let key of Object.keys(o)) {
  console.log(key); 
}
// => "a"
// => "b"
// => "c"

5、Object.values()

반환수조

수 그룹 구성원은 매개 변수 대상 자체의 모든 속성을 범람할 수 있는 키 값

이다.

상속 속성을 반환하지 않음

사용 가능for ... of 재활용

var o = { a:1, b:2 ,c:3};
Object.values(o);  // => [1,2,3]

for (let value of Object.values(obj)) {
  console.log(value); 
}
// => 1
// => 2
// => 3

속성명Symbol값의 속성

을 필터합니다

Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']

매개변수가 문자열인 경우

Object.values('abc');
// => ["a","b","c"]
//  
Object.keys("abc");
// ["0","1","2"];
Object.values({0:"a",1:"b",2:"c"});

매개 변수가 대상이 아니면 먼저 대상으로 전환되며, 수치와 볼 값의 포장 대상은 실례에 비계승적인 속성을 추가하지 않기 때문에 빈 그룹

으로 되돌아갑니다

Object.values(42); // => []
Object.values(true); // => []

6、Object.entries()

하나의 그룹을 되돌려줍니다

그룹 구성원은 매개 변수 대상 자체의 모든 편집 가능한 속성의 키 값 대수 그룹

이다.

기타 행위는 Object.values()와 기본적으로 일치한다

var o = { a:1, b:2 ,c:3};
Object.entries(o);
// => [["a",1],["b",2],["c",3]]
for (let [key, value] of entries(o)) {
  console.log([key, value]); 
}
// => ['a', 1]
// => ['b', 2]
// => ['c', 3]

7、Object.fromEntries()

이 방법은 Object.entries()의 역작업으로 키 값을 그룹으로 바꾸는 데 사용됩니다.

Object.fromEntries([["a",1],["b",2],["c",3]]);
// { a:1, b:2 ,c:3}

맵 구조를 객체로 변환

var map = new Map().set("a",1).set("b",2);
Object.fromEntries(map);
// {a:1,b:2}

협조URLSearchParams 대상, 조회 문자열을 대상으로 전환

Object.fromEntries(new URLSearchParams('a=1&b=2'))
// { a: "1", b:"2" }

Object.fromEntries(new URLSearchParams(window.location.search))