Hướng dẫn add value to array javascript - thêm giá trị vào mảng javascript

Ví dụ

Thêm một mục mới vào một mảng:

const fruits = ["chuối", "cam", "táo", "xoài"]; trái cây.push ["kiwi"];
fruits.push["Kiwi"];

Hãy tự mình thử »

Thêm hai mục mới vào mảng:

const fruits = ["chuối", "cam", "táo", "xoài"]; trái cây.push ["kiwi", "chanh"];
fruits.push["Kiwi", "Lemon"];

Hãy tự mình thử »

Thêm hai mục mới vào mảng:

const fruits = ["chuối", "cam", "táo", "xoài"]; trái cây.push ["kiwi", "chanh"];to the end of an array.

Định nghĩa và cách sử dụng

Phương thức

[1, 2, 3, 4, 5]

Phương pháp

[1, 2, 3, 4, 5]

2 thay đổi độ dài của mảng.

Phương pháp

[1, 2, 3, 4, 5]

Cú pháp

ITEM1ITEM2..Itemx

ITEM1ITEM2..Itemx

[Các] mục để thêm vào mảng. Tối thiểu một mục là bắt buộc.

Giá trị trả về
fruits.push["Kiwi", "Lemon", "Pineapple"];

Hãy tự mình thử »

Thêm hai mục mới vào mảng:

const fruits = ["chuối", "cam", "táo", "xoài"]; trái cây.push ["kiwi"];
fruits.push["Kiwi"];

Hãy tự mình thử »

Thêm hai mục mới vào mảng:

const fruits = ["chuối", "cam", "táo", "xoài"]; trái cây.push ["kiwi", "chanh"];

Định nghĩa và cách sử dụng

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

Có một vài cách để nối một mảng trong JavaScript:

1] Phương thức

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

var a = [1, 2, 3];
a.push[4, 5];
console.log[a];

Output:

[1, 2, 3, 4, 5]

2] Phương thức

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

Output:

[4, 5, 1, 2, 3]

3] Phương pháp

[1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];
var arr3 = arr1.concat[arr2];
console.log[arr3];

Output:

[ "a", "b", "c", "d", "e", "f" ]

4] Bạn có thể sử dụng thuộc tính

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var ar = ['one', 'two', 'three'];
ar[ar.length] = 'four';
console.log[ ar ]; 

Output:

 ["one", "two", "three", "four"]

5] Phương pháp

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var myFish = ["angel", "clown", "mandarin", "surgeon"];
myFish.splice[4, 0, "nemo"];
//array.splice[start, deleteCount, item1, item2, ...]
console.log[myFish];

Output:

["angel", "clown", "mandarin", "surgeon","nemo"]

6] Bạn cũng có thể thêm một phần tử mới vào một mảng chỉ bằng cách chỉ định chỉ mục mới và gán một giá trị: You can also add a new element to an array simply by specifying a new index and assigning a value:

[1, 2, 3, 4, 5]

Output:

[1, 2, 3, 4, 5]

Dưới đây là 5 cách để thêm một mục vào cuối một mảng.

[1, 2, 3, 4, 5]

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

Đột biến

Điều này sẽ thay đổi mảng ban đầu

Không đột biến

Điều này sẽ tạo ra một mảng mới và mảng ban đầu vẫn không thay đổi.

# 3 Cách để nối vật phẩm vào mảng [đột biến]

Hãy xem xét 3 cách chúng ta có thể đẩy một vật phẩm vào một mảng. Đây sẽ là cách đột biến, có nghĩa là nó sẽ thay đổi mảng ban đầu.

# đẩy

Cách đơn giản nhất để thêm các mục vào cuối một mảng là sử dụng

[1, 2, 3, 4, 5]

Lưu ý tôi đã nói các mục và không chỉ mục 😉 yup, bạn có thể đẩy nhiều mục.s and not just item 😉 Yup, you can push multiple items.

Nhưng vượt qua các mục riêng lẻ là một lực cản như vậy, may mắn là chúng ta có thể sử dụng tính năng lây lan của ES6. Điều này cho phép chúng tôi vượt qua một mảng và sau đó sử dụng cú pháp

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

# Splice

Thoạt nhìn, phương pháp này có vẻ cực kỳ khó khăn vì chúng tôi sẽ vượt qua một loạt các đối số. Đó là bởi vì phương pháp này có thể thêm hoặc xóa các mục mảng. Do đó, nó yêu cầu chúng tôi cung cấp cho nó thêm một chút thông tin để nó thực hiện công việc của nó. Hãy xem xét các tham số mà nó yêu cầu:

# chiều dài

Tôi nghĩ rằng đây là cách thông minh nhất của tất cả các phương pháp. Đó là một trong những cách không bao giờ vượt qua tâm trí tôi. Vì vậy, chúng ta hãy hiểu tại sao điều này hoạt động.

Mảng trong JavaScript là không chỉ số. Vì vậy, mục đầu tiên có một chỉ mục là

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

Ký hiệu khung trong các mảng cho phép chúng tôi truy xuất mục nhưng nó cũng có thể cho phép chúng tôi ghi đè vật phẩm đó.

Điều thú vị là

[4, 5, 1, 2, 3]

# 2 Các cách để nối vật phẩm vào mảng [không đột biến]

Được rồi, chúng ta hãy chuyển sang nối một mục vào một mảng theo cách không đột biến. Trường hợp mảng ban đầu sẽ không bị ảnh hưởng và một mảng mới sẽ chứa bổ sung.

# Concat

