Video học lập trình mỗi ngày

Array like object javascript. Bạn có bao giờ gặp phải lỗi "Uncaught TypeError: arrays.filter is not a function" khi sử dụng một array chưa? Và nếu gặp tình huống như vậy bạn đã xử lý như thế nào? Và bạn biết vì sao lại gây lỗi như vậy? 

Có devjs nào vẫn chưa biết khái niệm Array-Like Objects này? Tôi đoán khoảng 90% các bạn mới học javascript chưa hế biết về khái niệm này. Nhưng thực tế các bạn đã gặp rất rất nhiều rồi. Và cũng có thể khái niệm này sẽ có trong bất kỳ câu hỏi phỏng vấn về NODEJS. Chỉ một phút đọc thôi, bạn sẽ bổ sung thêm cho mình một khái niệm, cũng không phải nói đúng hơn là một skills đó các bạn. Vì Array-Like Objects nó liên quan đến nhiều thứ nếu được mở rộng hơn.

Trong bài này chúng ta sẽ thử đi tìm hiểu về hai khái niệm đó là Array-Like Objects và Generic Methods Array. Và các bạn hãy chú ý các ví dụ dưới đây, hãy tập trung, tôi nói là chỉ xin các bạn 1 phút thôi. Please

Array-Like Objects là gì?

Array-Like Objects xuất hiện nhiều ở arguments, HTMLCollection, NodeList, document.getElementsByTagName và document.querySelectorAll.

Array-Like Objects chắc chắn nó là một Object mà nó giống một array nhưng không phải là array. Ở đây chúng ta nên tập trung hai khía cạnh, thứ nhất là nó trông giống một Array. Và thứ hai, nó thực sự không phải là một Array. Chúng ta hãy cùng xem xét ví dụ sau:

À khoan, để lấy ví dụ cụ thể thì bạn nào còn nhớ bài "Rest operator và Spread operator", chúng ta sẽ lấy một ví dụ về Rest operator. Bạn nào chưa biết thì tranh thủ đọc qua bài đó đi, có 10 giây à. Rồi ok, zô...

Array-Like Objects là một Arrays. Vì sao?

Ví dụ ta có một function như sau:

function testArgumentsKeyword(){ 
	console.log(arguments.length, arguments[0])
} 

testArgumentsKeyword('arg1','arg2', 'arg3', 'arg4', 'arg5');

Ở ví dụ này arguments chính là một Array-Like Objects. Khi console ra thì chúng ta được kết quả là " 5 , arg1 ". Nếu đó là một array thì vậy là đúng rồi, vậy điều đó cho ta thấy Array-Like Objects giống một array vì nó cho phép chúng ta truy xuất vào indexed và length của một array như một array bình thường. Nhưng nó khác ở array ở chỗ nào chúng ta xem tiếp.

Array-Like Objects không phải là một Arrays. Vì sao?

Nếu như nó là một array thì nó sẽ sử dụng được những Generic Methods của Array? Đừng suy nghĩ "Generic Methods là gì?" vì chút dưới bài tôi sẽ nói luôn =]] Cụ thể nó sẽ sử dụng được filter chẳng hạn như một array bình thường.

Ví dụ sử dụng filter với một array:

console.log(['arg1','arg2', 'arg3', 'arg4', 'arg5'].filter(el => el === 'arg2')) ;// ["arg2"]

Còn đối với array like object javascript thì chúng ta xem xét ví cụ trên lại một lần nữa

function testArgumentsKeyword(){ 
		console.log(arguments.filter(el => el === 'arg2'))
} 

testArgumentsKeyword('arg1','arg2', 'arg3', 'arg4', 'arg5');

Wow, chúng ta nhận được một lỗi: "Uncaught TypeError: arguments.filter is not a function". Điều đó cho chúng ta thấy nó không phải là một Array.

Chúng ta sẽ đi tiếp ví dụ mà luôn luôn có cảm giác thân thuộc:

var parent = document.getElementById('myDropdown');
var desiredOption = parent.querySelector('option[value="desired"]');
var domList = parent.children;

domList.indexOf(desiredOption); // Error! indexOf is not defined.
domList.forEach(function() { 
  arguments.map(/* Stuff here */) // Error! map is not defined.
}); // Error! forEach is not defined.

function func() {
  console.log(arguments);
}
func(1, 2, 3);   // → [1, 2, 3]

Hết 1 phút, vậy là bạn đã hiểu khi nào một object được gọi là "Array-Like Objects" phải không? Giờ bạn nào có thể leave được rôi, còn bạn nào muốn ở lại xem tiếp việc muốn chuyển một Array-Like Objects sang một Array thì làm thế nào thì ở lại một chút nữa

Convert Array-like Objects to Arrays in ES6

Convert sử dụng from in es6, các bạn cũng có thể đọc thêm về Tổng hợp cách hoạt động ES6

function testArgumentsKeyword(){ 
		const arr = Array.from(arguments);
		console.log(arr.filter(el => el === 'arg2'))
} 

testArgumentsKeyword('arg1','arg2', 'arg3', 'arg4', 'arg5');

Convert Array-like Objects to Arrays in ≤ ES5

Xem thêm: Filter và Find trong javascript - Khi nào nên sử dụng?

Nếu bạn nào chưa quen dùng ES6 thì có thể sử dụng những cách convert ≤ ES5 dưới đây:

Sử dụng Array.prototype.slice.call(arguments);

Xem thêm: Trường hợp nào nên sử dụng call(), apply() và bind() trong javascript

Chúng ta xem tiếp ví dụ trên:

function testArgumentsKeyword(){ 
		const arr = Array.prototype.slice.call(arguments);
		console.log(arr.filter(el => el === 'arg2'))
} 

testArgumentsKeyword('arg1','arg2', 'arg3', 'arg4', 'arg5');

Generic Methods Array

Nếu một ngày nào đó có một ai hỏi bạn như câu hỏi này thì bạn sẽ không ngần ngại trả lời rằng: Generic Methods array là cung cấp những method của một array như: Array.prototype (see Array Prototype Methods):

• concat
• every
• filter
• forEach
• indexOf
• join
• lastIndexOf
• map
• pop
• push
• reduce
• reduceRight
• reverse
• shift
• slice
• some
• sort
• splice
• toLocaleString
• toString
• unshift

Như vậy là nó chạy ổn, nhưng đó mới là một cách trong nhiều cách khác. Nhưng giờ là dừng được rồi. Giờ đây các bạn có thể tự tin hơn trong việc sử dụng những method của array cũng như những tính năng của Array-like Object mang lại

Thanks for reading!!!