자바 스크립트 객체 리터럴 : {a, b, c}는 정확히 무엇입니까?

내가 가진 질문은 이 jsfiddle 을 통해 가장 잘 제공되며 코드는 다음과 같습니다.

var a = 1, b = 'x', c = true;

var d = {a: a, b: b, c: c}; // <--- object literal
var e = [a, b, c];          // <--- array
var f = {a, b, c};          // <--- what exactly is this??

// these all give the same output:
alert(d.a  + ', ' + d.b +  ', ' + d.c );
alert(e[0] + ', ' + e[1] + ', ' + e[2]);
alert(f.a  + ', ' + f.b +  ', ' + f.c );

어떤 종류의 데이터 구조 f입니까? 의 약어 d입니까?

javascript ecmascript-6

— drmrbrewer
소스

첫 번째는 실제로 JSON이 아닙니다.

— GolezTrol

그것은 유일한 속기가 아닙니다. ES6에는 몇 가지 더 있습니다

— Kos

OK @GolezTrol 키가 큰 따옴표 안에 있지 않기 때문에 엄격하게 JSON이 아닙니다. 정확히 그래서 것이다 당신은 전화를 d내 게시물에서 데이터 구조를?

— drmrbrewer 2015

유효한 JSON 버전이 없다는 것을 이해하는 것이 중요합니다. JSON 문자열이 될 것 같은 방법은 데이터를 표현하기{"a" : 1, "b" : "x", "c" : true }

— 벤자민 Gruenbaum

@drmrbrewer 객체 리터럴 입니다. JSON은 직렬화 형식 인 반면 javascript 코드 이기 때문에 JSON이 아닙니다 . 예를 들어 var a = '{ "a" : "value"}'-> a를 통해 객체로 역 직렬화 할 수있는 문자열을 보유합니다 JSON.parse.

— moonwave99

답변:

ES6 의 Object Initializer Property Shorthand 입니다.

var f = {a, b, c, d:1}; // Will be equal to {a:a, b:b, c:c, d:1}

이것은 속성 값이 속성 식별자와 이름이 같기 때문에 작동합니다. 이것은 최신 ECMAScript 6 초안 Rev 13 의 Object Initialiser ( 섹션 11.1.5 ) 구문에 새로 추가되었습니다 . 물론 ECMAScript 3에서 설정 한 제한과 마찬가지로 예약어를 속성 이름으로 사용할 수 없습니다.

이러한 속기는 코드를 크게 변경하지 않고 모든 것을 조금 더 달콤하게 만듭니다!

function createCar(name, brand, speed) {
  return { type: 'Car', name: name, brand: brand, speed: speed };
}

// With the new shorthand form
function createSweetCar(name, brand, speed) {
  return { type: 'Car', name, brand, speed }; // Yes it looks sweet.
}

이러한 표기법에 대한 지원은 호환성 표를 참조하십시오. 지원되지 않는 환경에서는 이러한 표기법으로 인해 구문 오류가 발생합니다.

이 약식 표기법은 객체 매칭을 매우 훌륭하게 제공합니다.

에서 ECMAScript5 우리가 할 무엇을 사용 :

var tmp = getData();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

한 줄의 코드 로 ECMAScript6 에서 수행 할 수 있습니다 .

var { op, lhs, rhs } = getData();

— 빈
소스

이것이 언어 기능이되는 데 왜 그렇게 유용할까요? 사람들이 리터럴, 반환 값 등으로 객체를 직접 초기화하거나 객체를 먼저 생성 한 다음 속성을 직접 설정하는 것이 훨씬 더 일반적인 것 같습니다. 같은 이름으로 변수를 만들고 인스턴스화 한 다음 마지막으로 이와 같이 객체를 초기화하는 것은 비정상적인 것처럼 보이거나 그렇지 않습니까?

— Panzercrisis

@Panzercrisis 개인적으로 의도하지 않은 버그를 찾기 어렵게 만드는 것 같습니다. if(a = 1) {...}유효한 구문으로 허용하는 것과 거의 같은 방식입니다 .

— 안토니 제분 용 곡물

@Panzercrisis a, b, c가 더 복잡한 데이터 구조이고 f도 다른 복잡한 속성을 포함한다고 상상한다면 적어도 이치에 맞다고 생각합니다. 그래도 좋은 생각인지는 모르겠지만 유용하다는 것을 알 수있었습니다.

— 조쉬 Rumbut

@Panzercrisis 람다 함수에서 튜플을 반환하는 것은 매우 유용 할 수 있습니다 (a, b) => {a, b}. 최소한 .NET에서 동일한 기능을 사용한 방법입니다 C#.

— Vincent van der Weele

@Alex 이것이 어떻게 "특이한"또는 "복잡한"입니까? 많은 코드베이스에서 일반적으로 찾을 수있는 매우 일반적인 것은 키가 값 {id: id, data: data, isSelected: isSelected}등으로 주어진 변수와 일치하는 객체를 초기화하는 것입니다. 객체 를 로컬 객체로 매핑 한 다음 다시 돌아올 때 많이 발생합니다. 대부분의 경우 당신은 {identifier: id, viewData: data, isElementSelected: isSelected }당신이 말하는 "기이하고", "복잡하다", "혼란 스럽다"는 것과 똑같이 약간 다른 이름을 붙이고 싶지 않습니다 .

— VLAZ

var f = {a, b, c};

ES6 (ECMAScript 2015)와 함께 제공되며 다음과 정확히 동일합니다.

var f = {a: a, b: b, c: c};

이를 Object Literal Property Value Shorthands (또는 간단히 속성 값 속기, 속기 속성)라고합니다.

속기를 고전적인 초기화와 결합 할 수도 있습니다.

var f = {a: 1, b, c};

자세한 내용은 Object initializer를 참조하십시오 .

— madox2
소스

var f = {a, b, c};          // <--- what exactly is this??

새로운 ECMAScript 2015 표기법을 사용하여 JavaScript에서 객체를 정의합니다.

당으로 모질라 개발자 네트워크 :

"객체는 new Object (), Object.create () 또는 리터럴 표기법 (이니셜 라이저 표기법)을 사용하여 초기화 할 수 있습니다. 객체 이니셜 라이저는 0 개 이상의 속성 이름 쌍과 객체의 관련 값 목록입니다. 중괄호 ({}). "

var a = "foo", 
    b = 42, 
    c = {};

// Shorthand property names (ES6)
var o = { a, b, c };

다음과 같습니다.

var a = "foo", 
    b = 42,
    c = {};

var o = { 
  a: a,
  b: b,
  c: c
};

— 모조 조조
소스