Learn JavaScript Array Methods in just 8 Minutes!!

1. ITERATION METHOD

Có 4 loại Iteration method (Phương thức lặp)

• Examination Methods : Quan sát lắng nghe nội dung của mảng.
• Transformation Methods : Chuyển đổi sang mảng mới từ mảng đầu vào.
• Reduction Methods : Tính toán dựa trên phần tử mảng đầu vào.
• From Loops : Mảng lặp từ vòng lặp.

1.1 Examination Methods

1.1.1 Array.forEach(callback, thisValue?)

• Phương thức forEach() sẽ thực thi một hàm khi duyệt qua từng phần tử của mảng.
• thisValue | optional : Giá trị được gán cho từ khóa this bên trong hàm callback khi được thực thi.

Example:

var array = ['1', '2', '3', '4', '5'];

array.forEach(function(element) {
  console.log(element); /// [1, 2, 3, 4, 5]
});

1.1.2 Array.every(callback, thisValue?)

• Hàm every có chức sử dụng tất cả các phần tử của mảng để kiểm tra hoặc thực hiện một chức năng nào đó.
• Thực chất hàm every có tác dụng gần giống với việc sử dụng vòng lặp để lặp qua tất cả các phần tử của mảng.
• Mỗi phương thức xử lý trong hàm every sẽ thực hiện một lần với lần lượt tất cả các phẩn tử trong mảng,
• Nếu có một phần tử của mảng không thỏa mãn phương thức của hàm every và trả về false, hàm every đó sẽ trả về false. Nếu không có lỗi xảy ra hàm every sẽ trả về true. Example:

function isEven(x) {
  return x % 2 === 0;
}

const evenNum = [2, 4, 6].every(isEven)
console.log(evenNum) /// true

const notEvenNum = [2, 3, 4].every(isEven)
console.log(notEvenNum) /// false

1.1.3 Array.some(callback, thisValue?)

• Phương thức some() kiểm tra xem có ít nhất một phần tử của mảng thoả điều kiện ở hàm được truyền vào hay không. Kết quả trả về có kiểu Boolean.
• Chú ý: : Phương thức này sẽ trả về false nếu mảng rỗng.

Example:

function isEven(x) {
  return x % 2 === 0;
}

const evenNum = [2, 3, 7].some(isEven)
console.log(evenNum) /// true

const notEvenNum = [1, 3, 5].some(isEven)
console.log(notEvenNum) /// false

1.2. Transformation Methods

1.2.1 Array.map(callback, thisValue?) Copy while giving new values to elements.

• Hàm map() trong Javascript là một hàm dành cho đối tượng array, hàm này có công dụng tương tự như vòng lăp forEach.
• Hàm map() sẽ lặp qua từng phần tử và tham số truyền vào là một anonymous function, hàm anonymous sẽ có một tham số truyền vào và đó chính là phần tử của mỗi vòng lặp, bên trong thân hàm anonymouse sẽ có lệnh return về một giá trị và giá trị này sẽ thay thế cho phần tử đó.

Example:

const numbers = [1, 2, 3, 4, 5];
const multiply = value => value * 2;

const copy = numbers.map(multiply);

console.log(copy); /// [2, 4, 6, 8, 10]
console.log(numbers); /// [1, 2, 3, 4, 5]

1.2.2 Array.filter(callback, thisValue?) : Only keep some of the elements.

• Hàm filter() trong Javascript có công dụng đúng ý nghĩa với tên gọi của nó.
• Hàm filter() được tích hơp sẵn trong đối tượng mảng giống như hàm map. Về cách thức hoạt động thì nó giống hàm map, nghĩa là nó sẽ có một tham số dạng function và function này sẽ xử lý cho mỗi lần lặp, nếu function return true thì phần tử lần lặp đó được chấp nhận, ngược lại sẽ không được chấp nhận.

Example:

const numbers = [1, 2, 3, 4, 5];
const test = value => value > 3;

const copy = numbers.filter(test);

console.log(copy); /// [4, 5]
console.log(numbers); /// [1, 2, 3, 4, 5]

1.3. Reduction Methods

1.3.1 Array.reduce(callback, initialValue?) : deriving a value from an Array

