Javascript

All about array methods in JS

All about array methods in JS

Thời gian gần đây tình hình dịch bệnh Covid 19 rất căng thẳng kéo theo là tình hình kinh tế khó khăn, đình trệ. Lập trình viên như chúng ta cũng bị ảnh hưởng rất nhiều vì đơn giản là End user của chúng ta cũng đang khốn khổ. Nhưng với chamdev.com thì vẫn post bài đều đều vào mỗi cuối tuần nhé các bạn.

1. Mở đầu

Khi làm việc với JS, chúng ta sẽ phải dùng đến các Array methods, nhưng nhiều khi chúng ta còn chưa lắm rõ nó, về cách dùng, tác dụng. Nên trong phần này chúng ta sẽ cùng tìm hiểu Array methods kĩ hơn nhé.

2. Chi tiết

Concat

var arr_1 = ["Cecilie", "Lone"];
var arr_2 = ["Emil", "Tobias", "Linus"];
var arr_3 = arr_1.concat(arr_2);
console.log("arr_1", arr_1); // ["Cecilie", "Lone"]
console.log("arr_2", arr_2); // ["Emil", "Tobias", "Linus"]
console.log("arr_3", arr_3); // ["Cecilie", "Lone", "Emil", "Tobias", "Linus"]

Syntax: array1.concat(array2, array3, ..., arrayX)

Description: Hàm này sẽ dùng để nối 2 hoặc nhiều array lại với nhau, nó sẽ Return ra một array mới và không thay đổi gì các array nối

CopyWithin

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = arr_1.copyWithin(2, 0);

console.log("arr_1", arr_1); // ["Banana", "Orange", "Banana", "Orange"]
console.log("arr_2", arr_2); // ["Banana", "Orange", "Banana", "Orange"]

Syntax: array.copyWithin(target, start, end)

Description: Hàm này sẽ copy các phần tử trong cùng 1 array và thế lại chỗ các phần tử khác, cũng trong array này. Nó change array và cũng return ra một array là array changed này.

Entries

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = arr_1.entries();

for (x of arr_2) {
  console.log(x);
}

// [0, "Banana"]
// [1, "Orange"]
// [2, "Apple"]
// [3, "Mango"]

Syntax: array.entries()

Description: Hàm này sẽ Return ra một Array Iterator với cặp key/value.

Every

var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

console.log(ages.every(checkAdult)); // false
console.log(ages); // [32, 33, 16, 40]

Syntax: array.every(function(currentValue, index, arr), thisValue)

Description: Hàm này sẽ check tất cả các phần tử bên trong Array, nếu nó pass hết điều kiện của hàm thì sẽ return ra true, còn nếu 1 cái sai thôi thì nó cũng return false.

Fill

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = arr_1.fill("Kiwi");

console.log("arr_1", arr_1); // ["Kiwi", "Kiwi", "Kiwi", "Kiwi"]
console.log("arr_2", arr_2); // ["Kiwi", "Kiwi", "Kiwi", "Kiwi"]

Syntax: array.fill(value, start, end)

Description: Hàm này sẽ fill giá trị chỉ định vào Array gốc, nếu mà không xác định vị trí đầu và kết thúc thì mặc định sẽ là cho toàn Array. Hàm này sẽ thay đổi array gốc, và cũng return ra chính array đã được thay đổi đó.

Filter

var ages = [32, 33, 16, 40];

function checkAdult(age) {
  return age >= 18;
}

function myFunction() {
  document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

console.log("ages.filter(checkAdult)", ages.filter(checkAdult)); // [32, 33, 40]
console.log("ages", ages); // [32, 33, 16, 40]

Syntax: array.filter(function(currentValue, index, arr), thisValue)

Description: Hàm này dùng để tạo ra một array các item thỏa mãn điều kiện của function callback, nó không làm thay đổi array nguồn.

Find

var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

console.log("ages.find(checkAdult)", ages.find(checkAdult)); // 18

Syntax: array.find(function(currentValue, index, arr),thisValue)

Description: Hàm này sẽ return ra giá trị đầu tiền pass qua điều kiện của function, nếu không tìm thấy giá trị nào pass qua thì nó sẽ return ra undefined.

FindIndex

var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

console.log("ages.findIndex(checkAdult)", ages.findIndex(checkAdult)); // 2

Syntax: array.findIndex(function(currentValue, index, arr), thisValue)

Description: Hàm này sẽ tìm index đầu tiên của item thỏa mãn function callback, nếu tìm không thấy nõ sẽ trả về -1.

ForEach

var fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);

