Các phương thức xử lý mảng (Array) phổ biến trong JavaScript

Xin chào các bạn, tips về CSS nhiều rồi hôm nay ta đổi gió một chút với JavaScript. Chủ đề hôm nay mình muốn chia sẻ đó là "Các phương thức xử lý mảng (Array) phổ biến trong JavaScript". Những method này chắc chắn bạn sẽ sử dụng rất nhiều khi làm việc với JavaScript và các framework của nó.

Bài chia sẻ này một phần giúp các bạn mới học nắm chắc kiến thức hơn, một phần cũng là để mình ôn lại kiến thức (chủ yếu để mình có nguồn tìm kiếm mỗi khi code ngáo ) ta bắt đầu thôi

1. concat()

concat() dùng để nối 2 hay nhiều mảng với nhau

• concat() KHÔNG làm thay đổi mảng ban đầu
• concat() trả về 1 mảng mới sau khi nối

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = array1.concat(array2);

console.log(array3); // > Array ["a", "b", "c", "d", "e", "f"]
console.log(array1); // > Array ["a", "b", "c"]
console.log(array2); // > Array ["d", "e", "f"]

Cú pháp

var newArray = oldArray.concat(value1[, value2[, ...[, valueN]]])

// valueN: Các giá trị hay mảng dùng để nối lại với nhau trong mảng mới

2. filter()

filter() dùng để lọc ra các phần tử trong mảng thoả mãn một điều kiện nào đó

• filter() KHÔNG làm thay đổi mảng ban đầu
• filter() trả về 1 mảng mới sau khi lọc
• filter() trả về một mảng RỖNG nếu không có phần tử nào thỏa mãn điều kiện

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
var result = words.filter(function(word) {
  return word.length > 6;
});

console.log(result); // > Array ["exuberant", "destruction", "present"]
console.log(words);  // > Array ["spray", "limit", "elite", "exuberant", "destruction", "present"]

Cú pháp

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

/* callback: Là hàm test, dùng để kiểm tra từng phần tử của mảng.
  Trả về true để giữ lại phần tử, hoặc false để loại phần tử ra.
  Nó được gọi với 3 tham số: */
  
  // element: Phần tử đang được xử lý trong mảng
  // index (không bắt buộc): Chỉ mục (index) của phần tử đang được xử lý
  // array (không bắt buộc): Mảng nguồn mà hàm filter() đang xử lý

/* thisArg (không bắt buộc): Giá trị của this bên trong hàm callback */

3. find()

find() cũng dùng để lọc phần tử trong mảng, tuy nhiên nó sẽ trả về giá trị ĐẦU TIÊN tìm thấy ở trong mảng hoặc có thể trả về undefined nếu không tìm thấy

• find() KHÔNG làm thay đổi mảng ban đầu

var array = [5, 12, 8, 130, 44];
var found = array.find(function(element) {
  return element > 10;
});

console.log(found); // > 12
console.log(array); // > Array [5, 12, 8, 130, 44]

Cú pháp

arr.find(callback(element[, index[, array]])[, thisArg])

/* callback: Hàm thực thi với mỗi giá trị trong mảng,
  có 3 tham số truyền vào: */
  
  // element: Phần tử hiện tại đang được xử lý trong mảng
  // index (không bắt buộc): Thứ tự của phần tử hiện tại đang được xử lý trong mảng
  // array (không bắt buộc): Mảng nguồn mà hàm find() đang xử lý

/* thisArg (không bắt buộc): Đối tượng tùy chọn để
  sử dụng như thế nào khi thực hiện callback */

4. forEach()

forEach() dùng để duyệt qua từng phần tử của mảng

• forEach() trả về undefined

var array = ['a', 'b', 'c'];

array.forEach(function(element) {
  console.log(element);
});

// > "a"
// > "b"
// > "c"

console.log(array); // > Array ["a", "b", "c"]

Cú pháp

arr.forEach(function callback(currentValue[, index[, array]]) {
    // your iterator
}[, thisArg]);

/* callback: Hàm sẽ thực thi lên từng phần tử của mảng được gọi
  hàm này nhận 3 tham số: */
  
  // currentValue (không bắt buộc): Giá trị của phần tử đang được duyệt
  // index (không bắt buộc): Chỉ mục của phần tử đang được duyệt
  // array (không bắt buộc): Mảng mà hàm forEach() đang duyệt
  
/* thisArg (không bắt buộc): Giá trị được gán cho từ khóa this
  bên trong hàm callback khi được thực thi. */

5. includes()

Đây là method mới trong ES6

includes() kiểm tra xem phần tử đã cho có tồn tại trong mảng hay không