• Hàm reduce sẽ biến đổi một mảng thành một giá trị đơn giản.
• Hàm reduce sẽ thực hiện một hàm được cung cấp cho mỗi giá trị của mảng, từ trái qua phải.
• Hàm sẽ trả về một kết quả được lưu trữ( tổng số hoặc kết quả tính toàn).
• Hàm reduce sẽ không thực hiện hàm được cung cấp đối với các phần tử không có giá trị.

1.4. Iterating Arrays from Loops

1.4.1 For Loops

• Vòng lặp for là 1 trong những vòng lặp cơ bản để lặp qua mảng

const array = [1, 2, 3, 4, 5];

for (let i=1; i < array.length; i++) {
    console.log(i) /// 1, 2, 3, 4, 5
}

1.4.2 While Loops

• Vòng lặp while sẽ lặp đến khi nào điệu kiện vẫn đúng, sẽ dừng lại nếu điều kiện sai.
• Vòng lặp dưới đây sử dụng while, trong mỗi lần lặp nó sẽ loại bỏ phần tử đầu tiên của mảng bằng .shift() và ghi lại nó.

Example:

const array = [1, 2, 3];

while(array.length > 0) {
    const lem = array.shift();
    console.log(array) /// 1, 2, 3
}

1.4.3 Do-while Loops

• Khác một chút so vói vòng lặpwhile là vòng lặp do while sẽ thực hiện đoạn code bên trong lệnh do mới kiểm tra điều kiện.

var result = "";
var i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// expected result: "12345"

2. ARRAY CONSTRUCTOR METHODS :

2.1 Array.isArray(object)

• Array.isArray() là một phương thức để xác định liệu giá trị truyền vào có phải là một mảng kiểu Array.

Example:

const array = [1, 2, 3];
const obj = {};

console.log(Array.isArray(array)) // true
console.log(Array.isArray(obj)) // false

3. ARRAY PROTOTYPE METHODS :

Chúng được nhóm theo 2 chức năng:

• Destructive: Chúng làm thay đổi mảng mà chúng được gọi.
• Non-Destructive: Chúng không làm thay đổi mảng mà sẽ trả về mảng mới.

3.1. Destructive Methods

3.1.1 Array.shift()

• Hàm shift() sẽ xóa phần tử đầu tiên của một mảng và trả về phần tử đó.Hàm này sau khi thực thi sẽ làm thay đổi kích thước của mảng bị tác động (Chỉ số của các phần tử tiếp theo bị giảm đi 1).

Example:

const array = ['a', 'b', 'c'];
const elem = array.shift();

console.log(elem) // a
console.log(array) ['b', 'c']

3.1.2 Array.unshift(elem1?, elem2?, ...)

• Phương thức unshift() thêm một hoặc nhiều phần tử vào vị trí đầu mảng sau đó trả về chiều dài của mảng mới.

Example:

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

3.1.3 Array.pop()

• Phương thức pop() xoá phần tử cuối cùng của một mảng và trả về phần tử đó. Phương thức này làm thay đổi độ dài của mảng.

Example:

const array = ['a', 'b', 'c'];
const elem = array.pop();

console.log(elem) // c
console.log(array) ['a', 'b']

3.1.4 Array.push(elem1?, elem2?, ...)

• Phương thức push() thêm một hoặc nhiều phần tử vào vị trí cuối mảng sau đó trả về chiều dài của mảng mới.

Example:

var array1 = [1, 2, 3];

