js 배열 방법

이 글의 내용은 js 배열 방식으로, 이제 여러분과 공유하고, 도움이 필요한 친구들을 위한 참고 자료로도 사용할 수 있습니다

Array 생성

JavaScript 둘. 첫 번째는 배열 생성자를 사용하는 것입니다. var

arr1 = var

new Array(); // 빈 배열 만들기

arr2 = new Array(20) ; // 배열 생성 20 항목 var arr3 = new Array("lily"," lucy" 포함 , "톰" ); // 3 문자열 을 포함하는 배열 만들기 배열을 만드는 두 번째 기본 방법은 배열 리터럴 표기법을 사용하는 것입니다. 1 2 3

var

arr4 = []

//

빈 배열 만들기

var

arr5 = [20] ;

//

1 항목 var

arr6 = [

"lily", "lucy" ,"톰" ]; //

3 문자열을 포함하는 배열 만들기

배열의 값을 읽고 설정할 때 대괄호를 사용하고 0 :

에 추가합니다.

1 2 을 기준으로 해당 값의 숫자 인덱스를 제공합니다. 3 4

var arr6 = ["lily","lucy","톰 " ]; // 3 문자열 alert(arr6[0]); //lily arr6[1] = "mary"; / / 두 번째 항목을 mary arr6[3] = "sean"으로 수정합니다. //네 번째 항목을 sean

length JavaScript 배열의 속성은 수정될 수 있습니다. 아래 예를 참조하세요.

객체가 배열 객체인지 확인해야 하는 경우 ECMAScript 5 이전에는 instanceofArray를 사용하여 확인할 수 있었지만 instanceof 연산자의 문제점은 가정한다는 것입니다. 전역 실행 환경은 단 하나뿐입니다. 웹 페이지에 여러 프레임이 포함된 경우 실제로 두 개 이상의 전역 실행 환경이 있으므로 배열 생성자의 서로 다른 버전도 두 개 이상입니다. 한 프레임에서 다른 프레임으로 배열을 전달하는 경우 전달하는 배열은 두 번째 프레임에서 기본적으로 생성된 배열과 다른 생성자를 갖게 됩니다.

ECMAScript 5 추가된 Array.isArray() 메서드. 이 메서드의 목적은 값이 생성된 전역 실행 컨텍스트에 관계없이 값이 배열인지 여부를 궁극적으로 확인하는 것입니다.

Array 메소드

배열 메소드 소개부터 시작하겠습니다. 배열 메소드에는 배열 프로토타입 메소드와 object객체에서 상속받은 메소드가 포함됩니다. 프로토타입 메소드에는 주로 다음이 포함됩니다:

join()
push() 및 pop()
shift() 및 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf() 및 lastIndexOf() (ES5new)
forEach() (ES5 새로 추가됨) . ..
새로 추가됨) some() (ES5
new) reduce() and ReduceRight()
(ES5 신규)
ES5 새로운 방법 브라우저 지원: Opera 11+ Firefox 3.6+
Safari 5+ Chrome 8+ Internet Explorer 9+지원되는 브라우저 버전의 경우 배열 프로토타입 확장을 달성합니다. 각 방법의 기본 기능은 아래에 자세히 소개되어 있습니다.

1, join()

join(separator):

배열의 요소를 문자열로 결합하고

separator

를 구분 기호로 사용합니다. 생략된 경우 다음을 사용합니다. 기본적으로 쉼표는 구분 기호로 사용됩니다. 이 메서드는 구분 기호라는 하나의 매개 변수만 받습니다.

12

3

4

1 2 3	var arr = ["lily","lucy","Tom"]; // 3 문자열을 포함하는 배열 만들기 arr[arr.length] = "sean"; //아래 첨자 3에 항목 "sean" 추가(즉, 배열의 꼬리) arr.length = arr.length-1; //배열의 마지막 항목 삭제
var arr = [1,2,3]; Console.log (Arr.Join ()) // 1 , 2,3 console.log(arr.join("-")) // 1-2-3 console.log(arr) // [ 1, 2, 3] (원래 배열은 변경되지 않음)

문자열 반복은 join() 메소드를 통해 구현할 수 있습니다. 문자열과 숫자만 전달하면 됩니다. 반복되는 문자열을 반환합니다. 함수는 다음과 같습니다.

function

RepeatString(str, n) {

Return

New

Aarray(n + 1). Join(str), "

, 3));

// abcabcabc

console.log(repeatString(

"Hi"

, 5)) // HiHiHiHiHi

2, push() 및 pop()

push(): 는 원하는 수의 매개변수를 받을 수 있으며 배열 끝에 하나씩 추가할 수 있습니다. 수정된 배열의 길이를 반환합니다.
pop(): 배열 끝에서 마지막 항목을 제거하고 배열의 길이 값을 줄이고 제거된 항목을 반환합니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

