Home Web Front-end JS Tutorial Array operation examples in JS

Array operation examples in JS

Jun 25, 2017 am 09:22 AM
array javascript operate

Array operations in JS

1. Creation of array

var arrayObj = new Array(); //Create an array

var arrayObj = new Array([size]); //Create an array and specify the length. Note that it is not the upper limit, but the length

var arrayObj = new Array([element0[, element1[, ...[, elementN] ]]]); Create an array and assign a value

It should be noted that although the second method creates an array and specifies the length, in fact the array is variable length in all cases, that is to say, even if the length is specified Even if the length is 5, you can still store elements beyond the specified length. Note: the length will change accordingly.

2. Access to the elements of the array

var testGetArrValue=arrayObj[1]; //Get the element value of the array

arrayObj[1]= "This is a new value"; //Assign new values ​​to array elements

3. Adding array elements

arrayObj. push([item1 [item2 [. . . [itemN ]]]]); // Add one or more new elements to the end of the array and return the new length of the array

arrayObj. unshift([item1 [item2 [. . . [itemN ]]]]);// Add one or more new elements to the beginning of the array, the elements in the array will automatically move backward, and return the new length of the array

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//Insert one or more new elements into the specified position of the array, and the elements at the insertion position will be automatically moved back ,return"".

4. Deletion of array elements

arrayObj.pop(); //Remove the last element and return the element value

arrayObj.shift(); //Remove the first element and return the element value, and the elements in the array are automatically moved forward

arrayObj.splice(deletePos,deleteCount); //Delete from the specified position The specified number of deleteCount elements starting from deletePos, and the removed elements are returned in array form

5. Array interception and merging

arrayObj. slice(start, [end]); //Return a part of the array in the form of an array. Note that the elements corresponding to end are not included. If end is omitted, all elements after start will be copied.

arrayObj.concat([item1 [, item2[, . . . [,itemN]]]]); //Concatenate multiple arrays (can also be strings, or a mixture of arrays and strings) into one array, and return the new connected array Array

6. Copy of array

arrayObj.slice(0); //Return a copy array of the array, note that it is a new one Array, not pointing to

arrayObj.concat(); //Return a copy array of the array, note that it is a new array, not pointing to

7, array elements Sorting

arrayObj.reverse(); //Reverse the elements (the first to the last, the last to the front), return the array address

arrayObj.sort (); // Sort the array elements and return the array address

8. Stringization of the array elements

##arrayObj.join(separator ); //Returns a string. This string connects each element value of the array together, separated by separator.

toLocaleString, toString, valueOf: can be regarded as special usage of join, not commonly used

2. 3 attributes of array objects

1. Length attribute

The Length attribute represents the length of the array, that is, the number of elements in it. Because the index of an array always starts from 0, the upper and lower limits of an array are: 0 and length-1 respectively. Unlike most other languages, the length property of JavaScript arrays is variable, which requires special attention. When the length attribute is set larger, the state of the entire array does not actually change, only the length attribute becomes larger; when the length attribute is set smaller than the original, the elements in the original array with indexes greater than or equal to length will All values ​​are lost. The following is an example that demonstrates changing the length attribute:

var arr=[12,23,5,3,25,98,76,54,56,76];

//defined An array containing 10 numbers

alert(arr.length); //Display the length of the array 10

arr.length=12; //Increase the length of the array

alert(arr.length); //Show that the length of the array has become 12

alert(arr[8]); //Display the value of the 9th element, which is 56

arr.length=5; //Reduce the length of the array to 5, elements with index equal to or exceeding 5 Discarded

alert(arr[8]); //Show that the 9th element has become "undefined"

arr.length=10; //Restore the array length to 10

alert(arr[8]); //Although the length is restored to 10, the 9th element cannot be recovered and displays "undefined"

We can clearly see from the above code to the nature of the length attribute. But the length object can not only be set explicitly, it may also be modified implicitly. You can use an undeclared variable in JavaScript. Similarly, you can also use an undefined array element (referring to an element with an index greater than or equal to length). In this case, the value of the length attribute will be set to the value of the element index used. plus 1. For example, the following code:

var arr=[12,23,5,3,25,98,76,54,56,76];

alert(arr.length);

arr[15]=34;

alert(arr.length);

In the code, an array containing 10 numbers is also defined first. You can use the alert statement to See that its length is 10. Then the element with index 15 is used and assigned a value of 15, that is, arr[15]=34. At this time, the alert statement is used to output the length of the array, and the result is 16. Regardless, this is a surprising feature for developers accustomed to strongly typed programming. In fact, the initial length of an array created using the new Array() form is 0. It is the operation of undefined elements that causes the length of the array to change.

As you can see from the above introduction, the length attribute is so magical. You can use it to easily increase or decrease the capacity of the array. Therefore, an in-depth understanding of the length attribute will help to use it flexibly during the development process.

2. prototype attribute

Returns a reference to the prototype of the object type. The prototype property is common to object.

