es6 학습 노트의 대상 확장

7933 단어

하나.속성의 간결한 표현


ES6에서는 객체의 속성 및 방법으로 변수와 함수를 직접 쓸 수 있습니다.이런 책은 더욱 간결하다.
var foo = 'bar' ; 
var baz = {foo};
baz // {foo : 'bar'}

// 
var baz = {foo : foo}
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 o = {
    method(){
          return "hello!" ; 
     }
  };

  // 
  var o = {
     method : function(){
            return "hello!" ;
          }
      };
var birth = '2000/01/01';
var person {
      name : ' ',
      // birth : birth
      birth,
      // hello : functon()....
      hello() {console.log(this.name)}
}

이런 문법은 함수의 반환값에 사용하면 매우 편리할 것이다.
function getPoint() {
    var x = 1;
    var y =10;
    return {x, y};
}

getPoint()
// { x : 1, y : 10}

둘.속성 이름 표현식

obj . foo = true;
obj['a' + 'bc'] = 123;

괄호를 사용하여 글꼴로 객체를 정의하는 경우 ES5에서는 메소드 1(식별자)만 속성을 정의할 수 있습니다.
var obj = {
    foo : true,
    abc : 123
 };

ES6는 글자 크기로 대상을 정의할 때 표현식을 대상의 속성 이름으로 사용한다. 즉, 표현식을 네모난 괄호 안에 놓는다.
let propKey = 'foo';
let obj = { 
      [propKey] : true,
      ['a' + 'bc'] : 123
 };
var lastWord = 'last word';
var a = {
    'first word' : 'hello',
     [lastWord] : 'world'
  };
  a['first word'] // 'hello'
  a[lastWord] // 'world'
  a['last word'] // 'world'

표현식은 방법명을 정의하는 데도 사용할 수 있다.
let obj = {
   ['h' + 'ello'](){
        return 'hi';
   }
};

obj.hello() // hi

속성명 표현식과 간결한 표현을 동시에 사용할 수 없으며 오류가 발생합니다.
// 
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

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

등록 정보 이름 표현식이 객체인 경우 기본적으로 객체가 문자열 [object Object]로 자동 전환되므로 주의해야 합니다.
const keyA = { a : 1};
const keyB = { b : 2};

const myObject ={
    [KeyA] : 'valueA',
    [KeyB] : 'valueB'
};

셋.Object.assign()


Object.assign 방법은 대상의 합병에 사용되며 원본 대상(source)의 모든 열거 가능한 속성을 대상 대상(target)으로 복사합니다.
var target = { a : 1 };
var source1 = { b : 2 };
var source2 = { c : 3 };

Object.assignj(traget, souce1, source2);
target // {a : 1, b : 2, c : 3}

Object.assign 방법의 첫 번째 매개 변수는 목표 대상이고 뒤의 매개 변수는 모두 원본 대상이다.
대상 객체가 소스 객체와 같은 이름의 속성이 있거나 여러 소스 객체에 같은 이름이 있으면 뒤의 속성이 앞의 속성을 덮어씁니다.
var target = {a : 1, b : 2};
var source1 = { b : 2, c : 2};
var source2 = { c : 3};

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

// ,Object.assign 。

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

