Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về loại nguyên thủy của ký hiệu JavaScript và cách sử dụng ký hiệu một cách hiệu quả
Tạo biểu tượng
ES6 đã thêm
7 làm kiểu nguyên thủy mới. Không giống như các kiểu nguyên thủy khác như số, boolean, null, không xác định và chuỗi, kiểu ký hiệu không có dạng chữCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Để tạo một biểu tượng mới, bạn sử dụng hàm toàn cầu
8 như trong ví dụ nàyCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Code language: JavaScript [javascript]
let s = Symbol['foo'];
Hàm
8 tạo một giá trị duy nhất mới mỗi khi bạn gọi nóCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Hàm
8 chấp nhận mộtCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
1 làm đối số tùy chọn. Đối sốCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
1 sẽ làm cho biểu tượng của bạn mang tính mô tả hơnCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
Ví dụ sau tạo hai biểu tượng.
3 vàCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
4Code language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Bạn có thể truy cập thuộc tính mô tả của biểu tượng bằng phương pháp
5. Phương thứcCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
6 gọi ngầm phương thứcCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
5 của ký hiệu như trong ví dụ sauCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
Code language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
Vì các ký hiệu là các giá trị nguyên thủy nên bạn có thể sử dụng toán tử
8 để kiểm tra xem một biến có phải là ký hiệu hay không. ES6 đã mở rộngCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
8 để trả về chuỗiCode language: JavaScript [javascript]
console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]
70 khi bạn chuyển một biến ký hiệuCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
7Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Vì một ký hiệu là một giá trị nguyên thủy, nếu bạn cố gắng tạo một ký hiệu bằng toán tử
71, bạn sẽ gặp lỗiCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
0Code language: JavaScript [javascript]
let s = Symbol['foo'];
Chia sẻ biểu tượng
ES6 cung cấp cho bạn một sổ đăng ký ký hiệu toàn cầu cho phép bạn chia sẻ các ký hiệu trên toàn cầu. Nếu bạn muốn tạo một biểu tượng sẽ được chia sẻ, bạn sử dụng phương thức
72 thay vì gọi hàmCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
8Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Phương thức
72 chấp nhận một tham số duy nhất có thể được sử dụng để mô tả biểu tượng, như trong ví dụ sauCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
4Code language: JavaScript [javascript]
let s = Symbol['foo'];
Trước tiên, phương pháp
72 tìm kiếm ký hiệu bằng khóaCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
76 trong sổ đăng ký ký hiệu toàn cầu. Nó trả về biểu tượng hiện có nếu có một. Mặt khác, phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
72 tạo một ký hiệu mới, đăng ký ký hiệu đó vào cơ quan đăng ký ký hiệu chung bằng khóa được chỉ định và trả về ký hiệuCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Sau này, nếu bạn gọi phương thức
72 bằng cùng một khóa, phương thức
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Code language: JavaScript [javascript]
72 sẽ trả về ký hiệu hiện cóCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
0Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Trong ví dụ này, chúng tôi đã sử dụng phương pháp
72 để tra cứu ký hiệu bằng phímCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
76. Vì sổ đăng ký ký hiệu toàn cầu đã chứa nó, phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
72 trả về ký hiệu hiện cóCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Để lấy khóa được liên kết với ký hiệu, bạn sử dụng phương pháp
03 như trong ví dụ sauCode language: JavaScript [javascript]
let s = Symbol['foo'];
5Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Nếu một ký hiệu không tồn tại trong sổ đăng ký ký hiệu chung, phương thức
04 trả vềCode language: JavaScript [javascript]
let s = Symbol['foo'];
05Code language: JavaScript [javascript]
let s = Symbol['foo'];
8Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
sử dụng biểu tượng
A] Sử dụng các ký hiệu làm giá trị duy nhất
Bất cứ khi nào bạn sử dụng một chuỗi hoặc một số trong mã của mình, bạn nên sử dụng các ký hiệu thay thế. Ví dụ: bạn phải quản lý trạng thái trong ứng dụng quản lý tác vụ
Trước ES6, bạn sẽ sử dụng các chuỗi như
06,Code language: JavaScript [javascript]
let s = Symbol['foo'];
07,Code language: JavaScript [javascript]
let s = Symbol['foo'];
08,Code language: JavaScript [javascript]
let s = Symbol['foo'];
09 vàCode language: JavaScript [javascript]
let s = Symbol['foo'];
40 để thể hiện các trạng thái khác nhau của một tác vụ. Trong ES6, bạn có thể sử dụng các ký hiệu như sauCode language: JavaScript [javascript]
let s = Symbol['foo'];
0Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
B] Sử dụng ký hiệu làm tên thuộc tính được tính toán của một đối tượng
Bạn có thể sử dụng các ký hiệu làm tên thuộc tính được tính toán. Xem ví dụ sau
1Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Để có được tất cả các thuộc tính có thể đếm được của một đối tượng, bạn sử dụng phương thức
41Code language: JavaScript [javascript]
let s = Symbol['foo'];
2Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Để lấy tất cả các thuộc tính của một đối tượng cho dù các thuộc tính đó có đếm được hay không, bạn sử dụng phương thức
42Code language: JavaScript [javascript]
let s = Symbol['foo'];
3Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Để lấy tất cả các ký hiệu thuộc tính của một đối tượng, bạn sử dụng phương thức
43 đã được thêm vào trong ES6Code language: JavaScript [javascript]
let s = Symbol['foo'];
4Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Phương thức
43 trả về một mảng các ký hiệu thuộc tính riêng từ một đối tượngCode language: JavaScript [javascript]
let s = Symbol['foo'];
Các biểu tượng nổi tiếng
ES6 cung cấp các ký hiệu được xác định trước được gọi là các ký hiệu nổi tiếng. Các biểu tượng nổi tiếng đại diện cho các hành vi phổ biến trong JavaScript. Mỗi biểu tượng nổi tiếng là một thuộc tính tĩnh của đối tượng
7Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Biểu tượng. hasInstance
46 là ký hiệu thay đổi hành vi của toán tửCode language: JavaScript [javascript]
let s = Symbol['foo'];
47. Thông thường, khi bạn sử dụng toán tửCode language: JavaScript [javascript]
let s = Symbol['foo'];
47Code language: JavaScript [javascript]
let s = Symbol['foo'];
5Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
JavaScript sẽ gọi phương thức
49 như sauCode language: JavaScript [javascript]
let s = Symbol['foo'];
6Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Sau đó, tùy thuộc vào phương thức để xác định xem
00 có phải là phiên bản của đối tượngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
01 hay không. Xem ví dụ sauCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
7Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Mảng
02 không phải là một thể hiện của lớpCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
03, do đó, toán tửCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
47 trả vềCode language: JavaScript [javascript]
let s = Symbol['foo'];
05 trong ví dụ nàyCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Giả sử bạn muốn mảng
02 là một thể hiện của lớpCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
03, bạn có thể thêm phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
46 như sauCode language: JavaScript [javascript]
let s = Symbol['foo'];
8Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Biểu tượng. trình vòng lặp
09 chỉ định liệu một hàm có trả về một trình vòng lặp cho một đối tượng hay khôngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Các đối tượng có thuộc tính
09 được gọi là các đối tượng có thể lặp lạiCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Trong ES6, tất cả các đối tượng bộ sưu tập [Mảng, Tập hợp và Bản đồ] và chuỗi là các đối tượng có thể lặp lại
ES6 cung cấp vòng lặp for…of hoạt động với đối tượng iterable như trong ví dụ sau
9Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Trong nội bộ, công cụ JavaScript trước tiên gọi phương thức
09 của mảngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
52 để lấy đối tượng iterator. Sau đó, nó gọi phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
53 và sao chép thuộc tính giá trị cho đối tượng iterator vào biếnCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
54. Sau ba lần lặp, thuộc tínhCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
55 của đối tượng kết quả làCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
56, vòng lặp thoátCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Bạn có thể truy cập đối tượng lặp mặc định thông qua ký hiệu
57 như sauCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
0Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Theo mặc định, một bộ sưu tập không thể lặp lại. Tuy nhiên, bạn có thể làm cho nó có thể lặp lại bằng cách sử dụng
09 như trong ví dụ sauCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
1Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Biểu tượng. isConcatSpreadable
Để nối hai mảng, bạn sử dụng phương thức
59 như trong ví dụ sauCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
2
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Code language: JavaScript [javascript]
Trong ví dụ này, mảng kết quả chứa các phần tử đơn lẻ của cả hai mảng. Ngoài ra phương thức
59 còn chấp nhận đối số không phải mảng như minh họa bên dướiCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
3Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Số 5 trở thành phần tử thứ 5 của mảng
Như bạn thấy trong ví dụ trên, khi chúng ta truyền một mảng cho phương thức
59, phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
59 sẽ chia mảng thành các phần tử riêng lẻ. Tuy nhiên, nó xử lý một đối số nguyên thủy khác nhau. Trước ES6, bạn không thể thay đổi hành vi nàyCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Đây là lý do tại sao biểu tượng
83 phát huy tác dụngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Thuộc tính
83 là một giá trị Boolean xác định xem một đối tượng có được thêm riêng lẻ vào kết quả của hàmCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
59 hay khôngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Xem xét ví dụ sau
4Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Đối tượng danh sách được nối với mảng
86. Tuy nhiên, các yếu tố riêng lẻ của nó không được lan truyềnCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Để cho phép các phần tử của đối tượng
87 được thêm vào mảng riêng lẻ khi chuyển sang phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
59, bạn cần thêm thuộc tínhCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
83 vào đối tượngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
87 như sauCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
5Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Lưu ý rằng nếu bạn đặt giá trị của
83 thànhCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
05 và truyền đối tượngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
87 cho phương thứcCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
59, nó sẽ được nối vào mảng dưới dạng toàn bộ đối tượngCode language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Biểu tượng. toPrimitive
Phương thức
05 xác định điều gì sẽ xảy ra khi một đối tượng được chuyển đổi thành một giá trị nguyên thủyCode language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Công cụ JavaScript xác định phương thức
05 trên nguyên mẫu của từng loại tiêu chuẩnCode language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Phương thức
05 lấy đối sốCode language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
08 có một trong ba giá trị. “số”, “chuỗi” và “mặc định”. Đối sốCode language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
08 chỉ định loại giá trị trả về. Tham sốCode language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
08 được công cụ JavaScript điền vào dựa trên ngữ cảnh mà đối tượng được sử dụngCode language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
Dưới đây là một ví dụ về việc sử dụng phương pháp
05Code language: JavaScript [javascript]
console.log[Symbol[] === Symbol[]]; // false
6Code language: JavaScript [javascript]
let firstName = Symbol['first name'], lastName = Symbol['last name'];
Trong hướng dẫn này, bạn đã học về các ký hiệu JavaScript và cách sử dụng các ký hiệu cho các giá trị và thuộc tính đối tượng duy nhất. Ngoài ra, bạn đã học cách sử dụng các ký hiệu nổi tiếng để sửa đổi hành vi của đối tượng