JS 배열 방법 정리

/*       ：*/
let array = [
    { id: 1, title:'js    1' },
    { id: 2, title:'js    2' }
   ]

1. 배열 요소 첨삭 시리즈
arr. push (): 배열 의 끝 에 요 소 를 추가 하고 배열 의 새로운 길 이 를 되 돌려 줍 니 다. 배열 로 돌아 가 는 것 이 아 닙 니 다.

let obj =  { id: 3, title:'js    3' },
array.push(obj);    //       ：3
console.log(array)  
// [{ id: 1, title:'js    1' },{ id: 2, title:'js    2' },{ id: 3, title:'js    3' }]

arr. unshift (): 배열 의 머리 에 요 소 를 추가 하고 배열 의 새로운 길 이 를 되 돌려 줍 니 다. 배열 로 돌아 가 는 것 이 아 닙 니 다.

let obj =  { id: 3, title:'js    3' },
array.unshift(obj);  //       ：3
console.log(array)   // [{ id: 3, title:'js    3' },{ id: 1, title:'js    1' },{ id: 2, title:'js    2' }]

arr. pop (): 배열 에서 마지막 요 소 를 삭제 하고 이 요소 의 값 (삭 제 된 요소) 을 되 돌려 줍 니 다.

array.pop();       //       ：{ id: 2, title:'js    2' }
console.log(array)// [{ id: 1, title:'js    1' }]

arr. shift (): 배열 에서 첫 번 째 요 소 를 삭제 하고 이 요소 의 값 (삭 제 된 요소) 을 되 돌려 줍 니 다.

array.shift();     //       ：{ id: 1, title:'js    1' }
console.log(array) // [{ id: 2, title:'js    2' }]

arr. splice (): 배열 이 하나 이상 의 요 소 를 삭제, 삽입, 교체 합 니 다.삭제 요소 의 값 을 되 돌려 줍 니 다.

/*   ：  2   ，                */
array.splice(0,1);    //     0      
console.log(array); 　// [{ id: 2, title:'js    2' }]

/*   ：              ，   3   ：    、 0（      ）       。 */
array.splice(2,0,{ id: 3, title:'js    3' });
console.log(array);　
// [{ id: 1, title:'js    1' },{ id: 2, title:'js    2' },{ id: 3, title:'js    3' }] 

/*   ：             ，           ，    3    ：    、                 。               。 */
array.splice(1,1,{ id: 3, title:'js    3' });
console.log(array); 　
// [{ id: 1, title:'js    1' },{ id: 3, title:'js    3' }]

2. 배열 순환, 필터 시리즈
arr. foreach () 방법 은 배열 의 모든 요 소 를 호출 하고 요 소 를 반전 함수 에 전달 하 는 데 사 용 됩 니 다.이 방법 은 반환 값 이 없습니다.
문법: array. forEach (function (currentValue, index, arr), this Value)

array.forEach((value, index, arr) => {
  console.log(`${value} => ${index} => ${arr}`);
})

arr. filter () 방법 은 배열 을 걸 러 내 는 데 사 용 됩 니 다.새 배열 을 만 듭 니 다. 새 배열 의 요 소 는 지정 한 배열 의 조건 에 맞 는 모든 요 소 를 검사 하 는 것 입 니 다.새 배열 로 돌아 갑 니 다.메모: 빈 배열 을 검사 하지 않 고 원본 배열 을 바 꾸 지 않 습 니 다.
문법: array. filter (function (currentValue, indedx, arr), this Value)

let res = array.filter((item) => { 
    return item.id = 1; 
}); 
console.log(res); // [{ id: 1, title:'js    1' }]

arr. map () 방법 은 새로운 배열 을 되 돌려 줍 니 다. 배열 의 요 소 는 원시 배열 호출 함수 처리 후의 값 입 니 다. 즉, map () 방법 으로 처리 한 후에 새로운 배열 을 되 돌려 줍 니 다.메모: 빈 배열 을 검사 하지 않 고 원본 배열 을 바 꾸 지 않 습 니 다.
문법: array. map (function (currentValue, index, arr), this Value)

let res = array.map(function (item) { return item.id; });
console.log(res); // [1,2]

arr. some () 방법 은 배열 의 요소 가 지정 한 조건 을 만족 시 키 는 지 확인 하 는 데 사 용 됩 니 다. 요소 가 조건 을 만족 시 키 면 표현 식 은 true 로 돌아 갑 니 다. , 나머지 요 소 는 더 이상 검 사 를 수행 하지 않 습 니 다.조건 을 만족 시 키 는 요소 가 없 으 면 false 로 돌아 갑 니 다.
문법: array. some (function (currentValue, index, arr), this Value)

