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

Phụ lục
cac-phuong-thuc-xu-ly-mang-array-pho-bien-trong-javascript

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. Bài chia sẻ này giúp các bạn ôn lại kiến thức, hãy cùng theo dõi bài viết dưới đây cùng Devwork.

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

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 */

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 */

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. */

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 Booleantrue 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

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

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 */

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 */

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()

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()



Devwork

Devwork là Nền tảng TUYỂN DỤNG IT CẤP TỐC với mô hình kết nối Nhà tuyển dụng với mạng lưới hơn 30.000 headhunter tuyển dụng ở khắp mọi nơi.Với hơn 1800 doanh nghiệp IT tin dùng Devwork để :

  • Tối ưu chi phí
  • Tiết kiệm thời gian
  • Tăng tốc tuyển dụng tối đa
  • Đăng ký ngay Devwork trong hôm nay để tuyển dụng những tài năng ưu tú nhất.

    Tag Cloud:

    Tác giả: quyenntt

    Link chia sẻ

    Bình luận

    Bài viết liên quan

    Danh sách bài viết liên quan có thể bạn sẽ thích Xem thêm
    vai-tro-cua-cto-la-gi

    CTO là gì? Vai trò, kỹ năng của Giám đốc Công nghệ

    16:32 22/05/2025

    Vai trò của CTO ngày càng trở nên quan trọng đối với sự phát triển của doanh nghiệp côn nghệ. Bài viết từ Devwork sẽ giúp bạn hiểu rõ CTO là gì, trách nhiệm, kỹ năng cần có và lộ trình để trở thành một thủ lĩnh công nghệ thành công trong thời đại số hiện nay....

    Tấn công XSS là gì? Cách nhận biết, phân loại & phòng tránh hiệu quả

    16:06 22/05/2025

    XSS là gì và tại sao nó lại nguy hiểm đến vậy? Devwork mang đến bài viết chuyên sâu giúp bạn hiểu rõ về lỗ hổng tấn công phổ biến này, cách nhận diện và phương pháp phòng tránh hiệu quả để bảo vệ website của bạn.

    tan-cong-xss-la-gi

    Trigger là gì? 6 điều cần biết về cơ chế kích hoạt tự động

    15:24 22/05/2025

    Trigger là gì và tại sao nó lại quan trọng trong việc phát triển phần mềm hiện đại? Cùng Devwork tìm hiểu về cơ chế mạnh mẽ này - công cụ đắc lực giúp duy trì tính toàn vẹn dữ liệu và tự động hóa quy trình trong các hệ thống thông tin.

    trigger-la-gi

    Prop là gì trong ReactJS? Cách sử dụng prop để truyền dữ liệu

    16:11 21/05/2025

    Prop là gì trong ReactJS luôn là câu hỏi cơ bản nhưng quan trọng đối với mọi lập trình viên khi bắt đầu với thư viện này. Việc nắm vững các khái niệm nền tảng như props sẽ giúp bạn phát triển ứng dụng React một cách hiệu quả và chuyên nghiệp. Hãy cùng tìm hiểu chi tiết về cơ chế truyền dữ liệu quan trọng này trong bài viết sau.

    prop-la-gi-trong-reactjs
    authentication-la-gi

    Authentication là gì? 5 phương pháp bảo mật hiệu quả nhất hiện nay

    16:01 21/05/2025

    Authentication là gì và tại sao nó lại đóng vai trò quan trọng trong thế giới số hóa ngày nay? Cùng Devwork tìm hiểu chi tiết về các phương pháp xác thực và cách triển khai hiệu quả để bảo vệ dữ liệu của bạn.

    elasticsearch-la-gi

    Elasticsearch là gì? Khái niệm, ứng dụng và cách sử dụng cơ bản

    15:52 21/05/2025

    Elasticsearch là gì? Một công nghệ đang thay đổi cách doanh nghiệp quản lý và khai thác dữ liệu. Bài viết của Devwork sẽ giúp bạn hiểu rõ về công cụ mạnh mẽ này, từ cơ chế hoạt động đến các ứng dụng thực tế và hướng dẫn triển khai. Khám phá ngay để nâng cao hiệu suất hệ thống của bạn!