Bài viết được sự cho phép của tác giả Kiên Nguyễn
Javascript array là kiểu dữ liệu cực kì phổ biến. Sử dụng Array khéo léo giúp code dễ hiểu, dễ đọc, lại vừa đỡ tốn công tốn sức. Ngoài ra, với các lập trình viên có kinh nghiệm, các method khi làm việc với array thường được sử dụng linh hoạt, uyển chuyển.
Thường mix lại như sinh tố mà uống vẫn ngon chứ không dở!. Đó chính là điều làm nên sự khác biệt giữa Senior và Junior
Tuyển dụng Javascript lương cao online
Bài viết có sử dụng một số từ khóa (keywords) khai báo biến (variables) trong Javascript (var, let, const). Nếu chưa nắm chắc, các bạn có thể tham khảo thêm qua bài viết Var, let, const – 3 quý cô xinh đẹp nhà Javascript.
1. Xóa trùng lặp (duplicate) trong array
Xóa trùng lặp là vấn đề thường gặp trong array. Có rất nhiều nguyên nhân khiến ta loại bỏ đi các giá trị trùng lặp. Do insert nhiều lần, insert trùng lặp, tính toán số lần lặp, …
Để loại bỏ trùng lặp trong Javascript array, có thể sử dụng Set() và Operator (…)
let vehicles = ['bike', 'motobike', 'car', 'airplane', 'motobike'] // Sử dụng Array from và Set let uniqueVehicle = Array.from(new Set(vehicles)); console.log(uniqueVehicle) // ['bike', 'motobike', 'car', 'airplane'] // Sử dụng Operator ... và Set let uniqueVehicle = […new Set(fruits)]; console.log(uniqueVehicle) // ['bike', 'motobike', 'car', 'airplane']
2. Sử dụng Every và Some khi có thể
Đối với hai function Every và Some thì không phải developer nào cũng biết. Tuy nhiên, sử dụng every và some có thể đặc biệt hữu ích khi thao tác với Javascript Array.
Ví dụ dưới đây kiểm tra tất cả các phần tử trong array có là số dương hay không?. Không cần sử dụng for loop nhé!
const numbers = [1, 2, 3, 4, -5]
// Kiểm tra xem tất cả các phần tử trong array đều dương
// Condition check - điều kiện kiểm tra
const isPositive = (number) => {
return number > 0
}
// Return false, do có -5 < 0
numbers.every(isPositive);
3. Cast tất cả value trong javascript array
Một array có thể có nhiều kiểu data type (String, number, float, …). Javascript lại không ràng buộc chặt chẽ data type các phần tử trong array. Chính vì thế, nếu cần kiểm tra chặt với “===”, cần cast tất cả value về cùng một kiểu
let numbers = [ '1', '5', 8 ] // Sử dụng map có thể cast toàn bộ value về kiểu chỉ định trong array numbers = numbers.map(Number) // [ 1, 5, 8 ]
4. Tạo array mới mà không sử dụng .map()
Nhắc tới method map tất nhiên sẽ có nhiều bạn đã biết. Tuy nhiên, trường hợp không muốn sử dụng .map. Vẫn còn một phương thức khác để tạo Javascript array là Array.from
Cụ thể có thể xem xét qua ví dụ dưới đây:
var fruits = [
{ kind: 'Apple', delicious: yes },
{ kind: 'Banana', delicious: yes },
{ kind: 'Avocado', delicious: no },
]
// Với array map và method reference, ta có một array như mong muốn
var fruitsArray = Array.from(fruits, ({fruit}) => fruits);
// [ 'Apple', 'Banana', 'Avocado' ]
Nếu chưa biết về method reference, có thể tham khảo qua bài Tuốt tuồn tuột về Java 8 – những thay đổi lớn!
5. Làm rỗng array – make array empty
Làm việt với javascript array tất nhiên sẽ có lúc muốn remove tất cả item trong array.
Tạo tạo quá trời rồi, giờ muốn làm cái array empty đi để sử dụng tiếp. Đơn giản nhưng không phải ai cũng biết.
var fruitsArray = ["banana", "watermelon", "grape"]; fruitsArray.length = 0; console.log(fruitsArray); // Kết quả có ngay array empty []
6. Merge các array với nhau
Dữ liệu sử dụng cho array có thể tới từ các nguồn khác nhau. Tuy nhiên, nếu muốn merge tất cả lại với nhau thì sao?. Đơn giản lắm, chỉ với vài ba dấu chấm thôi (…)
var arrayOne = [1]; var arrayTwo = [2, 3]; var arrayThree = [4, 5, 6]; // Mixing 3 array - nhớ sử dụng ... var arrayMix = […arrayOne, …arrayTwo, …arrayThree]; console.log(arrayMix); // [1, 2, 3, 4, 5, 6]
Đúng nghĩa là dùng vài ba dấu chấm phải không nào?
7. Đảo ngược array
Đã làm việc với Javascript array thì tất nhiên không thể thiếu những lúc muốn đảo ngược value. Chẳng lẽ lại dùng vòng for i– như thời xưa cổ. Không hề phải mệt công như thế.
Chỉ đơn giản sử dụng phương thức reverse(), có ngay một array sau khi đã đảo ngược. Tất nhiên, với một dòng duy nhất.
var arrayOne = [1]; var arrayTwo = [2, 3]; var arrayThree = [4, 5, 6]; // Mixing 3 array - nhớ sử dụng ... var arrayMix = […arrayOne, …arrayTwo, …arrayThree]; console.log(arrayMix); // [1, 2, 3, 4, 5, 6]
8. Tổng các phần tử trong array
Tiêu đề đơn giản, bài toán đơn giản, nhưng đôi khi lại là câu hỏi phỏng vấn javascript core. Chỉ implement với một dòng duy nhất.
Anh em biết sử dụng gì không?. Đáp án là reduce!
var numArrayToSum = [1, 2, 3] // Sử dụng reduce để tính tổng array var sum = nums.reduce((x, y) => x + y); console.log(sum); // 6
Nhớ sử dụng nha, kẻo lại viết loằng ngoằng tốn thời gian
9. Phương thức .lastIndexOf()
Nếu array có các phần tử trùng lặp với nhau, remove duplicate thì đã đành. Nhưng nếu remove đi thì sao tìm được index.
Trong khi bài toán lại yêu cầu tìm index của giá trị đó trong array?. Ô la, có ngay method lastIndexOf(). Xem xét ví dụ dưới đây:
var nums = [4, 5, 1, 6, 1]; var lastIndexOfOne = nums.lastIndexOf(1); console.log(lastIndexOfOne); // 5 - tìm ra ngay index của 1 trong array - cuối cùng
10. Tạo mock javascript array data
Trường hợp muốn khởi tạo mock data array, hoặc tính toán cộng trừ nhân chia gì đó. Ta muốn fill một loạt 10 quả táo trong array?, có ngay fill method. Muốn bao nhiêu cũng có
var appleArray = new Array(3).fill("Apple");
console.log(appleArray);
// ['Apple', 'Apple', 'Apple'] - khá tiện lợi chứ
11. Tham khảo
- Working with array in Javascript – DigitalOcean
- Practical Ways to Write Better JavaScript – Stackoverflow Blog
- Javascript array method – Github
Cảm ơn anh em đã đọc bài, nhớ like facebook page để không bỏ lỡ bài viết hay nha!
Bài viết gốc được đăng tải tại kieblog.vn
Có thể bạn quan tâm:
- Javascript empty array – đừng gán [] thêm một lần nào nữa
- 3 tips làm việc với JavaScript giúp bạn tiết kiệm thời gian
- 10 tip tối ưu code trên JavaScript mà web developer nào cũng nên biết
Xem thêm Việc làm it hcm, đà nẵng, hà nội hấp dẫn trên TopDev
