Table of Contents
1. Determine whether an object is an array class
2. What are the advantages of operating after converting a js class array into an array
3. Convert js class array to array method
4. Convert the array into parameter list (class array)
Home Web Front-end JS Tutorial Introduction to js arrays

Introduction to js arrays

Jul 20, 2018 pm 03:49 PM

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属性就不是类数组
Copy after login

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}
Copy after login

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)
Copy after login
//将arguments转化为数组后,截取第一个元素之后的所有元素
  var args = Array.prototype.slice.call(arguments,1);
Copy after login

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了 })
Copy after login

(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;  
 }
Copy after login

(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;  
    }
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

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...

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

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.

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

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 using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

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...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

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/)...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

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.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

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. �...

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

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...

See all articles