Phương pháp này có nghĩa là hợp nhất các mảng. Vì vậy, chúng tôi có thể sử dụng nó để thêm nhiều mục bằng cách chuyển trong một mảng.

Nhưng nó không chỉ chấp nhận các mảng làm tham số của nó, nó cũng chấp nhận [các] giá trị.

# Lan tràn

Chúng ta có thể sử dụng cú pháp lây lan để mở rộng từng phần tử mảng thành các phần tử riêng lẻ. Một ứng dụng rất phổ biến là sử dụng lan truyền để tạo một bản sao hoặc hợp nhất hai mảng riêng biệt. Điều này tương tự như các tác động của

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

Tuy nhiên, nếu chúng tôi không sử dụng sự lây lan, thay vào đó chúng tôi sẽ nhận được một mảng lồng nhau, đó không phải là thứ chúng tôi muốn.

Vì vậy, tôi có thể sử dụng nó để hợp nhất các mảng, nhưng chúng ta cũng có thể vượt qua [các] giá trị riêng lẻ, giống như chúng ta làm trong việc tạo ra một mảng thông thường.

# Đột biến hay không đột biến?

Vì vậy, câu hỏi là, để đột biến hoặc không đột biến 🎭 Vâng, điều đó thực sự phụ thuộc vào trường hợp sử dụng của bạn. Khi bạn làm việc trong Redux hoặc bất kỳ kiến ​​trúc quản lý nhà nước nào, thì đó là tất cả về tính bất biến. Vì vậy, các phương pháp không sửa chữa sẽ là lựa chọn của bạn. Ngoài ra, ý tưởng về tính bất biến thường được ưa thích vì nó được coi là một thực tiễn tốt để tránh các tác dụng phụ - đó là nền tảng của lập trình chức năng và tạo ra các chức năng thuần túy.

Nhưng điều đó có nghĩa là chúng ta không bao giờ nên sử dụng các phương pháp đột biến? Không có gì. Bởi vì có những lúc tính bất biến không quan trọng. Lấy ví dụ đơn giản này.

Trong những trường hợp này, tại sao không sử dụng các phương pháp đột biến. Việc tôi tham gia vào một giá trị là

[1, 2, 3, 4, 5]

var a = [1, 2, 3];
a.unshift[4, 5];
console.log[a]; 

Kiểm tra hiệu suất: Đẩy vs Concat

@DigianPaul: Đột biến hay không đột biến? Nói chung, đó là một câu hỏi rất sâu sắc. Nhưng, để đơn giản hóa, giả sử mảng ban đầu vẫn cần thiết ở một nơi khác? Sau đó, bạn không muốn biến đổi nó. Nếu không cần thiết, bạn có thể đột biến nó trực tiếp, thường nhanh hơn so với việc tạo một bản sao.To Mutate or Not to Mutate? In general, it is a very deep question. But, to simplify, suppose the original array is still needed somewhere else? Then you don't want to mutate it. If it is not needed, you can mutate it directly, which is usually faster than creating a copy.

Cho biết có các cấu trúc dữ liệu trong đó tạo ra một bản sao của mảng rẻ như biến đổi nó [hoặc giá rẻ có thể so sánh] và chúng rất tuyệt nhưng không quá phổ biến trong cộng đồng JavaScript.

Chúng được gọi là "cấu trúc dữ liệu liên tục" và cực kỳ hữu ích trong rất nhiều trường hợp. Nhưng chúng khá phức tạp để thiết kế.

Chúng làm cho đơn giản để thực hiện chức năng như Undo-redo chẳng hạn. Nhưng họ thực sự tỏa sáng trong lập trình chức năng và cả trong các ứng dụng đa luồng.

@Kclarkadstech: Ngoài ra, bạn có thể dự bị bằng cách sử dụng

[4, 5, 1, 2, 3]

[4, 5, 1, 2, 3]

@Stojakovic99: Một cách hacky để thêm một mục trống vào một mảng [nếu chúng ta thậm chí có thể gọi nó là nối thêm một mục vào một mảng, tôi nghĩ rằng một thuật ngữ phù hợp hơn sẽ được thay đổi kích thước] sẽ là: [tuy nhiên bạn không bao giờ nên làm điều này. ]

@Devhammed: Bạn cũng có thể sử dụng nó để thu nhỏ mảng

@johnkazer: Điểm về việc không đột biến nếu bạn cần mảng ở nơi khác là một điều tốt, đặc biệt là cho lập trình song song hoặc đồng thời. Ngay cả trong JavaScript duy nhất, bạn có thể đã vượt qua một mảng bằng cách tham chiếu và vì vậy bất ngờ đột biến. Nói chung tôi thấy không phải là một phương pháp thư giãn hơn!

# Tài nguyên

• MDN Web Docs: Đẩy
• MDN Web Docs: Concat
• MDN Web Docs: Splice
• MDN Web Docs: Truyền bá
• MDN Web Docs: Array.length
• Stack Overflow: Làm thế nào để nối một cái gì đó vào một mảng?
• Cách nối một mục vào một mảng trong JavaScript
• Phương pháp mảng JavaScript: Đột biến so với không hợp tác
• Để biến đổi, hoặc không đột biến, trong javascript
• Mảng Thêm
• JavaScript "Thêm vào mảng" các chức năng [đẩy vs unshift so với các chức năng khác]
• Đẩy là 945 lần so với Concat

Làm thế nào một giá trị có thể được nối vào một mảng JavaScript?

Chúng ta có thể nối các giá trị trong mảng không?

Sum += trong JavaScript là gì?