7

var

arr = [

"Lily"

,

"lucy"

,

"Tom"

];

var

count = arr.push(

"잭"

,"Sean");console.log(count); // 5console.log(arr) // ["Lily", "톰", "잭", "션"]

var item = arr.pop();console.log(item) // Sean

console; .log(arr)// ["릴리", "루시", "톰", "잭"]

3, shift() 및 unshift()

shift(): 원본 배열의 첫 번째 항목을 삭제하고 삭제된 요소의 값을 반환합니다. 배열이 비어 있으면 정의되지 않음 을 반환합니다.
unshift:원래 배열의 시작 부분에 매개변수를 추가하고 배열의 길이를 반환합니다.

이 메소드 세트는 위의 push() 및 pop() 메소드와 정확히 일치합니다. 하나는 배열의 시작을 조작하는 것이고, 다른 하나는 배열의 끝을 조작하는 것입니다. 정렬. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

7

var

arr = [

"Lily"

,

"lucy"

,

"Tom"

];

var

count = arr.unshift(

"잭"

,"Sean");console.log(count) // 5console.log(arr) //["Jack", "Sean", "릴리", "루시", "톰"]

var item = arr.shift();console.log(item) // Jack

console; .log(arr)// ["션", "릴리", "루시", "톰"]

4 정렬 시 sort()

메서드는 각 배열 항목의

toString() 변환 메서드를 호출한 다음 결과 문자열을 비교하여 정렬 방법을 결정합니다. 배열의 각 항목이 숫자 값인 경우에도 sort() 메서드는 문자열을 비교하므로 다음과 같은 상황이 발생합니다.

45var

arr1 = ["a"

,

"d"

,

"c"

,

"b"

];

console.log(arr1.sort());

// ["a", "b", "c", "d"]

arr2 = [ 13, 24, 51, 3];

console.log(arr2.sort()) // [13, 24, 3, 51]console.log(arr2) ; //[13, 24, 3, 51](메타배열이 변경되었습니다)

위 문제를 해결하기 위해 sort() 메소드는 어떤 값이 어떤 값 앞에 있는지 지정할 수 있도록 비교 함수를 매개변수로 받을 수 있습니다. 비교 함수는 두 개의 매개변수를 사용하여 첫 번째 매개변수가 두 번째 매개변수보다 앞에 있어야 하면 음수를 반환하고, 두 매개변수가 같으면 0, 첫 번째 매개변수가 두 번째 매개변수 뒤에 있어야 하면 1을 반환합니다. . 다음은 간단한 비교 함수입니다. 6

7}

8

9

10

11

function

compare(value1, value2) {

if

(값1 < 값2) {

return

-1;

else if (값1 >값2) {

반품 1;

} else

{return 0;

}}

arr2 = [ 13, 24, 51, 3]; console.log(arr2.sort(비교)) // [3, 13, 24, 51]

비교 함수를 통해 내림차순 정렬 된 결과를 생성 해야하는 경우 비교 함수에 의해 반환 된 값을 교환합니다. 4

5return

6 7 8 9 10 11 function 비교(값1 , 값2) { if (값1 < 값2) {

1;} else if (value1 > 값2) { return -1; } else { return 0; } } arr2 = [13, 24, 51, 3]; console.log(arr2.sort(비교)) // [51, 24, 13, 3] 5 , reverse() reverse(): 배열 항목의 순서를 반대로 바꿉니다.

12

3

var

arr = [13, 24, 5 1, 3];

console.log ( arr.reverse());

//[3, 51, 24, 13]

console.log(arr)

//[3, 51, 24, 13](

원본 배열 변경됨

)

6, concat()

concat() : 원본 배열에 매개변수를 추가합니다. 이 메서드는 먼저 현재 배열의 복사본을 만든 다음 수신된 매개변수를 복사본 끝에 추가하고 마지막으로 새로 구성된 배열을 반환합니다. concat() 메서드에 인수를 전달하지 않고 현재 배열을 복사하고 복사본을 반환합니다.

1 2 3 4# arr = [1,3,5,7];

var arrCopy = arr.concat(9,[11,13]); console.log(arrCopy) //[1, 3, 5, 7, 9, 11, 13 ]console.log(arr); // [1, 3, 5, 7](원본 배열은 수정되지 않았습니다) 찾을 수 있습니다 위의 테스트 결과에서 : 입력이 배열이 아닌 경우 매개변수를 배열에 직접 추가합니다. 입력이 배열인 경우 배열의 각 항목을 배열에 추가합니다. 하지만 2차원 배열이 전달되면 어떻게 될까요?

1

2

3

var

arrCopy2 = arr.concat ([9 ,[11,13]]);

console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]console.log(arrCopy2[5]); ]

