Hướng dẫn symbol javascript - biểu tượng javascript

Theo tài liệu của Javascript, các tên(từ khoá) thuộc tính đối tượng có thể là kiểu chuỗi hoặc kiểu ký hiệu(Symbol). Không phải số, không phải booleans, chỉ có chuỗi hoặc ký hiệu, hai loại này.

Cho đến bây giờ chúng ta chỉ sử dụng các chuỗi. Bây giờ hãy xem những lợi ích mà các biểu tượng(Symbol) có thể mang lại cho chúng ta.

• 1. Biểu tượng(Symbol)
• 2. Thuộc tính Hidden
• 3. Biểu tượng trong một chữ
• 4. Các biểu tượng được bỏ qua trong for …in
• 5. Biểu tượng toàn Cục
• 6. Symbol.keyFor
• 7. Symbols hệ thống
• 8. Tóm lược

1. Biểu tượng(Symbol)Biểu tượng(Symbol)

2. Thuộc tính Hidden

3. Biểu tượng trong một chữ

// id is a new symbol
let id = Symbol();

4. Các biểu tượng được bỏ qua trong for …in

// id is a symbol with the description "id"
let id = Symbol("id");

5. Biểu tượng toàn Cục

6. Symbol.keyFor

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/


let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

7. Symbols hệ thống

8. Tóm lược

Một biểu tượng sẽ đại diện cho một định danh duy nhất.

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

Một giá trị của kiểu này có thể được tạo bằng cách sử dụng

// id is a symbol with the description "id"
let id = Symbol("id");

Khi tạo, chúng ta có thể cung cấp cho biểu tượng một mô tả (còn được gọi là tên biểu tượng), chủ yếu hữu ích cho mục đích gỡ lỗi:

let id = Symbol("id");
alert(id.toString()); // Symbol(id), now it works

Biểu tượng(Symbol) được đảm bảo là duy nhất. Ngay cả khi chúng ta tạo nhiều biểu tượng với cùng một mô tả, chúng là các giá trị khác nhau. Mô tả chỉ là một nhãn hiệu không ảnh hưởng đến bất cứ điều gì.

let id = Symbol("id");
alert(id.description); // id

2. Thuộc tính HiddenThuộc tính Hidden

3. Biểu tượng trong một chữ

4. Các biểu tượng được bỏ qua trong for …in

5. Biểu tượng toàn Cục

let user = { // belongs to another code
  name: "John"
};

let id = Symbol("id");

user[id] = 1;

alert( user[id] ); // we can access the data using the symbol as the key

6. Symbol.keyFor

7. Symbols hệ thống

8. Tóm lược

Một biểu tượng sẽ đại diện cho một định danh duy nhất.

// ...
let id = Symbol("id");

user[id] = "Their id value";

Một giá trị của kiểu này có thể được tạo bằng cách sử dụng

// id is a symbol with the description "id"
let id = Symbol("id");

Khi tạo, chúng ta có thể cung cấp cho biểu tượng một mô tả (còn được gọi là tên biểu tượng), chủ yếu hữu ích cho mục đích gỡ lỗi:

let user = { name: "John" };

// Our script uses "id" property
user.id = "Our id value";

// ...Another script also wants "id" for its purposes...

user.id = "Their id value"
// Boom! overwritten by another script!

3. Biểu tượng trong một chữBiểu tượng trong một chữ

4. Các biểu tượng được bỏ qua trong for …in

5. Biểu tượng toàn Cục

let id = Symbol("id");

let user = {
  name: "John",
  [id]: 123 // not "id: 123"
};

6. Symbol.keyFor

4. Các biểu tượng được bỏ qua trong for …inCác biểu tượng được bỏ qua trong for …in

5. Biểu tượng toàn Cục không hoạt động với vòng lặp.

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: 
Fanpage: https://www.facebook.com/cafedevn
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
*/


let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false

6. Symbol.keyFor

8. Tóm lượcSymbolic.