function myFunction(item, index) {
  console.log(item, index);
}
// apple 0
// orange 1
// cherry 2

Syntax: array.findIndex(function(currentValue, index, arr), thisValue)

Description: Hàm này sẽ for mỗi phần tử tròn array, nó sẽ không return cũng như là không thay đổi giá trị array.

From

var myArr = Array.from("ABCDEFG");
console.log(myArr); // ["A", "B", "C", "D", "E", "F", "G"]

Syntax: Array.from(object, mapFunction, thisValue)

Description: Hàm này sẽ return ra một Array mới từ một giá trị có sẵn.

Includes

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.includes("Mango");
console.log(result); // true

Syntax: array.includes(element, start)

Description: Hàm này sẽ check trong array nếu có giá trị nào thỏa mãn element thì sẽ return true còn không thì sẽ return false.

IndexOf

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var result = arr_1.indexOf("Apple");

console.log(result); // 2

Syntax: array.indexOf(item, start)

Description: Hàm này sẽ tìm trong array phần tử nào thỏa mãn item, nếu có tìm thấy thì nó sẽ return ra index của nó còn nếu không tìm thấy thì sẽ return ra -1.

IsArray

var arr = ["Banana", "Orange", "Apple", "Mango"];
var obj = {a: 1};

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

Syntax: Array.isArray(obj)

Description: Hàm này sẽ kiểm tra Object được truyền vào, nếu là Array thì sẽ return ra True còn nếu khác Array sẽ return ra false.

Join

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.join();

console.log("arr", arr); // ["Banana", "Orange", "Apple", "Mango"]
console.log("result", result); // Banana,Orange,Apple,Mango

Syntax: array.join(separator)

Description: Hàm này sẽ return ra một String với giá trị cách nhau ở giữa là separator. Hàm này không change array cũ của nó.

Keys

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = arr_1.keys();

for (x of arr_2) {
    console.log(x);
}

// 0
// 1
// 2
// 3

Syntax: array.keys()

Description: Hàm này sẽ return ra một Array Object Iterator của những index trong array.

LastIndexOf

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.lastIndexOf("Apple");

console.log("result", result); // 2

Syntax: array.lastIndexOf(item, start)

Description: Hàm này sẽ return ra vị trí cuối cùng của phần tử match với item trong array. Nếu không tìm thấy nó sẽ return ra -1.

Map

var numbers = [4, 9, 16, 25];
var x = numbers.map(x => (x * 2));

console.log("numbers", numbers); // [4, 9, 16, 25]
console.log("x", x); // [8, 18, 32, 50]

Syntax: array.map(function(currentValue, index, arr), thisValue)

Description: Hàm này sẽ for tất cả các phần tử trong array và thay đổi giá trị của chúng với hàm callback bên trong. Cuối cùng sẽ return ra Array đã được thay đổi này, hàm không thay đổi array cũ.

Pop

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.pop();

console.log("arr", arr); // ["Banana", "Orange", "Apple"]
console.log("result", result); // Mango

Syntax: array.pop()

Description: Hàm này sẽ xóa đi phần tử cuối cùng của array mà nó chạy và sẽ return ra chính phần tử mà nó đã cắt.

Push

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.push("Kiwi");

console.log(arr); // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
console.log(result); // 5

Syntax: array.push(item1item2, ..., itemX)

Description: Hàm này sẽ push 1 item vào cuối array và sẽ return ra length của array sau khi đã push.

Reduce

var numbers = [175, 50, 25];

function myFunc(total, num) {
  return total + num;
};

console.log(numbers.reduce(myFunc, 10)); // 260

Syntax: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Description: Hàm này thường được dùng để gom các phần tử của array để tính tổng, hiệu, nối chuỗi, … nó sẽ return ra giá trị mới và không làm thay đổi array cũ.

ReduceRight

