Hướng dẫn cách thay thế phần tử trong mảng JavaScript. Bạn sẽ học được cách thay thế giá trị của một hoặc nhiều phần tử trong mảng JavaScript bằng cách sử dụng index hoặc splice() sau bài học này.

Chúng ta có 2 phương pháp để thay thế phần tử trong mảng JavaScript như sau:

• Sử dụng index : thay thế giá trị một phần tử chỉ định trong mảng JavaScript
• Sử dụng phương thức splice() : thay thế giá trị nhiều phần tử trong một phạm vi

Thay thế giá trị một phần tử chỉ định trong mảng JavaScript thông qua index

Khi muốn thay thế giá trị một phần tử chỉ định trong mảng JavaScript, chúng ta truy cập tới phần tử đó thông qua index và sau đó thay thế giá trị cũ của nó bằng một giá trị mới.

• Xem thêm : Index trong JavaScript và cách truy cập phần tử trong mảng JavaScript

Cú pháp thay đối giá trị một phần tử thông qua index như sau:

Trong đó org_array là mảng ban đầu, new_value là giá trị thay thế sẽ được dùng để thay thế phần tử có index chỉ định trong mảng ban đầu. Và toán tử = ở đây có công dụng gán giá trị bên trái nó vào phần tử ở bên phải nó.

Hãy thử thay thế giá trị của phần tử thứ hai trong mảng (có index bằng 1) trong ví dụ sau đây:

let fruits = ["Táo", "Cam", "Dâu"];
console.log(fruits); //>[ 'Táo', 'Cam', 'Dâu' ]

//thay thế giá trị của phần tử thứ hai trong mảng
fruits[1] = "Nho";
console.log(fruits); //>[ 'Táo', 'Nho', 'Dâu' ]

Như bạn thấy, phần tử Cam với index =1 được chỉ định bằng fruits[1] đã được thay thế thành Nho sau khi thực hiện lệnh đổi giá trị.

Thay thế giá trị nhiều phần tử trong một phạm vi | phương thức splice()

Chúng ta có thể thay thế giá trị của nhiều phần tử trong một phạm vi của mảng ban đầu bằng cách sử dụng phương thức splice() trong JavaScript.

Cú pháp chúng ta sử dụng ở đây sẽ như sau:

Trong đó:

• array là mảng ban đầu
• index là vị trí bắt đầu thay thế giá trị trong mảng
• num là số phần tử cần thay thế tính từ index
• value1, value2,.. là các giá trị dùng để thay thế. Chúng ta có thể sử dụng các giá trị thay thế thuộc nhiều kiểu dữ liệu khác nhau như là mảng, hoặc ký tự v.v..

Bằng việc chỉ định index và num, chúng ta sẽ xác định được phạm vi các phần tử cần thay thế giá trị từ mảng ban đầu. Sau đó, bằng việc chỉ định các giá trị dùng để thay thế, chúng ta sẽ tiến hành thay thế giá trị một loạt các phần tử trong mảng ban đầu.

Ví dụ sau đây, chúng ta sẽ thay thế các phần tử trong mảng thuộc kiểu chuỗi bằng các giá trị mới thuộc kiểu số như sau:

let myarray = ["A", "B", "C", "D", "E", "F"];
console.log(myarray);
//> [ 'A', 'B', 'C', 'D', 'E', 'F' ]

//thay thế 3 phần tử trong mảng từ vị trí index bằng 1
myarray.splice(1, 3, 1, 2, 3);
console.log(myarray);
//> [ 'A', 1, 2, 3, 'E', 'F' ]

Tương tự, chúng ta cũng có thể chỉ định giá trị thay thế bằng một chuỗi hoặc mảng khác và tiến hành thay thế giá trị như sau:

let myarray = ["A", "B", "C", "D", "E", "F"];
myarray.splice(1, 3, "M", "XYZ", [2,3,4]);
console.log(myarray);
//> [ 'A', 'M', 'XYZ', [ 2, 3, 4 ], 'E', 'F' ]

Lại nữa, số lượng các phần tử trong dãy thay thế không nhất thiết phải bằng với số lượng các phần tử trong phạm vi mà chúng ta đang cần thay thế. Nhiều hơn cũng được mà ít hơn thì cũng không sao.

Ví dụ như dưới đây, chúng ta sẽ dùng một số lượng giá trị thay thế ít hơn hoặc nhiều hơn số phần tử cần thay thế và thay thế chúng trong mảng ban đầu:

Số lượng giá trị thay thế ít hơn số phần tử cần thay thế

let myarray = ["A", "B", "C", "D", "E", "F"]
myarray.splice(1, 3, "X");
console.log(myarray); //>[ 'A', 'X', 'E', 'F' ]

Số lượng giá trị thay thế nhiều hơn số phần tử cần thay thế

let myarray = ["A", "B", "C", "D", "E", "F"]
myarray.splice(1, 2, "X","Y","Z");
console.log(myarray);
//> ['A', 'X', 'Y',  'Z', 'D', 'E',  'F']

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách thay thế giá trị của phần tử trong mảng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành với các ví dụ ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/mang-trong-javascript/thay-the-phan-tu-trong-mang-javascript/