Summary of examples of common methods of JavaScript arrays

Summary of examples of common methods of JavaScript arrays

Introduction: In actual development, front-end engineers not only need to write page layouts and styles but also need to process the data returned by the back-end. Most of the returned data is in JSON format, and generally an object or array is returned. The following summarizes the usage of commonly used arrays to facilitate easy use in development!

Common array methods

concat() Method

The concat() method is used to concatenate two or more arrays.

This method does not mutate the existing array, but simply returns a copy of the concatenated array.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
 
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
 
document.write(arr.concat(arr2,arr3))
//George, John, Thomas, James, Andrew, Martin, William, Franklin

join() method

The join() method is used to put all the elements in an array into a string.

Elements are separated by the specified delimiter.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr.join("."))
//George.John.Thomas

pop() Method

The pop() method is used to remove and return the last element of an array.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr)
 
//George, John, Thomas
 
document.write(arr.pop())
 
//Thomas
 
document.write(arr)
//George, John

push() method

The push() method adds one or more elements to the end of an array and returns the new length.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr + "<br />")//George, John, Thomas
document.write(arr.push("James") + "<br />")
 
document.write(arr)//George, John, Thomas, James

reverse() method

The reverse() method is used to reverse the order of elements in an array.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr + "<br />")//George, John, Thomas
 
document.write(arr.reverse()) //Thomas, John, George

shift() method

The shift() method is used to remove the first element of an array from it and return the value of the first element.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr + "<br />")//George, John, Thomas
document.write(arr.shift() + "<br />")//George
document.write(arr)//John,Thomas

slice() Method

The slice() method returns selected elements from an existing array.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr + "<br />")//George, John, Thomas
document.write(arr.slice(1) + "<br />")//John,Thomas
document.write(arr) //George, John, Thomas

sort() method

The sort() method is used to sort the elements of an array.

function sortNumber(a,b)
{
return a - b
}
 
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
 
document.write(arr + "<br />")//10,5,40,25,1000,1
document.write(arr.sort(sortNumber))//1,5,10,25,40,1000

splice() method

The splice() method adds or removes elements to or from an array and returns the removed elements.

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
 
document.write(arr + "<br />")//George, John, Thomas, James, Adrew, Martin
arr.splice(2,0,"William")
document.write(arr + "<br />")//George, John, William, Thomas, James, Adrew, Martin

toSource() method

The toSource() method represents the source code of an object.

This primitive value is inherited by all objects derived from the Array object.

The toSource() method is usually called automatically by JavaScript behind the scenes and does not appear explicitly in your code.

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
 
var bill = new employee("Bill Gates","Engineer",1985);
 
document.write(bill.toSource()); //({name:"Bill Gates", job:"Engineer", born:1985})

toString() Method

The toString() method converts an array to a string and returns the result.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr.toString()) //George, John, Thomas

toLocaleString() Method

Convert an array to a local string.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr.toLocaleString()) //George, John, Thomas

unshift() Method

The unshift() method adds one or more elements to the beginning of an array and returns the new length.

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write(arr + "<br />")//George, John, Thomas
document.write(arr.unshift("William") + "<br />")
document.write(arr) // William, George, John, Thomas

valueOf() Method

The valueOf() method returns the primitive value of the Array object.

This primitive value is inherited by all objects derived from the Array object.

The valueOf() method is usually called automatically by JavaScript behind the scenes and does not appear explicitly in your code.

arrayObject.valueOf()

To sum up (the marked array methods are more commonly used and must be mastered)

If you think there are other useful and commonly used array methods, please leave a message and communicate with me! For example, reduce method, etc.!

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];
 
var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

Okay, that’s all for this issue. The more you know, the more you don’t know!

This is the end of this article about the examples of common methods of JavaScript arrays. For more relevant JavaScript array content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Summary of several common methods of JavaScript arrays
  • Summary of some common methods of JavaScript array
  • Learn the common methods and techniques in JS arrays and become a master
  • Detailed explanation of common methods for deleting specified values ​​in JS array
  • Detailed explanation of common methods of JavaScript arrays

<<:  MySQL master-slave replication principle and practice detailed explanation

>>:  How to view the docker run startup parameter command (recommended)

Recommend

In-depth explanation of JavaScript this keyword

Table of contents 1. Introduction 2. Understand t...

Introduction to MySQL Connection Control Plugin

Table of contents 1. Introduction to the connecti...

How to change the encoding of MySQL database to utf8mb4

The utf8mb4 encoding is a superset of the utf8 en...

Detailed tutorial on installing mysql 8.0.13 (rpm) on Centos7

yum or rpm? The yum installation method is very c...

HTML design pattern daily study notes

HTML Design Pattern Study Notes This week I mainl...

In-depth understanding of the implementation principle of require loader

Preface We often say that node is not a new progr...

Kill a bunch of MySQL databases with just a shell script like this (recommended)

I was woken up by a phone call early in the morni...

A brief discussion on the use of GROUP BY and HAVING in SQL statements

Before introducing the GROUP BY and HAVING clause...

Mysql 5.6 "implicit conversion" causes index failure and inaccurate data

background When performing a SQL query, I tried t...

Ubuntu 18.04 disable/enable touchpad via command

In Ubuntu, you often encounter the situation wher...

How to create an Nginx server with Docker

Operating environment: MAC Docker version: Docker...

Using JavaScript in HTML

The <script> tag In HTML5, script has the f...

Initial summary of the beginner's website building tutorial

After writing these six articles, I started to fee...