ES6에 의해 소개 된 향상된 개체 문자 문자 특성은 주로 약식 속성 이름, 약식 메소드 이름 및 계산 된 속성 이름에 반영된 JavaScript의 객체 처리를 상당히 단순화합니다. 약식 속성 이름은 속성 정의를보다 간결하게 만듭니다. 약식 메소드 이름 단순화 메소드 정의 구문; 계산 된 속성 이름은 변수 값을 기반으로 속성 이름을 동적으로 생성 할 수 있습니다.

향상된 객체 리터럴은 화살표 함수, 템플릿 리터럴 및 해체 된 할당과 같은 다른 ES6 기능과 함께 사용하여보다 간결하고 읽기 쉬운 글을 작성할 수 있습니다.

향상된 객체 리터럴은 모든 이전 브라우저와 호환되지 않지만 Babel과 같은 번역기를 사용하여 ES6 코드를 ES5 코드로 변환하여 호환성 문제를 해결할 수 있습니다.

이 기사에서는 JavaScript 객체 리터럴의 가능성, 특히 최근 ECMAScript 업데이트에 의해 개선 된 개선 사항을 살펴 봅니다. 문자 적 표기법을 사용하여 JavaScript 객체를 만드는 것은 매우 강력합니다. ES2015 (ES6)에 도입 된 새로운 기능은 모든 최신 브라우저 (IE 제외) 및 Node.js에서 객체 처리를보다 편리하게 만듭니다. 일부 언어에서는 객체가 생성되기 전에 클래스를 선언 해야하는 경우 개발 시간과 처리 능력이 증가합니다. JavaScript에서는 객체를 동적으로 쉽게 만들 수 있습니다. 예를 들어:

// es5 호환 코드 var myobject = { prop1 : '안녕하세요', Prop2 : 'World', 출력 : function () { console.log (this.prop1 ''this.prop2); } }; myObject.output (); // Hello World

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1   ' '   this.prop2);
  }
};

myObject.output(); // hello world

변수에서 객체 초기화

]

객체의 속성은 일반적으로 같은 이름의 변수에 의해 생성됩니다. 예를 들어:

// es5 코드 var a = 1, b = 2, c = 3; var obj = { A : A, B : B, C : c }; // obj.a = 1, obj.b = 2, obj.c = 3

// ES5 代码
var a = 1, b = 2, c = 3;
var obj = {
  a: a,
  b: b,
  c: c
};

// obj.a = 1, obj.b = 2, obj.c = 3

// es6 코드 const a = 1, b = 2, c = 3; const obj = {a, b, c}; // obj.a = 1, obj.b = 2, obj.c = 3

// ES6 代码
const a = 1, b = 2, c = 3;
const obj = { a, b, c };

// obj.a = 1, obj.b = 2, obj.c = 3

// es6 코드 const lib = (() => { 함수 합 (a, b) {반환 a b; } 함수 Mult (a, b) {return a * b; } 반환 {sum, mult}; }) (); Console.log (lib.sum (2, 3)); // 5 Console.log (lib.mult (2, 3)); // 6

// ES6 代码
const lib = (() => {
  function sum(a, b) { return a   b; }
  function mult(a, b) { return a * b; }
  return { sum, mult };
})();

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

// lib.js 함수 합 (a, b) {반환 a b; } 함수 Mult (a, b) {return a * b; } 내보내기 {sum, mult};

// lib.js
function sum(a, b) { return a   b; }
function mult(a, b) { return a * b; }
export { sum, mult };

]

ES5의 객체 메소드에는 기능 선언이 필요합니다. 예를 들어:

// es5 코드 var lib = { 합 : 함수 (a, b) {반환 a b; }, mult : 함수 (a, b) {return a * b; } }; Console.log (lib.sum (2, 3)); // 5 Console.log (lib.mult (2, 3)); // 6

// ES5 代码
var lib = {
  sum: function(a, b) { return a   b; },
  mult: function(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

// es6 코드 const lib = { 합 (a, b) {반환 a b; }, Mult (a, b) {return a * b; } }; Console.log (lib.sum (2, 3)); // 5 Console.log (lib.mult (2, 3)); // 6

// ES6 代码
const lib = {
  sum(a, b) { return a   b; },
  mult(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

// es6 코드 const lib = { 합 : (a, b) => a b, 멀티 : (a, b) => a * b }; Console.log (lib.sum (2, 3)); // 5 Console.log (lib.mult (2, 3)); // 6

// ES6 代码
const lib = {
  sum: (a, b) => a   b,
  mult: (a, b) => a * b
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

]]]

ES5에서는 변수를 키 이름으로 사용할 수는 없지만 객체가 생성 된 후 를 추가 할 수는 있지만 . 예를 들어:

// es5 코드 var key1 = 'one'; var obj = {2 : 2, 3 : 3}; obj [key1] = 1; // obj.one = 1, obj.two = 2, obj.three = 3

// ES5 代码
var key1 = 'one';
var obj = { two: 2, three: 3 };
obj[key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

에 표현식을 배치하여 객체 키를 동적으로 할당 할 수 있습니다. 예를 들어: // es6 코드 const key1 = 'one'; const obj = {[key1] : 1, 2 : 2, 3 : 3}; // obj.one = 1, obj.two = 2, obj.three = 3

// ES6 代码
const key1 = 'one';
const obj = { [key1]: 1, two: 2, three: 3 };

// obj.one = 1, obj.two = 2, obj.three = 3

// es6 코드 const i = 1; const obj = {

: i}; Console.log (obj.i1); // 1

// ES6 代码
const i = 1;
const obj = { ['i'   i]: i };
console.log(obj.i1); // 1

// es6 코드 const i = 2; const obj = {

: x => x * i}; console.log (obj.mult2 (5)); // 10

// ES6 代码
const i = 2;
const obj = { ['mult'   i]: x => x * i };
console.log(obj.mult2(5)); // 10

(다음 내용은 공간 제한으로 인해 간단히 요약되며 핵심 포인트가 유지됩니다)

]

해체 (객체 속성에서 변수 가져 오기)

] es6 해체는 객체에서 변수로 속성 값을 추출하는 프로세스를 단순화합니다.

기본 함수 매개 변수

] ES6 기본 매개 변수와 해체는 특히 선택적 매개 변수를 처리 할 때 기능 매개 변수 처리를 단순화하기 위해 결합됩니다.

es2018 (es9) REST/SPREARTIPITION

] ES2018의 REST/SPREAT OPERATOR는 객체로 확장되어 객체 속성을 처리하는 데 더 많은 유연성을 제공합니다.

요약 :

es6 Es6 Enhanced Object Literals는 JavaScript가 작동하는 핵심 방식을 변경하지 않지만 코드를 작성하려는 노력을 절약하고 코드를 더 명확하고 간결하게 만듭니다.

(공간 제한으로 인해 FAQ의 일부 내용이 생략되었습니다. 필요한 경우 특정 질문에 대해 질문 할 수 있습니다.)