Object.assign 방법은 깊이 있는 복사가 아니라 얕은 복사를 실행한다.즉, 원본 대상의 어떤 속성의 값이 대상이라면 목표 대상이 복사한 것은 이 대상의 인용이다.
var obj1 = {a : {b : 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

*Tips: obj1 a ,Object.assign 。 , 。*

// , ,Object.assign , 。

var target = {a : {b : 'c', d : 'e'}}
var source = {a : {b : 'hello'}}
Object.assign(target, source);
// {a : { b : 'hello'}}

Object.assign은 그룹을 처리할 수 있지만, 그룹을 대상으로 볼 수 있습니다.
Object.assign([1,2, 3], [4,5]);
//[4,5,3] 

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

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

넷.속성의 매거성과 역행


객체의 각 속성에는 속성의 동작을 제어하는 데 사용되는 설명 객체(Descriptor)가 있습니다.Object.getOwnPropertyDescriptor 방법은 이 속성의 설명 대상을 얻을 수 있습니다.
let obj = { foo : 123}; 
Object.getOwnPropertyDescriptor(obj, 'foo');
//{  
   // value : 123,
   // writable: true,
   //enumerable: true,
   //configurable: true
//}

대상의 enumerable 속성을 설명합니다. '매거성' 이라고 합니다. 이 속성이false라면 일부 작업은 현재 속성을 무시합니다.
현재, 네 가지 작업은enumerable가false인 속성을 무시합니다.for...in 순환: 대상 자체와 계승된 매거 가능한 속성만 반복합니다.Object.keys (): 대상 자체의 모든 열거 가능한 속성의 키 이름을 되돌려줍니다.JSON.stringify (): 직렬화된 대상 자체만 열거할 수 있는 속성입니다.Object.assign ():enumerable가false인 속성을 무시하고 대상 자체의 열거 가능한 속성만 복사합니다.
이 네 가지 작업 중 앞의 세 가지는 ES5에 있는 것이고 마지막 Object이다.assign()은 ES6에서 새로 추가되었습니다.그중에 for만...in은 상속된 속성을 되돌려줍니다. 다른 세 가지 방법은 상속된 속성을 무시하고 대상 자체의 속성만 처리합니다.실제로'매거적'(enumerable)이라는 개념을 도입한 최초의 목적은 일부 속성이 for를 회피할 수 있도록 하는 것이다.in 조작, 그렇지 않으면 모든 내부 속성과 방법이 범람합니다.예를 들어 대상의 원형적인 toString 방법과 수조의length 속성은'매거성'을 통해 for를 피할 수 있다.두루 미치다.
또 ES6는 모든 클래스의 프로토타입 방법을 일일이 열거할 수 없도록 규정하고 있다.
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이거나 문자열이거나 열거 가능 여부에 관계없이.

오.Object.keys(),Object.values(),Object.entries()


ES5는 Object를 도입했습니다.키 방법, 하나의 그룹을 되돌려줍니다. 구성원은 매개 변수 대상 자체의 (계승되지 않은) 모든 범람 (enumerable) 속성의 키 이름입니다.
var obj = { foo : 'bar', baz : 42}
Object.keys(obj)
//["foo", "baz"]

ES2017과 Object를 도입했습니다.keys 어셈블리 Object.values 및 Object.entries, 한 대상을 두루 훑어보는 보충 수단으로 for...of 순환 사용.
let {keys, values, entries} =  object;
let obj = { a : 1, b : 2, c : 3}

for(let key of keys(obj)){
    console.log(key);
    // 'a' , 'b' , 'c'
 }

for(let key of values(obj)){
    console.log(value);
    //1, 2, 3
}

   for(let [key, value] of entries(obj)){
      console.log([key, value]);
      //['a', 1], ['b', 2], ['c', 3]
   }

Object.values 방법은 매개 변수 대상 자체의 (enumerable) 속성을 범람할 수 있는 모든 키 값을 되돌려줍니다.
var obj = { foo : 'bar', baz : 42}
Object.values(obj)
//['bar', 42]

var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
//["b", "c", "a"]

Object의 경우values 방법의 매개 변수는 문자열로 각 문자로 구성된 그룹을 되돌려줍니다.
Object.values('foo')
 // ['f', 'o', 'o']

Object.entries 방법은 하나의 그룹을 되돌려줍니다. 구성원은 매개 변수 대상 자체의 (enumerable) 속성을 범람할 수 있는 모든 키 값 대수 그룹입니다.
var obj = { foo : 'bar', baz : 42}
Object.entries(obj)
//[['foo', 'bar'], ['baz', 42]]

Object.entries 방법의 또 다른 용도는 대상을 진정한 맵 구조로 바꾸는 것이다.
var obj = { foo: 'bar', baz: 42 };
var obj = { foo: 'bar', baz: 42 };
map // Map { foo: "bar", baz: 42 }

여섯.객체의 확장 연산자


ES2017은 연산자(...)를 확장합니다.도입 대상
1. 할당 해제
let { x , y , ...z} = {x : 1, y : 2, a : 3, b : 4}

구성 해제 값은 마지막 매개 변수여야 합니다. 그렇지 않으면 오류가 발생합니다.구성 값의 복사는 얕은 복사입니다. 즉, 키의 값이 복합 형식의 값 (수조, 대상, 함수) 이라면 구성 값을 해제하는 복사는 이 값의 인용이지, 이 값의 복사본이 아닙니다.
let obj = { a : { b : 1}}
let {...x} = obj;
obj.a.b = 2;
x.a.b // 2

확장 연산자(...)매개 변수 대상의 모든 범람 가능한 속성을 추출하여 현재 대상에 복사합니다.
let z = { a : 3, b : 4}
let n = {...z}

n // { a: 3, b: 4 }

// 
let aClone = { ...a }
let aClone = Object.assign({}, a);

확장 연산자는 두 객체를 결합하는 데 사용할 수 있습니다.
 let ab = {...a, ...b}
 // 
 let ab = Object.assign({}, a, b);

배열의 확장 연산자와 마찬가지로 객체의 확장 연산자 뒤에 표현식이 있을 수 있습니다.
const obj = {
    ...(x > 1? { a : 1 } : {}),
    b : 2,
};

좋은 웹페이지 즐겨찾기