배열의 요소를 JavaScript로 찾아 바꿉니다.

This article was originally posted on my blog. Head over to inspiredwebdev.com for more articles and tutorials. Check out my JavaScript course on Educative to learn everything from ES6 to ES2020.

 
수조는 매우 흔히 볼 수 있는 데이터 구조로 수조의 데이터를 검색, 추가, 교체함으로써 수조를 조작하는 방법을 이해하는 것이 매우 중요하다.
본고에서 우리는 수조에서 항목을 찾고 바꾸는 다른 방법을 배울 것이다.
 

배열에 값 포함 여부 확인

우선, 수조에 제공된 특정한 값이 포함되어 있는지 확인하는 다른 방법을 살펴보자.
우리는 다른 방식으로 이 점을 할 수 있다. 예를 들어 다음과 같다.

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

arr.includes(2);
// true
arr.includes(6);
// false

Array.includes는 가장 기억하기 쉬운 방법일 수 있습니다. 만약 수조가 전달된 값을 포함하거나 포함하지 않는다면, 그것은 true 또는 false 로 되돌아갈 것입니다.
이 방법은 추가 인자를 받아들일 수 있습니다. 이 인자는 우리가 찾으려는 인덱스를 정의합니다. 전체 그룹을 검사하려면 비어 있습니다.
자세한 내용은 다음과 같습니다.

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

!!arr.find((a) => a === 2);
// true
!!arr.find((a) => a === 6);
// false

Array.find도 우리가 수조에 어떤 값이 포함되어 있는지 검사할 수 있는 또 다른 방법이다.
값을 찾지 못하면 이 방법은 값 자체나 정의되지 않은 값을 되돌려주기 때문에 !! 연산자를 사용하여 결과를 볼 값으로 변환하고 일치하는지 빨리 볼 수 있습니다.Array.includes에 비하면 이것은 더욱 강력한 방법이다. 왜냐하면 우리는 그 값을 검사할 뿐만 아니라 되돌릴 수 있기 때문이다. 이것은 우리가 더욱 복잡한 검사를 할 수 있다는 것을 의미한다. 예를 들어

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

!!arr.find((a) => a > 2 && a < 4);
// true

리셋을 전달할 수 있다는 것은 수표가 매우 간단하지 않으면 find 이 아니라 includes 을 사용할 가능성이 가장 높다는 것을 의미합니다.
두 번째 파라미터를 리셋 함수에 전달할 수 있습니다. 이 함수는 검사를 시작하는 시작점을 정의하고 빈 상태로 전체 그룹을 검사합니다.
다음은 Array.indexOf 및 Array.findIndex:

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

arr.indexOf(1) !== -1;
// true
arr.indexOf(6) !== -1;
// false

arr.findIndex((el) => el === 1) !== -1;
// true
arr.findIndex((el) => el === 6) !== -1;
// false

