Introduction to basic and advanced JavaScript arrays-JS Tutorial-php.cn

The following editor will bring you a summary of basic and advanced JavaScript array methods (recommended). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.

Summary of common array methods:

Below I only summarize the commonly used array methods in es3. A total of There are 11 of them. The 9 new array methods in es5 will be summarized separately later.

1 method to connect arrays: concat()

2 methods to convert arrays into strings: join(), toString()

6 additions and deletions of array elements Methods: pop(), push(), shift(), unshift(), slice(), splice()

2 array sorting methods: reverse(), sort()

Method to connect arrays:

1. concat()

Function: connection Two arrays, merged into a new array.

Usage: arr1.concat(arr2, arr2...)

Example:

<script type="text/javascript">

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"

document.write(arr.concat(arr2))

</script>

Copy after login

Output:

George,John,Thomas,James,Adrew,Martin

Method to convert array to string:

1. join()

Function: Used to put all the elements in the array into a string. and separated by the specified delimiter.

Usage: arrayObject.join(separator)

Example:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join("."))

</script>

Copy after login

Output:

George.John. Thomas

Note: The return value is a string. If there is no separator, the default is comma separation.

2. toString()Function: Convert the array to a string and return the result.

Usage: arrayObject.toString()

Example:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"；

arr[1] = "John"；

arr[2] = "Thomas"；

document.write(arr.toString())；

</script>

Copy after login

Output:

George,John,Thomas

The return value is the same as the string returned by the join() method without parameters. Elements in the array are separated by commas.

Methods to add and delete array elements:

##1. pop()

Function: Used to delete and return the last element of the array. Usage: arrayObject.pop()

The pop() method will delete the last element of arrayObject, decrement the array length by 1, and return the value of the element it deletes. If the array is already empty, pop() does not modify the array and returns an undefined value.

Example:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

</script>

Copy after login

Output:

George,John,Thomas
Thomas
George,John

Copy after login

2, push()

Function: You can add one or more elements to the end of the array and return the new length. Usage: arrayObject.push(newelement1,newelement2,....,newelementX)

It directly modifies arrayObject instead of creating a new array. The push() method and pop() method use the first-in-last-pop function provided by the array.

Example:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.push("James") + "<br />")

document.write(arr)

</script>

Copy after login

Output:

George,John,Thomas
4
George,John,Thomas,James

Copy after login

3, shift()

Function: Used to delete the first element of the array and return the value of the first element. Usage: arrayObject.shift()

If the array is empty, the shift() method will do nothing and return an undefined value. Please note that this method does not create a new array, but directly modifies the original arrayObject.

Example:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.shift() + "<br />")

document.write(arr)

</script>

Copy after login

Output:

George,John,Thomas
George
John,Thomas

Copy after login

4, unshift()

Function: Adds one or more elements to the beginning of the array and returns the new length. Usage: arrayObject.unshift(newelement1,newelement2,....,newelementX)

The unshift() method will insert its parameters into the head of arrayObject and replace the existing elements Move sequentially to higher subscripts to make space. The first argument to the method will become the new element 0 of the array, if there is a second argument it will become the new element 1, and so on.

Please note that the unshift() method does not create a new creation, but directly modifies the original array. The unshift() method does not work correctly in Internet Explorer!

Example:

<script type="text/javascript">

var arr = new Array()

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.unshift("William") + "<br />")

document.write(arr)

</script>

Copy after login

Output:

George,John,Thomas
4
William,George,John,Thomas

Copy after login

5, slice()

Function: Returns selected elements from an existing array. Usage: arrayObject.slice(start,end)

##start

Required. Specifies where to start the selection. If negative, it specifies the position from the end of the array. That is, -1 refers to the last element, -2 refers to the second to last element, and so on.


end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr)

</script>

Copy after login

输出：

George,John,Thomas
John,Thomas
George,John,Thomas

Copy after login

6，splice（）

作用：向/从数组中添加/删除项目，然后返回被删除的项目。

用法：arrayObject.splice(index,howmany,item1,.....,itemX)

index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

该方法会改变原始数组。

示例：

<script type="text/javascript">

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 />")arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

Copy after login

输出：

George,John,Thomas,James,Adrew,Martin

George,John,William,Thomas,James,Adrew,Martin

Copy after login

数组元素排序：

1、reverse（）

作用：用于颠倒数组中元素的顺序。

用法：arrayObject.reverse()

该方法会改变原来的数组，而不会创建新的数组。

示例：

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.reverse())

</script>

Copy after login

输出：

George,John,Thomas
Thomas,John,George

Copy after login

2，sort（）

作用：用于对数组的元素进行排序。

用法：arrayObject.sort(sortby)

Sortby：可选，按规定是顺序排序。必须是函数。

相对于其他方法来说复杂了一点。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。

<script type="text/javascript">

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

document.write(arr.sort(sortNumber))

</script>

Copy after login

输出：

10,5,40,25,1000,1
1,5,10,25,40,1000

Copy after login

上面这个例子是让数组元素从小到大排序，如果想实现从大到小排序，只需要将sortNumber函数中的a-b改为b-a即可。

<script type="text/javascript">

function sortNumber(a,b)

{

return b - a;

}

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

document.write(arr.sort(sortNumber))

</script>

Copy after login

输出：

10,5,40,25,1000,1
1000,40,25,10,5,1

Copy after login

补充：

数组对象的属性：

属性	描述
constructor	返回对创建此对象的数组函数的引用。
length	设置或返回数组中元素的数目。
prototype	使您有能力向对象添加属性和方法。

以下这个例子展示了如何使用constructor属性

<script type="text/javascript">

var test=new Array();

if (test.constructor==Array)

{

document.write("This is an Array");

}

if (test.constructor==Boolean)

{

document.write("This is a Boolean");

}

if (test.constructor==Date)

{

document.write("This is a Date");

}

if (test.constructor==String)

{

document.write("This is a String");

}

</script>

Copy after login

输出：

This is an Array

Copy after login

length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素，而且以元素 0 开始的常规数组而言，属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。

获取数组的长度：arrayObject.length

The above is the detailed content of Introduction to basic and advanced JavaScript arrays. For more information, please follow other related articles on the PHP Chinese website!