Hôm nay chúng ta cùng tìm hiểu về Array - được dùng khá phổ biến trong Javascript. Show
Trong bài viết hôm nay, chúng ta không đi vào chi tiết tìm hiểu Array, mà là chia sẽ những cách để tạo Array hoặc clone từ các Array có sẵn Những cách tạo ArrayDùng Array LiteralĐây là cách đơn giản nhất và có thể bạn hay sử dụng nhiều nhất. 1Dùng Array ConstructorArray trong Javascript là object, vì thế ta cũng có thể dùng nó để tạo 1 đối tượng array. Giả sử chúng ta muốn tạo 1 array có 1001 phần tử, và không cần quan tâm đến giá trị các phần tử đó, chẳng lẽ dùng array literal để tạo sao?. Chúng ta không có rảnh rỗi để viết 1001 phần tử được. Array constructor sẽ giúp chúng ta giải quyết vấn đề này.
Array constructor tạo ra những array khác nhau tùy theo tham số mà nó nhận được. Vấn đề với Array constructor Chúng ta tưởng rằng đã giải quyết vấn đề tạo ra 1 array có 1001 phần tử rồi đúng không? Đơn giản ta dùng Array constructor với 1 tham số truyền vào là 1001: var array = new Array(1001). Nhưng không ,Vấn đề với Array constructor Chúng ta tưởng rằng đã giải quyết vấn đề tạo ra 1 array có 1001 phần tử rồi đúng không? Đơn giản ta dùng Array constructor với 1 tham số truyền vào là 1001: var array = new Array(1001). Nhưng không ,
Thoạt nhìn thì chẳng có vấn đề gì cả, bạn nghĩ rằng array1 sẽ có 5 phần tử, và mỗi phần tử của nó có giá trị là undefined. Thật ra thì chẳng có phần tử nào ở đây cả, mà chỉ có mỗi thuộc tính length được gán = 5. Hãy chạy đoạn code sau:
Vấn đề này làm cho các hàm như map(), filter() hoặc reduce() trở nên vô dụng khi dùng với array ở trên. Và dưới đây là 1 sai lầm thường gặp nếu chúng ta không hiểu rõ vấn đề này (bạn muốn tạo ra 1 array có 5 phần tử và mỗi phần tử có giá trị = 5):
chẳng có phần tử = 5 nào được tạo ra cả, hàm map không làm việc vì trong array1 chỉ có thuộc tính length mà không có thuộc tính index nào. Chẳng lẽ đành bó tay. Sau đây có những cách giúp ta giải quyết vấn đề này 1. Dùng Array.prototype.fill()Hàm fill cho phép chúng ta điền vào tất cả các phần tử của array với 1 giá trị
2. Dùng Array.from()Hàm Array.from tạo mới 1 array, là bản sao từ 1 array ban đầu.
Bạn có thể thấy log undefined ở đây giống như ví dụ lúc dùng Array constructor, nhưng giờ undefined chính là giá trị của phần tử nhé. Một điều tuyệt vời nữa của Array.from() là nó có thể nhận tham số thứ 2, là một map function. Hàm này sẽ được gọi với mỗi phần tử của array và giá trị trả về là giá trị của phần tử đó, giống như hàm .map()
3. Dùng Spread Operatorspread operator (...), tính năng này được thêm vào trong ES6, nó cho phép thêm những phần tử bị thiếu vào array với giá trị undefined, kết quả giống như sử dụng hàm Array.from()., tính năng này được thêm vào trong ES6, nó cho phép thêm những phần tử bị thiếu vào array với giá trị undefined, kết quả giống như sử dụng hàm Array.from().
4 Dùng Array.of()Cách dùng hàm Array.of giống y như dùng Array constructor, chỉ có 1 khác biệt duy nhất là cách mà Array.of tạo ra array khi tham số truyền vào là 1 số nguyên. Trong khi Array.of(5) tạo 1 array có 1 phần tử, và giá trị của nó là 5, thì new Array(5) tạo ra 1 array với length là 5
Áp dụngViết hàm range cho phép chúng ta tạo ra 1 array gồm các phần tử, bắt đầu (start) từ đâu, kết thúc (end) ở đâu và bước (step) bằng bao nhiêu:
Ở đây mình dùng Array.from, các bạn có thể dùng nhiều cách khác nhé. 0Phần này kết thúc tại đây. Ở phần sau mình sẽ viết về về các cách để clone 1 array từ array có sẵn nhé. Cảm ơn các bạn |