Phương thức
[ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ] 5 [ 12, 21, 35, 44, 10, 1.6 ] 65 thêm 0 hoặc nhiều phần tử vào cuối mảng
Thí dụ
let city = ["New York", "Madrid", "Kathmandu"];
// add "London" to the array
city.push["London"];
console.log[city];
// Output: [ 'New York', 'Madrid', 'Kathmandu', 'London' ]
cú pháp đẩy []
Cú pháp của phương thức
[ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ] 5 [ 12, 21, 35, 44, 10, 1.6 ] 65 là
arr.push[element1, element2, ..., elementN]
Ở đây, arr là một mảng
đẩy [] Tham số
Phương thức
[ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ] 5 [ 12, 21, 35, 44, 10, 1.6 ] 65 lấy một số phần tử tùy ý để thêm vào mảng
push[] Giá trị trả về
- Trả về độ dài mới [sau khi nối thêm các đối số] của mảng mà phương thức được gọi
ghi chú
- Phương thức này thay đổi mảng ban đầu và độ dài của nó
- Để thêm phần tử vào đầu mảng, hãy sử dụng phương thức JavaScript Array unshift[]
Thí dụ. Sử dụng phương thức đẩy[]
var languages = ["JavaScript", "Python", "Java", "Lua"];
var count = languages.push["C++"];
console.log[languages]; // [ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ]
console.log[count]; // 5
var priceList = [12, 21, 35];
var count1 = priceList.push[44, 10, 1.6];
console.log[priceList]; // [ 12, 21, 35, 44, 10, 1.6 ]
console.log[count1]; // 6
đầu ra
[ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ] 5 [ 12, 21, 35, 44, 10, 1.6 ] 6
Bài đọc được đề xuất
Dưới đây là 5 cách để thêm một mục vào cuối một mảng.
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
7, const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
8 và const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
9 sẽ thay đổi mảng ban đầu. Trong khi đó const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
0 và const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
1 sẽ không và thay vào đó sẽ trả về một mảng mới. Cái nào là tốt nhất tùy thuộc vào trường hợp sử dụng của bạn 👍đột biến
Điều này sẽ thay đổi mảng ban đầu
const array = ['🦊'];
array.push['🐴'];
array.splice[array.length, 0, '🐴'];
array[array.length] = '🐴';
// Result
// ['🦊', '🐴']
không đột biến
Điều này sẽ tạo ra một mảng mới và mảng ban đầu không thay đổi
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
- 3 cách để thêm mục vào mảng [mutative]
- đẩy
- mối nối
- chiều dài
- 2 cách để thêm mục vào mảng [không thay đổi]
- concat
- Lan tràn
- Đột biến hay không đột biến?
- Đầu vào của cộng đồng
- Tài nguyên
# 3 Cách Nối Mục vào Mảng [Mutative]
Hãy xem xét 3 cách chúng ta có thể đẩy một mục vào một mảng. Đây sẽ là cách đột biến, nghĩa là nó sẽ thay đổi mảng ban đầu
# đẩy
Cách đơn giản nhất để thêm các phần tử vào cuối một mảng là sử dụng
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
7const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
Lưu ý rằng tôi đã nói vật phẩm chứ không chỉ vật phẩm 😉 Yup, bạn có thể đẩy nhiều vật phẩm
arr.push[element1, element2, ..., elementN]
3Nhưng việc chuyển các mục riêng lẻ là một lực cản như vậy, may mắn thay, chúng tôi có thể sử dụng tính năng trải rộng của ES6. Điều này cho phép chúng ta truyền một mảng và sau đó sử dụng cú pháp
const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
3 để trải mục đó thành các đối số riêng lẻ 🙌arr.push[element1, element2, ..., elementN]
5# mối nối
Thoạt nhìn, phương pháp này có vẻ rất cần thiết 😂 bởi vì chúng ta đang chuyển một loạt đối số. Đó là bởi vì phương pháp này có thể thêm HOẶC loại bỏ các mục mảng. Do đó, nó yêu cầu chúng tôi cung cấp thêm một chút thông tin để nó thực hiện công việc của mình. Hãy xem các thông số mà nó yêu cầu
Tham số Tên tham sốDefinition1startIndexChỉ mục nơi bạn muốn thêm/xóa item2deleteCountSố lượng mục bạn muốn xóa3itemsSố bạn muốn thêm[Nếu bạn đang xóa, bạn có thể để trống phần này
arr.push[element1, element2, ..., elementN]
6# chiều dài
Tôi nghĩ rằng đây là cách thông minh nhất trong 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í của tôi. Vì vậy, hãy hiểu tại sao điều này hoạt động
Mảng trong JavaScript là không có chỉ mục. Vì vậy, mục đầu tiên có chỉ số là
const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
4arr.push[element1, element2, ..., elementN]
8Ký hiệu dấu ngoặc trong 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 đè mục đó
arr.push[element1, element2, ..., elementN]
9Điều thú vị là
const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
5 trả về cho chúng ta tổng số phần tử trong mảng. Điều đó có nghĩa là độ dài luôn cao hơn một số so với mục cuối cùng trong chỉ mục của chúng tôi. Vì vậy, bằng cách gán một giá trị ở chỉ số độ dài, về cơ bản, nó sẽ thêm một mục vào cuối mảngvar languages = ["JavaScript", "Python", "Java", "Lua"];
var count = languages.push["C++"];
console.log[languages]; // [ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ]
console.log[count]; // 5
var priceList = [12, 21, 35];
var count1 = priceList.push[44, 10, 1.6];
console.log[priceList]; // [ 12, 21, 35, 44, 10, 1.6 ]
console.log[count1]; // 6
1# 2 Cách Nối Mục vào Mảng [Không Đột biến]
Được rồi, hãy tiếp tục nối thêm một mục vào một mảng theo cách không thay đổi. Trong đó mảng ban đầu sẽ không bị ảnh hưởng và một mảng mới sẽ chứa phần 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 ta có thể sử dụng nó để thêm nhiều mục bằng cách chuyển vào một mảng
var languages = ["JavaScript", "Python", "Java", "Lua"];
var count = languages.push["C++"];
console.log[languages]; // [ 'JavaScript', 'Python', 'Java', 'Lua', 'C++' ]
console.log[count]; // 5
var priceList = [12, 21, 35];
var count1 = priceList.push[44, 10, 1.6];
console.log[priceList]; // [ 12, 21, 35, 44, 10, 1.6 ]
console.log[count1]; // 6
2Nhưng nó không chỉ chấp nhận mảng làm tham số của nó, nó còn chấp nhận [các] giá trị
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
0# Lan tràn
Chúng ta có thể sử dụng cú pháp trải rộng để 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 spread để 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ư tác động của
const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
0const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
1Tuy nhiên, nếu chúng tôi không sử dụng trải rộng, thay vào đó, chúng tôi sẽ nhận được một mảng lồng nhau, đây không phải là điều chúng tôi muốn
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
2Vì 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ể chuyển [các] giá trị riêng lẻ, giống như chúng ta làm khi tạo một mảng thông thường
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
3# Đột biến hay không đột biến?
Vì vậy, câu hỏi đặt ra là biến đổi hay không biến đổi 🎭 Điều đó thực sự phụ thuộc vào trường hợp sử dụng của bạn. Khi bạn đang làm việc trong Redux hoặc bất kỳ kiến trúc quản lý trạng thái 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 đột biến sẽ là sự lựa chọn của bạn. Ngoài ra, ý tưởng về tính bất biến thường được ưu tiên hơn vì nó được coi là một cách thực hành 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? . 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
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
4Trong 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. Mục tiêu của tôi để nối thêm một giá trị là
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
7. Tại sao? . Vâng, bạn có thể lập luận rằng const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
0 cũng rất ngắn để gõ. Nhưng hãy kiểm tra thử nghiệm hiệu suất này. Đẩy nhanh hơn rất nhiều. ⚡️Kiểm tra hiệu suất. Đẩy vs Concat
# Đầu vào của cộng đồng
@DigianPaul. Đột biến hay không đột biến? . Nhưng, để đơn giản hóa, giả sử mảng ban đầu vẫn cần ở một nơi khác? . Nếu không cần thiết, bạn có thể thay đổi trực tiếp, cách này thường nhanh hơn tạo bản sao
Đã nói rằng có những cấu trúc dữ liệu trong đó việc tạo một bản sao của mảng rẻ như biến đổi nó [hoặc rẻ tương đương] và những cấu trúc đó 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 nhiều trường hợp. Nhưng chúng khá phức tạp để thiết kế
Chẳng hạn, chúng làm cho chức năng thực hiện đơn giản như hoàn tác làm lại. Nhưng chúng 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ể trả trước bằng cách sử dụng
const zoo = ['🦊', '🐮'];
zoo.push['🐧'];
console.log[zoo]; // ['🦊', '🐮', '🐧']
9 hoặc arr.push[element1, element2, ..., elementN]
30@stojakovic99. Một cách khó khăn để 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ữ thích hợp hơn sẽ là 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. ]
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
5@devhammed. Bạn cũng có thể sử dụng nó để thu nhỏ mảng
const original = ['🦊'];
let newArray;
newArray = original.concat['🦄'];
newArray = [...original, '🦄'];
// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']
6@johnkazer. Điểm không thay đổi nếu bạn cần mảng ở nơi khác là một điểm tốt, đặc biệt đối với lập trình song song hoặc đồng thời. Ngay cả trong JavaScript đơn luồng, bạn có thể đã chuyển một mảng theo tham chiếu và do đó làm thay đổi mọi thứ một cách bất ngờ. Nói chung, tôi thấy không đột biến là một phương pháp thư giãn hơn