A brief discussion on the usage of JS array Array

JavaScript arrays are used to store multiple values ​​in a single variable. An array is a special variable that can contain multiple values ​​at a time.

[Related course recommendations: JavaScript video tutorial]

Convert array to string

JavaScript toString() method converts an array to a string of (comma-separated) array values.

Example:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

The join() method also concatenates all array elements into a string. It behaves like toString(), but additionally you can specify the delimiter:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

pop() and push()

use When working with an array, it is easy to remove elements and add new ones. This is the pop() method and push() method.

The pop() method removes the last element from the array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits删除最后一个元素 ("Mango")

The pop() method returns the "popped" value:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x的值是 "Mango"

push() method to the end of the array Add a new element:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  添加一个新的元素 ("Kiwi") 到 fruits 最后

push() method returns the new array length:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   //   x 的值是 5

shift() and unshift()

The shift() method removes the first array element and "shifts" all other elements to lower indices.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 删除第一个元素 "Banana"

shift() method returns the "shifted out" string:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();    //  x 的值是 "Banana"

unshift() method adds a new element to the beginning of the array and moves the old element to a higher index:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    //  添加一个新的元素 "Lemon" 到 fruits

The unshift() method returns the new array length.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

Changing elements

Access array elements using index numbers:

Array indexes start with 0. [0] is the first array element, [1] is the second, [2] is the third...

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";        // 将fruits的第一个元素改为 "Kiwi"

The length property provides a simple way to append a new element to an array :

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // 追加 "Kiwi" 到 fruits

Delete elements

Since JavaScript arrays are objects, you can use the JavaScript operator delete to delete elements:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 将fruits中的第一个元素更改为undefined

Using delete may leave undefined holes in the array. Please use pop() or shift() instead.

Splice array

The splice() method can be used to add new items to the array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

The first parameter ( 2) Define the position where the new element should be added (at the joint). The second parameter (0) defines how many elements should be removed. The remaining parameters ("Lemon", "Kiwi") define the new element to be added. The splice() method returns an array containing deleted items:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

Use splice() to delete elements

With clever parameter settings, You can use splice() to remove elements without leaving a "hole" in the array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除fruits的第一个元素

The first parameter (0) defines where the new element should be added. The second parameter (1) defines how many elements should be removed. The remaining parameters are omitted. No new elements will be added.

Merge arrays

Create a new array by merging existing arrays with the concat() method:

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 合并 myGirls 和 myBoys 两个数组

concat() Method does not change the existing array. It always returns a new array.

The concat() method can use any number of array parameters

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 合并 arr1 和 arr2 和 arr3 三个数组

The concat() method can also take values ​​as parameters:

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

Array slice

The slice() method slices an array into a new array. This example slices a portion of the array starting from array element 1 ("Orange"): The

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

slice() method creates a new array. It does not remove any elements from the source array.

This example cuts out a part of the array starting from array element 3 ("Apple"):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

The slice() method can take two parameters slice(start,end). Method selects elements from the start parameter up to (but not including) the end parameter.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

If the end parameter is omitted, as in the first example, the slice() method will slice off the rest of the array.

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(2);

Automatic toString()

When a raw value is required, JavaScript automatically converts the array to a comma-separated string. This is always the case when trying to output an array. Both examples will produce the same result:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

All JavaScript objects have a toString() method.

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of A brief discussion on the usage of JS array Array. For more information, please follow other related articles on the PHP Chinese website!