dev.to 의 Kai님 이 작성한 14 Awesome JavaScript Array Tips You Should Know About 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다
이 포스트는 원래 kais.blog에서 게시되었습니다.
내 콘텐츠가 마음에 들고 더보고 싶다면 Twitter에서 나를 팔로우하세요!
질문, 피드백 또는 채팅을 원하십니까? 와서 내 Discord에 가입하십시오!
배열은 어디에나 있습니다. JavaScript로 작업 할 때마다 아마도 배열을 사용하고있을 것입니다. 종종 프로그래머는 특정 라이브러리를 사용하여 배열을 더 유용하게 만듭니다. 여러분이 알지 못했던 JavaScript 배열에 대한 14가지 멋진 팁을 보여 드리고 싶습니다. 이렇게 하면 외부 종속성을 제거할 수 있습니다. 이 간단한 스니펫을 사용해보세요.
- 배열 분해(Array Destructuring)를 사용하는 방법
- 배열의 중복되지 않은 버전을 만드는 방법
- 조건과 일치하는 모든 요소를 찾는 방법
- 배열에서 모든 거짓(Falsy) 값을 제거하는 방법
- 조건과 일치하는 첫 번째 요소를 찾는 방법
- 일부(Any) / 전부(Every) 조건과 일치하는지 확인하는 방법
- 두 배열의 교집합(Intersection)을 찾는 방법
- 두 배열의 차이를 찾는 방법
- 두 배열의 합집합을 찾는 방법
- 첫 번째 요소와 마지막 요소를 검색하는 방법
- 배열에 요소를 앞에 추가(Prepend) / 추가(Append)하는 방법
- 배열 복사 방법
- 배열에서 최소값과 최대값을 찾는 방법
- 숫자 배열 정렬 방법
1. 배열 분해(Array Destructuring)를 사용하는 방법
배열 분해(array destructuring)를 사용하면 JavaScript 배열에서 단일 요소(single elements)를 추출 할 수 있습니다.
다음 예를 보세요:
const fruits = ["🍎", "🍌", "🍒"];
const apple = fruits[0];
console.log(apple); // "🍎"
const banana = fruits[1];
console.log(banana); // "🍌"
const cherry = fruits[2];
console.log(cherry); // "🍒"
배열 분해를 사용하여 동일하게 다시 작성할 수 있습니다.
const [apple, banana, cherry] = ["🍎", "🍌", "🍒"];
console.log(apple); // "🍎"
console.log(banana); // "🍌"
console.log(cherry); // "🍒"
대박! 또한 다음과 같은 경우 특정 요소를 건너 뛸 수 있습니다.
const [apple, , cherry] = ["🍎", "🍌", "🍒"];
console.log(apple); // "🍎"
console.log(cherry); // "🍒"
위의 빈 슬롯(empty slot)에 유의하십시오. 변수 이름을 제외하고(skip) 다른 쉼표를 추가하면 필요하지 않은 요소를 건너 뛸 수 있습니다.
또한 배열 분해로 수행 할 수있는 다른 두 가지 멋진 작업을 보시죠 :
// 누락된 요소에 대한 기본값을 지정하십시오.
const [apple, banana, cherry, melon = "🍉"] = ["🍎", "🍌", "🍒"];
console.log(melon); // "🍉"
// 확산 연산자 (`...`)를 사용하여 배열에서 나머지 모든 요소를 가져옵니다.
const [apple, ...remainingFruits] = ["🍎", "🍌", "🍒"];
console.log(remainingFruits); // ["🍌", "🍒"]
배열 분해로 할 수있는 일이 훨씬 더 많습니다. 나중에 이것에 대해 다른 글을 쓸 것입니다.
2. 배열의 중복되지 않은 버전을 만드는 방법
배열에서 모든 중복을 제거하기 위해 사람들은 종종 lodash와 같은 라이브러리를 사용합니다. 라이브러리는 결코 나쁘지는 않지만 훨씬 더 쉬운 방법이 있습니다. 외부 종속성없이 모든 고유 값을 가져올 수 있습니다. 그렇게하려면 배열에서 새 Set 만듭니다. 그런 다음 확산 연산자(spread operator) (...)를 사용하여 집합에서 새 배열을 만듭니다. Set는 고유 한 값만 저장 할 수 있으므로 중복이 남아 있지 않습니다.
const fruits = ["🍎", "🍌", "🍌", "🍒", "🍎"];
// `fruits`에서 새 세트를 만들어 모든 중복을 제거합니다.
// 그런 다음 새 배열을 만듭니다.
const uniqueFruits = [...new Set(fruits)];
console.log(uniqueFruits); // ["🍎", "🍌", "🍒"]
3. 조건과 일치하는 모든 요소를 찾는 방법
배열로 작업하는 경우 일부 요소를 제거하고 싶을 때가 있습니다. 홀수를 제거하고 싶거나 짧은 문자열을 찾고 있을 수 있습니다. 원하는 것이 무엇이든 Array#filter를 사용할 수 있습니다.
const names = ["Kai", "Katharina", "Tim"];
// 4자 미만의 이름을 유지하십시오.
const shortNames = names.filter(name => name.length < 4);
console.log(shortNames); // ["Kai", "Tim"]
// 10자보다 긴 이름을 찾습니다.
const extraLongNames = names.filter(name => name.length > 10);
console.log(extraLongNames); // []
4. 배열에서 모든 거짓(Falsy) 값을 제거하는 방법
때로는 배열에 잘못된 값이 포함되어 있으며 이를 제거하려고 합니다. 거짓(Falsy) 값은 false, null, 0, "", undefined 및 NaN입니다. 여러 분은 그것들을 매우 쉽게 필터링 할 수 있습니다. 이를 위해 Array#filter 메서드를 다시 사용하고 요소의 진실성(truthiness)을 간단히 확인할 수 있습니다.
const fruits = ["🍎", false, "🍌", undefined, "🍒"];
// 'fruit'이 진실(truthy)인 모든 배열 요소를 유지합니다.
const filteredFruits = fruits.filter(fruit => fruit);
console.log(filteredFruits); // ["🍎", "🍌", "🍒"]
// 이것은 배열에서 모든 거짓(falsy) 값을 제거하는 다른 방법을 보여줍니다.
const filteredFruits = fruits.filter(Boolean);
5. 조건과 일치하는 첫 번째 요소를 찾는 방법
3과 비슷하게 때때로 우리는 조건과 일치하는 첫 번째 요소만 필요합니다. 따라서 Array#find 메소드를 사용할 수 있습니다.
const names = ["Kai", "Katharina", "Tim"];
// 4자 미만의 이름을 찾습니다.
const shortName = names.find(name => name.length < 4);
console.log(shortName); // "Kai"
// 10자보다 긴 이름을 찾습니다.
const extraLongName = names.find(name => name.length > 10);
console.log(extraLongName); // undefined
6. 일부(Any) / 전부(Every) 조건과 일치하는지 확인하는 방법
JavaScript 배열은 두 가지 멋진 메서드를 구현합니다. Array#some 및 Array#every. 종종 나는 많은 사람들이 이 두 가지를 모른다는 것을 알게 될 것입니다. 특정 조건과 일치하는 요소 (Array#some) 또는 모든 요소 (Array#every)가 있는지 확인하는 데 사용할 수 있습니다.
const names = ["Kai", "Katharina", "Tim"];
// 이름이 4자보다 짧은지 확인합니다.
const containsShortName = names.some(name => name.length < 4);
console.log(containsShortName); // true
// 모든 이름이 3자 이상인지 확인합니다.
const containsLongNamesOnly = names.every(name => name.length > 3);
console.log(containsLongNamesOnly); // false
7. 두 배열의 교집합(Intersection)을 찾는 방법
두 배열을 비교할 때 두 배열에 포함된 요소를 확인할 수 있습니다. 즉, 두 배열의 교집합을 찾고 싶습니다. 따라서 Array#filter와 Array#includes의 조합을 사용할 수 있습니다.
const fruitsA = ["🍎", "🍌", "🍒"];
const fruitsB = ["🍒", "🍆", "🍉", "🍌"];
const intersection = fruitsA.filter(fruit => fruitsB.includes(fruit));
console.log(intersection); // ["🍌", "🍒"]
8. 두 배열의 차이를 찾는 방법
7과 유사하게 Array#filter와 Array#includes를 결합하여 두 배열 간의 차이를 찾을 수 있습니다. 구현은 두 번째 배열의 관련 요소를 포함할지 여부에 따라 다릅니다.
const fruitsA = ["🍎", "🍌", "🍒"];
const fruitsB = ["🍒", "🍆", "🍉", "🍌"];
// 'fruitsB'에 포함되지 않은 'fruitsA'의 모든 요소를 유지합니다.
const difference = fruitsA.filter(fruit => !fruitsB.includes(fruit));
console.log(difference); // ["🍎"]
// 'fruitsB'에 포함되지 않은 'fruitsA'의 모든 요소를 유지하고 그 반대의 경우도 마찬가지입니다.
const difference = [
...fruitsA.filter(fruit => !fruitsB.includes(fruit)),
...fruitsB.filter(fruit => !fruitsA.includes(fruit)),
];
console.log(difference); // ["🍎", "🍆", "🍉"]
9. 두 배열의 합집합을 찾는 방법
두 배열을 병합하고 모든 중복을 버리고 싶을 수도 있습니다. 팁 2에서 중복을 제거하는 방법을 배워서 다행입니다. 스프레드 연산자(spread operator ) (...)와 set을 다시 사용할 것입니다.
const fruitsA = ["🍎", "🍌", "🍒"];
const fruitsB = ["🍒", "🍆", "🍉", "🍌"];
// `fruitsA`와`fruitsB`를 병합합니다. 그런 다음 set을 사용하여 중복을 제거하십시오.
// 그 후 set에서 새 배열을 만듭니다.
const union = [...new Set([...fruitsA, ...fruitsB])];
console.log(union); // ["🍎", "🍌", "🍒", "🍆", "🍉"]
10. 첫 번째 요소와 마지막 요소를 검색하는 방법
때때로 관심있는 유일한 요소는 첫 번째 또는 마지막 요소입니다. 이에 액세스하는 간단한 방법은 Array#shift 및 Array#pop 메서드입니다. 그러나 이렇게하면 배열에서 첫 번째와 마지막 요소가 제거됩니다. 때로는 원래 배열을 변경하고 싶지 않습니다.
const fruits = ["🍎", "🍌", "🍒"];
// 첫 번째 요소를 찾으십시오. 주의! 이렇게하면 원본 배열이 수정됩니다.
const first = fruits.shift();
console.log(first); // "🍎"
// 마지막 요소를 찾으십시오. 주의! 이렇게하면 원본 배열이 수정됩니다.
const last = fruits.pop();
console.log(last); // "🍒"
// 두 방법 모두 원본 배열을 수정합니다.
console.log(fruits); // ["🍌"]
11. 배열에 요소를 앞에 추가(Prepend) / 추가(Append)하는 방법
아마 알고 있을겁니다. 그러나 만일을 대비하여 JavaScript 배열의 요소 앞에 추가(Prepend)하거나 추가(Append)하는 방법을 알려드립니다. 거의 모든 사람들이 배열 끝에 요소를 추가하는 방법을 알고 있습니다. 때때로 사람들은 처음에 요소를 추가하는 방법을 모릅니다. 두 가지 방법을 모두 보여 드리겠습니다. 또한 한 번에 여러 요소를 추가하는 방법을 보여 드리겠습니다.
const fruits = ["🍎", "🍌", "🍒"];
// `Array#push`로 요소를 추가합니다.
// 즉, 마지막에 추가 할 것입니다.
fruits.push("🍉");
console.log(fruits); // ["🍎", "🍌", "🍒", "🍉"];
// 요소 앞에 `Array#unshift`를 추가합니다.
// 즉, 처음에 추가할 것입니다.
fruits.unshift("🍆");
console.log(fruits); // ["🍆", "🍎", "🍌", "🍒", "🍉"];
// 한 번에 여러 항목을 추가 할 수도 있습니다.
// `push` 및`unshift`와 함께 작동합니다.
fruits.push("🍍", "🍊");
fruits.unshift("🍍", "🍊");
// 또한 스프레드 연산자 (...)를 사용할 수 있습니다.
// 이것은 다른 배열의 모든 요소를 추가합니다.
fruits.push(...["🍍", "🍊"]);
fruits.unshift(...["🍍", "🍊"]);
12. 배열 복사 방법
이전 팁에서 보았 듯이 일부 작업은 원래 배열을 변경합니다. 때때로 이것은 바람직하지 않습니다. 따라서 어떻게 든 복사해야합니다. 이를 수행하는 간단한 방법은 방법은 Array#slice 를 사용하는 것입니다.
// 이예는 팁11과 유사합니다.
const fruitsA = ["🍎", "🍌", "🍒"];
// 여기에서 `fruitsA` 배열을 복사합니다.
const fruitsB = fruitsA.slice();
// 첫 번째 요소를 찾으십시오. 주의! 이것은 우리의`fruitsB` 배열을 수정합니다.
const first = fruitsB.shift();
console.log(first); // "🍎"
// 마지막 요소를 찾으십시오. 주의! 이것은 우리의`fruitsB` 배열을 수정합니다.
const last = fruitsB.pop();
console.log(last); // "🍒"
// 이번에는 원래 배열이 그대로 유지됩니다.
// 'fruitsB'만 변경되었습니다.
console.log(fruitsA); // ["🍎", "🍌", "🍒"]
console.log(fruitsB); // ["🍌"]
// 이것은 배열을 복사하는 다른 방법을 보여줍니다.
const fruitsB = [...fruitsA];
주의! 이것은 깊은 복사본을 생성하지 않습니다. 오브젝트 및 중첩 배열은 참조로 전달됩니다. 예를 들어, fruitsA에는 물체가 있고 fruitsB에 배열을 복사한다고 합시다. 그런 다음 이 오브젝트를 꺼내서 fruitsB수정합니다. 이것이 초기 배열을 그대로 유지할 것이라고 생각할 수 있습니다. 하지만, 미안하지만, 당신이 틀렸어요. fruitsB에서 가져온 개체는 여전히 fruitsA에서 가져온 개체를 참조합니다. 따라서, fruitsB의 물체에 대한 모든 변화는 fruitsA의 동일한 물체에 미러링 됩니다. 이것은 기억해야 할 중요한 것입니다! 딥 카피의 경우 전용 라이브러리를 사용하는 것이 좋습니다.
13. 배열에서 최소값과 최대값을 찾는 방법
숫자로 작업하는 경우 최소 또는 최대 값을 찾아야하는 시간이 필요합니다. 아마도 Math#min및 Math#max을 사용할 수 있다는 것을 알고 있을 것입니다. 이를 확산 연산자 ( ...)와 결합 하면 전체 배열에서 최소값과 최대 값을 쉽게 확인할 수 있습니다.
const priceHistory = [450, 500, 330, 600, 910];
// 최소값을 찾습니다.
const minimumPrice = Math.min(...priceHistory);
console.log(minimumPrice); // 330
// 최대값을 찾습니다.
const maximumPrice = Math.max(...priceHistory);
console.log(maximumPrice); // 910
14. 숫자 배열 정렬 방법
배열을 정렬하려면 Array#sort를 사용해야 합니다.
그러나 숫자는 생각대로 정렬되지 않습니다. JavaScript에서 배열을 정렬 할 때 기본적으로 요소를 문자열로 변환합니다. 그런 다음 UTF-16 코드 포인트를 비교하여 요소를 정렬합니다. 숫자의 경우 예기치 않은 순서가 발생할 수 있습니다. 따라서 기본 동작을 변경하고 Array#sort메서드에 함수를 전달합니다 . 항상 한 번에 두 요소 ( a및 b)를 비교하여 작동합니다 . 결과가 0보다 작 으면 a먼저 표시됩니다. 결과가 0보다 크면 b먼저 표시됩니다.
const numbers = [15, 52, 23, 11, 9];
// 오름차순으로 정렬합니다. 차려! 이렇게 하면 원본 배열이 수정됩니다.
numbers.sort((a, b) => a - b);
console.log(numbers); // [9, 11, 15, 23, 52]
// 내림차순으로 정렬합니다. 차려! 이렇게 하면 원본 배열이 다시 수정됩니다.
numbers.sort((a, b) => b - a);
console.log(numbers); // [52, 23, 15, 11, 9]
결론
다양한 용도로 배열을 사용할 수 있습니다. 종종 작업을 수행하는 간단한 기본 방법이 있습니다. 이 팁을 이미 알고 있을 수도 있습니다. 그럼에도 불구하고 이 게시물이 당신에게 흥미로웠기를 바랍니다. 앞으로 이 게시물을 새로운 팁으로 업데이트 하려고 합니다.
이 게시물을 읽어주셔서 감사합니다. 친구 및 동료와 공유하는 것을 고려하십시오. 곧 뵙겠습니다!
만약 당신이 나의 콘텐츠를 좋아하고 더 보고 싶다면, 트위터에 나를 팔로우하세요!
질문, 피드백 또는 채팅을 원하십니까? 와서 내 Discord에 가입하십시오 !
이 게시물은 원래 kais.blog에 게시되었습니다 .