objectName.prototype

objectName parameter is the name of the object object.

Description: Use the prototype property to provide a set of basic functions of the object's class. New instances of an object "inherit" the operations assigned to the object's prototype.

For array objects, the following example illustrates the use of the prototype attribute.

Add a method to the array object that returns the maximum element value in the array. To accomplish this, declare a function, add it to Array.prototype, and use it.

function array_max( )

{

var i, max = this[0];

for (i = 1; i < this. length; i++)

{

if (max < this[i])

max = this[i];

}

return max;

}

Array.prototype.max = array_max;

var x = new Array(1, 2, 3, 4, 5, 6 );

var y = x.max( );

After this code is executed, y saves the maximum value in the array x, or 6.

3. The constructor attribute

represents the function that creates the object.

object.constructor //object is the name of the object or function.

Description: The constructor property is a member of all objects with prototype. They include all JScript native objects except Global and Math objects. The constructor property holds a reference to the function that constructs a specific object instance.

For example:

x = new String("Hi");

if (x.constructor == String) // Process (condition is true).

or

function MyFunc {

// Function body.

}

y = new MyFunc;

if (y.constructor == MyFunc) // Process (condition is true).

For arrays:

y = new Array();

 

The above is the detailed content of Array operation examples in JS. 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)

PyCharm usage tutorial: guide you in detail to run the operation PyCharm usage tutorial: guide you in detail to run the operation Feb 26, 2024 pm 05:51 PM

PyCharm is a very popular Python integrated development environment (IDE). It provides a wealth of functions and tools to make Python development more efficient and convenient. This article will introduce you to the basic operation methods of PyCharm and provide specific code examples to help readers quickly get started and become proficient in operating the tool. 1. Download and install PyCharm First, we need to go to the PyCharm official website (https://www.jetbrains.com/pyc

What is sudo and why is it important? What is sudo and why is it important? Feb 21, 2024 pm 07:01 PM

sudo (superuser execution) is a key command in Linux and Unix systems that allows ordinary users to run specific commands with root privileges. The function of sudo is mainly reflected in the following aspects: Providing permission control: sudo achieves strict control over system resources and sensitive operations by authorizing users to temporarily obtain superuser permissions. Ordinary users can only obtain temporary privileges through sudo when needed, and do not need to log in as superuser all the time. Improved security: By using sudo, you can avoid using the root account during routine operations. Using the root account for all operations may lead to unexpected system damage, as any mistaken or careless operation will have full permissions. and

Linux Deploy operation steps and precautions Linux Deploy operation steps and precautions Mar 14, 2024 pm 03:03 PM

LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install

What to do if you forget to press F2 for win10 boot password What to do if you forget to press F2 for win10 boot password Feb 28, 2024 am 08:31 AM

Presumably many users have several unused computers at home, and they have completely forgotten the power-on password because they have not been used for a long time, so they would like to know what to do if they forget the password? Then let’s take a look together. What to do if you forget to press F2 for win10 boot password? 1. Press the power button of the computer, and then press F2 when turning on the computer (different computer brands have different buttons to enter the BIOS). 2. In the bios interface, find the security option (the location may be different for different brands of computers). Usually in the settings menu at the top. 3. Then find the SupervisorPassword option and click it. 4. At this time, the user can see his password, and at the same time find the Enabled next to it and switch it to Dis.

Huawei Mate60 Pro screenshot operation steps sharing Huawei Mate60 Pro screenshot operation steps sharing Mar 23, 2024 am 11:15 AM

With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

PHP PDO Tutorial: An Advanced Guide from Basics to Mastery PHP PDO Tutorial: An Advanced Guide from Basics to Mastery Feb 19, 2024 pm 06:30 PM

1. Introduction to PDO PDO is an extension library of PHP, which provides an object-oriented way to operate the database. PDO supports a variety of databases, including Mysql, postgresql, oracle, SQLServer, etc. PDO enables developers to use a unified API to operate different databases, which allows developers to easily switch between different databases. 2. PDO connects to the database. To use PDO to connect to the database, you first need to create a PDO object. The constructor of the PDO object receives three parameters: database type, host name, database username and password. For example, the following code creates an object that connects to a mysql database: $dsn="mysq

Astar staking principle, income dismantling, airdrop projects and strategies & operation nanny-level strategy Astar staking principle, income dismantling, airdrop projects and strategies & operation nanny-level strategy Jun 25, 2024 pm 07:09 PM

Table of Contents Astar Dapp Staking Principle Staking Revenue Dismantling of Potential Airdrop Projects: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap Staking Strategy & Operation "AstarDapp Staking" has been upgraded to the V3 version at the beginning of this year, and many adjustments have been made to the staking revenue rules. At present, the first staking cycle has ended, and the "voting" sub-cycle of the second staking cycle has just begun. To obtain the "extra reward" benefits, you need to grasp this critical stage (expected to last until June 26, with less than 5 days remaining). I will break down the Astar staking income in detail,

See all articles