Giới thiệu
Hôm nay mình sẽ giới thiệu cho các bạn một kiểu dữ liệu trong Javascript, đó là Array. Nó sẽ giúp bạn có thể biểu diễn được những dữ liệu phức tạp và dễ dàng hơn trong việc quản lí cũng như xử lí dữ liệu.
Video học lập trình về mảng trong Javascript
Nguồn Youtube - Sơn Đặng
I) Tạo mảng
Có 2 cách khai báo Array trong javascript:
- Đơn giản nhất là dùng dấu ngoặc vuông ([]) theo sau là giá trị rỗng hoặc là nhiều kiểu giá trị được ngăn cách nhau bằng dấu phẩy (,)
const users= []; const accounts= ["zecky.online" , "blog.zecky.online"];
- Dùng Array constructor thông qua từ khóa 'new'
const users= new Array();
const arr= new Array(1,{},2,true,5,false,"zecky");
-----------------------------------
const cores= new Array(10);
console.log(cores); // kết quả: [ <10 empty items> ]
console.log(cores.length) // kết quả: 10
Lưu ý:
Nếu sử dụng Array constructor chỉ với 1 tham số thì tham số đó chỉ độ dài của mảng và biến đó chứa các elements (phần tử) empty (rỗng)
Chúng ta có thể dùng Array.isArray() để kiểm tra biến đó có phải là kiểu dữ liệu mảng hay không
const scores= [1,23,4,5,6,7,]; const score=2; --------------------------------- console.log(Array.isArray(score)) // kết quả: false console.log(Array.isArray(scores)) // kết quả: true // Lưu ý console.log(typeof score) // kết quả: number console.log(typeof scores) // kết quả: object
Tại sao typeof [] lại là "Object"
Điều này xuất phát từ cách JavaScript xử lý các kiểu dữ liệu. Trong JavaScript, mảng được coi là một kiểu đặc biệt của đối tượng (object). Nói cách khác, mảng không được xem như một kiểu dữ liệu nguyên thủy riêng biệt như số (number), chuỗi (string), hay boolean.
II) Truy cập và tạo phần tử của mảng
Dữ liệu sẽ được gán hoặc là truy cập bằng cách sử dụng dấu [] ;
Ví dụ:
// Gán giá trị [index] = value;
const nums = [];
for (let i = 0; i <= 5; ++i) {
nums[i] = i;
}
console.log(nums) // kết quả; [0,1,2,3,4,5]
---------------------------------------------------------------------
// Truy cập giá trị [vị trí]
const sum= nums[1] +nums[2] +nums[3] +nums[4] +nums[5];
console.log(sum) // kết quả: 15
Tạo mảng từ (string) chuỗi
const sentence = "the quick brown fox jumped over the lazy dog";
// split() sử dụng để chia một chuỗi thành một mảng các chuỗi con
// dựa trên một điểm phân cách.
const words = sentence.split(" ");
for (var i = 0; i < words.length; ++i) {
print("word " + i + ": " + words[i]);
}
// kết quả
word 0: the
word 1: quick
word 2: brown
word 3: fox
word 4: jumped
word 5: over
word 6: the
word 7: lazy
Cách copy mảnh không làm thay đổi mảng ban đầu (14 cách)
Khi các bạn thực hiện copy Javascript object hoặc array bằng phép gán, JS sẽ tạo ra một bản sao của array/object ban đầu. Bản sao này và array/object ban đầu có sự tương quan với nhau. Bất kỳ sự thay đổi xuất phát từ phía nào cũng sẽ làm thay đổi phía còn lại. Các bạn đã thấy trong ví dụ ở trên rồi đấy.
Vậy làm sao để chúng ta có thể tạo ra 1 array/object khác và có thể thay đổi giá trị của chúng mà không làm ảnh hưởng đến array/object gốc?
// Cho người mới bắt đầu
const numbers = [1, 2, 3, 4, 5];
let copy = [];
for (let i = 0; i < numbers.length; i++) {
copy.push(numbers[i]);
}
console.log(copy); // > Array [1, 2, 3, 4, 5]
console.log(numbers); // > Array [1, 2, 3, 4, 5]
Mình tổng hợp được một vài phương pháp bên dưới. Đó cũng là những phương pháp mà mình đang áp dụng trong các dự án của mình trong 13 cách còn lại tại đây!
III) Một số phương thức hay sử dụng
1) push(), pop(), shift(), unshift().
- Push(): Dùng để thêm 1 phần tử vào cuối mảng
const nums = [1,2,3,4,5]; console.log(nums); // 1,2,3,4,5 nums.push(6); console.log(nums); // 1,2,3,4,5,6
- Pop(): Dùng để xóa 1 phần tử cuối mảng
const nums = [1,2,3,4,5]; console.log(nums); // 1,2,3,4,5 nums.pop(); console.log(nums); // 1,2,3,4
- Shift(): Dùng để xóa 1 phần tử đầu mảng
const nums = [1,2,3,4,5]; console.log(nums); // 1,2,3,4,5 nums.shift(); console.log(nums); // 2,3,4,5
- Unshift(): Dùng để thêm 1 phần tử đầu mảng
const nums = [1,2,3,4,5]; console.log(nums); // 1,2,3,4,5 nums.unshift(0); console.log(nums); // 0,1,2,3,4,5
2) slice(), splice()
Slice(): Dùng để lấy 1 mảng giá trị bất kỳ -> Cú pháp [].slice(start ,end);
const numbers= [0,1,2,3,4,5]; // c1 const arr1= numbers.slice(); console.log(arr1) // [0,1,2,3,4,5] -> dùng để copy mảng //c2 const arr2=numbers.slice(2); onsole.log(arr2)// [2,3,4,5]; const arr3= numbers.slice(-2); console.log(arr3) // [4,5] // c3 const arr3= numbers.slice(0,3); console.log(arr3); // [0,1,2]
Giải thích:
- C1: Không truyền tham số thì sẽ copy tất cả phần tử của mảng ban đầu bỏ vào mảng mới:
- C2: Truyền 1 tham số dương nhỏ hơn hoặc bằng độ dài mảng thì tính từ vị trí lấy đến cuối mảng, còn nếu lớn hơn độ dài màng thì trả về mảng rỗng [],
- c3: truyền đầy đủ 2 tham số thì sẽ lấy đoạn từ vị trí start tới vị trí end
Spilce(): Dùng để thêm mảng, thêm phần tử, xóa ở bất kỳ vị trí nào và nó sẽ làm thay đổi mảng ban đầu -> cú pháp: [].splice(index, deleteCount, numbers);
- index là vị trí cần xóa;
- deleteCount là số phần từ sẽ xóa tính từ index;
- numbers là dãy số sẽ được thêm vào từ vị trí index+ deleteCount đã bị xóa đó;
Ví dụ:
--------------------------------- // VD1 const numbers=[0,1,2,3,4,5,6]; const spl1=numbers.splice(4); console.log(numbers) // [4,5,6]; console.log(spl1) // [0,1,2,3]; -------------------------------- // VD2 const numbers=[0,1,2,3,4,5,6]; const spl1=numbers.splice(2,3); console.log(numbers) // [0,1,5,6]; console.log(spl1) // [2,3,4]; -------------------------------- // VD3 const numbers=[0,1,2,3,4,5,6]; const spl1=numbers.splice(0,5,0,1,2,3,4); console.log(numbers) // [0,1,2,3,4,5,6]; console.log(spl1) // [0,1,2,3,4];
Lưu ý:
- Nếu splice() không có tham số thứ 3 thì mảng bị cắt và mảng trả về khi sử dụng splice() gộp lại chính là mảng ban đầu.
Tổng kết
Đây là một số kiến thức về mảng ở mức cơ bản thôi nhé vì phần này khá là dài rồi !
Muốn hiểu rõ hơn thì hẹn gặp lại bạn ở phần tìm hiểu về mảng trong javascript phần 2 nha sẽ rất hay, hấp dẫn cũng như rất quan trọng và là trọng tâm của mảng trong lập trình javascript đấy.
