Introduction to js arrays
What is js array (ArrayLike)? The js class array has the length attribute, and other attributes (indexes) are non-negative integers (the index in the object will be treated as a string, here you can understand it as a non-negative integer string); it does not have the methods of the array .
Example:
//类数组示例 var a = {'1':'gg','2':'love','4':'meimei',length:5}; Array.prototype.join.call(a,'+');//'+gg+love++meimei'//非类数组示例 var c = {'1':2}; //没有length属性就不是类数组
Common class arrays in JavaScript include arguments objects and the return results of DOM methods.
For example document.getElementsByTagName().
1. Determine whether an object is an array class
function isArrayLike(o) { if (o && // o is not null, undefined, etc. typeof o === 'object' && // o is an object isFinite(o.length) && // o.length is a finite number o.length >= 0 && // o.length is non-negative o.length===Math.floor(o.length) && // o.length is an integer o.length < 4294967296) // o.length < 2^32 return true; // Then o is array-like else return false; // Otherwise it is not}
2. What are the advantages of operating after converting a js class array into an array
Because class arrays do not have the characteristics of arrays Methods for operating arrays. After converting a class array into an array, you can call powerful methods such as shift, unshift, splice, slice, concat, reverse, sort, etc., which is convenient and fast.
3. Convert js class array to array method
Array.prototype.slice.call(arrayLike)
//将arguments转化为数组后,截取第一个元素之后的所有元素 var args = Array.prototype.slice.call(arguments,1);
First, the result of Array.prototype.slice.call(arrayLike) is to convert the arrayLike object into an Array object. Therefore, you can directly call the methods of the array afterwards, such as
Array.prototype.slice.call(arrayLike).forEach(function(element,index){ //可以随意操作每一个element了 })
(1) Array.prototype.slice represents the slice method in the prototype of the array. Note that this slice method returns an Array type object.
//slice的内部实现Array.prototype.slice = function(start,end){ var result = new Array(); start = start || 0; end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键 for(var i = start; i < end; i++){ result.push(this[i]); } return result; }
(2) Only methods can call call, so you cannot use [].call, you must use [].slice. The first parameter of call indicates that the environment in which slice is actually called becomes the arrayLike object. So it's like arrayLike also has array methods.
(3) Attached is the general function for converting js class array to array
var toArray = function(s){ try{ return Array.prototype.slice.call(s); } catch(e){ var arr = []; for(var i = 0,len = s.length; i < len; i++){ //arr.push(s[i]); arr[i] = s[i]; //据说这样比push快 } return arr; }
4. Convert the array into parameter list (class array)
Call apply When using the method, the first parameter is the object (this), and the second parameter is an array collection. Here is a clever use of apply, which can convert an array into a parameter list by default ([param1, param2, param3 ] into param1, param2, param3). If we use a program to convert each item of the array into a list of parameters, it may take a while. With the help of this feature of apply, there is The following highly efficient method is adopted.
Related recommendations:
Overview of js basic arrays Array length Array traversal
The above is the detailed content of Introduction to js arrays. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics





Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
