Mảng từ phương thức trong JavaScript là gì?
Trong JavaScript, mảng là một cấu trúc dữ liệu chứa danh sách các phần tử lưu trữ nhiều giá trị trong một biến duy nhất. Sức mạnh của mảng JavaScript nằm ở các phương thức mảng. Các phương thức mảng là các hàm được tích hợp sẵn trong JavaScript mà chúng ta có thể áp dụng cho các mảng của mình — Mỗi phương thức có một hàm duy nhất thực hiện thay đổi hoặc tính toán cho mảng của chúng ta và giúp chúng ta không phải viết các hàm phổ biến từ đầu Show
1. bản đồ( )Phương thức này tạo một mảng mới với kết quả gọi một hàm được cung cấp trên mọi phần tử trong mảng này Cách thêm phần tử vào mảng trong JSSử dụng phương thức 8 để chèn phần tử vào mảng. Phương thức 8 thêm một phần tử vào cuối mảng. Hay là chúng ta thêm một ít đậu phộng vào món salad, như thế này
Bây giờ mảng salad là ["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑", "🥜"] Lưu ý rằng phương thức 8 thêm một phần tử vào cuối mảng. Nếu bạn muốn thêm một phần tử vào đầu mảng, bạn sẽ cần sử dụng phương thức 1
Bây giờ mảng salad là ["🥜", "🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"] Cách xóa phần tử khỏi mảng trong JSCách dễ nhất để xóa một phần tử khỏi mảng là sử dụng phương thức 2. Mỗi khi bạn gọi phương thức 2, nó sẽ loại bỏ một phần tử ở cuối mảng. Sau đó, nó trả về phần tử đã loại bỏ và thay đổi mảng ban đầu
Sử dụng phương thức 4 để xóa một phần tử khỏi đầu mảng. Giống như phương thức 2, 4 trả về phần tử đã loại bỏ và thay đổi mảng ban đầu 0Cách sao chép và sao chép một mảng trong JSBạn có thể sao chép và sao chép một mảng sang một mảng mới bằng cách sử dụng phương thức 7. Lưu ý rằng phương thức 7 không thay đổi mảng ban đầu. Thay vào đó, nó tạo ra một bản sao nông mới của mảng ban đầu 1Ngoài ra, bạn có thể sử dụng toán tử 3 để tạo một bản sao của mảng. Chúng ta sẽ tìm hiểu về điều đó ngay sau đâyCách xác định xem Giá trị có phải là một mảng trong JS khôngBạn có thể xác định xem một giá trị có phải là một mảng hay không bằng cách sử dụng phương thức 0. Phương thức trả về true nếu giá trị truyền vào là một mảng 2Phá hủy mảng trong JavaScriptVới ECMAScript 6 (ES6), chúng tôi có một số cú pháp mới để trích xuất nhiều thuộc tính từ một mảng và gán chúng cho các biến trong một lần. Nó rất hữu ích để giúp bạn giữ cho mã của mình sạch sẽ và ngắn gọn. Cú pháp mới này được gọi là cú pháp phá hủy Dưới đây là một ví dụ về trích xuất các giá trị từ một mảng bằng cách sử dụng cú pháp phá hủy 3Bây giờ bạn có thể sử dụng các biến trong mã của mình 4Để làm điều tương tự mà không phá hủy, nó sẽ trông như thế này 5Vì vậy, cú pháp phá hủy giúp bạn không phải viết nhiều mã. Điều này mang lại cho bạn một sự gia tăng lớn về năng suất Cách gán giá trị mặc định cho một biếnBạn có thể gán một giá trị mặc định bằng cách hủy khi không có giá trị hoặc 1 cho phần tử mảngTrong ví dụ dưới đây, chúng tôi gán giá trị mặc định cho biến nấm 6Cách bỏ qua một giá trị trong một mảngVới tính năng hủy, bạn có thể bỏ qua một phần tử mảng để ánh xạ tới một biến. Ví dụ, bạn có thể không quan tâm đến tất cả các phần tử trong một mảng. Trong trường hợp đó, bỏ qua một giá trị có ích Trong ví dụ bên dưới, chúng ta bỏ qua phần tử nấm. Lưu ý khoảng trắng trong khai báo biến ở phía bên trái của biểu thức 7Phá hủy mảng lồng nhau trong JSTrong JavaScript, các mảng có thể được lồng vào nhau. Điều này có nghĩa là một mảng có thể có một mảng khác làm phần tử. Việc lồng mảng có thể đi đến bất kỳ độ sâu nào Ví dụ: hãy tạo một mảng lồng nhau cho các loại trái cây. Nó có một vài loại trái cây và một loạt các loại rau trong đó 8Bạn sẽ truy cập '🥕' từ mảng trên bằng cách nào? 9Ngoài ra, bạn có thể sử dụng cú pháp ngắn tay này 0Bạn cũng có thể truy cập nó bằng cú pháp phá hủy, như thế này 1Cách sử dụng cú pháp trải rộng và tham số nghỉ trong JavaScriptKể từ ES6, chúng ta có thể sử dụng 4 (vâng, ba dấu chấm liên tiếp) làm cú pháp trải rộng và tham số còn lại trong cấu trúc mảng
Cách sử dụng Tham số còn lại trong JSVới 5, chúng ta có thể vạch ra các phần tử bên trái của một mảng trong một mảng mới. Tham số còn lại phải là biến cuối cùng trong cú pháp phá hủyTrong ví dụ dưới đây, chúng tôi đã ánh xạ hai phần tử mảng đầu tiên tới các biến cà chua và nấm. Các phần tử còn lại được ánh xạ tới biến 6 bằng cách sử dụng biến 4. Biến 6 là một mảng mới chứa các phần tử còn sót lại 2Cách sử dụng Toán tử trải rộng trong JSVới toán tử trải rộng, chúng ta có thể tạo một bản sao/bản sao của một mảng hiện có như thế này 3Phá hủy các trường hợp sử dụng trong JavaScriptHãy xem xét một vài trường hợp sử dụng thú vị của việc phá hủy mảng, toán tử trải rộng và tham số còn lại Cách hoán đổi giá trị với hủy cấu trúcChúng ta có thể hoán đổi giá trị của hai biến một cách dễ dàng bằng cú pháp hủy mảng 4Cách hợp nhất các mảngChúng ta có thể hợp nhất hai mảng và tạo một mảng mới với tất cả các phần tử từ cả hai mảng. Hãy lấy hai mảng — một mảng có một vài khuôn mặt cười và mảng khác có một vài loại rau 5Bây giờ, chúng ta sẽ hợp nhất chúng để tạo một mảng mới 6Phương thức mảng JavaScriptCho đến nay, chúng ta đã thấy một vài thuộc tính và phương thức của mảng. Hãy tóm tắt nhanh những cái chúng ta đã xem xét
Bây giờ chúng ta sẽ tìm hiểu về các phương thức mảng JS quan trọng khác với các ví dụ Cách tạo, xóa, cập nhật và truy cập mảng trong JavaScriptTrong phần này, chúng ta sẽ tìm hiểu về các phương thức bạn có thể sử dụng để tạo một mảng mới, loại bỏ các phần tử để làm cho mảng trống, truy cập các phần tử, v.v. Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];06Phương thức 06 hợp nhất một hoặc nhiều mảng và trả về một mảng đã hợp nhất. Đó là một phương pháp bất biến. Điều này có nghĩa là nó không thay đổi (biến đổi) các mảng hiện cóHãy nối hai mảng 7Sử dụng phương pháp 06, chúng ta có thể hợp nhất nhiều hơn hai mảng. Chúng ta có thể hợp nhất bất kỳ số lượng mảng nào với cú pháp này 8Đây là một ví dụ 9Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];09Phương thức 09 nối tất cả các phần tử của mảng bằng cách sử dụng dấu tách và trả về một chuỗi. Dấu phân cách mặc định được sử dụng để nối là 2 0Bạn có thể chuyển dấu phân cách bạn chọn để nối các phần tử. Dưới đây là một ví dụ về việc nối các phần tử với dấu tách tùy chỉnh 1Gọi phương thức 09 trên một mảng trống sẽ trả về một chuỗi rỗng 2Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];13Phương thức 13 điền vào một mảng có giá trị tĩnh. Bạn có thể thay đổi tất cả các thành phần thành giá trị tĩnh hoặc thay đổi một vài mục đã chọn. Lưu ý rằng phương thức 13 thay đổi mảng ban đầu 3Đây là một ví dụ mà chúng ta chỉ thay đổi hai phần tử cuối cùng của mảng bằng cách sử dụng phương thức 13 4Trong trường hợp này, đối số đầu tiên của phương thức 13 là giá trị mà chúng ta thay đổi bằng. Đối số thứ hai là chỉ số bắt đầu để thay đổi. Nó bắt đầu bằng 4. Đối số cuối cùng là xác định nơi dừng điền. Giá trị tối đa của nó có thể là 19Vui lòng xem chủ đề Twitter này để biết cách sử dụng thực tế của phương pháp 13
Ngoài ra, bạn có thể thấy dự án demo này hữu ích. https. //github. com/atapas/mảng-điền-màu-thẻ Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];21Bạn có thể xác định sự có mặt của một phần tử trong mảng bằng cách sử dụng phương thức 21. Nếu phần tử được tìm thấy, phương thức trả về 23 và ngược lại là 24 5Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];25Bạn có thể muốn biết vị trí chỉ mục của một phần tử trong mảng. Bạn có thể sử dụng phương pháp 25 để có được điều đó. Nó trả về chỉ số của lần xuất hiện đầu tiên của một phần tử trong mảng. Nếu một phần tử không được tìm thấy, phương thức 25 trả về 28 6Có một phương pháp khác là 29 giúp bạn tìm chỉ số của lần xuất hiện cuối cùng của một phần tử trong mảng. Giống như 25, 29 cũng trả về 28 nếu không tìm thấy phần tử 7Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];33Đúng như tên gọi, phương thức 33 đảo ngược vị trí của các phần tử trong mảng sao cho phần tử cuối cùng chuyển sang vị trí đầu tiên và phần tử đầu tiên chuyển sang vị trí cuối cùng 8Phương thức 33 sửa đổi mảng ban đầuPhương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];36Phương thức 36 có lẽ là một trong những phương thức mảng thường được sử dụng nhất. Phương thức 36 mặc định chuyển đổi các loại phần tử thành chuỗi và sau đó sắp xếp chúng. Thứ tự sắp xếp mặc định là tăng dần. Phương thức 36 thay đổi mảng ban đầu 9Phương thức 36 chấp nhận một hàm so sánh tùy chọn làm đối số. Bạn có thể viết một hàm so sánh và chuyển sang phương thức 36 để ghi đè hành vi sắp xếp mặc địnhBây giờ chúng ta hãy lấy một mảng các số và sắp xếp chúng theo thứ tự tăng dần và giảm dần bằng cách sử dụng hàm so sánh 0Đầu tiên, chúng ta sẽ gọi phương thức 36 mặc định và xem kết quả 1Bây giờ mảng được sắp xếp là, [1, 10, 100, 13, 23, 37, 5, 56, 9]. Chà, đó không phải là đầu ra mà chúng tôi mong đợi. Nhưng điều đó xảy ra bởi vì phương thức 36 mặc định chuyển đổi các phần tử thành một chuỗi và sau đó so sánh chúng dựa trên các giá trị đơn vị mã 44Để giải quyết vấn đề này, hãy viết một hàm so sánh. Đây là một cho thứ tự tăng dần 2Bây giờ chuyển cái này sang phương thức 36 3Đối với thứ tự giảm dần, hãy làm điều này 4Kiểm tra kho lưu trữ GitHub này để biết thêm các ví dụ và mẹo sắp xếp. https. //github. com/atapas/js-array-sorting Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];46Phương thức 46 giúp bạn thêm, cập nhật và xóa các phần tử trong một mảng. Phương pháp này có thể hơi khó hiểu lúc đầu, nhưng một khi bạn biết cách sử dụng đúng cách, bạn sẽ thành côngMục đích chính của phương thức 46 là xóa các phần tử khỏi mảng. Nó trả về một mảng các phần tử đã bị xóa và sửa đổi mảng ban đầu. Nhưng bạn cũng có thể thêm và thay thế các phần tử bằng cách sử dụng nóĐể thêm phần tử bằng phương thức 46, chúng ta cần truyền vị trí muốn thêm, số lượng phần tử cần xóa bắt đầu bằng vị trí và phần tử cần thêmTrong ví dụ bên dưới, chúng tôi đang thêm một phần tử 50 tại chỉ mục 51 mà không xóa bất kỳ phần tử nào 5Hãy xem ví dụ sau. Ở đây chúng tôi đang xóa một phần tử khỏi 7 (phần tử thứ 3) và thêm một phần tử mới, 50. Phương thức 46 trả về một mảng có phần tử bị xóa, 55 6Hãy xem chủ đề Twitter này để tìm hiểu cách phương thức 46 giúp bạn tạo một mảng trống
Phương thức mảng tĩnh trong JavaScriptTrong JavaScript, mảng có ba phương thức tĩnh. Chúng ta đã thảo luận về 04 rồi. Bây giờ chúng ta hãy thảo luận về hai người kiaPhương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']; salad.push('🥜');2Hãy lấy một đoạn mã HTML đơn giản có chứa div và một vài phần tử danh sách 7Bây giờ chúng ta sẽ truy vấn DOM bằng phương thức 59 8Nó trả về một 60 trông như thế nàyHTMLCollection là một đối tượng giống như mảngVì vậy, nó giống như một mảng. Bây giờ, hãy thử lặp lại nó bằng cách sử dụng 7 9Đoán xem đầu ra là gì? Lỗi khi sử dụng forEach trên đối tượng Array-LikeNhưng tại sao? . Nó là một đối tượng 63. Vì vậy, bạn không thể lặp lại nó bằng cách sử dụng 7Nguyên mẫu là ObjectĐây là lúc bạn nên sử dụng phương pháp 2. Nó chuyển đổi một đối tượng dạng mảng thành một mảng để bạn có thể thực hiện tất cả các thao tác mảng trên đó 0Đây 66 là một mảngNguyên mẫu là ArrayPhương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']; salad.push('🥜');1Phương thức 1 tạo một mảng mới bằng cách sử dụng bất kỳ số lượng phần tử nào thuộc bất kỳ loại nào 1Đầu ra trông như thế này Đầu ra của mảng. phương thức ()Các phương thức lặp mảng trong JavaScriptBây giờ chúng ta sẽ tìm hiểu về các phương thức lặp mảng. Đây là những phương pháp rất hữu ích để lặp qua mảng và thực hiện tính toán, đưa ra quyết định, lọc nội dung, v.v. Cho đến nay, chúng ta chưa thấy một ví dụ nào về mảng đối tượng. Trong phần này, chúng ta sẽ sử dụng mảng đối tượng sau để giải thích và chứng minh các phương thức bên dưới Mảng này chứa thông tin cho một số sinh viên đã đăng ký các khóa học trả phí khác nhau 2Được rồi, chúng ta hãy bắt đầu. Tất cả các phương thức lặp mảng đều lấy một hàm làm đối số. Bạn cần chỉ định logic để lặp lại và áp dụng trong chức năng đó Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];69Phương thức 69 tạo một mảng mới với tất cả các phần tử thỏa mãn điều kiện được đề cập trong hàm. Cùng tìm học sinh là nữ. Vì vậy, điều kiện lọc phải là giới tính bằng 'F' 3Đầu ra là cái này Đúng rồi. Học sinh có tên 71 là học sinh nữ duy nhất mà chúng tôi có được cho đến nayPhương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];72Phương thức 72 tạo một mảng mới bằng cách lặp qua các phần tử và áp dụng logic mà chúng tôi đã cung cấp trong hàm dưới dạng đối số. Chúng ta sẽ tạo một mảng mới gồm tên đầy đủ của tất cả các sinh viên trong mảng 74 4Đầu ra trông như thế này Ở đây chúng ta thấy một mảng mới với các thuộc tính 75 được tính toán bằng cách sử dụng các thuộc tính 76 và 77 của mỗi đối tượng sinh viênPhương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];78Phương thức 78 áp dụng hàm rút gọn trên từng phần tử mảng và trả về giá trị đầu ra. Chúng ta sẽ áp dụng một hàm rút gọn trên mảng 74 để tính tổng số tiền mà tất cả các sinh viên đã trả 5Trong đoạn mã trên,
Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];85Phương thức 85 trả về giá trị boolean (true/false) dựa trên ít nhất một phần tử trong mảng truyền điều kiện trong hàm. Cùng xem có bạn sinh viên nào dưới 30 tuổi không nhé 6Có, chúng tôi thấy có ít nhất một sinh viên dưới 30 tuổi Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];87Sử dụng phương pháp 85, chúng tôi đã thấy rằng có một sinh viên dưới 30 tuổi. Hãy cùng tìm hiểu học sinh đó là aiĐể làm điều đó, chúng tôi sẽ sử dụng phương pháp 87. Nó trả về phần tử khớp đầu tiên từ mảng thỏa mãn điều kiện trong hàmMảng có một phương thức liên quan khác, 90, trả về chỉ số của phần tử mà chúng ta tìm thấy bằng cách sử dụng phương thức 87. Nếu không có phần tử nào khớp với điều kiện, phương thức 90 trả về 28Trong ví dụ bên dưới, chúng ta truyền một hàm cho phương thức 87 để kiểm tra tuổi của từng học sinh. Nó trả về sinh viên phù hợp khi điều kiện thỏa mãn 7Đầu ra là cái này Như chúng ta thấy, đó là Alex 22 tuổi. Chúng tôi đã tìm thấy anh ấy Phương thức mảng const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];95Phương thức 95 phát hiện xem mọi phần tử của mảng có thỏa mãn điều kiện được truyền trong hàm hay không. Hãy tìm xem tất cả các sinh viên đã đăng ký ít nhất hai khóa học 8Như mong đợi, chúng tôi thấy rằng đầu ra là 23Phương pháp mảng được đề xuấtKể từ tháng 5 năm 2021, ECMAScript có phương thức , 98Phương pháp const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];98Phương pháp 98 được đề xuất sẽ giúp bạn truy cập các phần tử của một mảng bằng cách sử dụng số chỉ mục âm. Hiện tại, điều này là không thể. Bạn chỉ có thể truy cập các phần tử từ đầu mảng bằng cách sử dụng số chỉ mục dươngCó thể truy cập các phần tử từ phía sau của mảng bằng cách sử dụng giá trị độ dài. Với việc bao gồm phương thức 98, bạn sẽ có thể truy cập các phần tử bằng cách sử dụng cả chỉ số tích cực và tiêu cực bằng một phương thức duy nhất 9Đây là một bản demo nhanh của nó Bản trình diễn phương thức Javascript Array at()Bạn có thể sử dụng polyfill này để đạt được chức năng của phương thức 98 cho đến khi phương thức này được thêm vào ngôn ngữ JavaScript. Vui lòng kiểm tra kho lưu trữ GitHub này để biết các ví dụ về phương pháp 98. https. //github. com/atapas/js-array-at-methodTrước Khi Chúng Ta Kết ThúcTôi hy vọng bạn thấy bài viết này sâu sắc và nó giúp bạn hiểu rõ hơn về mảng JavaScript. Hãy thực hành các ví dụ nhiều lần để nắm bắt chúng tốt. Bạn có thể tìm thấy tất cả các Kết nối nào. Bạn sẽ thấy tôi hoạt động trên Twitter (@tapasadhikary). Mời các bạn theo dõi Bạn cũng có thể thích những bài viết này
QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO nhà văn. YouTuber. Người sáng tạo. Người hướng dẫn Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Mảng và phương thức của nó trong JavaScript là gì?Các phương thức và thuộc tính của mảng JavaScript Phương thức mảng nghĩa là gì?Các phương thức mảng là các hàm được tích hợp sẵn trong JavaScript mà chúng ta có thể áp dụng cho các mảng của mình — Mỗi phương thức có một chức năng duy nhất thực hiện thay đổi .
Từ trong JS là gì?from() là thuộc tính tĩnh của đối tượng Mảng JavaScript . Bạn chỉ có thể sử dụng nó như Array. từ(). Sử dụng x. from(), trong đó x là một mảng sẽ trả về không xác định.
Làm cách nào để lấy mảng từ tập hợp trong JavaScript?Một tập hợp có thể được chuyển đổi thành một mảng trong JavaScript bằng các cách sau. Mảng JavaScript. phương thức from() . Phương thức này trả về một Mảng mới từ một mảng giống như một đối tượng hoặc các đối tượng có thể lặp lại như Bản đồ, Tập hợp, v.v. |