Mảng Array trong Javascript có thể chứa nhiều phần tử và các kiểu dữ liệu. Mảng hữu ích cho việc tạo biến giống nhau một cách nhanh, ngắn gọn.

1. Cách tạo một biến chứa Array

Cách 1 (phổ biến thường dùng)

Tạo một biến languages chứa các ngôn ngữ lập trình, chứa hàm, chứa số,…

var languages1 = [

'Javascript',

'PHP',

'Python',

'Ruby',

null,

undefined,

function () {},

{},

12

]

 

Cách 2: tạo Array bằng new

var languages2 = new Array ()

Tạo các này thì chỉ cần dùng dấu ngoặc tròn, không dùng ngoặc vuông. Nhưng cách này không khuyến cáo sử dụng vì tốc độ thực thi chậm hơn.

Kiểu dữ liệu của 2 cách tạo Array trên

Cả 2 cách tạo Array trên, khi kiểm tra typeof đều trả về Object, nhưng thực ra nó là Array

    console.log(typeof languages1) // Object
    console.log(typeof languages2) // Object

Kiểu dữ liệu của Object {} mới là Object

console.log({}) // Object

Bởi vậy, cần phải có cách phân biệt giữa kiểu dữ liệu Object {} và Array như sau:

Để kiểm tra biến languages1 và languages2 có phải là Array hay không bằng cách sau:

    console.log(Array.isArray(languages1)) // true - tức biến languages1 là Array
    console.log(Array.isArray(languages2)) // true - tức biến languages2 là Array
    console.log(Array.isArray([])) // true - tức biến Array [] là Array
    console.log(Array.isArray({})) // false - tức Object {} không phải là Array.
Javascript-array-methods

Javascript-array-methods

2. Truy xuất Mảng – Array

Kiểm tra độ dài mảng

    console.log(languages1.length) // 9 - tức là có 9 phần tử trong mảng.

Cách lấy phần từ theo index – chỉ mục, hay key.

Array trả về kiểu dữ liệu đánh số tự động từ 0 – 1 – 2 – …. các số này gọi là số chỉ mục – index hoặc key.
    console.log(languages1[0]) // Javascript
    console.log(languages1[1]) // PHP
    console.log(languages1[2]) // Python

3. Làm việc với mảng Array

Cho ví dụ 1 Array sau:

var languages = [
    'Javascript',
    'PHP',
    'Python',
    'Ruby'
    ]

3.1. To String – (.toString)

Chuyển đổi dạng mảng sang dạng chuỗi, giữ nguyên dấu phẩy ngăn cách các phần từ trong Array.

console.log(languages.toString()) // Javascript,PHP,Python,Ruby (kiểu dữ liệu string)

3.2. Join – (.join)

  • Chuyển đổi dạng mảng sang dạng chuỗi,
console.log(languages.join()) // Javascript,PHP,Python,Ruby (kiểu dữ liệu string)
  • Loại bỏ dấu phẩy thì truyền chuỗi rỗng vào join
console.log(languages.join(”)) // JavascriptPHPPythonRuby (kiểu dữ liệu string)
  • Thêm vào ký tự giữa các phần từ trong Array. Ví dụ thêm chuỗi chứa dấu cách ‘ ‘

console.log(languages.join(‘ ‘)) // Javascript PHP Python Ruby (kiểu dữ liệu string)

3.3. Pop – (.pop)

Xóa phần tử cuối mảng và trả về phần từ đã xóa.

console.log(languages.pop()) // Ruby
Sau khi xóa Ruby, mảng chỉ còn
[
    ‘Javascript’,
    ‘PHP’,
    ‘Python’
]

Gọi .pop tiếp thì sẽ thực hiện xóa Python ở mảng còn lại.

Có thể gọi .pop cho đến khi xóa hết các phần tử thì thôi.

Khi xóa một Array rỗng, thì kết quả trả về undefined

3.4. Push – (.push)

Thêm một hoặc nhiều phần tử vào cuối mảng, và trả về độ dài mới (số lượng phần tử) sau khi thêm vào.