위 코드에서 arrCopy2 배열의 다섯 번째 항목은 두 개의 항목을 포함하는 배열입니다. 즉, concat 메서드는 다음과 같은 경우에만 수신 배열의 각 항목을 배열에 추가할 수 있습니다. 수신 배열의 일부 항목이 배열인 경우 이 배열 항목도 arrCopy2에 하나의 항목으로 추가됩니다.

7, slice()

slice(): 원래 배열의 지정된 시작 인덱스부터 끝 인덱스까지 항목으로 구성된 새 배열을 반환합니다. slice() 메서드는 반환할 항목의 시작 위치와 끝 위치인 하나 또는 두 개의 매개 변수를 받아들일 수 있습니다. 매개변수가 하나만 있는 경우 Slice() 메서드는 이 매개변수로 지정된 위치부터 시작하여 현재 배열 끝까지 모든 항목을 반환합니다. 두 개의 인수가 제공되면 이 메소드는 시작 위치와 끝 위치 - 사이의 항목을 반환하지만 끝 위치는 포함하지 않습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

7var

8

9

10

var

arr = [1,3,5,7,9,11];

var

arrCopy = arr.slice(1);

var

arrCopy2 = arr.slice(1,4);

arrCopy3 = ​​​​arr.slice(1,-2);var

arrCopy4 = arr.slice(-4,-1);console.log(arr);

//[1, 3, 5, 7, 9, 11](

원래 배열에는 변경됨)

console.log(arrCopy)

//[3, 5, 7, 9, 11]console.log(arrCopy2)//[3, 5, 7]

console.log(arrCopy3); //[3, 5, 7]

console.log(arrCopy4)//[5, 7, 9]

arrCopy는 하나의 매개변수만 설정합니다. 즉, 시작 첨자는 1이므로 반환된 배열은 끝에서 시작하는 첨자 1(아래 첨자 1 포함)입니다. 배열.
arrCopy2는 두 개의 매개변수를 설정하고 시작 인덱스(1 포함)부터 끝 인덱스(4 제외)까지 하위 배열을 반환합니다.
arrCopy3 두 개의 매개변수를 설정합니다. 종료 첨자는 음수입니다. 음수가 나타나면 배열 길이 값(6)에 음수를 추가하여 해당 위치의 숫자를 바꿉니다. 따라서 하위 배열은 1부터 4(제외)까지입니다.
arrCopy4의 두 매개변수는 모두 음수이므로 배열 길이 6를 추가하여 양수로 변환되므로 slice(2,5)과 같습니다.

8, splice()

splice(): 매우 강력한 배열 방법으로 삭제, 삽입 및 교체가 가능합니다.

삭제: 2 매개변수(삭제할 첫 번째 항목의 위치 및 삭제할 항목 수)를 지정하여 원하는 수의 항목을 삭제할 수 있습니다. 예를 들어 splice(0,2)는 배열의 처음 두 항목을 삭제합니다.

삽입: 3 매개변수(시작 위치, 0(삭제할 항목 수) 및 삽입할 항목)를 제공하여 지정된 위치에 원하는 수의 항목을 삽입할 수 있습니다. 예를 들어, splice(2,0,4,6)은 현재 배열 위치 2 부터 시작하여 4 및 6을 삽입합니다.
교체: 원하는 개수의 항목을 지정된 위치에 삽입하고 동시에 원하는 개수의 항목을 삭제할 수 있습니다. 3 매개변수: 시작 위치, 삭제할 항목 수만 지정하면 됩니다. 삽입할 항목 수. 삽입된 항목 수는 삭제된 항목 수와 동일할 필요는 없습니다. 예를 들어, splice (2,1,4,6)은 현재 배열 위치 2 에서 항목을 삭제한 다음 2 위치에서 시작하여 4 및 6을 삽입합니다. .

splice() 메서드는 항상 원래 배열에서 제거된 항목이 포함된 배열을 반환하거나, 제거된 항목이 없으면 빈 배열을 반환합니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

79

8 9 10

var arr = [1,3,5,7,9,11]; var arr제거됨 = arr.splice(0,2); console.log(arr) //[5, 7, 9, 11] console.log(arrRemoved); 1, 3] var arrRemoved2 = arr.splice(2,0,4,6); console.log(arr) // [5, 7, 4, 6, 9, 11] console.log(arrRemoved2); // [] var arrRemoved3 = arr.splice(1,1,2,4); console.log(arr); //[5, 2, 4, 4, 6, 9, 11] console.log(arrRemoved3)//[7]

, indexOf() 및 lastIndexOf()indexOf()

두 개의 매개변수 수신: 찾을 항목과 (선택 사항) 항목의 시작 지점 검색 위치의 색인입니다. 그 중

