Hàm chúng tôi đã chuyển đến Mảng. Phương thức forEach được gọi với từng phần tử [đối tượng] trong mảng
Trên mỗi lần lặp lại, chúng tôi thêm một cặp khóa/giá trị vào đối tượng hiện tại
Ngoài ra, bạn có thể sử dụng phương pháp map[]
Để thêm một cặp khóa/giá trị cho tất cả các đối tượng trong một mảng
- Sử dụng phương thức
Array.map[]để lặp lại mảng - Trên mỗi lần lặp lại, hãy sử dụng cú pháp trải rộng để thêm cặp khóa/giá trị vào đối tượng hiện tại
- Cặp khóa/giá trị sẽ được thêm vào tất cả các đối tượng trong mảng mới
Hàm chúng tôi đã chuyển đến Mảng. phương thức bản đồ được gọi với từng phần tử [đối tượng] trong mảng
Chúng tôi đã sử dụng toán tử trải rộng [. ] để giải nén các cặp khóa/giá trị của từng đối tượng và thêm một cặp khóa/giá trị bổ sung
Một cách dễ dàng để nghĩ về toán tử ... là - chúng ta đang giải nén các cặp khóa/giá trị của một mảng nguồn thành một mảng đích
Về cơ bản, chúng tôi chuyển qua thuộc tính id và thêm thuộc tính color cho mỗi đối tượng
map khác với forEach vì map trả về một mảng mới, trong khi forEach trả về map[]0
Trong JavaScript, bạn có thể thêm các mục vào một mảng theo một số cách, chẳng hạn như khởi tạo mảng bằng một mục, đẩy một mục vào mảng, kết hợp các mảng, v.v.
Ở đây chúng ta sẽ xem cách bạn có thể đẩy một đối tượng JavaScript vào một mảng
Để đạt được điều này, chúng tôi sẽ sử dụng phương pháp Array.map[]0
Như bạn có thể thấy, chúng ta chỉ cần truyền đối tượng Array.map[]1 cho phương thức Array.map[]2 và nó sẽ thêm nó vào cuối mảng
Để thêm nhiều đối tượng vào một mảng, bạn có thể truyền nhiều đối tượng làm đối số cho phương thức Array.map[]2, phương thức này sẽ thêm tất cả các mục vào cuối mảng
Bạn cũng có thể đạt được điều tương tự bằng cách chuyển đối tượng trực tiếp đến phương thức Array.map[]2 mà không cần gán nó cho một biến trước
Một phương pháp khác, mặc dù ít phổ biến hơn, là sử dụng phương pháp Array.map[]5. Phương thức này được sử dụng để kết hợp hai mảng, cũng có thể được sử dụng để thêm một đối tượng vào một mảng một cách đơn giản
Trong ví dụ này, chúng tôi sử dụng Array.map[]5 để thêm hai đối tượng vào mảng, mặc dù bạn có thể thêm bất kỳ số lượng đối tượng nào
Lưu ý rằng chúng ta phải gán kết quả của cuộc gọi trở lại mảng vì một mảng mới được trả về
Bạn có thể sử dụng bất kỳ phương thức nào trong số này để thêm các đối tượng vào mảng. Đối tượng là các phần tử hoặc giá trị trong mảng. Chúng ta sẽ thảo luận chi tiết từng phương pháp
Phương pháp 1. đẩy[]
Hàm push[] là một phương thức mảng tích hợp sẵn của JavaScript. Nó được sử dụng để thêm các đối tượng hoặc phần tử trong mảng. Phương thức này thêm các phần tử vào cuối mảng
"Lưu ý rằng có thể thêm bất kỳ số lượng phần tử nào bằng cách sử dụng phương thức push[] trong một mảng. "
cú pháp
Một đối tượng được truyền dưới dạng tham số trong mảng. push[] chức năng như trong cú pháp dưới đây -
Ở đây, mảng là tên do người dùng định nghĩa của mảng, e. g. , xe hơi, trái cây, phim ảnh, v.v.
Giá trị trả về
Hàm push[] trả về độ dài mới của mảng sau khi thêm các phần tử mới
ví dụ 1
Đây là một ví dụ đơn giản của phương thức push[], nơi chúng ta sẽ khởi tạo một mảng có ba phần tử [tên phim] trong đó. Sau đó, chúng ta sẽ thêm hai đối tượng nữa vào mảng bằng cách chuyển tên đối tượng vào movieList. đẩy[] phương pháp
sao chép mã
Kiểm tra nó ngay bây giờđầu ra
Trong phản hồi bên dưới, bạn có thể thấy rằng phương thức push[] trả về 5 dưới dạng số phần tử sau khi thêm vào mảng movieList
ví dụ 2
Đây là một ví dụ khác về hàm push[] trong đó chúng ta đã sử dụng một nút HTML để gọi hàm để chèn các phần tử mới vào mảng
sao chép mã
Kiểm tra nó ngay bây giờđầu ra. Trước khi nhấp vào nút
Bằng cách thực thi đoạn mã trên, phản hồi sẽ giống như được đưa ra bên dưới. Chúng tôi cũng đã tạo nút Phần tử đẩy để thêm phần tử mới vào mảng
đầu ra. Sau khi nhấp vào nút
Chúng tôi đã cung cấp thêm ba tên sê-ri trong mã JavaScript để thêm vào mảng đó. Vì vậy, khi bạn nhấp vào nút Đẩy phần tử này, các phần tử này sẽ được thêm vào mảng
Trong cả hai ví dụ trên, bạn có nhận thấy rằng các phần tử được chèn vào cuối mảng
ví dụ 3. Lấy đầu vào từ người dùng
Trong ví dụ này, chúng tôi sẽ lấy đầu vào từ người dùng thông qua biểu mẫu HTML để chèn phần tử bằng phương thức push[]
sao chép mã
Kiểm tra nó ngay bây giờđầu ra. Trước khi nhập đầu vào mới
Bằng cách thực thi đoạn mã trên, ban đầu bạn sẽ nhận được đầu ra có ba tên phim. Có một trường đầu vào để nhận đầu vào từ người dùng và nút Thêm phần tử để gửi giá trị đầu vào
Xem đầu ra bên dưới
đầu ra. Sau khi nhập giá trị mới
Chúng tôi đã cung cấp Titanic dưới dạng giá trị phần tử mới và nhấp vào nút Thêm phần tử. Bạn sẽ thấy tàu Titanic được thêm thành công vào cuối mảng trong kết quả bên dưới
Phương pháp 2. nối[]
Hàm splice[] là một phương thức mảng tích hợp khác của JavaScript. Đây là một loại hàm đặc biệt được sử dụng cho cả việc thêm và xóa các phần tử khỏi một chỉ mục cụ thể trong một mảng. Nó có thể thực hiện cả hai hoạt động cùng nhau
Phương thức này thêm hoặc xóa các phần tử/đối tượng tại chỉ mục cụ thể được xác định trong đó. Đối tượng mới chèn vào chỉ mục đã chỉ định. Phương thức mối nối [] chấp nhận ba tham số - chỉ số bắt đầu¸ số phần tử sẽ bị xóa và phần tử mới sẽ được thêm vào
"Lưu ý rằng tương tự như phương thức push[], bạn có thể thêm bất kỳ số lượng phần tử mới nào bằng cách sử dụng phương thức splice[] trong một mảng. "
cú pháp
Xem cú pháp của phương thức splice[] bên dưới -
Có thể thêm một đối tượng mà không cần xóa bất kỳ phần tử nào khác khỏi mảng bằng cách chỉ định tham số thứ hai là 0
Ở đây, mảng là tên do người dùng định nghĩa của mảng, e. g. , xe hơi, trái cây, phim ảnh, v.v.
Hãy hiểu hàm mảng này với sự trợ giúp của các ví dụ về cách thức hoạt động của nó. Chúng tôi sẽ thảo luận về cả hai trường hợp
- Bằng cách loại bỏ các yếu tố khác
- Không loại bỏ các yếu tố khác
ví dụ 1. Bằng cách loại bỏ các yếu tố khác
Trong ví dụ này, chúng ta sẽ loại bỏ các phần tử khác của mảng để thêm các phần tử mới vào nó. Các phần tử/đối tượng mới sẽ được thêm vào mảng tại chỉ mục được chỉ định trong mã
sao chép mã
Kiểm tra nó ngay bây giờđầu ra
Khi thực thi đoạn mã trên, bạn sẽ nhận được phản hồi có ba tên sê-ri [Sherlock, Harry Potter, Trò chơi vương quyền] và nút Thêm phần tử như bên dưới
Khi bạn nhấp vào nút Thêm phần tử này, trước tiên, các phần tử từ chỉ số mảng 1, e. g. , một[1] [Harry Potter, Trò chơi vương quyền] sẽ bị xóa và sau đó các phần tử mới [Vượt ngục, Gián điệp, Avengers] sẽ được thêm vào mảng
ví dụ 2. Không loại bỏ các yếu tố khác
Trong ví dụ này, chúng tôi sẽ không loại bỏ các phần tử khác của mảng để thêm các phần tử mới vào nó. Chúng tôi sẽ chỉ nối các phần tử mới vào mảng từ chỉ mục như được chỉ định trong mã
sao chép mã
Kiểm tra nó ngay bây giờđầu ra
Khi thực thi đoạn mã trên, ban đầu bạn sẽ nhận được phản hồi có ba phần tử/đối tượng trong mảng như bên dưới
Khi click vào nút Add Elements này, nó sẽ thêm 2 phần tử/đối tượng do chúng ta định nghĩa vào mảng seriesList
Phương pháp 3. bỏ dịch []
Hàm unshift[] là một phương thức mảng tích hợp khác của JavaScript. Nó được sử dụng để thêm các đối tượng hoặc phần tử trong mảng. Không giống như phương thức push[], nó thêm các phần tử vào đầu mảng
"Lưu ý rằng bạn có thể thêm bất kỳ số lượng phần tử nào trong một mảng bằng cách sử dụng phương thức unshift[]. "
cú pháp
Một đối tượng được truyền dưới dạng tham số trong mảng. unshift[] chức năng như trong cú pháp dưới đây -
Ở đây, mảng là tên do người dùng định nghĩa của mảng, e. g. , xe hơi, trái cây, phim ảnh, v.v.
Giá trị trả về
Phương thức unshift[] trả về độ dài mới của mảng sau khi thêm các phần tử mới vào nó. Bạn có thể lưu trữ độ dài của mảng do hàm unshift[] trả về trong một biến JavaScript
ví dụ 1
Đây là một ví dụ đơn giản về hàm unshift[] trong đó chúng ta sẽ có ba phần tử [tên phim] trong một mảng. Sau đó, chúng ta sẽ thêm hai đối tượng nữa vào mảng bằng cách chuyển tên đối tượng vào movieList. phương thức unshift[]
sao chép mã
Kiểm tra nó ngay bây giờđầu ra
Trong phản hồi bên dưới, bạn có thể thấy phương thức unshift[] trả về 5 dưới dạng số phần tử sau khi thêm vào mảng movieList
ví dụ 2
Đây là một ví dụ khác về hàm unshift[] trong đó chúng ta đã sử dụng một nút HTML để gọi hàm chèn các phần tử mới vào mảng
sao chép mã
Kiểm tra nó ngay bây giờđầu ra. Trước khi nhấp vào nút
Bằng cách thực thi đoạn mã trên, bạn sẽ nhận được phản hồi có ba phần tử và nút Thêm phần tử, như hình bên dưới. Nút Thêm phần tử này sẽ giúp thêm phần tử mới vào mảng
đầu ra. Sau khi nhấp vào nút
Chúng tôi đã cung cấp thêm ba tên sê-ri trong mã JavaScript để thêm vào mảng đó. Vì vậy, khi bạn nhấp vào nút Thêm phần tử này, các phần tử này sẽ được thêm vào mảng
ví dụ 3. Lấy đầu vào từ người dùng
Trong ví dụ này, chúng tôi sẽ lấy đầu vào từ người dùng thông qua biểu mẫu HTML để chèn phần tử bằng phương thức unshift[]
sao chép mã
Kiểm tra nó ngay bây giờđầu ra. Trước khi nhập đầu vào mới
Bằng cách thực thi đoạn mã trên, ban đầu bạn sẽ nhận được đầu ra có ba tên phim, trường đầu vào để nhận đầu vào từ người dùng và nút Thêm phần tử để gửi giá trị đầu vào
Xem đầu ra bên dưới
đầu ra. Sau khi nhập giá trị mới
Chúng tôi đã cung cấp Titanic dưới dạng giá trị phần tử mới và nhấp vào nút Thêm phần tử. Bạn sẽ thấy tàu Titanic được thêm thành công vào đầu mảng trong kết quả bên dưới
Tất cả các phương pháp trên là các ví dụ chi tiết về việc thêm các phần tử vào một mảng. Chúng hoạt động khác nhau, vì phương thức push[] thêm các phần tử vào cuối mảng trong khi phương thức unshift[] thêm phần tử vào đầu và hàm splice[] thêm các phần tử vào chỉ mục đã chỉ định trong mảng