Xử lý array trong Javascript thật dễ dàng với các methods này

Kiểu dữ liệu Array trong Javascript rất hữu dụng, thường áp dụng vào các công việc thực tế rất là nhiều. Vì thế có rất nhiều hàm (methods) trong Javascript dùng để xử lý array. Trong bài viết này, cùng mình tìm hiểu các hàm xử lý array phổ biến nhé.

Trong bài này mình sẽ lướt qua nhanh vì có rất nhiều methods xử lý array. Cho nên các bạn có thể xem video cho chi tiết và trực quan nhất nhé.

Còn không thì… let’s goooooo

Các hàm để xử lý mảng

Hàm kiểm tra kiểu mảng

Array.isArray("string") // false
Array.isArray([1, 2, 3]) // true

Hàm để thêm phần tử

Về lý thuyết thì có 2 hàm dùng để thêm phần tử đó là push() và unshift()

• push() dùng để thêm ở cuối mảng
• unshift() dùng để thêm ở đầu mảng

let arr = [1, 2, 3]
arr.push(4) // [1, 2, 3, 4]
arr.push(5, 6) // [1, 2, 3, 4, 5, 6]
arr.unshift(0) // [0, 1, 2, 3, 4, 5, 6]

Hàm để xóa phần tử

Chúng ta có 2 hàm để xóa đó là pop() và shift().

• pop() dùng để xóa cuối mảng
• shift() dùng để xóa đầu mảng

let arr = [1, 2, 3]
arr.pop()
console.log(arr) // [1, 2]
arr.shift()
console.log(arr) // [2]

Hàm splice(start, deleteCount, item1, item2, …)

Đối với mình, hàm này khá hữu dụng, có thể thêm, sửa, xóa phần tử trong mảng.

let arr = [1, 2, 3, 4, 5]
// xóa 1 item từ vị trí 0
arr.splice(0, 1)
console.log(arr) // [2, 3, 4, 5]
arr.splice(1, 2, 10, 11)
console.log(arr) // [2, 10, 11, 5]
// xóa 2 items từ vị trí 1 và thêm item 10 và 11 vào vị trí vừa xóa

Tham khảo Array.prototype.splice()

Hàm reverse()

Hàm này sẽ làm đảo ngược mảng.

let arr = [1, 2, 3]
arr.reverse()
console.log(arr) // [3, 2, 1]

Hàm slice()

Hàm này sẽ trả về 1 mảng, nhưng khác so với hàm splice() thì hàm này không làm thay đổi mảng ban đầu.

let arr = [1, 2, 3]
arr.slice(0, 2) // [1, 2]

Tham khảo Array.prototype.slice()

Hàm forEach()

Hàm này đơn giản sẽ đi qua từng phần tử trong mảng, bên trong hàm là 1 callback function.

let arr = [1, 2, 3]
arr.forEach((item) => {
	console.log(item)
})
// 1
// 2
// 3

Tham khảo Array.prototype.forEach()

Hàm map()

Hàm này cũng giống forEach() nhưng nó sẽ tạo mảng mới với kết quả được return từ callback function

const arr = [1, 2, 3, 4];
const arr2 = arr.map(x => x + 2);
console.log(arr2); // [3, 4, 5, 6]

Tham khảo Array.prototype.map()

Hàm reduce()

Đây là một trong những hàm mạnh nhất trong Javascript, nó có thể làm rất nhiều thứ như tính toán, lọc data, “xào nấu” dữ liệu…

let arr = [1, 2, 3, 4];
let sum = array.reduce((previous, currentValue) => previous + currentValue, 0);
console.log(sum); // 10

Tham khảo Array.prototype.reduce()

Hàm includes()

Hàm này cơ bản để xác định 1 phần tử có nằm trong mảng hay không.

let arr = [1, 2, 3]
arr.includes(2) // true

Hàm some()

Hàm này sẽ kiểm tra xem trong mảng có bất kì phần tử nào thỏa mãn điều kiện không.

let arr = [1, 2, 3]
arr.some(item => item === 2) // true
arr.some(item => item === 5) // false

Hàm every()

Hàm này sẽ kiểm tra xem tất cả phần tử trong mảng có thỏa mãn điều kiện không.

let arr = [1, 2, 3]
arr.every(item => item > 2) // false
arr.every(item => item > 0) // true

Hàm find()

Hàm sẽ trả về phần tử đầu tiên mà thỏa mãn điều kiện.

let arr = [10, 20, 30]
arr.find(item => item > 0) // 10
arr.find(item => item === 0) // undefined

Hàm findIndex()

Hàm sẽ trả vị trí của phần tử đầu tiên mà thỏa mãn điều kiện.

let arr = [10, 20, 30]
arr.findIndex(item => item === 10) // 0
arr.findIndex(item => item === 15) // -1

Hàm join()

Hàm này sẽ tạo một dãy chuỗi nối liền giữa các phần tử trong mảng.

let arr = [10, 20, 30]
arr.join('') // '102030'
arr.join('-') // '10-20-30'
arr.join('-=-') // '10-=-20-=-30'

Tham khảo Array.prototype.join()

Tổng kết

Có quá nhiều methods xử lý array, để mà liệt kê ra thì còn rất nhiều. Trên đây là những methods tiêu biểu, mà mình thấy được sử dụng rất nhiều.