Lesson 11: Phương thức Array, Object

Phương thức là một khái niệm trong đối tượng, được thể hiện qua hàm, được xây dựng để cho đối tượng làm một công việc gì đó (thực hiện chức năng gì đó).

Trong nội dung học, ta chỉ học cách sử dụng theo những khái niệm được cung cấp, có thể tìm hiểu về về cách xây dựng phương thức trong Lập trình hướng đối tượng - OOP

Array method

Những phương thức của mảng, được cung cấp sẵn để giúp tối ưu, tối giản lượng công việc của lập trình viên. Khi sử dụng, bắt buộc phải hiểu thật rõ cách sử dụng, công dụng của phương thức để lựa chọn sử dụng hợp lý cho các yêu cầu bài toán.

push()

Phương thức để thêm một phần tử vào cuối cùng mảng. Ví dụ:

let names = ["Alice", "Bob", "Charlie", "David", "Eve"];
names.push('MindX');
console.log(names); // ["Alice", "Bob", "Charlie", "David", "Eve", "MindX"];

map()

Phương thức dùng để duyệt qua từng phần tử của mảng và trả về một mảng mới với các giá trị đã được thay đổi dựa trên một hàm xử lý được cung cấp

array.map(function(currentValue, index, array) {
  // code...
});

From internet

Trong đó:

• currentValue: Giá trị hiện tại của phần tử đang được xử lý trong mảng.

• index (tùy chọn): Vị trí (chỉ số) của phần tử hiện tại trong mảng.

• array (tùy chọn): Chính mảng mà phương thức map() được gọi .

Ví dụ:

let arr = [1, 2, 3];
let newArr = arr.map((item)=>{
    return item * 2;
});
console.log(newArr); // Output: [2, 4, 6]

filter()

Dùng để lọc các phần tử trong mảng dựa trên điều kiện được cung cấp trong một hàm. Phương thức này trả về một mảng mới chứa tất cả các phần tử của mảng bàn đầu thỏa mãn điều kiện trả về trong callback.

array.filter(function(currentValue, index, array) {
  // code...
});

From internet

Trong đó:

• currentValue: Giá trị hiện tại của phần tử đang được xử lý trong mảng.

• index (tùy chọn): Vị trí (chỉ số) của phần tử hiện tại trong mảng.

• array (tùy chọn): Chính mảng mà phương thức map() được gọi .

Ví dụ:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter((item) => {
  // trả về phần tử khi phần tử đó thoả mãn điều kiện return
  return item % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4]

find()

Sử dụng để trả về phần tử đầu tiên trong mảng thỏa mãn điều kiện của hàm callback. Nếu không tìm thấy phần tử nào thỏa mãn điều kiện, nó sẽ trả về undefined.

array.find(function(currentValue, index, array) {
  return conditional; // trả về điều kiện tìm kiếm
});

From internet

Trong đó:

• currentValue: Giá trị hiện tại của phần tử đang được xử lý trong mảng.

• index (tùy chọn): Vị trí của phần tử hiện tại trong mảng.

• array (tùy chọn): Mảng ban đầu mà phương thức được gọi.

Ví dụ:

const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(element => element > 10);

console.log(found); // Output: 12 (phần tử đầu tiên lớn hơn 10)

findIndex()

Sử dụng để trả về chỉ số (index) của phần tử đầu tiên trong mảng thỏa mãn điều kiện của hàm callback. Nếu không có phần tử nào thỏa mãn điều kiện, nó sẽ trả về -1.

array.findIndex(function(element, index, array) {
  // Điều kiện tìm kiếm
});

From internet

Trong đó:

• element: Giá trị hiện tại của phần tử đang được xử lý trong mảng.

• index (tùy chọn): Vị trí của phần tử hiện tại trong mảng.

• array (tùy chọn): Mảng ban đầu mà phương thức được gọi.

Ví dụ:

const numbers = [5, 12, 8, 130, 44];
const index = numbers.findIndex(element => element > 10);

console.log(index); // Output: 1 (chỉ số của phần tử đầu tiên lớn hơn 10 là 1)

splice()

Dùng để thêm, xóa hoặc thay thế các phần tử trong mảng. Phương thức này thay đổi trực tiếp mảng gốc.

array.splice(startIndex, deleteCount, item1, item2, ...);

Trong đó:

• start: Vị trí chỉ số mà việc thay đổi bắt đầu. Nếu chỉ số lớn hơn độ dài của mảng, không có gì xảy ra. Nếu là số âm, nó được hiểu như chỉ số từ cuối mảng.

• deleteCount: Số phần tử cần xóa bắt đầu từ start. Nếu là 0, không phần tử nào bị xóa. Nếu bỏ qua tham số này, tất cả các phần tử từ vị trí start trở đi sẽ bị xóa.

• item1, item2, ... (tùy chọn): Các phần tử mới cần thêm vào mảng tại vị trí start.

Thêm phần tử:

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 0, 6, 7); // Thêm 6 và 7 bắt đầu tại chỉ số/vị trí 2

console.log(numbers); // Output: [1, 2, 6, 7, 3, 4, 5]

Xoá phần tử:

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1); // Xóa 1 phần tử, bắt đầu từ chỉ số/vị trí 2

console.log(numbers); // Output: [1, 2, 4, 5]

Thay thế phần tử:

Bài toán thay thế, chỉ đơn giản là xoá phần tử cũ và chèn phần tử mới vào vị trí cung cấp

const numbers = [1, 2, 3, 4, 5];
numbers.splice(1, 2, 9, 10); // Xóa 2 phần tử bắt dầu từ chỉ số/vị trí 1, thêm 9 và 10

console.log(numbers); // Output: [1, 9, 10, 4, 5]

Còn rất nhiều các phương thức khác, hãy tìm hiểu thêm để mở rộng kiến thức, giúp tối giản hoá thời gian phát triển chương trình: Link

Object method

Tương tự như Array, Object cũng cung cấp các phương thức để hỗ trợ lập trình viên sử dụng trong quá trình phát triển chương trình

Object.keys()

Phương thức giúp trả về một mảng chứa tất cả các key của object.

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

Object.values()

Phương thức trả về một mảng chứa tất cả các value của object.

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // Output: [1, 2, 3]

Object.assign()

Phương thức giúp sao chép các thuộc tính của một hoặc nhiều object vào một object đích.

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const mergedObj = Object.assign({}, obj1, obj2);
console.log(mergedObj); // Output: { a: 1, b: 2 }

Còn rất nhiều các phương thức khác, hãy tìm hiểu thêm để mở rộng kiến thức, giúp tối giản hoá thời gian phát triển chương trình: Link

Spread operator

Spread Operator được sử dụng để trải các phần tử của một mảng hoặc một đối tượng thành các phần tử riêng lẻ.

Nó cho phép sao chép, nối mảng, hoặc trộn các đối tượng.

Cú pháp:

[...array]
{...object}

Ví dụ:

const arr1 = [1, 2, 3];
const arr2 = [...arr1];  // đưa các phần tử của mảng arr1 vào mảng arr2

console.log(arr2); // Output: [1, 2, 3]

const obj1 = { name: 'Alice', age: 25 };
const obj2 = { job: 'Developer' };
const obj3 = { ...obj1, ...obj2 }; // Trộn các thuộc tính của obj1 và obj2, đưa vào 1 object mới

console.log(obj3); // Output: { name: 'Alice', age: 25, job: 'Developer' }