Array.indexOf와 Array.findIndex는 수조에서 찾은 첫 번째 일치하는 요소의 인덱스를 되돌려주고, 찾지 못하면 우리-1로 되돌려주기 때문이다.
원소가 존재하는지 확인하기 위해서, 우리는 반환값이 -1인지 확인하기만 하면 된다.
이 방법들은 수조에 원소가 존재하는지 확인하는 데 사용할 수 있고, 원소가 있는 위치의 인용을 얻을 수 있기 때문에, 우리는 이 인용을 사용하여 원소를 대체할 수 있다.
이 두 방법 사이의 차이는 우리가 Array.includes와 Array.find 사이에서 본 것과 같다. 그 중에서 첫 번째 방법(Array.indexOf은 검사할 값을 받고, 두 번째 방법(Array.findIndex은 더 높은 검사를 수행하기 위해 리셋을 받는다.
우리가 이전에 보았던 모든 방법과 유사하게, 색인을 시작해서 수조를 검사하는 방법을 정의할 수 있습니다.
다음은 ES6(ES2015)에 도입된 두 가지 새로운 방법입니다.

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

arr.some((el) => el === 2);
// true
arr.every((el) => el === 3);
// false

Array.some는 수조에 최소한 하나의 값이 리셋 함수의 조건과 일치하는지 확인하고, Array.every 수조의 모든 요소가 이 조건과 일치하는지 확인합니다.
 

특정 색인에서 그룹 요소 바꾸기

이제 우리는 수조에 특정 원소가 포함되어 있는지 확인하는 방법을 알게 되었다. 만약 우리가 다른 원소로 이 원소를 대체하고 싶다고 가정하면.
이상의 방법을 알게 되면 더 이상 쉬울 수 없다!
요소를 대체하기 위해서는 색인을 알아야 하기 때문에 우리가 방금 배운 방법을 사용한 예시를 살펴보자.

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

const index = arr.indexOf(2);
arr[index] = 0;
arr;
// [1,0,3,4,5];

보시다시피, 우선, 우리는 우리가 변경하고자 하는 요소의 인덱스를 얻었습니다. 이 예에서 숫자 2이고, 그 다음에 괄호 기호 arr[index] 를 사용하여 그것을 대체했습니다.
우리는 findIndex 를 사용하여 같은 작업을 할 수 있습니다.

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

const index = arr.findIndex((el) => el === 2);
arr[index] = 0;
arr;
// [1,0,3,4,5];

간단하죠?findIndex를 사용하면 다음 장면을 검사할 수 있습니다. 그 중에서 우리는 하나의 대상 그룹을 가지고 있습니다.

const arr = [
    {
        id:1,
        val: 'one'
    },
    {
        id:2,
        val: 'two'
    },
    {
        id:3,
        val: 'three'
    },
    {
        id:4,
        val: 'four'
    },
    {
        id:5,
        val: 'five'
    },
];

const index = arr.findIndex((el) => el.id === 2);
arr[index] = {
    id:0,
    val: 'zero'
};
arr;
// [
//     {
//         id:1,
//         val: 'one'
//     },
//     {
//         id:0,
//         val: 'zero'
//     },
//     {
//         id:3,
//         val: 'three'
//     },
//     {
//         id:4,
//         val: 'four'
//     },
//     {
//         id:5,
//         val: 'five'
//     },
// ];

보시다시피 findIndex 를 사용하면 대상 그룹의 대상을 쉽게 찾고 바꿀 수 있습니다.
만약 우리가 값을 바꾸는 것에 흥미가 없다면, 우리는 그것을 삭제하고 싶을 뿐, 지금은 다른 방법을 연구할 것이다.
&bnbsp;

배열에서 값 삭제하기

우선, 수조에서 값을 삭제하는 더 기본적인 방법을 살펴보자. Array.pop 및 Array.shift

const arr = [1,2,3,4,5];
arr.pop();
arr;
// [1,2,3,4]

const arr2 = [1,2,3,4,5];
arr2.shift();
arr2;
// [2,3,4,5];

Array.pop 패턴의 마지막 요소가 제거되고 Array.shift 첫 번째 요소가 제거됩니다.다른 매개 변수를 사용할 수 없기 때문에 이러한 방법은 상당히 기본적이다.
이 두 가지 방법 모두 원본 그룹을 수정하고 삭제된 요소를 되돌려주기 때문에 다음 작업을 수행할 수 있습니다.

const arr = [1,2,3,4,5];
const el = arr.pop();
el;
// 1

이제 우리는 몇 가지 수조에서 특정 원소를 삭제하는 방법을 연구할 것이다.
우선 Array.splice과Array.indexOf의 결합을 살펴보자.Array.splice 특정 색인부터 그룹에서 요소를 삭제할 수 있습니다.우리는 몇 개의 요소를 삭제해야 하는지를 지정하기 위해 두 번째 파라미터를 제공할 수 있다.

const arr = [1,2,3,4,5];
const index = arr.indexOf(2);

arr.splice(index,1);
arr;
// [1,3,4,5];

const arr2 = [1,2,3,4,5];
const index = arr2.indexOf(2);

arr2.splice(index);
arr2;
// [1]

보시다시피, 첫 번째 예시에서, 우리는 1을 삭제할 원소 수로 지정했고, 두 번째 예시에서, 우리는 어떠한 매개 변수도 전달하지 않았기 때문에, 시작 색인에서 그룹의 모든 항목을 삭제했습니다.Array.splice 원본 배열을 수정하고 삭제된 요소를 반환하여 다음 작업을 수행할 수 있습니다.

const arr = [1,2,3,4,5];
const index = arr.indexOf(2);

const splicedArr = arr.splice(index,1);
arr;
// [1,3,4,5];

splicedArr;
// [2]

다음으로, 색인뿐만 아니라 조건에 따라 그룹에서 요소를 삭제할 수 있습니다.

let arr = [1,2,3,4,5];
const newArr = arr.filter((el) => el >2);

newArr;
// [3,4,5]
arr;
// [1,2,3,4,5];

Array.filter, Array.pop, Array.shift와 달리 Array.splice 리셋 함수에서 조건을 전달하는 모든 요소를 사용하여 새로운 수조를 만듭니다. 그러면 원시 수조는 위의 코드와 같이 수정되지 않습니다.
이 경우 새 패턴은 원래 패턴에서 2보다 큰 모든 요소로 구성됩니다.
읽어주셔서 감사합니다.내 블로그inspiredwebdev나 팔로우해.보기Educative.io 상호작용 프로그래밍 과정을 이해합니다.
면책 성명: 아마존과 Educative를 가리키는 링크는 부속 링크입니다. 당신의 구매는 저에게 추가 커미션을 발생시킬 것입니다.정말 감사합니다.



Amazon과Leanpub에서 내 전자책을 가져오기