Một biểu tượng sẽ đại diện cho một định danh duy nhất.Symbolic:

// id is a symbol with the description "id"
let id = Symbol("id");

Một giá trị của kiểu này có thể được tạo bằng cách sử dụng

// id is a symbol with the description "id"
let id = Symbol("id");

5. Biểu tượng toàn CụcBiểu tượng toàn Cục

6. Symbol.keyFor

7. Symbols hệ thống

Để đọc một biểu tượng, hãy sử dụng

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

Cái này gọi để kiểm tra biểu tượng toàn cục và nếu có một biểu tượng được mô tả là

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

Ví dụ:

// id is a symbol with the description "id"
let id = Symbol("id");

Các biểu tượng bên trong sổ đăng ký được gọi là biểu tượng toàn cầu. Nếu chúng ta muốn một biểu tượng trên toàn ứng dụng, có thể truy cập ở mọi nơi trong code

Nghe có vẻ giống Ruby

Trong một số ngôn ngữ lập trình, như Ruby, có một ký hiệu cho mỗi tên.

Trong JavaScript, như chúng ta có thể thấy, điều đó phù hợp với các biểu tượng toàn cục.

6. Symbol.keyForSymbol.keyFor

Đối với các biểu tượng toàn cục, không chỉ

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

Ví dụ:

// id is a symbol with the description "id"
let id = Symbol("id");

Các biểu tượng bên trong sổ đăng ký được gọi là biểu tượng toàn cầu. Nếu chúng ta muốn một biểu tượng trên toàn ứng dụng, có thể truy cập ở mọi nơi trong code

Nghe có vẻ giống Ruby

Ví dụ:

// id is a symbol with the description "id"
let id = Symbol("id");

Các biểu tượng bên trong sổ đăng ký được gọi là biểu tượng toàn cầu. Nếu chúng ta muốn một biểu tượng trên toàn ứng dụng, có thể truy cập ở mọi nơi trong codeSymbols hệ thống

Nghe có vẻ giống Ruby

Trong một số ngôn ngữ lập trình, như Ruby, có một ký hiệu cho mỗi tên.

• let id = Symbol("id");
  alert(id.toString()); // Symbol(id), now it works

  2

• let id = Symbol("id");
  alert(id.toString()); // Symbol(id), now it works

  3

• let id = Symbol("id");
  alert(id.toString()); // Symbol(id), now it works

  4

• let id = Symbol("id");
  alert(id.toString()); // Symbol(id), now it works

  5
• Trong JavaScript, như chúng ta có thể thấy, điều đó phù hợp với các biểu tượng toàn cục.

6. Symbol.keyFor

Đối với các biểu tượng toàn cục, không chỉ

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string

let id = Symbol("id"); alert(id); // TypeError: Cannot convert a Symbol value to a string9 Nội bộ sử dụng sổ đăng ký biểu tượng toàn cục để tra cứu từ khóa cho biểu tượng. Vì vậy, nó không hoạt động cho các biểu tượng phi toàn cục. Nếu biểu tượng không phải là toàn cục, nó sẽ không thể tìm thấy và trả lại let id = Symbol("id"); alert(id.toString()); // Symbol(id), now it works0.

Điều đó nói rằng, bất kỳ biểu tượng có thuộc tính

let id = Symbol("id");
alert(id.toString()); // Symbol(id), now it works

7. Symbols hệ thống

Tồn tại nhiều biểu tượng của hệ thống mà JavaScript sử dụng bên trong và chúng ta có thể sử dụng chúng để tinh chỉnh các khía cạnh khác nhau của các đối tượng.

Chúng được liệt kê trong đặc tả trong bảng biểu tượng nổi tiếng:

1. …và như thế.
2. Chẳng hạn,

   let id = Symbol("id");
   alert(id.toString()); // Symbol(id), now it works

   5cho phép chúng ta mô tả đối tượng để chuyển đổi nguyên thủy. Chúng ta sẽ thấy việc sử dụng nó ở các bài sau.

