기본 및 고급 JavaScript 배열 소개

다음 편집기는 기본 및 고급 JavaScript 배열 방법(권장)에 대한 요약을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 에디터를 따라가서 살펴보겠습니다

일반적인 배열 방법 요약:

아래에서는 es3에서 일반적으로 사용되는 배열 방법만 요약했는데 총 11가지가 있습니다. es5의 9가지 새로운 배열 메소드는 나중에 별도로 요약됩니다.

1 배열 연결 메서드: concat()

2 배열을 문자열로 변환하는 메서드: Join(), toString()

6 배열 요소 추가 및 삭제 메서드: pop(), push(), Shift() , unshift(), Slice(), splice()

2 배열 정렬 방법: reverse(), sort()

배열 연결 방법:

1 concat()

기능: 두 개의 어레이를 연결하고 이를 새로운 어레이로 병합합니다.

사용법: arr1.concat(arr2, arr2...)

예:

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

출력:

George,John,Thomas,James,Adrew,Martin

배열을 문자열로 변환 방법 :

1.join()

함수: 배열의 모든 요소를 ​​문자열에 넣는 데 사용됩니다. 지정된 구분 기호로 구분됩니다.

사용법: arrayObject.join(구분 기호)

예:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

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

</script>

출력:

George.John.Thomas

참고: 반환 값은 문자열입니다. 구분 기호가 없는 경우 기본값은 쉼표 구분입니다.

2.toString()

함수: 배열을 문자열로 변환하고 결과를 반환합니다.

사용법: arrayObject.toString()

예:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"；

arr[1] = "John"；

arr[2] = "Thomas"；

document.write(arr.toString())；

</script>

출력:

George, John, Thomas

반환 값은 매개 변수 없이 Join() 메서드에서 반환한 문자열과 동일합니다. 배열의 요소는 쉼표로 구분됩니다.

배열 요소 추가 및 삭제 방법:

1.pop()

함수: 배열의 마지막 요소를 삭제하고 반환하는 데 사용됩니다.

사용법: arrayObject.pop()

pop() 메서드는 arrayObject의 마지막 요소를 삭제하고 배열 길이를 1만큼 감소시킨 다음 삭제한 요소의 값을 반환합니다. 배열이 이미 비어 있으면 pop()은 배열을 수정하지 않고 정의되지 않은 값을 반환합니다.

예:

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

출력:

George,John,Thomas
Thomas
George,John

2.push()

기능: 배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환할 수 있습니다.

사용법: arrayObject.push(newelement1, newelement2,...,newelementX)

새 배열을 생성하는 대신 arrayObject를 직접 수정합니다. push() 메서드와 pop() 메서드는 배열에서 제공하는 first-in-last-pop 기능을 사용합니다.

예:

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

출력:

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

3.shift()

함수: 배열의 첫 번째 요소를 삭제하고 첫 번째 요소 값을 반환하는 데 사용됩니다.

사용법: arrayObject.shift()

배열이 비어 있으면 Shift() 메서드는 아무 작업도 수행하지 않고 정의되지 않은 값을 반환합니다. 이 메소드는 새 배열을 생성하는 것이 아니라 원래 arrayObject를 직접 수정한다는 점에 유의하세요.

예:

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

출력:

George,John,Thomas
George
John,Thomas

4, unshift()

기능: 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환할 수 있습니다.

사용법: arrayObject.unshift(newelement1,newelement2,....,newelementX)

unshift() 메서드는 해당 매개변수를 arrayObject의 헤드에 삽입하고 기존 요소를 시퀀스 첨자의 상위 요소로 이동하여 공간을 남깁니다. 메서드에 대한 첫 번째 인수는 배열의 새 요소 0이 되고, 두 번째 인수가 있으면 새 요소 1이 되는 식입니다.

unshift() 메서드는 새로운 생성을 생성하지 않고 원본 배열을 직접 수정한다는 점에 유의하세요. unshift() 메서드가 Internet Explorer에서 올바르게 작동하지 않습니다!

예:

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

출력:

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

5, Slice()

기능: 기존 배열에서 선택한 요소를 반환합니다.

사용법: arrayObject.slice(start,end)

start	필수입니다. 선택을 시작할 위치를 지정합니다. 음수인 경우 배열 끝에서부터의 위치를 ​​지정합니다. 즉, -1은 마지막 요소를 나타내고, -2는 마지막 요소에서 두 번째를 나타내는 식입니다.
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>

输出：

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

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>

输出：

George,John,Thomas,James,Adrew,Martin

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

数组元素排序：

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>

输出：

George,John,Thomas
Thomas,John,George

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>

输出：

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

上面这个例子是让数组元素从小到大排序，如果想实现从大到小排序，只需要将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>

输出：

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

补充：

数组对象的属性：

属性	描述
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>

输出：

This is an Array

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

获取数组的长度：arrayObject.length

위 내용은 기본 및 고급 JavaScript 배열 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!