Kiểu dữ liệu biểu tượng trong ví dụ JavaScript

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

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ữ

Để tạo một biểu tượng mới, bạn sử dụng hàm toàn cầu

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
8 như trong ví dụ này

let s = Symbol['foo'];

Code language: JavaScript [javascript]

Hàm

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
8 tạo một giá trị duy nhất mới mỗi khi bạn gọi nó

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]

Hàm

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
8 chấp nhận một

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
1 làm đối số tùy chọn. Đối số

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
1 sẽ làm cho biểu tượng của bạn mang tính mô tả hơn

Ví dụ sau tạo hai biểu tượng.

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
3 và

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
4

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]

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

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
5. Phương thức

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
6 gọi ngầm phương thức

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
5 của ký hiệu như trong ví dụ sau

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]

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ử  

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
8 để kiểm tra xem một biến có phải là ký hiệu hay không. ES6 đã mở rộng 

console.log[firstName]; // Symbol[first name] console.log[lastName]; // Symbol[last name]

Code language: JavaScript [javascript]
8 để trả về chuỗi

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
70 khi bạn chuyển một biến ký hiệu

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
7

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ử

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
71, bạn sẽ gặp lỗi

let s = Symbol['foo'];

Code language: JavaScript [javascript]
0

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

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
72 thay vì gọi hàm

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
8

Phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ụ sau

let s = Symbol['foo'];

Code language: JavaScript [javascript]
4

Trước tiên, phương pháp

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
72 tìm kiếm ký hiệu bằng khóa  

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ệu

Sau này, nếu bạn gọi phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ó

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
0

Trong ví dụ này, chúng tôi đã sử dụng phương pháp

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
72 để tra cứu ký hiệu bằng phím  

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
76. Vì sổ đăng ký ký hiệu toàn cầu đã chứa nó, phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
72 trả về ký hiệu hiện có

Để lấy khóa được liên kết với ký hiệu, bạn sử dụng phương pháp

let s = Symbol['foo'];

Code language: JavaScript [javascript]
03 như trong ví dụ sau

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
5

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

let s = Symbol['foo'];

Code language: JavaScript [javascript]
04 trả về

let s = Symbol['foo'];

Code language: JavaScript [javascript]
05

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
8

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ư

let s = Symbol['foo'];

Code language: JavaScript [javascript]
06,

let s = Symbol['foo'];

Code language: JavaScript [javascript]
07,

let s = Symbol['foo'];

Code language: JavaScript [javascript]
08,

let s = Symbol['foo'];

Code language: JavaScript [javascript]
09 và

let s = Symbol['foo'];

Code language: JavaScript [javascript]
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ư sau

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
0

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

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
1

Để 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

let s = Symbol['foo'];

Code language: JavaScript [javascript]
41

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
2

Để 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

let s = Symbol['foo'];

Code language: JavaScript [javascript]
42

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
3

Để 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

let s = Symbol['foo'];

Code language: JavaScript [javascript]
43 đã được thêm vào trong ES6

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
4

Phương thức

let s = Symbol['foo'];

Code language: JavaScript [javascript]
43 trả về một mảng các ký hiệu thuộc tính riêng từ một đối tượng

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

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
7

Biểu tượng. hasInstance

let s = Symbol['foo'];

Code language: JavaScript [javascript]
46 là ký hiệu thay đổi hành vi của toán tử

let s = Symbol['foo'];

Code language: JavaScript [javascript]
47. Thông thường, khi bạn sử dụng toán tử

let s = Symbol['foo'];

Code language: JavaScript [javascript]
47

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
5

JavaScript sẽ gọi phương thức

let s = Symbol['foo'];

Code language: JavaScript [javascript]
49 như sau

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
6

Sau đó, tùy thuộc vào phương thức để xác định xem 

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
00 có phải là phiên bản của đối tượng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
01 hay không. Xem ví dụ sau

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
7

Mảng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
02 không phải là một thể hiện của lớp

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
03, do đó, toán tử

let s = Symbol['foo'];

Code language: JavaScript [javascript]
47 trả về

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
05 trong ví dụ này

Giả sử bạn muốn mảng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
02 là một thể hiện của lớp

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
03, bạn có thể thêm phương thức

let s = Symbol['foo'];

Code language: JavaScript [javascript]
46 như sau

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
8

