Làm việc với array trong Javascript

Trong khuôn khổ bài viết này, chúng ta sẽ cùng tìm hiểu về về array trong javascript để có những trải nghiệm tốt nhất khi làm việc cũng với nó nhé!

Đối tượng (object) Array trong javascript là một global object được sử dụng để tạo ra các mảng, Array là 1 high-level object. Mình sẽ lượt qua các phần như khái niệm hay làm sao để khởi tạo mảng...để tìm hiểu về các Properties và Methods được xây dựng sẵn trong đối tượng Array xem chúng giúp ích được gì nhé.

Array.length

Array.length set hoặc trả về tổng số phần tử trong mảng. Giá trị là 1 số nguyên không âm, 32 bit. Bạn có thể truncate một mảng bằng cách set length property của nó, nếu set lớn hơn length hiện tại thì tạo ra các phần tử undefined, nhỏ hơn thì mảng sẽ bị cắt bớt đi, bằng thì giữ nguyên.

Array.prototype

Array.prototype đại diện cho thằng trùm đứng sau mọi Array và cho phép bạn thêm vào các properties và methods vào mọi array object.

// Mặc định thì array ko có hàm first, thế thì
// mình thêm vào thôi
if (!Array.prototype.first) {
  Array.prototype.first = function() {
    return this[0];
  }
}

Array.prototype cũng là một Array đấy nhé.

Array.from()

Tạo mới một mảng từ:

• object giống mảng (object có length và các element được index)
• iterable objects ( object có thể get được elements của nó, nhưMap và Set )

// Array from a String
Array.from('foo'); 
// ["f", "o", "o"]

//Array from a Set
var s = new Set(['foo', window]); 
Array.from(s); 
// ["foo", window]
...

Array.isArray()

Array.isArray(obj)

Trả về true nếu object cần kiểm tra là mảng, false nếu ngược lại.

// đoạn này trả về true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'));
Array.isArray(new Array(3));
// cái này có nói ở trên rồi
Array.isArray(Array.prototype); 

// bọn dưới đây trả về false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

Array.of()

Tạo ra array mới từ các đối số

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]
// khác với
Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.prototype.concat()

Các method của đại ca prototype thì bọn array đều được học (kế thừa) từ anh cả và có thể sử dụng. Method con mèo này tạo một array mới từ 2 hay nhiều array bằng cách merge chúng lại với nhau.

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

var arr3 = arr1.concat(arr2);

// arr3 => [ "a", "b", "c", "d", "e", "f" ]

Array.prototype.copyWithin()

Copy một phần của array và dán đến vị trí khác của array mà không làm thay đổi kích thước của nó. Method này thay đổi lên chính array đó.

// Syntax
arr.copyWithin(target)
arr.copyWithin(target, start)
arr.copyWithin(target, start, end)

// ví dụ
[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

Array.prototype.entries()

Trả về một object Array Iterator mới có key/value tương ứng với mỗi index của array.

var a = ['a', 'b', 'c'];
var iterator = a.entries();

for (let e of iterator) {
  console.log(e);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

Array.prototype.every()

Kiểm tra nếu tất cả các elements của array đều pass 1 điều kiện cho trước thì trả về true, ngược lại trả về false

// syntax
arr.every(callback[, thisArg])

//example 
function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array = [1, 30, 39, 29, 10, 13];

console.log(array.every(isBelowThreshold));
// true

Array.prototype.fill()

Fill các elements của array với một giá trị cho trước.

// syntax
arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

//example 
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

Array.prototype.filter()

Tạo một array mới từ những element pass với điều kiện đặt ra.

// syntax
var newArray = arr.filter(callback[, thisArg])

//example
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

// trả về mảng mới gồm các phần tử có length > 6
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Array.prototype.find()

Tìm và trả về phần tử đầu tiên của mảng pass điều kiện đặt ra

// syntax
arr.find(callback[, thisArg])

// example
function isBigEnough(element) {
  return element >= 15;
}
// trả về phần tử đầu tiên có giá trị >= 15
[12, 5, 8, 130, 44].find(isBigEnough); // 130

Array.prototype.findIndex()

Tìm và trả về index của phần tử đầu tiên pass điều kiện đặt ra

// syntax
arr.findIndex(callback[, thisArg])

// example
var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
  return element > 13;
}

// trả về index của phần tử đàu tiên có giá trị > 13
console.log(array1.findIndex(findFirstLargeNumber));
// expected output: 3

Array.prototype.forEach()

Thực hiện một hàm callback 1 lần với tất cả các phần tử trong mảng.

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

// axample
const arr = ['a', 'b', 'c'];

arr.forEach(function(element) {
    console.log(`${element} is crazyyy`);
});

// a is crazyyy
// b is crazyyy
// c is crazyyy

Array.prototype.includes()

Kiểm tra xem mảng có chứa 1 phần tử nào đó không :-? Trả về boolean

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

Array.prototype.indexOf()

Trả về giá trị index của 1 phần tử trong mảng, nếu không tồn tại phần tử, trả về -1

var a = [2, 9, 9]; 
a.indexOf(2); // 0 
a.indexOf(7); // -1
a.indexOf(9); // 1

Array.prototype.join()

Nối các phần tử của mảng thành một chuổi string và trả về string đó.

// syntax
arr.join()
arr.join(separator)

// example
var elements = ['Fire', 'Wind', 'Rain'];

console.log(elements.join());
// expected output: Fire,Wind,Rain

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

console.log(elements.join('-'));
// expected output: Fire-Wind-Rain

Array.prototype.keys()

Trả về một đối tượng Array Iterator chứa keys là các index của array.

var arr = ['a', 'b', 'c'];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Array.prototype.lastIndexOf()

Trả về vị trí xuất hiện lần cuối cùng của một giá trị được tìm thấy trong mảng. Trả về -1 nếu không tìm thấy

// syntax
arr.lastIndexOf(searchElement)
// fromIndex là tham số không bắt buộc, nó chỉ định vị trí bắt đầu tìm kiếm ngược.
arr.lastIndexOf(searchElement, fromIndex)

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

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

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

Trong bài viết tiếp theo mình sẽ cùng tìm hiểu tiếp về các methods của Array.prototype nhé