Hãy tìm hiểu về Set và chức năng độc đáo của nó trong JavaScript ?

của Asif Norzai

BỘ ?

ES2015/ES6 đã cung cấp cho chúng tôi rất nhiều công cụ và tính năng hữu ích, nhưng một trong những tính năng nổi bật nhất đối với tôi là Set. Nó không được sử dụng hết tiềm năng của nó. Tôi hy vọng sẽ thuyết phục bạn về giá trị của nó với bài viết này, để bạn có thể tận dụng tối đa lợi ích của tiện ích tuyệt đẹp này.

Vậy Set là gì, bạn hỏi?

“Các Set đối tượng cho phép bạn lưu trữ các giá trị duy nhất thuộc bất kỳ loại nào, dù là giá trị nguyên thủy hay tham chiếu đối tượng.”, MDN.

Đặt loại bỏ các mục trùng lặp.

Chức năng cơ bản ?

Bất cứ khi nào bạn muốn sử dụng Setbạn phải khởi tạo nó bằng new từ khóa và chuyển vào dữ liệu có thể lặp lại ban đầu, hãy để trống hoặc null.

// All valid ways to initialize a set
const newSet1 = new Set();
const newSet2 = new Set(null);
const newSet3 = new Set([1, 2, 3, 4, 5]);

Đặt tiện ích/phương thức ?

add, giống như tên gọi của nó, thêm các mục mới vào Set const mới được khởi tạo. Nếu bất cứ lúc nào một giá trị trùng lặp được thêm vào tập hợp, nó sẽ bị loại bỏ bằng cách sử dụng strict equality.

const newSet = new Set();

newSet.add("C");
newSet.add(1);
newSet.add("C");

// chain add functionality
newSet.add("H").add("C");

newSet.forEach(el => {
  console.log(el);
  // expected output: C
  // expected output: 1
  // expected output: H
});

has kiểm tra xem giá trị mà bạn chuyển vào có tồn tại trong newSet hăng sô. Nếu giá trị tồn tại, nó sẽ trả về giá trị Boolean truevà nó sẽ trở lại false nếu nó không

const newSet = new Set(["A", 2, "B", 4, "C"]);

console.log(newSet.has("A"));
// expected output: true

console.log(newSet.has(4));
// expected output: true

console.log(newSet.has(5));
// expected output: false

clear & delete là hai chức năng quan trọng nhất của Set nếu bạn muốn xóa tất cả các mục nhập hoặc xóa một giá trị cụ thể.

const newSet = new Set(["A", 2, "B", 4, "C"]);

newSet.delete("C");
// expected output: true

newSet.delete("C");
// expected output: false

newSet.size
// expected output: 4

newSet.clear();
// expected output: undefined

newSet.size
// expected output: 0

keys và values cả hai đều có cùng chức năng, điều này thật kỳ lạ nếu bạn nghĩ về cách chúng hoạt động với các đối tượng JS. Cả hai đều trả lại một iterator vật. Điều này có nghĩa là bạn có thể truy cập .next() phương pháp trên nó để có được giá trị của nó.

const newSet = new Set(null);

newSet.add("Apples");
newSet.add(12);

let iterator = newSet.keys();  // same as newSet.values();

console.log(iterator.next().value);
// expected output: Apples

console.log(iterator.next().value);
// expected output: 12

console.log(iterator.next().value);
// expected output: undefined

Mang tất cả lại với nhau

Hãy tạo một chức năng đơn giản cho một nhóm tin tặc. Chức năng chỉ thêm người dùng vào danh sách nếu họ có sự chấp thuận của quản trị viên. Vì vậy, bạn phải có tên quản trị viên với mục nhập của mình, đây là bí mật (mặc dù không có trong bài viết này). Vào cuối chương trình, nó sẽ cho biết ai được mời.

// The Admins
const allowedAdminUsers = new Set(["Naimat", "Ismat", "Azad"]);

// An empty Set, stored in memory
const finalList = new Set();

// A function to add users to permission list
const addUsers = ({user, admin}) => {
  
   // Check to see if the admin is the admin 
  // list and that the user isn't already in the set
  if(allowedAdminUsers.has(admin) && !finalList.has(user)) {
    
    // Return the users list at the end
   return finalList.add(user);
    
  }
  // Console.log this message if the if the condition doesn't pass
  console.log(`user ${user} is already in the list or isn't allowed`); 
};

// Add some entries
addUsers({user: "Asep", admin: "Naimat"});
addUsers({user: "John", admin: "Ismat"});

// Lets add John again and this time that inner function console error will be shown
addUsers({user: "John", admin: "Azad"});

const inviationList = [...finalList].map(user => 
 `${user} is invited`);

console.log(inviationList);
// Expected output:  ["Asep is invited", "John is invited"]

Đó là đủ chức năng để chúng tôi sử dụng Đặt hôm nay trong các dự án của mình. ?

Trước khi bạn đi: nếu bạn thích bài đăng này, hãy theo dõi tôi tại đây và cả trên Twitternơi tôi đăng và đăng lại nội dung liên quan đến web.