var numbers = [175, 50, 25];

function myFunc(total, num) {
  return total - num;
}

console.log(numbers.reduceRight(myFunc, 100));

Syntax: array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

Description: Hàm này cũng có tác dụng như reduce nhưng lại chạy ngược array từ phải sang trái.

Reverse

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = arr_1.reverse();

console.log("arr_1", arr_1); // ["Mango", "Apple", "Orange", "Banana"]
console.log("arr_2", arr_2); // ["Mango", "Apple", "Orange", "Banana"]

Syntax: array.reverse()

Description: Hàm này sẽ đảo ngược lại thứ tự các phần tử trong Array. Nó change array cũ và cũng return ra chính array đã change đó.

Shift

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.shift();

console.log("arr", arr); // ["Orange", "Apple", "Mango"]
console.log("result", result); // Banana

Syntax: array.shift()

Description: Hàm này sẽ xóa đi phần tử đầu tiên của Array và return chính phần tử này ra.

Slice

var arr_1 = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var arr_2 = arr_1.slice(1, 3);

console.log("arr_1", arr_1); // ["Banana", "Orange", "Lemon", "Apple", "Mango"]
console.log("arr_2", arr_2); // ["Orange", "Lemon"]

Syntax: array.slice(start, end)

Description: Hàm này sẽ cắt ra cho chúng ta một array mới với vị trí chỉ định tử một array cha.

Some

var ages = [3, 10, 18, 20];

function checkAdult(age) {
  return age >= 18;
}

console.log("ages.some(checkAdult)", ages.some(checkAdult)); // true

Syntax: array.some(function(currentValue, index, arr), thisValue)

Description: Hàm này sẽ check trong array nếu có bất kì item nào pass qua điều kiện và function return true thì hàm này sẽ return ra true còn nếu không thì sẽ return false.

Sort

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = fruits.sort();

console.log("arr_1", arr_1); // ["Banana", "Orange", "Apple", "Mango"]
console.log("arr_2", arr_2); // ["Apple", "Banana", "Mango", "Orange"]

Syntax: array.sort(compareFunction)

Description: Hàm này dùng thuật toán để sắp xếp (thuật toán gì thì mình không biết :3). Nó sẽ sắp xếp từ trên xuống dưới theo alphaB, hoặc theo số, … sẽ tùy vào bạn custom nhé. Nó không change array cũ mà sẽ return ra một array mới đã sort nhé.

Splice

var arr_1 = ["Banana", "Orange", "Apple", "Mango"];
var arr_2 = arr_1.splice(2, 0, "Lemon", "Kiwi");

console.log("arr_1", arr_1); // ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"]
console.log("arr_2", arr_2); // []

Syntax: array.splice(index, howmany, item1, ....., itemX)

Description: Hàm này sẽ add hoặc remove item theo như chúng ta muốn, nó sẽ change array cha và sẽ return ra một array rỗng.

ToString

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.toString();

console.log("arr", arr); // ["Banana", "Orange", "Apple", "Mango"]
console.log("result", result); // Banana,Orange,Apple,Mango

Syntax: array.toString()

Description: Hàm này sẽ return ra một String là nối của các phần tử trong array. Nó không change array gọi nó.

Unshift

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.unshift("Lemon","Pineapple");

console.log("arr", arr); // ["Lemon", "Pineapple", "Banana", "Orange", "Apple", "Mango"]
console.log("result", result); // 6

Syntax: array.unshift(item1, item2, ..., itemX)

Description: Hàm này cũng tương tự như hàm push(). Nhưng lại gắn thêm phần tử vào đầu array và cũng change array cũ – return ra length của array sau khi push.

ValueOf

var arr = ["Banana", "Orange", "Apple", "Mango"];
var result = arr.valueOf();

console.log("arr", arr); // ["Banana", "Orange", "Apple", "Mango"]
console.log("result", result); // ["Banana", "Orange", "Apple", "Mango"]

Syntax: array.valueOf()

Description: Hàm này return ra một aray mới tương tự như array cũ. Đây là một cách để clone array nhé các bạn. @@

3. Kết luận

Từ các phần trên mình tổng hợp được 3 bảng dưới các bạn hãy tham khảo nhé.

