> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트의 다양한 배열 메소드 예제 요약

자바스크립트의 다양한 배열 메소드 예제 요약

伊谢尔伦
풀어 주다: 2017-07-18 13:07:56
원래의
1253명이 탐색했습니다.

Array 방식

스택 방식: 스택은 LIFO(후입선출) 방식의 후입선출(Last In First Out) 데이터 구조입니다. 즉, 가장 최근에 추가된 항목이 먼저 제거됩니다. 스택에서 항목을 삽입(푸시라고 함) 및 제거(팝핑이라고 함)는 스택 상단에서만 발생합니다.

push() 메서드: 원하는 수의 매개변수를 수신하고 이를 배열 끝에 하나씩 추가하고 수정된 배열의 길이를 반환할 수 있습니다.

pop() 메서드: 배열 끝에서 마지막 항목을 제거하고 배열의 길이 값을 줄인 후 제거된 항목을 반환합니다.

큐 방식: 큐는 FIFO(선입선출) 선입선출 데이터 구조입니다. 큐는 목록 끝에 항목을 추가하고 목록 앞쪽에서 항목을 제거합니다.

shift(): 배열의 첫 번째 항목을 제거하고 반환하는 동시에 배열의 길이를 1만큼 줄입니다(대기열을 시뮬레이션하려면 Shift()와 push()를 함께 사용하세요).

unshift(): 임의의 항목을 배열 앞에 두고 새 배열 길이를 반환합니다(반대 방향에서 대기열을 시뮬레이션하려면 unshift()와 pop()을 결합합니다)

[참고] IE7 이하의 unshift() 메서드는 항상 undefine을 반환합니다                               ): Reverse

sort(): 배열 항목을 오름차순으로 정렬합니다. sort 메서드는 각 배열 항목의 toString() 메서드를 호출한 다음 얻은 문자열 정렬을 비교하고 Sorted를 반환합니다. array

[참고] sort() 메소드는 어떤 값이 어떤 값 앞에 있는지 지정하기 위해 비교 함수를 매개변수로 허용할 수 있습니다. 비교 함수는 두 개의 매개변수를 사용하여 첫 번째 매개변수가 두 번째 매개변수 앞에 있어야 하면 음수를 반환하고, 두 매개변수가 같으면 0을, 첫 번째 매개변수가 두 번째 매개변수 뒤에 있어야 하면 양수를 반환합니다.

[비교 함수. ] (사용: 예: array1.sort(compare);)

function compare(value1,value2){
 if(value1 < value2){
 return -1;
 }else if(value1 > value2){
 return 1;
 }else{
 return 0;
 }
}
로그인 후 복사

valueOf() 메서드가 숫자 유형을 반환하는 숫자 유형 또는 객체 유형의 경우 비교 함수를 다음과 같이 단순화할 수 있습니다.

function compare(value1,value2){
return value2 - value1;
}
로그인 후 복사

[tips]: 다음 방법은 다음과 같습니다. 무작위 배열을 만드는 데 일반적으로 사용됨

function compare(){
return Math.random() - 0.5;
}
로그인 후 복사

작업 방법(잘라내기, 연결, 삽입, 삭제, 교체):

concat(): 현재 배열의 모든 항목을 기반으로 새 배열을 만들고, 먼저 현재 항목의 복사본을 만듭니다. array , 수신된 매개변수를 이 복사본의 끝에 추가하고 마지막으로 새로 구성된 배열을 반환합니다(concat()는 원래 배열에 영향을 주지 않습니다)

[참고 1] concat() 메서드에 매개변수가 전달되지 않으면, 단지 현재 배열을 복사합니다

[참고 2] 인수가 하나 이상의 배열인 경우 메소드는 해당 배열의 각 항목을 결과 배열에 추가합니다

[참고 3] 전달된 값이 배열이 아닌 경우 값은 결과 배열의 끝에 추가됩니다

e.g. var numbers = [1,2];
console.log(numbers.concat());//[1,2]
console.log(numbers.concat([5,4,3],[3,4,5],1,2));//[1,2,5,4,3,3,4,5,1,2];
로그인 후 복사

slice(): 현재 배열에 있는 하나 이상의 항목을 기반으로 새 배열을 생성하고 항목의 시작 및 끝 위치인 하나 또는 두 개의 매개 변수를 허용합니다. 최종적으로 새로운 배열이 반환됩니다. (slice()는 원본 배열에 영향을 미치지 않습니다.)

[참고 1] 매개변수가 없을 경우 원래 배열이 반환됩니다

[참고 2] 하나만 있는 경우

[참고 3] 매개변수가 2개인 경우, 이 메소드는 시작 위치와 끝 사이의 항목을 반환합니다.

[주 4] 매개변수가 음수이면 배열 길이에 음수를 더한 값을 매개변수로 사용합니다

[주 5] 끝 위치가 더 작은 경우 시작 위치보다 빈 배열이 반환됩니다

var numbers = [1,2,3,4,5];
console.log(numbers.slice());//[1,2,3,4,5]
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(2,1));//[]
로그인 후 복사

splice(): 원래 배열이 수정된 배열이 되고, splice()는 원래 배열에서 반환하여 삭제합니다. 삭제된 항목이 없는 경우 배열입니다.

