Javascript nâng cao

Mảng trong javascript

20/12/2023

Mảng trong javascript là các biến đặc biệt, mỗi mảng chứa nhiều giá trị và được đánh chỉ số từ 0. Xử lý mảng là kiến thức quan trọng, vì rất thường hay dùng để giải quyết các bài toán thực tế như sắp xếp, tìm kiếm, tính toán, duyệt phần tử… Trong javascript, mỗi mảng là đối tượng

Khai báo mảng trong javascript

Để khai báo một mảng, , bạn dùng cú pháp như sau:

<script>
let arr = []; //khai báo mảng rỗng
let arr = ["Nhân" , "Lễ" , "Nghĩa" ];//mảng 3 phần tử,chỉ số là 0,1,2
</script>

Hàm toString() trong mảng

Đây là hàm dùng để ghép các phần tử của mảng thành chuỗi ký tự, các phần tử cách nhau bởi dấu phẩy. Ví dụ dùng hàm toString như sau:

<script> 
  let arr = ["Nhân", "Lễ", "Nghĩa"] ;
  let str = arr.toString();
  console.log(str); // Nhân,Lễ,Nghĩa
</script>

Hàm join() trong mảng

Dùng hàm join để ghép các phần tử của mảng thành chuỗi ký tự, các phần tử cách nhau bởi ký tự truyền vào. Ví dụ dùng hàm join như sau:

<script>
 let arr = ["Nhân", "Lễ", "Nghĩa"] ;
 let str = arr.join("-");
 console.log(str); // Nhân-Lễ-Nghĩa
</script>

Hàm push() trong mảng

push() là hàm dùng để thêm phần tử vào cuối mảng. Ví dụ dùng hàm push như sau:

<script>
  let arr = ["Nhân", "Lễ", "Nghĩa"] ;
  let str = arr.push("Trí");
  console.log(arr); // ["Nhân", "Lễ", "Nghĩa", "Trí"]
</script>

Hàm pop() trong mảng

Đây là hàm dùng để lấy ra và xóa phần tử cuối của mảng.

<script>
  let arr = ["Nhân", "Lễ", "Nghĩa"] ;
  let str = arr.pop();
  console.log(str, arr); // Nghĩa ["Nhân", "Lễ"]
</script>

Hàm unshift()

Đây là hàm dùng để thêm 1 phần tử vào đầu mảng

<script>
  let arr = ["Nhân", "Lễ", "Nghĩa"] ;
  let str = arr.unshift("Tín");
  console.log(arr); // ["Tín", "Nhân", "Lễ", "Nghĩa"]
</script>

Hàm shift()

shift() giúp lấy ra và xóa phần tử đầu mảng

<script>
  let arr = ["Nhân", "Lễ", "Nghĩa"] ;
  let str = arr.shift();
  console.log(str, arr); // Nhân ["Lễ", "Nghĩa"]
</script>

Hàm slice()

slice() Lấy ra các phần tử của mảng từ start đến trước end

<script>
let diem = [7, 2, 9, 1, 0, 8, 1] ;
let d = diem.slice(3, 6);//lấy phần tử từ vị trí 3 đến thứ 5
console.log(d); // [1, 0, 8]
</script>

filter() lọc phần tử của mảng

Đây là hàm giúp lọc ra các phần tử thõa mãn điều kiện trong mảng

<script>
let soluong = [7, 2, 9, 1, 12, 8, 3] ;
let soluongnhieu = soluong.filter(function (value, index)
     if (value>=5)  return  true;
});
console.log(soluongnhieu); // [7, 9, 12, 8] 
</script>

Đảo ngược mảng

Hàm reverse() dùng để đảo ngược 1 mảng

<script>
  let nu = ["Em", "Không","Yêu","Anh"] ;
  let d = nu.reverse();
  console.log(d); // ["Anh", "Yêu", "Không", "Em"]
</script>

Thay thế phần tử trong mảng

splice(position, numDel, value1, value2, .. ) : Tại position xóa numDel phần tử, rồi tại đó thêm các phần tử vào value1, value2 vào mảng. Ví dụ:

<script>
 let soluong = [7, 8, 2, 5, 12, 9, 20, 4] ;
 soluong.splice(3, 2, 30, 40, 50);   
 //từ vị trí 3 xóa 2 phần tử (5, 12) rồi tại đó chèn 30,40,50
 console.log(soluong); // [7, 8, 2, 30, 40, 50, 9, 20, 4]
</script>

Sắp xếp mảng

sort(): hàm này dùng để sắp xếp mảng theo thứ tự chữ cái alphabet. Do đó nếu sắp xếp mảng chứa dữ liệu số thì sẽ được kết quả không chính xác.

<script>
  let soluong = [7,8,2,5,12,9,20,4] ;
  soluong.sort();//sắp xếp theo alphabet
  console.log(soluong); // [12, 2, 20, 4, 5, 7, 8, 9]
  soluong.sort( function(a,b){ return a-b} ); //sắp theo số, tăng dần
  console.log(soluong); //  [2, 4, 5, 7, 8, 9, 12, 20]
  soluong.sort(function(a,b){ return b-a});//sắp theo số, giảm dần
  console.log(soluong); //  [20, 12, 9, 8, 7, 5, 4, 2]
</script>

Lặp qua mảng

Hàm forEach() dùng khi cần duyệt qua từng phần tử của mảng, hàm callback nhận tham số là giá trị và chỉ số của phần tử được duyệt.

<script>
 let soluong = [7, 8, 2, 5, 12, 9, 20, 4] ;
 soluong.forEach(function(value, index){
     console.log(index + " : " + value );
 })
</script>

Nếu không cần chỉ số index, có thể bỏ qua, hàm calllack nhận chỉ 1 tham số là giá trị của phần tử

<script>
 let soluong = [7, 8, 2, 5, 12, 9, 20, 4] ;
 soluong.forEach( function(value){ 
   console.log(value); 
} )
</script>

Hàm callback xử lý từng phần tử của mảng có thể viết ngắn gọn hơn theo kiểu hàm mũi tên như sau

<script>
 let soluong = [7, 8, 2, 5, 12, 9, 20, 4] ;
 soluong.forEach(  value => { console.log(value); } )
</script>

Hàm map() trong mảng

map() rất hữu dụng. Nó giúp duyệt qua từng phần tử của mảng và trả về 1 mảng mới (không ảnh hưởng đến mảng gốc) có cấu trúc tùy chỉnh. Ví dụ:

<script>
let listsv  = [
   {ht:"Mai Thanh Toán", tuoi: 20},
   {ht:"Thi Hoài", tuoi: 22},
   {ht:"Phạm Luật", tuoi: 19},
   {ht:"Mai Anh Tới", tuoi: 21},
] ;
let ht_arr = listsv.map(  (sv, index) => {return sv.ht} );
console.log(ht_arr);
// ["Mai Thanh Toán", "Thi Hoài", "Phạm Luật", "Mai Anh Tới"]

let tuoi_arr = listsv.map(  (sv, index) => {return sv.tuoi} );
console.log(tuoi_arr);
// [20, 22, 19, 21]
</script>

Trên đây là cách khai báo và mình họa các àm thường dùng để xử lý mảng trong javascript. Khi nào cần bạn quay lại coi nhé.

Đọc thêm bài này Biến kiểu dữ liệu toán tử và biểu thức trong Javascript , và https://www.w3schools.com/js/js_arrays.asp , https://www.w3schools.com/jsref/jsref_obj_array.asp