Đối tượng Javascript theo nghĩa đen: chính xác thì {a, b, c} là gì?

Câu hỏi mà tôi có được đưa ra tốt nhất bằng jsfiddle này , mã cho nó dưới đây:

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 );

Loại cấu trúc dữ liệu là fgì? Nó chỉ là một cách viết tắt của d?

javascript ecmascript-6

— drmrbrewer
nguồn

Cái đầu tiên thực sự không phải là JSON.

— GolezTrol

Đó không phải là tốc ký duy nhất, còn có một số cách khác trong ES6

— Kos

OK @GolezTrol, nó không hoàn toàn là JSON vì các khóa không nằm trong dấu ngoặc kép. Vì vậy, chính xác bạn sẽ gọi dcấu trúc dữ liệu trong bài viết của tôi là gì?

— drmrbrewer

Điều quan trọng là phải hiểu rằng không có phiên bản nào là JSON hợp lệ. Cách để đại diện cho dữ liệu như là một chuỗi JSON sẽ{"a" : 1, "b" : "x", "c" : true }

— Benjamin Gruenbaum

@drmrbrewer Nó là một đối tượng theo nghĩa đen . nó không phải là JSON vì nó là mã javascript , trong khi JSON là một định dạng tuần tự hóa. Ví dụ var a = '{ "a" : "value"}'-> agiữ một chuỗi có thể được deserialised đến một đối tượng thông qua JSON.parse.

— moonwave99

Câu trả lời:

Nó là một thuộc tính khởi tạo đối tượng viết tắt trong ES6.

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

Điều này hoạt động vì giá trị thuộc tính có cùng tên với định danh thuộc tính. Đây là một bổ sung mới cho cú pháp của Trình khởi tạo đối tượng ( phần 11.1.5 ) trong bản nháp ECMAScript 6 mới nhất Rev 13 . Và tất nhiên, cũng giống như các giới hạn được đặt ra từ ECMAScript 3, bạn không thể sử dụng một từ dành riêng làm tên thuộc tính của mình.

Cách viết tắt như vậy sẽ không thay đổi đáng kể mã của bạn, nó chỉ làm cho mọi thứ trở nên ngọt ngào hơn một chút!

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.
}

Vui lòng xem bảng tương thích để được hỗ trợ cho các ký hiệu này. Trong môi trường không hỗ trợ, các ký hiệu này sẽ dẫn đến lỗi cú pháp.

Ký hiệu viết tắt này cung cấp đối tượng khớp khá độc đáo:

Trong ECMAScript5, những gì chúng tôi đã từng làm:

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

Có thể được thực hiện trong ECMAScript6 với một dòng mã:

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

— vô hiệu
nguồn

Tại sao điều này lại hữu ích khi trở thành một tính năng ngôn ngữ? Có vẻ như mọi người thường khởi tạo đối tượng trực tiếp bằng các ký tự, trả về giá trị, v.v. hoặc chỉ tạo đối tượng trước, sau đó đặt các thuộc tính trực tiếp. Tạo các biến có cùng tên, khởi tạo chúng, rồi cuối cùng khởi tạo đối tượng như thế này có vẻ không bình thường ... hay là vậy?

— Panzercrisis

@Panzercrisis Có vẻ như nó sẽ dẫn đến rất nhiều lỗi ngoài ý muốn và khó tìm ra, về mặt cá nhân. Cũng giống như cách cho phép if(a = 1) {...}như cú pháp hợp lệ.

— Anthony Grist

@Panzercrisis Tôi nghĩ ít nhất cũng có ý nghĩa nếu bạn tưởng tượng rằng a, b và c là cấu trúc dữ liệu phức tạp hơn và f cũng chứa các thuộc tính phức tạp khác. Vẫn không chắc đó là một ý tưởng tuyệt vời, nhưng tôi có thể thấy điều đó rất hữu ích.

— Josh Rumbut

@Panzercrisis nó có thể rất hữu ích khi trả về một tuple từ một hàm lambda, đại loại như (a, b) => {a, b}. Đó ít nhất là cách tôi sử dụng cùng một tính năng C#.

— Vincent van der Weele

@Alex làm thế nào đây là một "kỳ quặc" hoặc "phức tạp"? Một điều rất phổ biến mà bạn thường thấy trong nhiều cơ sở mã là khởi tạo một đối tượng trong đó khóa khớp với biến được cung cấp dưới dạng giá trị, {id: id, data: data, isSelected: isSelected}v.v. Xảy ra nhiều khi ánh xạ các đối tượng đến các đối tượng cục bộ rồi quay lại. Trong phần lớn các trường hợp, bạn không muốn đặt tên cho công cụ của mình hơi khác đi {identifier: id, viewData: data, isElementSelected: isSelected }chính xác là bạn đang nói đến "kỳ quặc", "phức tạp" và "khó hiểu".

— VLAZ

var f = {a, b, c};

Nó đi kèm với ES6 (ECMAScript 2015) và có nghĩa giống hệt như:

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

Nó được gọi là Object Literal Property Value Shorthands (hay đơn giản là thuộc tính giá trị tốc ký, thuộc tính tốc ký).

Bạn cũng có thể kết hợp các phím tắt với khởi tạo cổ điển:

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

Để biết thêm thông tin, hãy xem Bộ khởi tạo đối tượng .

— madox2
nguồn

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

Nó xác định một đối tượng trong JavaScript bằng cách sử dụng ký hiệu ECMAScript 2015 mới:

Theo Mạng nhà phát triển Mozilla :

"Các đối tượng có thể được khởi tạo bằng cách sử dụng Object (), Object.create () mới hoặc sử dụng ký hiệu chữ (ký hiệu bộ khởi tạo). Bộ khởi tạo đối tượng là danh sách không hoặc nhiều cặp tên thuộc tính và giá trị liên quan của một đối tượng, được bao gồm trong dấu ngoặc nhọn ({})."

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

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

tương đương với:

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

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

— Mojo jojo
nguồn