javascript-10-dieu-hay-ho

Top 10 điều hay ho khi làm việc Javascript Array

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

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()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 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ứ
Ù uôi, lắm chiêu trò thế!

11. Tham khảo



Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *