HomeLập trìnhJavaScriptCác phương pháp...

Các phương pháp JavaScript này sẽ nâng cao kỹ năng của bạn chỉ sau vài phút


Hầu hết các ứng dụng chúng tôi xây dựng ngày nay đều yêu cầu một số loại sửa đổi thu thập dữ liệu. Xử lý các mục trong một bộ sưu tập là một hoạt động phổ biến mà bạn rất có thể sẽ gặp phải. Quên cách làm thông thường for-loop Thích (let i=0; i < value.length; i++ ).

Cảnh báo nhanh, sử dụng const Trong for-loop sẽ cung cấp cho bạn một lỗi. Lý do là vì nó khai báo lại giá trị trong mỗi lần thực hiện do đó i được sửa đổi bởi i++. Vì vậy, bất cứ khi nào bạn nghĩ đến việc sử dụng const hoặc let, hãy tự hỏi — Giá trị này có được khai báo lại không? Nếu câu trả lời là Vângđi let và nếu khôngđi const. Thêm thông tin.

Giả sử bạn muốn hiển thị danh sách sản phẩm và phân loại, lọc, tìm kiếm, sửa đổi hoặc cập nhật bộ sưu tập. Hoặc có thể bạn muốn thực hiện các phép tính nhanh như tổng, nhân, v.v. cách tối ưu để đạt được điều này là gì?

Có thể bạn không thích chức năng mũi tên, bạn không muốn dành quá nhiều thời gian để học một cái gì đó mới hoặc chúng không phù hợp với bạn. Đừng lo lắng, bạn không đơn độc đâu. Tôi sẽ chỉ cho bạn cách nó được thực hiện trong ES5 (chức năng giảm tốc) và ES6 (chức năng mũi tên).

Hãy nhận biết: Hàm mũi tên và khai báo/biểu thức hàm không tương đương và không thể thay thế một cách mù quáng. Hãy ghi nhớ rằng this từ khóa hoạt động khác nhau giữa hai.

Các phương pháp chúng ta sẽ xem xét:

  1. Toán tử trải rộng
  2. cho…của iterator
  3. bao gồm()
  4. một số()
  5. mọi()
  6. lọc()
  7. bản đồ()
  8. giảm()

Nếu bạn muốn trở thành nhà phát triển web giỏi hơn, bắt đầu công việc kinh doanh của riêng mình, dạy người khác hoặc cải thiện kỹ năng phát triển của mình, tôi sẽ đăng các mẹo và thủ thuật hàng tuần về các ngôn ngữ phát triển web mới nhất.

1. Toán tử trải rộng

Toán tử lây lan mở rộng mảng thành các phần tử của nó. Nó cũng có thể được sử dụng cho đối tượng chữ.

Đọc thêm  Hướng dẫn trực quan để hiểu dấu “=” Đăng nhập JavaScript

Tại sao tôi nên sử dụng nó?

  • Đó là một cách đơn giản và nhanh chóng để hiển thị các mục của một mảng
  • Nó hoạt động cho mảng và đối tượng chữ
  • Đó là một cách nhanh chóng và trực quan để chuyển đối số
  • Nó chỉ yêu cầu ba dấu chấm…

Ví dụ:
Giả sử bạn muốn hiển thị danh sách các món ăn yêu thích mà không cần tạo hàm vòng lặp. Sử dụng toán tử trải rộng như thế này:

1*NPgk0vqyWiXXkNDPMbxujA

2. cho…của iterator

Các for...of vòng lặp/lặp lại câu lệnh thông qua bộ sưu tập và cung cấp cho bạn khả năng sửa đổi các mục cụ thể. Nó thay thế cách làm thông thường for-loop.

Tại sao tôi nên sử dụng nó?

  • Đó là một cách đơn giản để thêm hoặc cập nhật một mục
  • Để thực hiện các phép tính (tổng, nhân, v.v.)
  • Khi sử dụng các câu điều kiện (if, while, switch, v.v.)
  • Dẫn đến mã sạch và dễ đọc

Ví dụ:
Giả sử bạn có một hộp công cụ và bạn muốn hiển thị tất cả các công cụ bên trong hộp. Các for...of iterator làm cho nó dễ dàng.

1*kjQYvjeeHUuP8inZYqjJVg
cho…của nhà điều hành

3. Phương thức bao gồm()

Các includes() phương thức được sử dụng để kiểm tra xem một chuỗi cụ thể có tồn tại trong một bộ sưu tập hay không và trả về true hoặc false. Hãy nhớ rằng nó phân biệt chữ hoa chữ thường: nếu mục bên trong bộ sưu tập là SCHOOLvà bạn tìm kiếm schoolnó sẽ trở lại false.

Tại sao tôi nên sử dụng nó?

  • Để xây dựng chức năng tìm kiếm đơn giản
  • Đó là một cách tiếp cận trực quan để xác định xem một chuỗi có tồn tại hay không
  • Nó sử dụng các câu điều kiện để sửa đổi, lọc, v.v.
  • Dẫn đến mã có thể đọc được
Đọc thêm  Hai cách để xác nhận kết thúc của Chuỗi trong JavaScript

Ví dụ:
Giả sử vì bất kỳ lý do gì mà bạn không biết mình có những chiếc xe nào trong ga ra và bạn cần một hệ thống để kiểm tra xem chiếc xe bạn muốn có tồn tại hay không. includes()để giải cứu!

1*m1InU7VDxdfpxMXuV2A1MA
phương thức bao gồm () với chức năng mũi tên

