By GokiSoft.Com| 18:13 19/05/2020|

Tài Liệu Javascript

JavaScript Arrays - Mảng trong JavaScript

Mảng trong JavaScript dùng để chứa nhiều giá trị trong một biến.

ví dụ

var cars = ["Saab", "Volvo", "BMW"];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Mảng là gì?

Một mảng là một giá trị đặc biệt, có thể chưa nhiều hơn một giá trị một lần.

Nếu bạn có một danh sách các phần tử(một danh sách của các tên xe,lấy ví dụ), chứa các xe trong các biến đơn lẻ có thể trông như thế này:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Tuy nhiên, điều gì xảy ra nếu bạn muốn lặp qua các xe và tìm một cái cụ thể? Và điều gì xảy ra nếu nó không chỉ có 3 mà 300 xe?

Giải pháp là một mảng!

Một mảng có thể giữ nhiều giá trị chỉ dưới 1 cái tên, và bạn có thể truy cập các dữ liệu bằng cách tìm đến các chỉ số.

Tạo một mảng

Sử dụng một mảng tĩnh gần như là cách dễ nhất để tạo một mảng JavaScript.

Cú pháp:

var array_name = [item1, item2, ...];

ví dụ

var cars = ["Saab", "Volvo", "BMW"];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Các khoảng trắng và ngắt dòng không quan trọng. Một khi khai báo có thể dãn ra nhiều dòng:

ví dụ

var cars = [
  "Saab",
  "Volvo",
  "BMW"
];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = [
  "Saab",
  "Volvo",
  "BMW"
];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Sử dụng từ khóa new JavaScript

Ví dụ tiếp theo cũng tạo ra một mảng, và gán các giá trị cho nó:

ví dụ

var cars = new Array("Saab", "Volvo", "BMW");

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = new Array("Saab", "Volvo", "BMW");
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Tip: Hai ví dụ trên giống y hệt nhau. Không cần dùng new Array().

Cho đơn giản, dễ đọc và tốc độ thực thi nhanh, sử dụng cái đầu tiên(phương thức khai báo mảng nguyên bản).

Truy cập vào các thuộc tính của một mảng

Bạn có thể truy cập vào mảng bằng cách đưa ra chỉ số.

Câu lệnh sau truy cập vào giá trị của phần tử đầu tin trong cars:

var name = cars[0];

ví dụ

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Tip: Các chỉ số của mảng bắt đầu bằng 0.

[0] là phần tử đầu tiên, [1] là phần tử thứ hai.

Thay đổi một phần tử mảng

Câu lệnh sau thay đổi giá trị của phần tử đầu tiên cars:

cars[0] = "Opel";

ví dụ

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Truy cập toàn bộ mảng

Với JavaScript, toàn bộ mảng có thể được truy cập bằng chỉ ra tên của mảng:

ví dụ

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

</body>
</html>

Mảng là đối tượng

Mảng là một kiểu đặc biệt của đối tượng. Toán tử typeof trong JavaScript trả về "đối tượng" cho mảng.

Nhưng, các mảng JavaScript được thể hiện tốt nhất là các mảng.

Các mảng sử dụng các chữ số để truy cập vào các "thành phần" của nó. Trong ví dụ này, person[0] trả về John:

Array:

var person = ["John", "Doe", 46];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Arrays use numbers to access its elements.</p>

<p id="demo"></p>

<script>
var person = ["John", "Doe", 46];
document.getElementById("demo").innerHTML = person[0];
</script>

</body>
</html>

Các đối tượng dùng những cái tên để truy cập vào các "thành viên". Trong ví dụ này person.firstName trả về John:

Object:

var person = {firstName:"John", lastName:"Doe", age:46};

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript uses names to access object properties.</p>
<p id="demo"></p>

<script>
var person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person["firstName"];
</script>

</body>
</html>

Các phần tử mảng có thể là các đối tượng

Các biến JavaScript có thể là đối tượng. Các mảng là dạng đặc biệt của các đối tượng.

Bởi vì điều này, bạn có thể có các biến của những kiểu dữ liệu khác nhau trong cùng một mảng.

Bạn có thể có các đối tượng trong một mảng. Bạn có thể có các hàm trong một mảng. Bạn có thể có các mảng trong một mảng:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Các đối tượng và phương thức trong mảng

Sức mạnh thật sự của các mảng JavaScript là các thuộc tính mảng xây dựng bên trong và các phương thức:

ví dụ

var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

Các phương thức mảng được đề cập ở các chương kế.

Thuộc tính length

Thuộc tính length của một mảng trả về độ dài của một mảng(số lượng của các phần tử trong mảng).

ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;   // the length of fruits is 4

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>
<p>The length property returns the length of an array.</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.length;
</script>

</body>
</html>

Tip: Thuộc tính length luôn hơn 1 so với chỉ mục cao nhất trong mảng.

Truy cập vào phần tử mảng đầu tiên

ví dụ

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];
document.getElementById("demo").innerHTML = first;
</script>

</body>
</html>

Truy cập vào phần tử cuối trong mảng

ví dụ

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length-1];
document.getElementById("demo").innerHTML = last;
</script>

</body>
</html>

Lặp các phần tử trong mảng

Cách an toàn nhất để lặp qua một mảng, là dùng một vòng for :

