배열의 기본 개념과 몇 가지 간단한 배열 요소 작업 기능을 소개했습니다. 실제로 배열은 더 많은 기능을 제공합니다.
push , pop , shift 및 unshift 배열의 양쪽 끝에서 작동하는 함수입니다. 위에서 언급했으므로 이 기사에서는 반복하지 않겠습니다.
이전 기사에서 간략하게 소개되었습니다. 배열은 특수 객체이므로 객체의 속성 삭제 메서드인 delete 를 사용해 볼 수 있습니다.
예:
let arr = [1,2,3,4,5];delete arr[2];console.log(arr);
코드 실행 결과는 다음과 같습니다.
그림의 노란색 위치에 주의하세요. 요소가 삭제되었음에도 불구하고 배열의 길이는 여전히 5 이며 삭제된 위치에 추가空있습니다. 인덱스 2 사용하여 요소에 액세스하면 다음과 같은 결과를 얻게 됩니다.
이러한 현상이 나타나는 이유는 delete obj.key key 통해 해당 값을 제거하기 때문입니다. 즉, delete arr[2] 배열의 2:3 키-값 쌍을 삭제하면 첨자 2 에 액세스할 때 undefined . .
배열에서는 요소를 삭제한 후 해당 요소의 위치가 후속 요소로 채워지고 배열의 길이가 짧아지길 바라는 경우가 많습니다.
이때 splice() 메소드가 필요합니다.
splice() 메서드가 매우 다양하며 요소를 삭제할 뿐만 아니라 구문은 다음과 같습니다.
arr.splice(start[,deleteCount,e1,e2,...,eN] )
splice 방법 start 위치부터 deleteCount 요소를 삭제한 후 e1,e2,e3 및 기타 요소를 제자리에 삽입합니다.
다음 예에서는 배열에서 요소를 삭제할 수 있습니다.
let arr = [1,2,3,4,5]arr.splice(0,1);//첫 번째 요소 삭제 1console.log(arr
) 위 코드는 배열의 첫 번째 위치에 있는 1 를 삭제합니다. 실행 결과는 다음과 같습니다.
두 번째 매개변수를 지정된 숫자로 변경하기만 하면 됩니다. 예:
let arr = [1,2,3,4,5];splice(0,3) ;//처음 3개 요소 삭제 console.log(arr);//[4,5]
코드 실행 결과는 다음과 같습니다.
매개 변수 start 하나만 제공하면 배열의 start 위치 뒤의 모든 요소가 삭제됩니다. 예:
let arr = [1,2,3,4,5]arr.splice(2); //Delete Console.log(arr);//[1,2].코드 실행은 아래 첨자 2 및 모든 후속 요소에서 발생합니다
2개 이상의 매개변수를 제공하는 경우 배열 요소를 대체할 수 있습니다. 예:
let arr = [1,2,3,4,5];arr.splice(0,2,'itm1',' itm2', 'itm3');console.log(arr);//['itm1','itm2','itm3',3,4,5]
코드 실행 결과는 다음과 같습니다.
위의 코드는 실제로 2단계 작업을 수행합니다. 먼저 0 부터 시작하여 2 요소를 삭제한 다음 위치 0 에 3개의 새 요소를 삽입합니다.
두 번째 매개변수(삭제 횟수)를 0 으로 변경하면 요소를 삭제하지 않고 요소만 삽입할 수 있습니다. 예:
let arr = [1,2,3,4,5]arr.splice( 0, 0,'x','y','z')console.log(arr);//['x','y','z'1,2,3,4,5]
splice() 함수는 삭제된 요소 배열을 반환합니다. 예:
let arr = [1,2,3,4,5]let res = arr.splice(0,3,'x','y' ) console.log(arr)//['x','y',4,5]console.log(res)//[1,2,3]
코드 실행 결과:
음수를 사용하여 작동 요소를 시작할 위치를 나타낼 수 있습니다. 예:
let arr = [1,2,3,4,5]arr.splice(-1,1,'x','y' ,'z ')console.log(arr)//[1,2,3,4,'x','y','z']
코드 실행 결과는 다음과 같습니다.
slice() 메서드는 지정된 범위의 배열을 가로챌 수 있습니다. 구문은 다음과 같습니다.
arr.slice([start],[end])
새 배열은 start 에서 시작하여 end 에서 끝납니다. 이지만 end 포함되지 않습니다.
예:
arr = [1,2,3,4,5]console.log(arr.slice(2,5))//[3,4,5]console.log(arr.slice(1,3) )//[2,3]
코드 실행 결과:
slice() 음수 첨자를 사용할 수도 있습니다:
let arr = [1,2,3,4,5]console.log(arr.slice(-3))//[3,4,5]console.log(arr . Slice(-5,-1))//[1,2,3,4]
코드 실행 결과는 다음과 같습니다.
slice() 메소드에 하나의 매개변수만 제공하면 splice() 와 마찬가지로 배열 끝까지 잘립니다.
concat() 함수는 여러 배열이나 다른 유형의 값을 긴 배열로 연결할 수 있습니다. 구문은 다음과 같습니다.
arr.concat(e1, e2, e3)
위 코드는 새 배열을 반환하며, 새 배열은 arr 이는 e1 , e2 및 e3 으로 구성됩니다.
예:
let arr = [1,2,3]console.log(arr.concat([4,5],6,7,[8,9]))
코드 실행 결과는 다음과 같습니다.
일반 객체는 객체와 동일해 보이더라도 배열에 전체적으로 삽입됩니다. 예:
let arr = [1,2]let obj = {1:'1',2:2}console.log (arr.concat(obj)) 코드 실행 결과:
그러나 객체에 Symbol.isConcatSpreadable 속성이 있으면 배열로 처리됩니다.
let arr = [1,2]let obj = {0:'x',
1:'예',
[Symbol.isConcatSpreadable]:true,
길이:2 }console.log(arr.concat(obj)) 코드 실행 결과:
전체 배열을 탐색하고 각 배열 요소에 대한 작업 함수를 제공합니다. 구문:
let arr = [1,2]arr.forEach((itm,idx,array)=>{
...}) 적용 예:
let arr = [1,2,3,4,5]arr.forEach((itm)=>{
console.log(itm)}) 코드 실행 결과:
arr = [1,2,3,4,5]arr.forEach((itm,idx,array)=>{
console.log(`arr[${idx}] in [${array}] is ${itm}`)}) 코드 실행 결과:
문자열과 유사합니다. indexOf , lastIndexOf 및 includes 쿼리 배열에서 지정된 요소의 아래 첨자와 함께 사용할 수 있습니다.
arr.indexOf(itm,start) : start 위치에서 시작하여 itm 검색합니다. 찾은 경우 아래 첨자를 반환하고, 그렇지 않으면 -1 반환합니다.arr.lastIndexOf(itm,start) : start 까지 전체 배열을 역순으로 검색하고 처음 발견된 아래 첨자(즉, 배열에서 마지막으로 일치하는 항목)를 반환합니다. 찾을 수 없으면 -1 반환합니다.arr.includes(itm,start) : start 위치에서 itm 검색하고, 찾으면 true 반환하고, 그렇지 않으면 false 반환합니다.예:
let arr = [1,2,3,4,5, 6,"7","8","9",0,0,true,false]console.log(arr.indexOf(0))//9console.log(arr.lastIndexOf(0))//10console. log(arr.includes(10))//falseconsole.log(arr.includes(9))//false
이 메서드는 배열 요소를 비교할 때 === 사용하므로 false 와 0 은 다릅니다.
NaN 처리
NaN 은 특수한 숫자이며 NaN 처리 시 세 가지 사이에는 미묘한 차이가 있습니다.
let arr = [NaN,1,2,3,NaN]console.log(arr.includes(NaN))//trueconsole. log( arr.indexOf(NaN))//-1console.log(arr.lastIndexOf(NaN))//-1
이 결과가 나온 이유는 NaN 자체의 특성, 즉 NaN 어떤 숫자와도 같지 않기 때문입니다. , 자신을 포함하여.
이러한 내용은 이전 장에서 논의되었습니다. 잊혀진 어린이 신발의 경우 과거를 복습하고 새로운 것을 배우는 것을 잊지 마십시오.
프로그래밍 과정에서 객체 배열을 자주 접하게 되며, === 사용하여 객체를 직접 비교할 수 없습니다. 배열에서 조건을 충족하는 객체를 찾는 방법은 무엇입니까?
이때 find 및 findIndex 메소드를 사용해야 합니다. 구문은 다음과 같습니다.
let result = arr.find(function(itm,idx,array){
//itm 배열 요소 //idx 요소 아래 첨자 //배열 자체 //판단 함수를 전달하고, 함수가 true를 반환하면 현재 개체를 반환합니다. itm}) 예를 들어 name 속성이 xiaoming 와 동일한 개체를 찾습니다. :
arr =[하자
{id:1,이름:'xiaoming'},
{id:2,이름:'xiaohong'},
{id:3,name:'xiaojunn'},]let Xiaoming = arr.find(function(itm,idx,array){
if(itm.name == 'xiaoming')return true;})console.log(xiaoming) 코드 실행 결과:
조건을 만족하는 객체가 없으면 undefined 반환됩니다.
위의 코드는 다음과 같이 단순화될 수도 있습니다:
let Xiaoming = arr.find((itm)=> itm.name == 'xiaoming').
실행 효과는 완전히 동일합니다.
arr.findIndex(func) 의 목적은 arr.find(func) 유일한 차이점은 arr.findIndex 개체 자체가 아닌 정규화된 개체의 첨자를 반환한다는 것입니다. -1 .
find 및 findIndex 요구 사항을 충족하는 하나의 객체만 찾을 수 있습니다. 배열에 요구 사항을 충족하는 객체가 여러 개 있는 경우 구문은 다음과 같습니다 filter
let results = arr.filter(function( itm,idx,배열){
//find와 사용법은 동일하지만 요구 사항을 충족하는 객체 배열을 반환합니다. //찾지 못하면 빈 배열이 반환됩니다.}) 예:
let arr =[
{id:1,이름:'xiaoming'},
{id:2,이름:'xiaohong'},
{id:3,name:'xiaojunn'},]let res = arr.filter(function(itm,idx,array){
if(itm.name == 'xiaoming' || itm.name == 'xiaohong')return true;})console.log(res) 코드 실행 결과:
arr.map 메소드는 배열의 각 객체에 대해 함수를 호출한 다음 처리된 배열을 반환할 수 있으며 이는 가장 유용하고 중요한 배열 메소드 중 하나입니다.
구문:
let arrNew = arr.map(function(itm,idx,array){
//새 결과 반환}) 예를 들어 문자열 배열에 해당하는 길이 배열을 반환합니다.
let arr = ['I','am','a','student']let arrNew = arr.map((itm) = >itm.length)//itm.lengthconsole.log(arrNew)//[1,2,1,7]
코드 실행 결과를 반환합니다.
arr.sort 배열을 제자리에 정렬 하고 정렬된 배열을 반환합니다. 그러나 원래 배열이 변경되었으므로 반환 값은 실제로 의미가 없습니다.
소위 내부 정렬은 새 배열을 만드는 대신 원래 배열 공간 내에서 정렬하는 것을 의미합니다.
let arr = ['a','c','b']arr.sort()console.log(arr)
코드 실행 결과:
기본적으로
sort방법은 문자열 정렬에 적합한 알파벳순 으로 정렬됩니다. 다른 유형의 배열을 정렬하려면
숫자 배열에 대한
비교 방법을 사용자 정의해야 합니다.let arr = [1,3,2] arr.sort(함수(a,b){
if(a > b) 1을 반환합니다.
if(a < b)return -1;
return 0;}) 코드 실행 결과:
sort 기능은 내부적으로 빠른 정렬 알고리즘을 사용하거나, timsort 알고리즘일 수도 있지만, 이것들은 신경 쓸 필요가 없고, 비교 함수에만 주의하면 됩니다.
비교 함수는 모든 숫자 값을 반환할 수 있으며, 양수는 > 의미하고, 음수는 < 를 의미하며, 0 같음을 의미하므로 수치 비교 방법을 단순화할 수 있습니다:
let arr = [1,3,2]arr.sort(( a,b)=> a - b)
역순으로 정렬하려면 a 와 b 의 위치를 바꾸면 됩니다.
let arr = [1,3,2]arr.sort((a,b)=> b - a)
문자열
정렬 문자열 비교를 위해 str.localeCompare(str1) 메서드를 사용하는 것을 잊으셨나요?
let arr = ['asdfas','success','failures']arr.sort((a,b)=>a.localeCompare (b))
코드 실행 결과:
arr.reverse 는 역방향 배열에 사용됩니다.
let arr = [1,2,3]arr.reverse()console.log(arr)//[3,2,1]
이에 대해서는 할 말이 없습니다.
문자열 분할 함수를 기억하시나요?
문자열 분할 함수는 문자열을
문자 배열로 분할할 수 있습니다:
let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',')//['xiaoming','xiaohong','xiali']
split함수에는 생성된 배열의 길이를 제한할 수 있는 두 번째 매개변수가 있습니다.let str = 'xiaoming,xiaohong,xiaoli'let arr = str.split(',',2)//['xiaoming',' xiaohong' ]
arr.join() 메소드는 split 메소드의 반대입니다. 이는 배열을 문자열로 결합할 수 있습니다.
예:
let arr = [1,2,3]let str = arr.join(';')console.log(str) 코드 실행 결과:
arr.reduce 메소드는 arr.map 메소드와 유사합니다. 둘 다 메소드를 전달한 다음 배열 요소에 대해 이 메소드를 순서대로 호출합니다. 차이점은 app.map 메소드가 배열 요소를 처리할 때 각 요소 호출은 독립적이며 arr.reduce 이전 요소의 호출 결과를 현재 요소 처리 방법에 전달합니다.
구문:
let res = arr.reduce(function(prev,itm,idx,array){
//prev는 이전 요소 호출에 의해 반환된 결과입니다. //init는 첫 번째 요소가 실행될 때 이전 요소 호출의 결과로 사용됩니다.}, [init]) 다음 으로 구성된 배열 요소의 합을 구현하는 방법을 상상해보세요. 숫자? 현재로서는 arr.reduce 사용해야 합니다.
let arr = [1,2,3,4,5]let res = arr.reduce((sum,itm)=>sum+ itm,0) console.log(res)//15
코드 실행 과정은 다음과 같습니다.
arr.reduceRight 요소에 대해 오른쪽에서 왼쪽으로 메소드가 호출된다는 점을 제외하면 arr.reduce 와 동일한 목적을 갖습니다.
배열은 객체의 특별한 경우입니다. typeof 사용하면 둘 사이의 차이를 정확하게 구분할 수 없습니다.
console.log(typeof {})//objectconsole.log(typeof [])//object 둘 다 객체입니다. 추가 판단을 내리려면 Array.isArray() 메서드를 사용해야 합니다.
console.log(Array.isArray({}))//falseconsole.log(Array.isArray([]))//true arr.some(func) 및 arr.every(func) 메소드는 숫자를 확인하는 데 사용되며 실행 메커니즘은 map 과 유사합니다.
일부는
각 배열 요소에 대해 전달된 메서드를 실행합니다. 메서드가 true 반환하면 모든 요소가 true 반환하지 않으면 true false 반환합니다.
Every는
배열의 각 요소에 대해 전달된 메서드를 실행하고, 모든 요소가 true 를 반환하면 true 반환하고, 그렇지 않으면 false 반환합니다.
예:
let arr = [1,2,3,4,5]//배열에 2보다 큰 요소가 있는지 확인 console.log(arr.some((itm)=>{
if(itm > 2)return true;}))//true//모든 요소가 2보다 큰지 확인console.log(arr.every((itm)=>{
if(itm > 2)return true;}))//false sort 제외한 모든 배열 메서드에는 일반적이지 않은 고정 매개변수 thisArg 가 있습니다. 구문은 다음과 같습니다.
arr.find(func,thisArg)arr.filter( func,thisArg)arr.map(func,thisArg)
thisArg 를 전달하면 func 에서는 this 됩니다.
이 매개 변수는 일반적인 상황에서는 거의 사용되지 않지만 func 가 멤버 메서드(객체의 메서드)이고 this 메서드에서 사용되는 경우 thisArg 매우 의미가 있습니다.
예:
obj = {
번호: 3,
기능(itm){
console.log(이것)
return itm > this.num;//3보다 큰 숫자 찾기}}let arr = [1,2,3,4,5,6,7]let newArr = arr.filter(obj.func,obj)console.log (newArr) 코드 실행 결과:
여기에서 func 의 this 출력이 우리가 전달한 thisArg 값임을 알 수 있습니다.
thisArg 의 값을 지정하지 않고 객체 멤버 메서드를 사용하면 undefined this 오류가 발생합니다.