Trường hợp sử dụng Biểu tượng JavaScript

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

1 là một đối tượng tích hợp sẵn mà hàm tạo của nó trả về một giá trị nguyên hàm

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

2 — còn được gọi là giá trị Ký hiệu hoặc chỉ là Ký hiệu — được đảm bảo là duy nhất. Các ký hiệu thường được sử dụng để thêm các khóa thuộc tính duy nhất vào một đối tượng không xung đột với các khóa mà bất kỳ mã nào khác có thể thêm vào đối tượng và được ẩn khỏi bất kỳ cơ chế nào mà mã khác thường sử dụng để truy cập đối tượng

- Tài liệu web MDN

Trong Javascript, Biểu tượng là tài nguyên đáng kinh ngạc cho tất cả các loại trường hợp sử dụng. Tuy nhiên, tôi nghĩ nhiều khả năng hiển thị màu sắc thực của chúng khi kết hợp với các lớp. Có rất nhiều thuộc tính

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

1 tĩnh có thể được sử dụng với các lớp, mặc dù tôi sẽ chỉ lướt qua một số thuộc tính quan trọng nhất. Kiểm tra phần còn lại tại trang MDN được liên kết

Tất cả những điều dưới đây sẽ hoạt động với bất kỳ đối tượng nào, không chỉ các lớp. Tôi nghĩ rằng các lớp học chỉ đơn giản là thể hiện tính hữu ích của chúng một cách tốt nhất

Cách sử dụng thuộc tính tĩnh // a class representing a bookshelf class Bookshelf { // this functions is an iterator, // so we prefix it with a `*` // and use the `yield` keyword *[Symbol.iterator]() { yield 'Harry Potter'; yield 'The Tempest'; yield 'The Lion King'; } } 1

Như được mô tả trong trích dẫn hàng đầu, các biểu tượng là duy nhất. Điều đó có nghĩa là, nếu bạn tạo một biểu tượng và đính kèm nó vào một đối tượng dưới dạng khóa thuộc tính (sử dụng ), giá trị được gán sẽ chỉ có thể truy cập được khi sử dụng cùng một phiên bản chính xác của biểu tượng đó

const mySymbol = Symbol('foo');

const obj = {
  [mySymbol]: 'bar',
};

// undefined - 'foo' is only a descriptor
// and doesn't actually do anything
obj.foo;

// undefined - all symbols are unique
obj[Symbol('foo')]; 

// 'bar' - 🎉
obj[mySymbol];

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Với cơ chế này, các thuộc tính

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

1 tĩnh đã được tạo (chủ yếu để sử dụng nội bộ) để các lớp và đối tượng có thể dễ cấu hình hơn mà không chiếm bất kỳ tên thuộc tính nào mà bạn có thể sử dụng theo cách khác

1. // a class representing a bookshelf class Bookshelf { // this functions is an iterator, // so we prefix it with a `*` // and use the `yield` keyword *[Symbol.iterator]() { yield 'Harry Potter'; yield 'The Tempest'; yield 'The Lion King'; } } 6 và // a class representing a bookshelf class Bookshelf { // this functions is an iterator, // so we prefix it with a `*` // and use the `yield` keyword *[Symbol.iterator]() { yield 'Harry Potter'; yield 'The Tempest'; yield 'The Lion King'; } } 7

Tìm hiểu về iterator

Đây là một vấn đề lớn.

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

6 và

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

7 sẽ chỉ định đáng chú ý nhất hành vi của một lớp trong các vòng lặp

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

00 và

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

01 tương ứng. Đây là một ví dụ về nó trong hành động

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong ví dụ này, chúng tôi đang sử dụng

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

6 để tạo một trình vòng lặp sẽ được sử dụng để lặp qua mọi cuốn sách trên "giá sách". Tôi đã mã hóa cứng các giá trị, nhưng đó là một ví dụ thực tế hơn, có lẽ bạn muốn tự động

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

03 mọi giá trị trong một mảng được xác định trước (i. e.

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

04)

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ở trên sẽ ghi lại những điều sau đây

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nó giống như ma thuật. Điều tương tự cũng có thể được sử dụng cho

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

7 với

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

01

2. // a class representing a bookshelf class Bookshelf { // this functions is an iterator, // so we prefix it with a `*` // and use the `yield` keyword *[Symbol.iterator]() { yield 'Harry Potter'; yield 'The Tempest'; yield 'The Lion King'; } } 07