console.log(array1.push(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [1, 2, 3, 4, 5]

3.1.5 Array.splice(start, deleteCount?, item1?, item2?, ...)

• Phương thức splice() thay đổi phần tử của mảng bằng cách xóa phần tử đang tồn tại và/hoặc thêm phần tử mới.
• start: Vị trí để bắt đầu thay đổi mảng (mặc định là 0). Nếu lớn hơn độ dài của mảng, thì chỉ số start được thiết lập bằng độ dài của mảng. Nếu giá trị là âm , thì bắt đầu từ các phần từ cuối mảng (gốc là -1, -n ứng với vị thứ thứ n cuối cùng và viết là array.length - n) và sẽ set giá trị 0 nếu trị tuyệt đối lớn hơn độ dài mảng.
• deleteCount | Optional: Con số chỉ định số lượng các phần tử sẽ bị xóa.
  • Nếu deleteCount bị bỏ qua hoặc có giá trị lớn hơn hoặc bằng array.length - start (nếu giá trị lớn hơn số phần tử còn lại của mảng, bắt đầu từ start), thì tất cả các phần tử từ vị trí start đến cuối mảng sẽ bị xóa bỏ.
  • Nếu deleteCount bằng 0 hoặc là số âm, không phần tử nào được xóa. Trong trường hợp này bạn sẽ phải xác định ít nhất 1 phần tử mới (xem bên dưới).
• item1, item2, ... | Optional: Các phần tử thêm vào mảng, bắt đầu từ chỉ số start . Nếu không có, splice() thì sẽ chỉ xóa các phần tử trong mảng.
• Trả về một mảng chứa các phần từ bị xóa. Nếu chỉ có 1 phần từ bị xóa, trả về mảng chứa 1 phần tử. Nếu không có phần tử nào bị xóa, trả về mảng rỗng.

Example:

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

myFish.splice(2, 0, 'drum'); // chèn 'drum' vào vị trí 2
// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1); // xóa 1 phần tử từ vị trí 2
// myFish is ["angel", "clown","mandarin", "sturgeon"]

3.1.6 Array.reverse()

• Hàm reverse() khi gọi bởi một mảng thì đảo ngược thứ tự của chính mảng đó. Phần tử đầu tiên của mảng trở thành phần tử cuối và ngược lại, phần tử cuối trở thành phần tử đầu tiên của mảng.

Example:

var myArray = ['one', 'two', 'three'];
myArray.reverse(); 

console.log(myArray) // ['three', 'two', 'one']

3.1.7 Array.fill(new-element, start-index, end-Index)

• Phương thức fill() điền (sửa đổi) tất cả các phần tử của một mảng từ một chỉ mục bắt đầu (số không mặc định) đến một chỉ mục kết thúc (độ dài mảng mặc định) với một giá trị tĩnh. Nó trả về mảng đã sửa đổi

Example:

var array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

3.1.8 Array.sort(compare-function?)

• Phương thức sort() sẽ sắp xếp các phần tử của mảng ngay tại chỗ và trả về mảng đó. Kết quả sắp xếp có thể không ổn định. Cách sắp xếp mặc định là theo Unicode code point của chuỗi.

Example:

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

3.2 Non-Destructive Methods

3.2.1 Array.concat(arr1?, arr2?, ... )

• Phương thức concat() dùng để kết nối 2 hay nhiều mảng với nhau. Phương thức này không làm thay đổi các mảng đã có mà thay vào đó sẽ trả về 1 mảng mới.

Examplae:

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]

3.2.2 Array.join(separator?)

• Phương thức join() tạo ra một chuỗi mới bằng các nối tất cả các phần tử của mảng (hoặc một array-like object), ngăn cách chúng bởi dấu phẩy hoặc một chuỗi ký tự xác định. Nếu mảng chỉ có một phần tử, kết quả sẽ trả về chính phần tử đó.

Example:

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

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

3.2.3 Array.slice(startIndex?, endIndex?)

• Phương thức slice() trả về một bản sao tham chiếu (shallow copy) một phần của một mảng dưới dạng một mảng nhận các giá trị có chỉ số từ begin dến end (không bao gồm end). Mảng ban đầu không bị thay đổi.

Example:

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

3.2.4 Array.includes()

• Phương thức includes() kiểm tra một phần tử có tồn tại trong mảng.

Example:

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

3.2.5 Array.indexOf(searchaValue, startIndex?)

• Phương thức indexOf() sẽ trả về giá trị index đầu tiên của mảng, nơi mà nó đc tìm thấy trong mảng, hoặc trả về -1 nếu không tồn tại trong mảng.

Example:

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

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

3.2.6 Array.lastIndexOf(searchElement, startIndex?)

• Hàm lastIndexOf() sẽ tìm kiếm một phần tử trong mảng dựa vào giá trị của phần tử, hàm sẽ trả về vị trị( khóa) của phần tử nếu tìm thấy và trả về -1 nếu không tìm thấy.
• Việc tìm kiếm sẽ bắt đầu từ vị trí xác định, nếu không truyền vào thì mặc định sẽ tìm từ cuối mảng và kết thúc ở đầu mảng.
• Nếu có nhiều hơn một phần tử được tìm thấy, phần tử tìm thấy đầu tiên tính từ cuối mảng sẽ được trả về.

Example:

var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected output: 1

Reference

Learn JavaScript Array Methods in just 8 Minutes!!

Array Javascript