Hầu hết các ứng dụng chúng ta xây dựng hằng ngày đều yêu cầu thu thập, sửa đổi dữ liệu. Xử lý các item trong một mảng là một hoạt động phổ biến nhất mà bạn sẽ gặp phải. Hãy quên cách thông thường để làm for-loop như (let i; i < arr.length; i++).
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 một collection. Hoặc có lẽ bạn muốn làm các phép tính nhanh như phép tính tổng, phép nhân... Cách tối ưu để đạt được điều này là gì?
Có lẽ bạn không thích arrow functons, bạn không muốn dành thời gian để học một vài điều mới hoặc những điều đó không thích hợp với bạn. Đừng lo lắng, tôi sẽ cho bạn thấy nó thưc hiện như thế nào trong ES5 (functional declaration) và ES6 (arrow functions).
Lưu ý: Arrow function và function declarations, hai biểu thức này không tương đương nhau và không thể thay thế nhau một cách "mù quáng". Hãy giữ trong '"trí nhớ" của bạn rằng từ khóa this biểu thị sự khác nhau giữa chúng.
Các phương thức chúng ta sẽ xem xét/ tìm hiểu
1. Spread operator
2. for ... of iterator
3. includes()
4. some()
5. every()
6. filter()
7. map()
8. reduce()
Nếu bạn muốn trở thành nhà phát triển web tốt hơn, bắt đầu công việc riêng của bạn, dạy những người khác hoặc cải thiện phát triển các kỹ năng của bạn. Hàng tuần tôi sẽ đăng tải các mẹo, thủ thuật về web-development.
1. Spread operator
Spread operator phân tách một mảng thành các phần tử của nó. Nó có thể được sử dụng cho các object literal.
Tại sao tôi nên sử dụng nó
- Nó đơn giản và nhanh gọn cho việc hiển thi các item trong một mảng
- Nó hoạt động cho các array và các object literal
- Là một cách nhanh chóng và trực quan để truyền các đối số
- Nó chỉ cần dùng ba dấu chấm ...
Ví dụ:
Nếu bạn muốn hiển thị một danh sách các loại thức ăn yêu thích mà không cần dùng đến vòng lặp. Sử dụng spread operator như sau:
const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs'];
console.log(...favoriteFood);
//Pizza Fries Swedish-meatballs2. for...of iterator
for...of câu lệnh vòng lặp/ lặp lại qua các collection, và cung cấp cho bạn khả năng chỉnh sửa các item chỉ định, Nó thanh thế cách thông thường để thực hiện một for-loop.
Tại sao tôi nên sử dụng nó?
- Nó rất đơn giản để thêm hay update một item
- Biểu diễn các phép tính (phép tính tổng, phép tính nhân...)
- Khi sử dụng các câu lệnh có điều kiện (if, while, switch)
- Ngắn gọn và dễ đọc
Ví dụ:
Giả sử bạn có một toolbox, và bạn muốn hiện ra các công cụ bên trong nó. For...of iterator dễ dàng làm được điều đó
const toolBox = ['Hammer', 'Screwdriver', 'Ruler'];
for (item of toolBox){
console.log(item);
}
// Hammer
// Screwdriver
// Ruler
.
3. Phương thức Includes()
Phương thức Includes() được sử dụng để kiểm tra một chuỗi cụ thể có tồn tại trong một collection hay không, và kết quả trả về là true hoặc false. Hãy ghi nhớ trường hợp này: nếu item bên trong collection là SCHOOL và bạn search là school thì kết quả trả về là false.
Tại sao tôi nên sử dụng nó?
- Xây dựng một chức năng search đơn giản
- Đó là cách tiếp cận trực quan để xem phần tử có tồn tại hay không
- Nó sử dụng các câu lệnh để sửa đổi, lọc...
- Dễ dàng đọc code
Ví dụ:
Giả sử, vì một lý do nào đó khiến bạn không biết có những chiếc xe nào ở trong gara 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 trong gara hay không. Includes() sẽ giúp bạn.
const garage = ['BMW', 'AUDI', 'VOLVO'];
const findCar = garage.includes('BMW');
console.log(findCar);
//true
4. Phương thức some()
Phương thức some() kiểm tra một số phần tử tồn tại trong một mảng hay không và trả về true hoặc false. Điều này hơi giống với phương thức includes() ngoại trừ đối số là một hàm chứ không phải là một chuỗi.
Tại sao tôi nên sử dụng nó?
- Nó đảm bảo một số item vượt qua điều kiện test
- Nó thực hiện các câu lệnh điều kiện bằng cách sử dụng function
- Some() đủ tốt để sử dụng
Ví dụ:
Giả sử bạn là chủ sở hữu một club và bạn muốn kiểm tra một nhóm người có thành viên nào dưới 18 tuổi hay không (không cho phép người chưa trưởng thành vào). Sử dụng some() theo hai chuẩn ES5 và ES6.
ES5
const = age = [14,16,18];
age.some (function(agePerson){
return agePerson < 18;
})
// output: true.
ES6
const age = [14,16,18];
age.some((agePerson) => agePerson <18);
//true5. Phương thức every()
Phương thức every() lặp qua mảng, kiểm tra mỗi item và trả về true hoặc false. Tương tự như cấu trúc của some() ngoại trừ mỗi item phải vượt qua điều kiện kiểm tra nếu không sẽ trả về là false.
Tại sao tôi nên sử dụng nó?
- Đảm bảo tất cả các item được kiểm tra
- Bạn có thể sử dụng trong các câu điều kiện.
Ví dụ:
Cũng giống như ví dụ ở phương thức some(). Bạn kiểm tra xem tất cả những người vào club có độ tuổi trên 18 hay không, nếu tất cả trên 18 thì được phép vào. Nếu một trong những người đó không đủ 18 tuổi thì không được phép vào.
ES5:
const age = [15,23,19];
age.every(function(agePerson){
return agePerson >=18;
})
// output: false
ES6:
const age = [15,23,19];
age.every((agePerson)=> agePerson >=18);
//false
6. Phương thức filter()
Phương thức filter() tạo ra một mảng mới gồm các phần tử của mảng ban đâu vượt qua điều kiện kiểm tra.
Tại sao tôi sử dụng nó?
- Bạn sẽ tránh được việc thay đổi giá trị của mảng chính
- Cho phép bạn "lọc" ra các phần tử mà bạn không cần
- Giúp code của bạn rõ ràng, dễ đọc
Ví dụ:
Giả sử bạn chỉ muốn lấy ra những phần tử có giá lớn hơn hoặc bằng 30. Filter() sẽ giúp bạn dễ dàng
ES5
const prices = [25, 30,15, 55, 40, 10];
prices.filter(function(price){
return price >=30;
})
// Output: [30, 55, 40]
ES6
const prices = [25, 30,15, 55, 40, 10];
prices.filter((price)=> price >=30);
// [30, 55, 40]
7. Phương thức map()
Phương thức map() giống phương thức filter() ở vấn đề là kết quả trả về là một mảng. Tuy nhiên điểm khác biệt là nó có thể chỉnh sửa các item trong mảng đó.
Tại sao tôi sử dụng nó?
- Bạn không phải chỉnh sửa, thay đổi mảng gốc
- Bạn có thể thay đổi giá trị các item nếu bạn muốn
- Giúp code của bạn rõ ràng, dễ đọc
Ví dụ:
Giả sử bạn có một danh sách các sản phầm cùng với giá của chúng. Người quản lý của bạn muốn có một danh sách để hiển thị giá mới của các sản phẩm đó sau khi bị tính thuế 25%. Phương thức map() dễ dàng giúp bạn
ES5
const productPriceList = [200, 350, 1500, 5000];
productPriceList.map(function(item){
return item * 0.75;
})
// [ 150, 262.5, 1125, 3750]
ES6
const productPriceList = [200, 350, 1500, 5000];
productPriceList.map((item)=> item * 0.75);
//[ 150, 262.5, 1125, 3750]
8. Phương thức reduce()
Phương thức reduce() lấy tổng các số trong một mảng. Nói cách khác nó "reduce" các giá trị của mảng thành một giá trị. Thường được sử dụng trong tính toán.
Tại sao tôi sử dụng nó?
- Tính tổng hoặc trung bình cộng
- Đó là cách nhanh chóng để thực hiện các phép tính
Ví dụ:
Giả sử bạn muốn tính tổng chi phí của mình trong một tuần. Reduce() sẽ được sử dụng như sau:
ES5
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350];
weeklyExpenses.reduce(function(first, last){
return first + last;
});
//8350
ES6
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350];
weeklyExpenses.reduce((first, last) => first + last);
//8350
Bài viết được dịch từ medium.freecodecamp.org
Đăng ký thực tập Web front-end tại: http://bit.ly/2GTgkky
Bình luận