Phương thức mảng JavaScript – Cách sử dụng every() và some() trong JS

Trong JavaScript, every và some giúp bạn kiểm tra xem điều gì đó có đúng với mọi phần tử hoặc một số phần tử của mảng hay không.

Trong bài viết này, tôi sẽ chỉ cho bạn cách sử dụng các phương thức mảng hữu ích này.

1Thế nào every() và some() Công việc – Tổng quan#

Trước tiên, chúng tôi cần một số dữ liệu để kiểm tra. Để đơn giản, hãy xem xét một dãy số:

const nums = [34, 2, 48, 91, 12, 32];

Bây giờ, giả sử chúng ta muốn kiểm tra xem mọi số trong mảng có nhỏ hơn 100. sử dụng every chúng ta có thể dễ dàng kiểm tra nó như dưới đây:

nums.every(n => n < 100);
// true

Ngắn và ngọt! Bạn có thể nghĩ về những gì xảy ra ở đây như thế này:

• every lặp qua các phần tử mảng từ trái sang phải.
  • Đối với mỗi lần lặp, nó gọi hàm đã cho với phần tử mảng hiện tại làm đối số thứ nhất của nó.
  • Vòng lặp tiếp tục cho đến khi hàm trả về một giá trị giả. Và trong trường hợp đó every lợi nhuận false – nếu không thì nó trả về true.

some cũng hoạt động rất giống với every:

• some lặp qua các phần tử mảng từ trái sang phải.
  • Đối với mỗi lần lặp, nó gọi hàm đã cho với phần tử mảng hiện tại làm đối số thứ nhất của nó.
  • Vòng lặp tiếp tục cho đến khi hàm trả về một giá trị trung thực. Và trong trường hợp đó some lợi nhuận true – nếu không thì nó trả về false.

Bây giờ hãy sử dụng some để kiểm tra xem một số trong mảng có phải là số lẻ không:

nums.some(n => n % 2 == 1);
// true

Đó là sự thật! 91 là số lẻ.

Nhưng đây không phải là kết thúc của câu chuyện. Những phương pháp này có một số chiều sâu hơn. Nào cùng đào vào bên trong.

2thông số của every và some#

cách sử dụng every và some các phương thức mảng hoàn toàn giống nhau. Chúng có cùng một bộ tham số và những tham số đó cũng có nghĩa giống hệt nhau. Vì vậy, rất dễ dàng để tìm hiểu chúng cùng một lúc.

Chúng ta đã làm việc với tham số đầu tiên của các phương thức này là một hàm. Chúng tôi gọi chức năng này Thuộc tính.

Trong khoa học máy tính, một Thuộc tính là một hàm của một tập hợp các tham số trả về boolean dưới dạng câu trả lời. JavaScript xử lý chức năng chúng tôi cung cấp cho every/some như một Thuộc tính. Chúng ta có thể trả về bất kỳ loại giá trị nào mà chúng ta muốn, nhưng những giá trị đó được coi là Boolean, vì vậy người ta thường gọi hàm này là một vị ngữ.

Họ cũng có một tham số thứ 2 tùy chọn để kiểm soát this bên trong các vị từ không phải là mũi tên. Chúng ta gọi nó thisArg.

Vì vậy, bạn có thể gọi các phương thức này theo các cách sau:

arr.every(predicate)
arr.every(predicate, thisArg)

arr.some(predicate)
arr.some(predicate, thisArg)

Hãy xem predicate và tùy chọn thisArg chi tiết dưới đây.

2.1predicate#

Thông qua predicate, every/some không chỉ cho phép chúng ta truy cập vào phần tử mảng hiện tại mà còn cả chỉ mục của nó và mảng ban đầu thông qua các tham số của nó như bên dưới:

• tham số thứ nhất: Phần tử mảng hiện tại.
• tham số thứ 2: Chỉ số của phần tử hiện tại.
• tham số thứ 3: Chính mảng mà trên đó every/some được gọi là.

Chúng ta chỉ thấy tham số đầu tiên hoạt động trong các ví dụ trước đó. Hãy nắm bắt chỉ số và mảng bằng cách xác định thêm hai tham số. Lần này, giả sử chúng ta có một số dữ liệu về Áo phông để kiểm tra xem tất cả chúng có freeCodeCampe Logo:

let tshirts = [
  { size: "S", color: "black", logo: "freeCodeCamp" },
  { size: "S", color: "white", logo: "freeCodeCamp" },
  { size: "S", color: "teal",  logo: "freeCodeCamp" },
  { size: "M", color: "black", logo: "freeCodeCamp" },
  { size: "M", color: "white", logo: "freeCodeCamp" },
  { size: "M", color: "teal",  logo: "freeCodeCamp" },
  { size: "L", color: "black", logo: "freeCodeCamp" },
  { size: "L", color: "white", logo: "freeCodeCamp" },
  { size: "L", color: "teal",  logo: "freeCodeCamp" },
];

