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


Câu hỏi tôi có là tốt nhất được đưa ra bằng cách jsfiddle này, mã 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 nào là f? Nó chỉ là một cách viết tắt cho d?


76
2017-12-22 11:22


gốc


Cái đầu tiên thực sự không phải là JSON. - GolezTrol
Đó không phải là cách viết tắt duy nhất, còn một vài thứ nữa trong ES6 - Kos
OK @GolezTrol nó không phải là đúng JSON bởi vì các phím không có dấu ngoặc kép. Vì vậy, những gì chính xác sẽ bạn gọi d cấu trúc dữ liệu trong bài viết của tôi? - 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 biểu diễn dữ liệu dưới dạng chuỗi JSON sẽ là {"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"}' -> a giữ một chuỗi có thể được deserialised đến một đối tượng thông qua JSON.parse. - moonwave99


Các câu trả lời:


Nó là một bộ khởi tạo đối tượng Shorthand thuộc tính 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 mã đị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) mới nhất Bản nháp ECMAScript 6 Rev 13. Và tất nhiên, giống như các giới hạn được đặt từ ECMAScript 3, bạn không thể sử dụng từ dành riêng làm tên thuộc tính của mình.

Cách viết tắt nà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 các môi trường không hỗ trợ, các ký hiệu này sẽ dẫn đến các lỗi cú pháp.

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

Trong ECMAScript5 những gì chúng ta thường làm:

var tmp = getDate();
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();

59
2017-12-22 11:24



Tại sao điều này hữu ích để trở thành một tính năng ngôn ngữ? Dường như nó sẽ phổ biến hơn nhiều đối với mọi người hoặc khởi tạo trực tiếp đối tượng bằng các chữ, giá trị trả về, hoặc như vậy, hoặc để chỉ tạo đối tượng đầu tiên, sau đó thiết lập 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, và sau đó cuối cùng khởi tạo đối tượng như thế này có vẻ không bình thường ... hay không? - Panzercrisis
@Panzercrisis chào mừng bạn đến với ES6, tất cả đều như thế. - Racheet
@Panzercrisis Nó có vẻ như nó sẽ chỉ dẫn đến rất nhiều không mong muốn và khó tìm lỗi, 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ĩ rằng nó ít nhất 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 rằng nó hữu ích. - Josh Rumbut
@Panzercrisis nó có thể rất hữu ích để trả về một tuple từ một hàm lambda, một cái gì đó như (a, b) => {a, b}. Ít nhất đó là cách tôi sử dụng cùng một tính năng trong C#. - Vincent van der Weele


var f = {a, b, c};

Nó đi kèm với ES6 (ECMAScript 2015) và có nghĩa là chính xác giống như:

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

Nó được gọi là Ký hiệu giá trị thuộc tính văn bản đối tượng (hoặc đơn giản là viết tắt giá trị thuộc tính, thuộc tính viết tắt).

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

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

Để biết thêm thông tin, xem Trình khởi tạo đối tượng.


75
2017-12-22 11:23





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

Nó định nghĩa 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 đối tượng mới (), Object.create () hoặc sử dụng ký hiệu chữ (ký pháp khởi tạo). 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
};

12
2017-12-22 11:30