Biểu tượng. trình vòng lặp

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ông

Các đối tượng có thuộc tính

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
09 được gọi là các đối tượng có thể lặp lại

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

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
9

Trong nội bộ, công cụ JavaScript trước tiên gọi phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
09 của mảng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
52 để lấy đối tượng iterator. Sau đó, nó gọi phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
53 và sao chép thuộc tính giá trị cho đối tượng iterator vào biến

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
54. Sau ba lần lặp, thuộc tính

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
55 của đối tượng kết quả là

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
56, vòng lặp thoát

Bạn có thể truy cập đối tượng lặp mặc định thông qua ký hiệu

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
57 như sau

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
0

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

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
09 như trong ví dụ sau

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
1

Biểu tượng. isConcatSpreadable

Để nối hai mảng, bạn sử dụng phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
59 như trong ví dụ sau

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
2

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

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
59 còn chấp nhận đối số không phải mảng như minh họa bên dưới

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
3

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

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
59, phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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ày

Đây là lý do tại sao biểu tượng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
83 phát huy tác dụng

Thuộc tính

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
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àm

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
59 hay không

Xem xét ví dụ sau

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
4

Đối tượng danh sách được nối với mảng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
86. Tuy nhiên, các yếu tố riêng lẻ của nó không được lan truyền

Để cho phép các phần tử của đối tượng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
87 được thêm vào mảng riêng lẻ khi chuyển sang phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
59, bạn cần thêm thuộc tính

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
83 vào đối tượng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
87 như sau

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
5

Lưu ý rằng nếu bạn đặt giá trị của

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
83 thành

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
05 và truyền đối tượng

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
87 cho phương thức

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
59, nó sẽ được nối vào mảng dưới dạng toàn bộ đối tượng

Biểu tượng. toPrimitive

Phương thức

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
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ủy

Công cụ JavaScript xác định phương thức

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
05 trên nguyên mẫu của từng loại tiêu chuẩn

Phương thức

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
05 lấy đối số

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
08 có một trong ba giá trị. “số”, “chuỗi” và “mặc định”. Đối số

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
08 chỉ định loại giá trị trả về. Tham số

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
08 được công cụ JavaScript điền vào dựa trên ngữ cảnh mà đối tượng được sử dụng

Dưới đây là một ví dụ về việc sử dụng phương pháp

console.log[Symbol[] === Symbol[]]; // false

Code language: JavaScript [javascript]
05

let firstName = Symbol['first name'], lastName = Symbol['last name'];

Code language: JavaScript [javascript]
6

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

Kiểu dữ liệu biểu tượng trong JavaScript là gì?

Biểu tượng là một đối tượng tích hợp có hàm tạo trả về một biểu tượng nguyên thủy — còn được gọi là giá trị Biểu tượng hoặc chỉ là Biểu tượng — được đảm bảo là duy nhất.

Biểu tượng JavaScript là gì?

Các biểu tượng là kiểu nguyên thủy mới được giới thiệu trong ES6 . Biểu tượng là định danh hoàn toàn duy nhất. Giống như các đối tác nguyên thủy của chúng [Số, Chuỗi, Boolean], chúng có thể được tạo bằng cách sử dụng hàm gốc Symbol[] trả về một Biểu tượng. Mỗi khi bạn gọi chức năng xuất xưởng, một biểu tượng mới và duy nhất sẽ được tạo.

Biểu tượng có phải là loại hợp lệ trong JavaScript không?

Loại biểu tượng . Trong một số ngôn ngữ lập trình, Biểu tượng được gọi là "nguyên tử". Mục đích của các ký hiệu là tạo các khóa thuộc tính duy nhất được đảm bảo không xung đột với các khóa từ mã khác. A Symbol is a unique and immutable primitive value and may be used as the key of an Object property [see below]. In some programming languages, Symbols are called "atoms". The purpose of symbols is to create unique property keys that are guaranteed not to clash with keys from other code.

Biểu tượng AT có nghĩa là gì trong JavaScript?

Biểu tượng @ trong javascript là viết tắt của trang trí . Trình trang trí không có trong ES6, vì vậy mã bạn đang làm việc với trình trang trí có thể được dịch sang phiên bản javascript có thể chạy trong bất kỳ trình duyệt nào.

Chủ Đề