는 배열의 처음(위치 0)부터 역방향으로 검색합니다. lastIndexOf: 찾을 항목과 (선택 사항) 검색 시작 지점을 나타내는 인덱스라는 두 개의 매개 변수를 받습니다. 그중
는 배열의 끝부터 앞으로 검색합니다. 두 메서드 모두 배열에서 찾을 항목의 위치를 ​​반환하고, 찾을 수 없으면

-

1을 반환합니다. 항등 연산자는 첫 번째 인수를 배열의 각 항목과 비교할 때 사용됩니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

var

arr = [1, 3,5,7,7,5,3,1];

console.log(arr.indexOf(5))

//2

console.log(arr.lastIndexOf(5) );

//5

console.log(arr.indexOf(5,2))

//2

console.log(arr.lastIndexOf(5,4)); //2

console.log(arr.indexOf(

"5")) //-1

10, forEach()

forEach(): 배열을 반복하고 배열의 각 항목에 대해 지정된 함수를 실행합니다. 이 메서드에는 반환 값이 없습니다. 매개변수는 모두 function 유형입니다. 기본적으로 매개변수는 순회된 배열 콘텐츠 및 배열 자체입니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

7다음 코드는

8 9 10 var arr = [1, 2, 3, 4, 5]; arr.forEach( function (x, 인덱스, a ){ console.log(x + '|' + index + '|'

+ (a === arr)); }); // 출력은 다음과 같습니다: // 1|0|true // 2|1|true // 3|2|true// 4|3 | true // 5|4|true 11 , map() map() :을 참조함 " 지도 ” , 배열의 각 항목에 대해 주어진 함수를 실행하고 각 함수 호출의 결과로 구성된 배열을 반환합니다.

map

메서드를 사용하여 배열의 각 숫자를 제곱합니다.

1

234#

var

arr = [1, 2, 3, 4 , 5];

vararr2 = arr.map(console.log(arr2)

function

(item){

return

item*item;

});

//[1, 4, 9, 16, 25]

12, filter ()

filter () : "filter"

함수, 배열의 각 항목은 주어진 함수를 실행하고 필터를 반환합니다. 필터 조건 배열을 만족합니다. arr = [1, 2, 3, 4 , 5, 6, 7, 8, 9, 10];: 배열의 각 항목이 조건을 충족하는지 확인 . 모든 항목이 조건을 충족하는 경우에만 true

1 2 3 4# var

var arr2 = arr.filter( function(x, index) {return index % 3 === 0 || ] 13 、 every() every()

가 반환됩니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 78

9

vararr = [1, 2, 3, 4, 5];

var

arr2 = arr.every(

function

(x) {

return

x < 10;

});

console.log(arr2) //true

var

arr3 = 도착. 모든(function(x) {

return x < 3;});

console.log(arr3) / / 거짓

14, some()

some(): 배열에 조건을 충족하는 항목이 있는지 확인합니다. 하나의 항목이 조건을 충족하는 한 반환됩니다. 사실. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

7

8

9

var

arr = [1, 2, 3, 4, 5];

var

arr2 = arr.some(

function

(x) {

return

x < 3;

});

console.log(arr2);

arr3 = 도착. some(function(x) {

return

x < 1;});

console.log(arr3)

/ / 거짓

15, reduce() 및 ReduceRight()

두 메서드 모두 배열의 모든 항목을 반복한 다음 최종 반환 값을 구성합니다. reduce() 메서드는 배열의 첫 번째 항목부터 시작하여 하나씩 끝으로 이동합니다. 그리고 ReduceRight()은 배열의 마지막 항목부터 시작하여 첫 번째 항목으로 순회합니다.

두 메소드 모두 두 개의 매개변수, 즉 각 항목에 대해 호출되는 함수와 (선택적으로) 병합의 기초로 사용할 초기 값을 받습니다.

함수는 Reduce() 및 ReduceRight()에 전달되어 4 인수(이전 값, 현재 값, 항목 인덱스 및 배열 객체)를 받습니다. 이 함수에서 반환된 모든 값은 첫 번째 인수로 다음 항목에 자동으로 전달됩니다. 첫 번째 반복은 배열의 두 번째 항목에 대해 발생하므로 첫 번째 인수는 배열의 첫 번째 항목이고 두 번째 인수는 배열의 두 번째 항목입니다.

다음 코드는 reduce()를 사용하여 배열 합계를 구현합니다. 초기 값 10이 배열의 시작 부분에 추가됩니다.

1 2 3 4# var 값 ​​= [1,2,3 ,4 ,5];

var sum = value.reduceRight( function (prev, cur, index, array){return pre v + 현재 ; },10);console.log(sum); //25 이 기사는 http://www.jb51에서 복사되었습니다. net/article/87930.html

위 내용은 js 배열 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!