JavaScript Array Methods - Các phương thức của mảng trong JavaScript
Chuyển mảng thành chuỗi
Phương thức JavaScript toString() chuyển một mảng thành một chuỗi(được tách bằng dấu phẩy)các giá trị mảng.
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>toString()</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
Kết quả:
Banana,Orange,Apple,Mango
Phương thức join() cũng đồng thời nối tất cả các thành phần mảng vào trong một chuỗi.
Nó hành động giống với toString(),nhưng ngoài ra bạn có thể chỉ định dấu phân cách:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>join()</h2>
<p>The join() method joins array elements into a string.</p>
<p>It this example we have used " * " as a separator between the elements:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
</body>
</html>
Kết quả:
Banana * Orange * Apple * MangoPopping và Pushing
Khi làm việc với một mảng, rất dễ dàng để xóa phần tử và thêm phần tử mới.
Đây là điều mà popping và pushing làm:
Popping một phần tử ra khỏi một mảng, hoặc pushing một phần tử vào một mảng.
Popping
Phương thức pop() loại bỏ thành phần cuối cùng ra khỏi một mảng:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Removes the last element ("Mango") from fruits<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>pop()</h2>
<p>The pop() method removes the last element from an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.pop();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Phương thức pop() trả về giá trị đã được "popped ra":
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // the value of x is "Mango"<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>pop()</h2>
<p>The pop() method removes the last element from an array.</p>
<p>The return value of the pop() method is the removed item.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.pop();
document.getElementById("demo3").innerHTML = fruits;
</script>
</body>
</html>
Pushing
Phương thức push() thêm một thành phần mới vào một mảng(ở vị trí cuối):
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>push()</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("Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Phương thức push() trả về độ dài của mảng:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>push()</h2>
<p>The push() method returns the new array length.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
function myFunction() {
document.getElementById("demo2").innerHTML = fruits.push("Kiwi");
document.getElementById("demo1").innerHTML = fruits;
}
</script>
</body>
</html>
Dịch chuyển thành phần(Shifting Elements)
Shifting là tương đương với popping, làm việc với phần tử đầu tiên thay vì cuối cùng.
Phương thức shift() loại bỏ thành phần mảng đầu tiên và "dịch" tất cả chỉ mục của thành phần thành chỉ mục thấp hơn.
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Removes the first element "Banana" from fruits<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>shift()</h2>
<p>The shift() method removes the first element of an array (and "shifts" all other elements to the left):</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.shift();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Phương thức shift() trả về chuỗi đã được "trượt ra":
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift(); // the value of x is "Banana"<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>shift()</h2>
<p>The shift() method returns the element that was shifted out.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.shift();
document.getElementById("demo3").innerHTML = fruits;
</script>
</body>
</html>
Phương thức unshift() thêm một thành phần mới vào một mảng( ở đầu), và "trượt lại" các thành phần cũ hơn:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>unshift()</h2>
<p>The unshift() method adds new elements to the beginning of 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.unshift("Lemon");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Phương thức unshift() trả về một độ dài mảng mới.
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // Returns 5<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>unshift()</h2>
<p>The unshift() method returns the length of the new array:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
document.getElementById("demo2").innerHTML = fruits.unshift("Lemon");
document.getElementById("demo3").innerHTML = fruits;
</script>
<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>
</body>
</html>
Thay đổi các thành phần
Các thành phần được truy cập sử dụng các chỉ số của nó:
Tip: Chỉ mục một mảng bắt đầu với 0. [0] là thành phần đầu tiên của mảng,[1] là thứ hai, [2] là thứ 3...
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi"; // Changes the first element of fruits to "Kiwi"<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p>Array elements are accessed using their index number:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits[0] = "Kiwi";
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>
Xóa các thành phần
Từ khi các mảng JavaScript là các đối tượng, các thành phần có thể bị xóa bằng cách dụng toán tử JavaScript delete:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits to undefined<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p>Deleting elements leaves undefined holes in an array.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML =
"The first fruit is: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
"The first fruit is: " + fruits[0];
</script>
</body>
</html>
Tip: Sử dụng delete có thể để lại một lỗ hổng undenifined trong mảng. Sử dung pop() hoặc shift() thay thế.
Nối một mảng
Phương thức splice() có thể được dùng để thêm phần tử mới vào trong mảng:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>splice()</h2>
<p>The splice() method adds new elements to an array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br>" + fruits;
function myFunction() {
fruits.splice(2, 0, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
}
</script>
</body>
</html>
Tham số đầu tiên (2) xác định vị trí nơi thành phần mới nên được thêm vào(nối vào).
Tham số thứ hai (0) xác định bao nhiêu thành phần sẽ được xóa đi.
Phần còn lại của tham số ("Lemon","Kiwi") xác định các thành phần mới sẽ được thêm vào.
Phương thức splice() trả về một mảng với các phần tử đã bị xóa:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>splice()</h2>
<p>The splice() method adds new elements to an array, and returns an array with the deleted elements (if any).</p>
<button onclick="myFunction()">Try it</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = "Original Array:<br> " + fruits;
function myFunction() {
var removed = fruits.splice(2, 2, "Lemon", "Kiwi");
document.getElementById("demo2").innerHTML = "New Array:<br>" + fruits;
document.getElementById("demo3").innerHTML = "Removed Items:<br> " + removed;
}
</script>
</body>
</html>
Sử dụng splice() để di chuyển các thành phần
Với sự thiết đặt tham số một cách thông minh, bạn có thể dùng splice() để xóa các thành phần mà không để lại các "lỗ hổng" trong chuỗi:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // Removes the first element of fruits<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>splice()</h2>
<p>The splice() methods can be used to remove array elements.</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.splice(0, 1);
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Tham số đầu tiên (0) xác định vị trí nơi thành phần mới sẽ được thêm vào(nối vào).
Tham số thứ hai (1) xác định bao nhiêu thành phần sẽ bị xóa.
Phần còn lại của tham số bị bỏ qua. Không có thành phần mới sẽ được thêm.
Nhập (nối tiếp) các mảng
Phương thức concat() tạo ra một mảng bằng cách nhập (nối tiếp) các mảng đang tồn tại:
ví dụ(nhập hai mảng)
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls and myBoys<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p>The concat() method is used to merge (concatenate) arrays:</p>
<p id="demo"></p>
<script>
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Tip: Phương thức concat() không làm thay đổi các mảng đang tồn tại. Nó luôn trả về một mảng mới.
Phương thức concat() có thể lấy bất kì số lượng đối số của mảng:
ví dụ(nhập 3 mảng)
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with arr2 and arr3<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p>The concat() method is used to merge (concatenate) arrays:</p>
<p id="demo"></p>
<script>
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Phương thức concat() cũng có thể lấy các chuỗi như các đối số:
ví dụ(nhập một mảng với các giá trị)
var arr1 = ["Emil", "Tobias", "Linus"];
var myChildren = arr1.concat("Peter"); <!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>concat()</h2>
<p>The concat() method can also merge string values to arrays:</p>
<p id="demo"></p>
<script>
var arr1 = ["Emil", "Tobias", "Linus"];
var myChildren = arr1.concat("Peter");
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>Cắt một mảng
Phương thức slice() cắt ra một mảnh của một mảng ra một mảng mới.
Đây là ví dụ của cắt ra một phần của một mảng bắt đầu từ thành phần mảng 1("Orange"):
ví dụ
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>This example slices out a part of an array starting from array element 1 ("Orange"):</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Phương thức slice() có thể lấy hai đối số như slice(1, 3).
Phương thức sau đó chọn các thành phần từ đối số bắt đầu, và lên đến
(nhưng không báo gồm) đối số kết thúc.
ví dụ
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>When the slice() method is given two arguments, it selects array elements from the start argument, and up to (but not included) the end argument:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Nếu đối số kết thúc bị bỏ qua, như ví dụ đầu tiên, phương thức slice() sẽ cắt ra phần còn lại của chuỗi.
ví dụ
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>slice()</h2>
<p>This example slices out a part of an array starting from array element 2 ("Lemon"):</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);
document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
</script>
</body>
</html>
Tự động toString()
JavaScript tự động chuyển một mảng thành chuỗi phân cách bằng dấu phẩy khi mong muốn có một dữ liệu nguyên thủy.
Điều này luôn là trường hợp xảy ra khi bạn cố gắng xuất ra một chuỗi.
Hai ví dụ sau đây, sẽ cung cấp một kết quả như nhau:
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<h2>toString()</h2>
<p>The toString() method returns an array as a comma separated string:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
ví dụ
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Methods</h2>
<p>JavaScript automatically converts an array to a comma separated string when a simple value is expected:</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
Tip: Toàn bộ các đối tượng JavaScript đều có phương thức toString().
Tìm giá trị tối đa tối thiểu trong một chuỗi
Không hề có chức năng xây dựng bên trong cho việc tìm kiếm giá trị cao nhất hoặc thấp nhất trong một mảng JavaScript.
Bạn sẽ học các để giải quyết vấn đề này trong chương tiếp theo của hướng dẫn này.
Sắp xếp các chuỗi
Bạn sẽ học các để giải quyết vấn đề này trong chương tiếp theo của hướng dẫn này.
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