Các biểu tượng khác cũng sẽ trở nên quen thuộc khi chúng ta nghiên cứu các tính năng tương ứng khác trong ngôn ngữ này.

8. Tóm lược

let id = Symbol("id");
alert(id.toString()); // Symbol(id), now it works

• Biểu tượng được tạo bằng cách dùng

  // id is a symbol with the description "id"
  let id = Symbol("id");

  5 với một mô tả tùy chọn (tên).
• Biểu tượng luôn có giá trị khác nhau, ngay cả khi chúng có cùng tên. Nếu chúng ta muốn các biểu tượng cùng tên bằng nhau, thì chúng ta nên sử dụng sổ đăng ký toàn cầu:

  let id = Symbol("id");
  alert(id); // TypeError: Cannot convert a Symbol value to a string

  3trả về (tạo nếu cần) một biểu tượng toàn cầu với tên như

  let id = Symbol("id");
  alert(id); // TypeError: Cannot convert a Symbol value to a string

  4. Nhiều cuộc gọi

  let id = Symbol("id");
  alert(id.description); // id

  1với cùng một

  let id = Symbol("id");
  alert(id); // TypeError: Cannot convert a Symbol value to a string

  4trả lại chính xác cùng một biểu tượng.
• Biểu tượng có hai trường hợp sử dụng chính:
• Thuộc tính đối tượng ẩn giấu. Nếu chúng ta muốn thêm một thuộc tính vào một đối tượng mà thuộc về một tập lệnh hoặc thư viện khác, chúng ta có thể tạo một biểu tượng và sử dụng nó làm khóa thuộc tính. Một thuộc tính tượng trưng không xuất hiện

  /*
  Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
  @author cafedevn
  Contact: 
  Fanpage: https://www.facebook.com/cafedevn
  Instagram: https://instagram.com/cafedevn
  Twitter: https://twitter.com/CafedeVn
  Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
  */
  
  
  let id1 = Symbol("id");
  let id2 = Symbol("id");
  
  alert(id1 == id2); // false

  9, vì vậy nó sẽ không được xử lý ngẫu nhiên cùng với các thuộc tính khác. Ngoài ra, nó sẽ không được truy cập trực tiếp, bởi vì tập lệnh khác không có biểu tượng của chúng tôi. Vì vậy, thuộc tính sẽ được bảo vệ khỏi việc sử dụng ngẫu nhiên hoặc ghi đè. Vì vậy, chúng ta có thể có một cách tình cờ, giấu một thứ gì đó vào các đối tượng mà chúng ta cần, nhưng những người khác không nên nhìn thấy, sử dụng các thuộc tính tượng trưng.
• Có nhiều biểu tượng hệ thống được sử dụng bởi JavaScript có thể truy cập như

  let id = Symbol("id");
  alert(id.description); // id

  4. Chúng ta có thể sử dụng chúng để thay đổi một số hành vi tích hợp. Ví dụ, sau này trong hướng dẫn, chúng tôi sẽ sử dụng

  let id = Symbol("id");
  alert(id.toString()); // Symbol(id), now it works

  4cho các lần lặp ,

  let id = Symbol("id");
  alert(id.toString()); // Symbol(id), now it works

  5để thiết lập chuyển đổi từ đối tượng sang nguyên thủy , v.v.
• Về mặt kỹ thuật, các biểu tượng không bị ẩn 100%. Có một phương thức tích hợp Object.getOwnPropertySymbols (obj) cho phép chúng ta có được tất cả các biểu tượng. Ngoài ra, có một phương thức có tên Reflect.ownKeys (obj) trả về tất cả các khóa của một đối tượng bao gồm cả các biểu tượng. Vì vậy, họ không thực sự ẩn. Nhưng hầu hết các thư viện, hàm dựng sẵn và cú pháp cấu trúc không sử dụng các phương thức này.
• Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha.
• Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Group Facebook

Fanpage