ví dụ

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The best way to loop through an array is using a standard for loop:</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Bạn cũng thể sử dụng hàm Array.forEach() :

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array.forEach() calls a function for each array element.</p>

<p>Array.forEach() is not supported in Internet Explorer 8 or earlier.</p>

<p id="demo"></p>

<script>
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
} 
</script>

</body>
</html>

Thêm phần tử mảng

Các dễ nhất để thêm phần tử trong mảng là dùng phương thức push() :

ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // adds a new element (Lemon) to fruits

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The push method appends a new element to an array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits.push("Lemon");
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Phần tử mới cũng có thể được thêm vào mảng sử dụng thuộc tính length :

ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";    // adds a new element (Lemon) to fruits

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The length property provides an easy way to append new elements to an array without using the push() method.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
  fruits[fruits.length] = "Lemon";
  document.getElementById("demo").innerHTML = fruits;
}
</script>

</body>
</html>

Cảnh báo !

Thêm các phần tử với các chỉ số cao có thể tạo ra các "lỗ hổng" undefined trong mảng:

ví dụ

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";    // adds a new element (Lemon) to fruits

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Adding elements with high indexes can create undefined "holes" in an array.</p>

<p id="demo"></p>

<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";

fLen = fruits.length;
text = "";
for (i = 0; i < fLen; i++) {
  text += fruits[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Mảng liên kết(Associative Arrays)

Rất nhiều ngôn ngữ lập trình hỗ trợ các mảng với chỉ mục được đặt tên.

Các mảng với các chỉ mục được đặt tên được gọi là mảng liên kết (hoặc mảng băm).

JavaScript không hỗ trợ mảng với các chỉ mục đặt tên.

Trong JavaScript, các mảng luôn luôn dùng các chỉ mục bằng số.

ví dụ

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;     // person.length will return 3
var y = person[0];         // person[0] will return "John"

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Cảnh báo !

Nếu bạn dùng các chỉ mục đặt tên, JavaScript sẽ định nghĩa lại mảng thành một đối tượng tiêu chuẩn.

Sau đó, một vài phương thức mảng và thuộc tính sẽ cung cấp kết quả không chính xác.

ví dụ

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;     // person.length will return 0
var y = person[0];         // person[0] will return undefined

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Sự khác biệt giữa mảng và đối tượng

Trong JavaScript, các mảng sử dụng chỉ mục chữ số.

Trong JavaScript, các đối tượng sử dụng chỉ mục đặt tên.

Tip: Các mảng là một dạng đặc biệt của các đối tượng, với chỉ mục chữ số.

Khi nào dùng mảng, khi nào dùng đối tượng.

JavaScript không hỗ trở mảng liên tưởng.
Bạn nên sử dụng các đối tượng khi bạn muốn các tên phần tử là các chuỗi (text).
Bạn nên dùng các mảng khi bạn muốn tên của các phần tử là các chữ số.

Tránh new Array()

Không nên sử dụng cấu trúc tạo mảng xây dựng bên trong của JavaScript : new Array().

Sử dụng [] thay thế.

Đây là hai câu lệnh khác nhau nhưng đều tạo một mảng rỗng mới tên là points:

var points = new Array();     // Bad
var points = [];              // Good

Đây là hai câu lệnh khác nhau nhưng đều tạo một mảng mới gồm 6 số:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Avoid using new Array(). Use [] instead.</p>

<p id="demo"></p>

<script>
//var points = new Array(40, 100, 1, 5, 25, 10);
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Từ khóa new chỉ làm phức tạp code. Nó có thể cung cấp một số kết quả không đỡ được:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

Điều gì xảy ra nếu tôi bỏ một phần tử đi?

var points = new Array(40);  // Creates an array with 40 undefined elements !!!!!

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Avoid using new Array().</p>

<p id="demo"></p>

<script>
var points = new Array(40);
document.getElementById("demo").innerHTML = points[0];  
</script>

</body>
</html>

Làm sao để nhận ra một mảng?

Một câu hỏi phổ biến là: Làm sao tôi biết nếu một biến là một mảng?

Vấn đề là các toán tử JavaScript typeof trả về "object":

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;    // returns object

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The typeof operator, when used on an array, returns object:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>

</body>
</html>

Toán tử typeof trả về đối tượng vì một mảng JavaScript là một đối tượng.

Giải pháp 1:

Để giải quyết vấn đề này ECMAScript 5 định nghĩa một phương thức mới Array.isArray():

Array.isArray(fruits);   // returns true

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The new ECMASCRIPT 5 method isArray returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = Array.isArray(fruits);
</script>

</body>
</html>

Giải pháp 2:

Để giải quyết vấn đề này bạn có thể tạo một hàm isArray() của riêng bạn:

function isArray(x) {
  return x.constructor.toString().indexOf("Array") > -1;
}

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>This "home made" isArray() function returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

Chức năng trên luôn trả về true nếu đối số là một mảng.

Hoặc rõ ràng hơn: nó trả về true nếu đối tượng nguyên mẫu chứa từ "Array".

Solution 3:

Toán tử instanceof trả về true nếu một object được tạo bởi một hàm tạo đã cho:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array;   // returns true

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>The instanceof operator returns true when used on an array:</p>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits instanceof Array;
</script>

</body>
</html>

Tags:

Bình luận đang bị khoá