Biểu tượng này ít gây nhầm lẫn hơn nhiều so với biểu tượng trên, nhưng vẫn rất tuyệt. Bạn đã bao giờ tự hỏi tại sao

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

08 trả về

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

09,

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

70 trả về

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

71, v.v.?

Dự đoán đầu tiên của bạn có thể là nó sử dụng

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

72. Tuy nhiên, chúng tôi có thể gỡ lỗi vì cách sau không hoạt động

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thay vào đó, họ sử dụng

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

07 để chỉ định thẻ nào họ muốn được đính kèm

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Lưu ý rằng nếu bạn muốn lớp của mình trả về một thứ gì đó đặc biệt khi được chuyển đổi thành một chuỗi không phù hợp với định dạng đó, bạn chỉ cần ghi đè lên chính phương thức

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

74

Tôi chắc chắn rằng có nhiều trường hợp sử dụng cho việc này, nhưng tôi nghĩ rằng nó được sử dụng tốt nhất để gỡ lỗi (đặc biệt nếu bạn đang tạo thư viện và muốn giúp người dùng cuối dễ dàng khắc phục sự cố). Nếu bạn cố gắng in một số văn bản và thấy

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

75, có thể khó tìm ra nguyên nhân gây ra lỗi đó

Tuy nhiên, nếu bạn nhận được

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

76,

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

77 hoặc

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

78 tùy chỉnh, tôi cá là bạn sẽ dễ dàng hơn rất nhiều

3. // a class representing a bookshelf class Bookshelf { // this functions is an iterator, // so we prefix it with a `*` // and use the `yield` keyword *[Symbol.iterator]() { yield 'Harry Potter'; yield 'The Tempest'; yield 'The Lion King'; } } 79

Biểu tượng này xác định hành vi của

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

60 khi được sử dụng với lớp của bạn

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đây là một ví dụ về việc tự thực hiện nó

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

4. // a class representing a bookshelf class Bookshelf { // this functions is an iterator, // so we prefix it with a `*` // and use the `yield` keyword *[Symbol.iterator]() { yield 'Harry Potter'; yield 'The Tempest'; yield 'The Lion King'; } } 61

Điều này thật khó để quấn lấy đầu bạn.

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

61 được sử dụng nội bộ đáng chú ý nhất cho mảng và bản đồ (mặc dù bạn cũng có thể sử dụng nó trong các lớp tùy chỉnh của mình) để tìm lớp con nào sẽ được tạo từ các phương thức tạo lớp mới từ chính chúng. hoặc một cái gì đó

Đây là một ví dụ

const mySymbol = Symbol('foo');

const obj = {
  [mySymbol]: 'bar',
};

// undefined - 'foo' is only a descriptor
// and doesn't actually do anything
obj.foo;

// undefined - all symbols are unique
obj[Symbol('foo')]; 

// 'bar' - 🎉
obj[mySymbol];

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhưng, có lẽ bạn muốn ghi đè lên rằng

const mySymbol = Symbol('foo');

const obj = {
  [mySymbol]: 'bar',
};

// undefined - 'foo' is only a descriptor
// and doesn't actually do anything
obj.foo;

// undefined - all symbols are unique
obj[Symbol('foo')]; 

// 'bar' - 🎉
obj[mySymbol];

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong nội bộ, các mảng đang quyết định lớp nào sẽ xây dựng như vậy

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đầu tiên, nó truy cập vào

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

61 để xem bạn có thiết lập ghi đè hay không, sau đó nó sẽ quay trở lại hàm tạo hiện tại

---

Tôi hy vọng bạn đã học được một hoặc nhiều cách mới để sử dụng

// a class representing a bookshelf
class Bookshelf {
  // this functions is an iterator,
  // so we prefix it with a `*`
  // and use the `yield` keyword
  *[Symbol.iterator]() {
    yield 'Harry Potter';
    yield 'The Tempest';
    yield 'The Lion King';
  }
}

1. Nếu bạn có bất kỳ câu hỏi, chỉnh sửa hoặc bổ trợ nào, tôi rất muốn nghe chúng. Hòa bình ✌

Biểu tượng JavaScript được sử dụng để làm gì?

{} này trong JavaScript là gì?

Lợi thế của việc sử dụng các ký hiệu trong ES6 là gì?

Làm cách nào để kiểm tra biểu tượng trong JavaScript?