Đối với hàm Return ra giá trị:

Name Description Return
concat()Hàm này sẽ nối 2 array lại với nhau vè return ra một array mới.Array
entries()Hàm này sẽ return ra một Iteration (vòng lặp) mà mỗi phần tử có dạng [index, value] . Array Iteration Object
every()Check nếu tất cả các phần tử thỏa mãn điều kiện trong hàm callback.Boolean
filter()Hàm này sẽ tạo ra một array mới với các phần tử pass qua được callback trong nó.Array
find()Hàm này sẽ return value đầu tiên mà pass qua được function callback của nó.First value
findIndex()Hàm này sẽ return ra index đầu tiền mà pass qua được callback của nó.First index
from()Hàm này có thể create 1 array mới từ một Object. (Mình thấy nó chỉ chạy với array và string thôi @@)Array
includes()Hàm này sẽ check xem array có chứa phần tử chỉ định không, nếu có thì sẽ return ra true, còn không thì sẽ return ra false.Boolean
indexOf()Hàm này sẽ tìm giá trị đầu tiên match với giá trị cho trướcIndex
isArray()Hàm này sẽ check một Object có là Array không, nếu có sẽ return ra true, ngược lại sẽ return ra false.Boolean
join()Dùng để nối các phần tử trong array lại với nhau qua 1 string nào đó được thêm là tham số trong join().String
keys()Hàm này sẽ return ra một Iteration key của array.Array Iteration Object
lastIndexOf() Hàm này cũng giống indexOf() nhưng nó sẽ tìm phần tử cuối cùng match mới giá trị cho trước.Last index
map()Hàm này dùng để thay đổi các phần tử bên trong array, nó giống như forEach nhưng nó return ra mảng mới mà không thay đổi các phần tử của mảng cũ.Array
reduce()Hàm này sẽ cộng dồn, hoặc nối dồn các phần tử của array từ trái qua phải, return value.Value
reduceRight()Hàm này cũng giống hàm trên nhưng chạy với chiều ngược lại từ phải qua trái.Value
slice()Hàm này sẽ cắt một array mà nó tham chiếu tới và sẽ return array mà nó cắt được.Array
some()Hàm này dùng để check trong array nếu có ít nhất một phần tử thỏa mãn điều kiện nó cũng sẽ return true và nếu tất cả đều không thỏa mãn điều kiện nó sẽ return false.Boolean
toString()Hàm này dùng để chuyển array sang string mà không cần for các phần tử rồi nỗi lại nữa.String
valueOf()Hàm này sẽ clone ra cho chúng ta một array mới. Array
sort() Hàm này dùng để sort các phần tử trong một array theo thứ tự alphaB, số, …. Array

Đối với hàm Change array current và Return giá trị:

Name Description Return
copyWithin()Hàm này sẽ copy những phần tử trong chính nó và sẽ thay đổi chính nó và cũng return ra array được thay đổi đó.Array
fill()Hàm này sẽ thay đổi chính array hiện tại và return ra một array mới với các phần tử được viết trong fill().Array
pop()Dùng để xóa phần tử cuối cùng của array. Nó change chính array gọi nó và cũng đồng thời return ra phần tử mà nó xóa.Last element
push()Dùng để thêm một phần tử vào cưới array, nó thay đổi array nó gọi đồng thời return ra length mới của array sau khi thêm phần tử.New length
reverse()Hàm này dùng để dảo ngược thứ tự phần tử trong mảng nó gọi, đồng thời return ra chính array đã bị đảo ngược đó.Array
shift()Hàm này remove phần tử đầu tiên của mảng, đồng thời return ra chính phần tử đã remove đó.First element
unshift()Hàm này add một phần tử mới vào đầu mảng, đồng thời return ra length mới của array sau khi add.New length
splice()Dùng để thêm hoắc xóa phần tử trong array.Empty array

Đối với hàm không Change array current, không return giá trị:

Name Description
forEach()Dùng hàm này có thể for các phần tử của array gọn hơn rất nhiều so với khi ta dùng vòng for thường.

4. Tham khảo

# JavaScript Array Reference
# JavaScript Array Methods
# JavaScript Array Reference
# Array
# Array methods

Tagged , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments