> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 배열 연산 함수 방법을 설명하는 상세한 샘플 코드

JavaScript 배열 연산 함수 방법을 설명하는 상세한 샘플 코드

黄舟
풀어 주다: 2017-03-16 14:49:18
원래의
1366명이 탐색했습니다.

1. concat()은 두 개 이상의 배열을 연결합니다.

이 메서드는 기존 배열을 변경하지 않고 연결된 배열의 복사본만 반환합니다.
예:

1 <script type="text/javascript">
2        var arr = [1, 2, 3];
3        var arr1 = [11, 22, 33];
4        document.write(arr.concat(4, 5, arr1));
5 </script>
로그인 후 복사

출력 결과:

1,2,3,4,5,11,22,33

join()

배열의 모든 요소를 ​​문자열에 넣습니다. 요소는 지정된 구분 기호로 구분됩니다.

예:

1 <script type="text/javascript">
2       var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;];
3       var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;
4 </script>
로그인 후 복사

목록 결과:

'

  • 항목 1
  • 항목 2
  • < ;li>항목 3
'

이것이 가장 빠른 방법입니다! 시스템이 내부적으로 수행하는 작업에 관계없이 기본 코드(예: Join())를 사용하는 것은 일반적으로 기본이 아닌 코드보다 훨씬 빠릅니다. ——James Padolsey, james.padolsey.com

3. pop() 을 삭제하고 배열의 마지막 요소를 반환합니다.

pop() 메서드는 배열의 마지막 요소 요소는 배열 길이를 1만큼 감소시키고 삭제한 요소의 값을 반환합니다.

배열이 이미 비어 있는 경우 pop()은 배열을 변경하지 않고 정의되지 않은 값을 반환합니다.

예:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.pop() + "<br/>");
5       document.write(arr);
6 </script>
로그인 후 복사

출력 결과:

George,John,Thomas
Thomas
George,John
로그인 후 복사

4 , push()는 배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

예:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.push("James") + "<br/>");
5       document.write(arr);
6 </script>
로그인 후 복사

출력 결과:

George,John,Thomas
4
George,John,Thomas,James
로그인 후 복사

5 , unshift()는 배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

예:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.unshift("James") + "<br/>");
5       document.write(arr);
6 </script>
로그인 후 복사

출력 결과:

George,John,Thomas
4
James,George,John,Thomas
로그인 후 복사

6 , reverse()는 배열의 요소 순서를 바꿉니다.

예:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.reverse());
5 </script>
로그인 후 복사

출력 결과:

George,John,Thomas
Thomas,John,George
로그인 후 복사

7. 배열의 첫 번째 요소를 반환합니다

예:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.shift() + "<br/>");
5       document.write(arr);
6 </script>
로그인 후 복사

출력 결과:

George,John,Thomas
George
John,Thomas
로그인 후 복사

8. Slice(start,end)는 선택한 항목을 반환합니다. 기존 배열의 요소

이 메서드는 배열을 수정하지 않지만 하위 배열을 반환합니다.

예:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾
5       document.write(arr);
6 </script>
로그인 후 복사

출력 결과:

George,John,Thomas
John,Thomas
George,John,Thomas
로그인 후 복사

9. sort() 배열

참조의 요소를 정렬합니다. 배열은 원본 배열에 따라 정렬되며 복사본이 생성되지 않습니다.

이 방법은 기본적으로 문자 인코딩(ASCII) 순서로 정렬됩니다.

예:

1 <script type="text/javascript">
2     var arr = new Array(6);
3     arr[0] = "John";
4     arr[1] = "George";
5     arr[2] = "Thomas";
6     document.write(arr + "<br/>");
7     document.write(arr.sort());
8 </script>
로그인 후 복사

출력 결과:

John,George,Thomas
George,John,Thomas
로그인 후 복사

또 다른 예를 살펴보겠습니다:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort());
11 </script>
로그인 후 복사

출력 결과:

10,5,40,25,1000,1
1,10,1000,25,40,5
로그인 후 복사

우리가 생각하는 것처럼 숫자 크기로 정렬되어 있지 않음을 알 수 있습니다. 숫자 크기별로 정렬하려면 기본 정렬 방법을 변경하고 정렬 규칙을 직접 지정해야 합니다.
다음과 같습니다:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小
11 </script>
로그인 후 복사

출력 결과:

10,5,40,25,1000,1
1,5,10,25,40,1000
로그인 후 복사

내림차순으로 정렬하고 싶다면 어떻게 해야 할까요?

정렬 규칙을 다음으로 변경합니다.

function (a, b) {return b – a;}

It's OK

splice( ) 요소를 삭제하고 배열에 새 요소를 추가합니다

splice() 메서드는 Slice() 메서드와 다른 기능을 가지고 있습니다. splice() 메서드는 배열을 직접 수정합니다

(1) 삭제 지정된 범위의 배열 요소:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3    arr[0] = "George"; 
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
12    document.write(arr);
13 </script>
로그인 후 복사

출력 결과:

George,John,Thomas,James,Adrew,Martin
George,John,Martin
로그인 후 복사

(2) 지정된 첨자부터 시작하여 지정된 요소를 삽입합니다(요소 수는 제한되지 않음):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"
12    document.write(arr);
13 </script>
로그인 후 복사

출력 결과:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin
로그인 후 복사

(3) 지정된 범위의 배열 요소를 삭제하고 지정된 요소로 교체합니다(요소 수는 제한되지 않음):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素),并用"William","JACK"进行替换
12 document.write(arr);
13 </script>
로그인 후 복사

출력 결과:

아아아아

위 내용은 JavaScript 배열 연산 함수 방법을 설명하는 상세한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