[a] 삭제: 두 매개변수는 삭제할 첫 번째 항목의 위치와 삭제할 항목 수입니다.

[b] 삽입: 세 매개변수는 시작 위치입니다. , 0(삭제할 기준), 삽입할 항목

[c] 대체: 3개의 매개변수는 시작 위치, 삭제할 항목 수, 삽입할 항목

[참고 1] 첫 번째 매개변수가 음수인 경우 배열 길이에 음수를 더한 값을 매개변수로 사용

[참고 2] 두 번째 매개변수가 음수인 경우 0을 매개변수로 사용

var numbers = [1,2,3,4,5];
    console.log(numbers.splice(0,2),numbers);//[1,2] [3,4,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(1,0,11,12),numbers);//[] [1,11,12,2,3,4,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(1,3,11,12),numbers);//[2,3,4] [1,11,12,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(-4,3,11,12),numbers);//-4+5=1 -> [2,3,4] [1,11,12,5]
    var numbers = [1,2,3,4,5];
    console.log(numbers.splice(-4,-3,11,12),numbers);//-4+5=1 -> [] [1,11,12,2,3,4,5]
로그인 후 복사

위치 메소드(ECMAScript5 ): 두 개의 매개변수: 찾을 항목 항목, 검색 시작점을 나타내는 인덱스(선택 사항). 배열에서 조건을 만족하는 첫 번째 검색 항목의 위치를 ​​반환하거나, 찾을 수 없으면 -1을 반환합니다(위치 메서드는 원래 배열에 영향을 주지 않습니다)

[참고] 비교할 때는 합동 연산자

indexOf()를 사용하세요.

lastIndexOf()

var person = {name: &#39;Nicholas&#39;};
var people = [{name: &#39;Nicholas&#39;}];
var morePeople = [person];
alert(people.indexOf(person));//-1,因为person和people[0]虽然值相同,但是是两个引用
alert(morePeople.indexOf(person));//0,因为person和morepeople[0]是同一个引用
alert(morePeople.indexOf({name: &#39;Nicholas&#39;}));//-1,因为不是同一个引用
로그인 후 복사

[팁] 조건에 맞는 항목의 모든 인덱스 값이 반환되는 경우

function allIndexOf(array,value){
 var result = [];
 var pos = array.indexOf(value);
 if(pos === -1){
  return -1;
 }
 while(pos > -1){
  result.push(pos);
  pos = array.indexOf(value,pos+1);
 }
 return result;
  }
 var array = [1,2,3,3,2,1];
 console.log(allIndexOf(array,1));//[0,5]
로그인 후 복사

Iterative 메서드(ECMAScript5): 두 개의 매개 변수: 각 항목에 대해 실행할 함수, 범위 개체 기능을 실행하려면 ——이 값에 영향을 줍니다(선택 사항). 이 메소드에 전달된 함수는 세 가지 매개변수, 즉 배열 항목의 값, 배열 내 항목의 위치, 배열 객체 자체를 받습니다(반복 메소드는 원래 배열에 영향을 주지 않습니다)

every(): for 배열의 각 항목 각 항목에 대해 지정된 함수를 실행하고 함수가 각 항목에 대해 true를 반환하면 true를 반환합니다. filter(): 배열의 각 항목에 대해 지정된 함수를 실행하고 함수가 true를 반환할 항목의 배열을 반환합니다. (일반적으로 조건을 충족하는 모든 배열 항목을 쿼리하는 데 사용됩니다)

forEach(): 배열의 각 항목에 대해 지정된 함수를 실행합니다. 이 메서드에는 반환 값이 없습니다(for 루프와 동일)

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组(常用于创建包含项与另一个数组一一对应的数组)

some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true

 var numbers = [1,2,3,4,5,6,7,8,9,0];
 var sum = 0;
 var everyResult = numbers.every(function(item,index,array){
  return (item>2);
 });
 var filterResult = numbers.filter(function(item,index,array){
  return (item>2)
 });
 var forEachResult = numbers.forEach(function(item,index,array){
  sum += item;
  return (item>2)
 });
 var mapResult = numbers.map(function(item,index,array){
  return (item*2)
 }); 
 var som =  numbers.some(function(item,index,array){
  return (item>2)
 }); 
 console.log(everyResult);//false
 console.log(filterResult);//[3,4,5,6,7,8,9]
 console.log(forEachResult,sum);//undefined 45 
 console.log(mapResult);//[2,4,6,8,10,12,14,16,18,0]
 console.log(someResult);//true
 [tips] function logArray(value,index,array){
   console.log(value);
  }
  [2,5,,,,,9].forEach(logArray)//2 5 9
로그인 후 복사

归并方法(ECMAScript5):迭代数组的所有项,构建一个最终返回的值。接收两个参数:一个在每一项上调用的函数、作为归并基础的初始值(可选)。传给reduce()和reduceRight()的函数接受4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上。因此,第一个参数是数组第一项,第二个参数是数组第二项(归并方法不会影响原数组)

reduce()

reduceRight()

var sum = values.reduce(function(prev,cur,index,array){
    return prev+cur;
   })
   alert(sum);//15
로그인 후 복사

위 내용은 자바스크립트의 다양한 배열 메소드 예제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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