• includes() KHÔNG làm thay đổi mảng ban đầu
• includes() trả về kiểu Boolean: true nếu tìm thấy hoặc false nếu không tìm thấy

var array = [1, 2, 3];

console.log(array.includes(2)); // > true
console.log(array);             // > Array [1, 2, 3]

Cú pháp

arr.includes(valueToFind[, fromIndex])

// valueToFind: Giá trị muốn kiểm tra.
// fromIndex (không bắt buộc): Vị trí trong mảng để bắt đầu tìm kiếm valueToFind

6. indexOf()

indexOf() dùng để tìm kiếm vị trí của phần tử trong mảng

• indexOf() KHÔNG làm thay đổi mảng ban đầu
• indexOf() trả về giá trị index ĐẦU TIÊN của mảng nếu phần tử tồn tại trong mảng
• indexOf() trả về -1 nếu phần tử không tồn tại trong mảng

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));    // > 1
console.log(beasts.indexOf('bison', 2)); // > 4
console.log(beasts.indexOf('giraffe'));  // > -1
console.log(beasts);                     // > Array ["ant", "bison", "camel", "duck", "bison"]

Cú pháp

arr.indexOf(searchElement[, fromIndex])

// searchElement: Phần tử cần tìm trong mảng.
// fromIndex (không bắt buộc): Vị trí index nơi bắt đầu tìm kiếm

7. join()

join() dùng để tạo ra một chuỗi mới bằng cách nối tất cả các phần tử của mảng, mặc định ngăn cách chúng bởi dấu phẩy hoặc một chuỗi ký tự xác định.

• join() KHÔNG làm thay đổi mảng ban đầu
• join() trả về chính phần tử nếu mảng chỉ có một phần tử
• join() trả về một chuỗi rỗng "" nếu arr.length === 0

var elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());    // > "Fire,Air,Water"
console.log(elements.join(''));  // > "FireAirWater"
console.log(elements.join('-')); // > "Fire-Air-Water"
console.log(elements);           // > Array ["Fire", "Air", "Water"]

Cú pháp

arr.join([separator])

/* separator (không bắt buộc): Là một chuỗi xác định
  dùng để ngăn cách các phần tử liền kề của mảng */

8. map()

map() giúp tạo ra một mảng mới với các phần tử là kết quả từ việc thực thi một hàm lên TỪNG PHẦN TỬ của mảng ban đầu

• map() KHÔNG làm thay đổi mảng ban đầu

var array = [1, 4, 9, 16];

var map = array.map(function(item) {
  return item * item;
});

console.log(map);   // > Array [1, 16, 81, 256]
console.log(array); // > Array [1, 4, 9, 16]

Cú pháp

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])


/* callback: Hàm để tạo ra phần tử cho mảng mới,
  nhận vào 3 tham số: */

  // currentValue: Giá trị của phần tử trong mảng đang được xử lý
  // index (không bắt buộc): Index của phần tử trong mảng đang được xử lý
  // array (không bắt buộc): Mảng đang được gọi với map
  
/* thisArg (không bắt buộc): Giá trị gán cho từ khóa this bên trong callback */

9. pop()

pop() dùng để xoá phần tử cuối cùng ra khỏi mảng

• pop() CÓ làm thay đổi mảng ban đầu
• pop() trả về phần tử đã bị xoá ra khỏi mảng
• pop() trả về undefined nếu mảng rỗng

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop()); // > "tomato"
console.log(plants);       // > Array ["broccoli", "cauliflower", "cabbage", "kale"]

Cú pháp

arr.pop()

10. shift()

Trái ngược với pop() là shift()

shift() dùng để xoá phần tử đầu tiên ra khỏi mảng

• shift() CÓ làm thay đổi mảng ban đầu
• shift() trả về phần tử đã bị xoá ra khỏi mảng
• shift() trả về undefined nếu mảng rỗng

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.shift()); // > "broccoli"
console.log(plants);         // > Array ["cauliflower", "cabbage", "kale", "tomato"]

Cú pháp

arr.shift()

Tạm kết

Bài viết có vẻ đã đủ dài, mình xin tạm dừng ở đây để tránh cảm giác chán nản khi xung quanh toàn là chữ

À có một note nhỏ đó là lại sao mỗi method mình đều chỉ ra phương thức là trả về cái gì ? nó có làm thay đổi array gốc không ? Các bạn hãy thật chú ý nhé, vì sau này khi làm việc với dữ liệu sẽ rất quan trọng các vấn đề này, khi bạn kiểm soát tốt dữ liệu, output của method bạn sẽ biết chính xác khi nào cần dùng method nào để thỉnh thoảng không bị ngáo như mình

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !

Hẹn gặp lại ở part 2 nhé !