console.log(languages.push(‘C++’, ‘C##’)) // 5
Thêm chuỗi C++ vào cuối mảng, trả về độ dài mảng mới là 6.
console.log(languages) // [‘Javascript’, ‘PHP’, ‘Python’, ‘Ruby’, ‘C++’, ‘C##’]

3.5. Shift – (.shift)

Xóa phần tử ở đầu mảng và trả về phần từ đã xóa. Mỗi lần gọi .shift thì lại tiếp tục xóa mảng còn lại. Có thể gọi .shift cho đến khi xóa hết các phần tử đến khi trả về undefined thì thôi.

console.log(languages.shift()) // Javascript
// mảng còn lại là:
console.log(languages) // [‘PHP’, ‘Python’, ‘Ruby’]

3.6. Unshift – (.unshift)

Thêm một hoặc nhiều phần tử vào đầu mảng, và trả về độ dài mới (số lượng phần tử) sau khi thêm vào.

console.log(languages.unshift(‘C##’, ‘C+’)) // 6
// thêm 2 chuỗi C## và C+ vào mảng, độ dài mảng mới là 6
console.log(languages) // [‘C##’, ‘C+’, ‘Javascript’, ‘PHP’, ‘Python’, ‘Ruby’]

3.7. Splicing – (.splice)

Xóa phần tử trong mảng với số lượng theo ý muốn, và cũng đồng thời vừa xóa vừa thêm các phần tử mới vào trong mảng.

Cú pháp: array.splice(index, howmany, item1, ….., itemX)

index (bắt buộc, từ số 0 trở đi) là vị trí chỉ mục bắt đầu muốn xóa

howmany (bắt buộc, từ số 0 trở đi) là số phần từ, tính từ vị trí index muốn xóa

item1, …, itemX (không bắt buộc) là các phần tử muốn thêm vào vị trí đã xóa.

var languages3 = [

‘Javascript’,

‘PHP’,

‘Python’,

‘Ruby’

]

console.log(languages3.splice(1, 2, ‘abc’, ‘xyz’)) // [PHP, Python] – .splice thực hiện cắt từ vị trí ‘PHP’ và ‘Python’, và chèn chuỗi ‘abc’, ‘xyz’ vào Array còn lại đúng vị trí vừa cắt.
console.log(languages3) // [‘Javascript’, ‘abc’, ‘Ruby’] – kết quả sau khi cắt.

3.8. Concat – (.concat)

Hợp nhất hay nối các Array lại với nhau thành 1 Array.

Cú pháp:

array1.concat(array2)

Array mới sẽ xếp thứ tự theo vị trí nối, array nào gọi trước sẽ đứng trước, gọi sau sẽ đứng sau.

3.9. Slicing – (.slice)

Dùng cắt một hoặc nhiều phần tử hoặc toàn bộ phần tử trong mảng, trả về phần tử đã cắt nhưng không làm thay đổi mảng gốc. Khi cắt toàn bộ mảng, cũng tương tự như là copy toàn bộ mảng.

Cú pháp

array.slice(index, end)

index (bắt buộc) là vị trí bắt đầu cắt

end (không bắt buộc) là vị trí ngừng cắt, nếu không đặt end thì sẽ cắt đến vị trí cuối cùng của mảng. Hay nói cách khác, sẽ cắt từ vị trí index đến hết cuối mảng.

Ví dụ:

 var languages3 = [
        ‘Javascript’,
        ‘PHP’,
        ‘Python’,
        ‘Ruby’,
        ]
console.log(languages3.slice(1, 2)) // [‘PHP’] – cắt từ phần tử số 1 là PHP đến trước phần tử 2 tức không chứa Python => thì chỉ có PHP được cắt.
console.log(languages3.slice(1, 3)) // [‘PHP’, ‘Python’] – cắt từ phần tử số 1 là PHP đến trước phần tử 3 tức không chứa Ruby => thì chỉ có PHP, Python được cắt.
console.log(languages3.slice(1)) // [‘PHP’, ‘Python’, ‘Ruby’] – cắt từ phần tử số 1 là PHP đến hết cuối mảng, tức gồm PHP, Python, Ruby được cắt.

Cũng có thể truyền số âm (-) vào để xác định vị trí cắt tính từ phía cuối mảng trở lại

Lưu ý: khi xác định vị trí index là âm (-), thì vị trí end (nếu có) cũng phải là âm (-), vì chiều chạy cắt vẫn từ trái sang phải. Hướng cắt từ (… -5, -4, -3, -2, -1, 0)
console.log(languages3.slice(-2, -1)) // [‘Python’]
console.log(languages1.slice(-3, -1)) // [‘PHP’, ‘Python’]

Nếu không dùng end, thì sẽ cắt từ vị trí index đến hết mảng.

console.log(languages3.slice(-1)) // [‘Ruby’]

console.log(languages3.slice(-2)) // [ ‘Python’, ‘Ruby’]

console.log(languages3.slice(-3)) // [‘PHP’, ‘Python’, ‘Ruby’]

Tham khảo dịch vụ: Thiết kế website quảng cáo Google Facebook

Thiet-ke-web-quang-cao-google-facebook-ha-noi

Thiet-ke-web-quang-cao-google-facebook-ha-noi