if (array.some(item => item.id < 10)) {  
console.log('true')  
}

arr. every () 방법 은 배열 의 모든 요소 가 지정 한 조건 에 부합 되 는 지 검사 하 는 데 사 용 됩 니 다.배열 에서 하나의 요소 가 만족 하지 않 는 다 면 전체 표현 식 은 false 로 돌아 가 고 나머지 요 소 는 더 이상 검 측 하지 않 습 니 다.모든 요소 가 조건 을 만족 시 키 면 true 로 돌아 갑 니 다.
문법: array. every (function (currentValue, index, arr), this Value)

if (array.some(item => item.id < 10)) {  
console.log('true')  
}

arr. findIndex () 방법 은 배열 에서 조건 을 만족 시 키 는 첫 번 째 요소 의 색인 (아래 표) 을 되 돌려 줍 니 다. 찾 지 못 하면 되 돌려 줍 니 다 - 1
문법: array. findIndex (function (currentValue, index, arr), this Value)

let res = array.findIndex(function (item) { return item.id = 1; });
console.log(res); // 0

arr. find () 방법 은 배열 에서 조건 을 만족 시 키 는 첫 번 째 요소 의 값 을 되 돌려 줍 니 다. 없 으 면 undefined 로 돌아 갑 니 다.
문법: array. find (function (currentValue, index, arr), this Value)

let res = array.findIndex(function (item) { return item.id = 1; });
console.log(res); // 0

arr. includes () 방법 은 배열 이 지정 한 값 을 포함 하 는 지 여 부 를 판단 하 는 데 사 용 됩 니 다. true 로 돌아 가 는 것 이 라면 false 입 니 다.
문법: array. includes (searchElement, fromIndex);from Index: 선택 할 수 있 는 인자 입 니 다. 이 색인 에서 searchElement 를 찾 습 니 다.마이너스 라면 array. length + from Index 의 색인 에서 오름차 순 으로 검색 합 니 다.기본 값 은 0 입 니 다.

let res = array.findIndex(function (item) { return item.id = 1; });
console.log(res); // 0

arr. index Of () 방법 은 배열 에 어떤 값 이 존재 하 는 지 판단 합 니 다. 배열 요 소 를 되 돌려 주 는 아래 표 시 를 가지 고 있 지 않 으 면 - 1 을 되 돌려 줍 니 다.
문법: array. index Of (item, start) start: 선택 할 수 있 는 정수 인자 입 니 다.배열 에서 검색 을 시작 할 위 치 를 정 합 니 다.

let fruits=["Orange","Apple","Mango","Banana","Apple"];
let a = fruits.indexOf("Apple",4);
console.log(a);    // 4 

3. 배열 통합
arr. concat () 방법 은 두 개 이상 의 배열 을 합 치 는 데 사 용 됩 니 다.이 방법 은 기 존 배열 을 변경 하지 않 습 니 다. 반환 값 은 새 배열 입 니 다.

let array2 = [
    { id: 3, title:'js    3' },
    { id: 4, title:'js    4' }
]
array.concat(array2)
console.log(array)
// [{ id: 1, title:'js    2' },{ id: 2, title:'js    2' }{ id: 3, title:'js    3' },{ id: 4, title:'js    4' }]

4. 배열 정렬
arr. sort () 방법 은 배열 의 항목 을 작은 것 에서 큰 것 으로 정렬 합 니 다.메모: sort () 방법 은 문자열 을 비교 합 니 다. 수치의 크기 에 따라 숫자 를 정렬 하지 않 았 습 니 다. 이 를 실현 하려 면 정렬 함 수 를 사용 해 야 합 니 다.원래 배열 은 변 하지 않 습 니 다.

let arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); 　    //  ["a", "b", "c", "d"]

/*      */
function sortNumber(a,b)
{
　　return a - b
}
arr = [13, 24, 51, 3]; 
console.log(arr.sort()); 　　　　　　 // [13, 24, 3, 51] 
console.log(arr.sort(sortNumber)); 　// [3, 13, 24, 51]

arr. reverse () 방법 은 배열 의 요 소 를 뒤 바 꾸 는 데 사 용 됩 니 다.

var fruits = ["a", "b", "c", "d"];  
fruits.reverse();
console.log(fruits);
//  d,c,b,a

5. 배열 변환 문자열
arr. join () 방법 은 배열 을 문자열 로 바 꾸 고 연결 문 자 를 정 하 는 것 입 니 다. 기본 값 은 쉼표 입 니 다. "원래 배열 은 변 하지 않 습 니 다.

var arr = [1,2,3];
console.log(arr.join()); 　　　　// 1,2,3
console.log(arr.join("-")); 　　 // 1-2-3