4. Phương thức Some()

Các some() phương thức kiểm tra nếu một số phần tử tồn tại trong một mảng và trả về true hoặc false. Điều này hơi giống với khái niệm về includes() phương thức, ngoại trừ đối số là một hàm chứ không phải một chuỗi.

Tại sao tôi nên sử dụng nó?

  • Nó đảm bảo một số mục vượt qua bài kiểm tra
  • Nó thực hiện các câu lệnh có điều kiện bằng cách sử dụng các hàm
  • Làm cho mã của bạn khai báo
  • Một số là đủ tốt

Ví dụ:
Giả sử bạn là chủ câu lạc bộ và không quan tâm ai vào câu lạc bộ. Nhưng một số không được phép vào, vì họ đã uống quá nhiều (sự sáng tạo của tôi là tốt nhất). Kiểm tra sự khác biệt giữa ES5 và ES6 dưới đây:

ES5:

1*-5YnlNy48wi0FHnIG3bXDg
phương thức some()

ES6:

1*pmaXrKpg5vI__WwztfATGg
phương thức some() với chức năng mũi tên

5. Phương thức Every()

Các every() phương thức lặp qua mảng, kiểm tra mọi mặt hàng và trả lại true hoặc false. Cùng một khái niệm như some(). Ngoại trừ mọi mục phải đáp ứng câu lệnh điều kiện, nếu không, nó sẽ trả về false.

Tại sao tôi nên sử dụng nó?

  • Nó đảm bảo mọi mục vượt qua bài kiểm tra
  • Bạn có thể thực hiện các câu lệnh có điều kiện bằng cách sử dụng các hàm
  • Làm cho mã của bạn khai báo

Ví dụ:
Lần cuối cùng bạn cho phép some() học sinh chưa đủ tuổi vào câu lạc bộ, ai đó đã báo cáo điều này và cảnh sát đã bắt được bạn. Lần này bạn sẽ không để điều đó xảy ra, và bạn sẽ đảm bảo rằng mọi người vượt qua giới hạn tuổi với every()nhà điều hành.

ES5

1*DNQqzRJ_K01ognj3_c8HqQ
mọi phương thức ()

ES6

1*avukLSBlIG1ycSzoHLMOYA
phương thức every() với chức năng mũi tên

6. Phương thức lọc()

Các filter() phương thức tạo một mảng mới với tất cả các phần tử vượt qua bài kiểm tra.

Tại sao tôi nên sử dụng nó?

  • Vì vậy, bạn có thể tránh thay đổi mảng chính
  • Nó cho phép bạn lọc ra các mục bạn không cần
  • Cung cấp cho bạn mã dễ đọc hơn
Đọc thêm  JavaScript đã hoàn thành Turing— Giải thích

Ví dụ:
Giả sử bạn chỉ muốn trả lại giá cao hơn hoặc bằng 30. Lọc ra tất cả các giá khác đó…

ES5

1*O9EhGZRxC1DWan0822fKvQ
phương thức lọc()

ES6

1*1C22z5zvw_Gw_SiJnLuTig
phương thức filter() với chức năng mũi tên

7. Phương thức Map()

Các map() phương pháp tương tự như filter() phương thức về mặt trả về một mảng mới. Tuy nhiên, sự khác biệt duy nhất là nó được sử dụng để sửa đổi các mục.

Tại sao tôi nên sử dụng nó?

  • Nó cho phép bạn tránh thay đổi mảng chính
  • Bạn có thể sửa đổi các mục bạn muốn
  • Cung cấp cho bạn mã dễ đọc hơn

Ví dụ:
Giả sử bạn có một danh sách các sản phẩm có giá. Người quản lý của bạn cần một danh sách để hiển thị giá mới sau khi chúng đã bị đánh thuế 25%. Các map() phương pháp có thể giúp bạn ra ngoài.

ES5

1*iIOcN4rc6r-55YWrHQVNHw
phương thức map()

ES6

1*s2ePAwDuw-qJOju7WAm9Uw
phương thức map() với chức năng mũi tên

8. Phương thức rút gọn()

Các reduce() có thể được sử dụng để chuyển đổi một mảng thành một thứ khác, có thể là một số nguyên, một đối tượng, một chuỗi lời hứa (thực hiện tuần tự các lời hứa), v.v. Vì những lý do thực tế, một trường hợp sử dụng đơn giản sẽ là tính tổng một danh sách các số nguyên. Nói tóm lại, nó “giảm” toàn bộ mảng thành một giá trị.

Tại sao tôi nên sử dụng nó?

  • Thực hiện phép tính
  • Tính một giá trị
  • Đếm trùng lặp
  • Nhóm các đối tượng theo thuộc tính
  • Thực hiện lời hứa tuần tự
  • Đó là một cách nhanh chóng để thực hiện các phép tính

Ví dụ:
Giả sử bạn muốn biết tổng chi phí của mình trong một tuần. Sử dụng reduce() để có được giá trị đó.

ES5

1*OX1oPjVVoPXfIsAqHD3TTQ
phương pháp giảm ()

ES6

1*DGa7HZwy40o71B4_ICP6kQ
phương thức reduce() với chức năng mũi tên

Bạn có thể tìm thấy tôi trên Tin tức dành cho nhà phát triển nơi tôi xuất bản hàng tuần. Hoặc bạn có thể theo dõi tôi trên Twitternơi tôi đăng các mẹo và thủ thuật phát triển web có liên quan.





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status