tshirts.every((item, i, arr) => {
  console.log(i);
  console.log(arr);
  return item.logo == "freeCodeCamp";
})

Hãy thử điều này trong bảng điều khiển của bạn để xem đầu ra. Và đừng quên chơi xung quanh với some quá.

2.2Không bắt buộc thisArg#

Nếu trong bất kỳ trường hợp nào bạn cần phải có một this giá trị bên trong vị từ của bạn, bạn có thể đặt giá trị đó bằng thisArg. Lưu ý rằng chỉ áp dụng cho các vị từ không phải là mũi tên vì các hàm mũi tên không có this ràng buộc.

Nếu bạn bỏ qua lập luận này, this bên trong vị từ (chức năng không mũi tên) hoạt động như bình thường, đó là:

• Ở chế độ nghiêm ngặt this Là undefined.
• Trong chế độ cẩu thả this là đối tượng toàn cầu đó là window trong trình duyệt và global trong Nút.

Tôi không thể nghĩ ra bất kỳ trường hợp sử dụng tốt nào của thisArg. Nhưng tôi nghĩ thật tốt khi nó tồn tại vì bây giờ bạn có quyền kiểm soát this bên trong vị ngữ của bạn. Vì vậy, ngay cả khi một ngày nào đó cần đến nó, bạn sẽ biết rằng sẽ có cách.

Nếu bạn có bất kỳ ý tưởng tốt cho việc sử dụng thisArgvui lòng cho tôi biết trên Twitter 🙂

3Vỏ cạnh cho every và some#

3.1Chuyện gì xảy ra khi every và some được gọi trên một mảng trống?#

Đôi khi mảng bạn muốn kiểm tra có thể trống. Ví dụ: bạn đã tìm nạp một mảng từ API và mảng này có thể có số lượng phần tử tùy ý tại các thời điểm khác nhau, bao gồm cả số không.

Đối với trường hợp của every một true giá trị trả lại có thể có nghĩa là hai điều:

• Nếu mảng có nhiều hơn 0 phần tử thì tất cả các phần tử của mảng đều thỏa mãn điều kiện.
• Mảng không có phần tử.

Vì vậy, nếu chúng ta muốn, chúng ta có thể làm những điều điên rồ bên trong vị từ như dưới đây:

const myCatsBankAccounts = [];
myCatsBankAccounts.every(account => account.balance > elonMusk.totalWealth)

Và vẫn nhận được true làm giá trị trả về!

Nếu mảng trống, JavaScript sẽ trả về trực tiếp true mà không có bất kỳ cuộc gọi đến vị ngữ.

Đó là bởi vì trong logic, bạn có thể nói bất cứ điều gì về các phần tử của một tập hợp rỗng và điều đó được coi là đúng hay chính xác hơn là đúng một cách trống rỗng. Logic như vậy có vẻ vô nghĩa trong sử dụng hàng ngày nhưng đó là cách logic hoạt động. Đọc trang wiki được liên kết ở trên để biết thêm về nó.

Vì vậy, nếu bạn nhận được true là giá trị trả về của every bạn nên biết rằng mảng có thể trống.

some mặt khác, trực tiếp trả lại false trên các mảng trống mà không có bất kỳ lệnh gọi nào đến predicate và không có bất kỳ sự kỳ lạ nào.

3.2Các phần tử không tồn tại bị bỏ qua#

Nếu mảng của bạn có lỗ hổng như bên dưới, chúng sẽ bị bỏ qua bởi every/some:

const myUntiddyArry = [1,,,3,,42];

3.3Thay đổi mảng trong vị ngữ #

Tôi sẽ không thảo luận về trường hợp này ở đây, bởi vì việc thay đổi mảng ban đầu trong hầu hết các trường hợp chỉ làm phức tạp thêm mọi thứ và tạo thêm chỗ cho lỗi.

Nếu bạn thực sự cần hoặc quan tâm, vui lòng đọc ghi chú trong thông số kỹ thuật để biết chi tiết.

4Thử thách dành cho bạn#

Thể hiện every với some và some với every trong JavaScript.

Tôi hy vọng bạn cũng sẽ cảm nhận được niềm vui và sự ngạc nhiên to lớn mà tôi có được khi khám phá ra mối quan hệ này!

const myEvery = (arr, predicate) => !arr.some(e => !predicate(e));

const mySome = (arr, predicate) => !arr.every(e => !predicate(e));

Cảm ơn vì đã đọc! Tôi hy vọng bài viết này hữu ích. Kiểm tra các bài viết khác của tôi ở đây. Hãy kết nối trên Twitter.