[javscript] 12가지 Array 팁

1. 중복 값 삭제

• 이 문제는 어떻게 유니크한 값을 배열로부터 얻어내느냐에 대한 매우 일반적인 면접 질문입니다.
• new Set()을 사용할 수 있습니다.

let fruits = ['banana', 'apple', 'orange', 'watermelon', 'orange', 'apple'];

// 첫번째 방법  
let uniqueFruits = Array.from(new Set(fruits));  
console.log(uniqueFruits); // returns ['banana', 'apple', 'orange', 'watermelon'];

// 두번째 방법  
let uniqueFruits2 = [...new Set(fruits)];  
console.log(uniqueFruits); // 위의 결과와 같음.

// 보통 필터로 다시 뽑아내도 되지않나?
let uniqueFruits3 = fruits.filter((item, index) => fruits.indexOf(item) === index);
console.log(uniqueFruits3); // 전 역시 리터럴이 좋습니다. new Set()만큼 간결하지 않아도 직관적이죠. 리액트 할때도 자주 쓰고..

// reduce도 있죠
let uniqueFruits4 = fruits.reduce((unique, item) => unique.includes(item) ? unique : [...unique, item], []);
console.log(uniqueFruits4); // reduce는 연산을 합치는데.. 이렇게 필터링 되는 연산을 반복하는 것도 수행하죠.

2. 배열의 값 변경

• 때로는 배열의 특정 값을 바꿔야하며 그렇게하기 위한 간결한 방법이 필요합니다.
• splice() 메서드를 사용할 수 있습니다.

let fruits = ['banana', 'apple', 'orange', 'watermelon', 'orange', 'apple'];

fruits.splice(0, 2, 'potato', 'tomato');
console.log(fruits); // returns ['potato', 'tomato', 'orange', 'watermelon', 'apple'];

3. .map() 없는 Map 배열

• map()은 대부분이 알고 있지만 또 다른 솔루션으로 from()을 들 수 있겠죠.

let friends = [
    { name: 'John', age: 22 },
    { name: 'Peter', age: 23 },
    { name: 'Mark', age: 24 },
    { name: 'Maria', age: 22 },
    { name: 'Monica', age: 21 }
];

// Array.from() 사용
let friendsNames = Array.from(friends, ({name}) => name);
console.log(friendsNames); // returns [ 이름들만 나열 .. ]

// .map() 사용
let friendsNames2 = friends.map((friend, index) => { return friend.name; });
console.log(friendsNames2); // 같은 결과..

4. 배열 비우기

• 간단한 방법으로 배열을 비우는 방법으로는 Array.length = 0을 할당하면됩니다.
• 다른 방법도 있습니다.

let fruits = ['banana', 'apple', 'orange', 'watermelon', 'orange', 'apple'];

fruits.length = 0;

// or
fruits = [];

// or
fruits.splice(0);

// or
while (fruits.length > 0) {
    fruits.pop();
}

console.log(fruits); // returns [];

5. 배열을 객체로 변환

• 이 문제는 배열 배열을 가지고 있지만 어떤 목적을 위해서는 객체로 변환 해야합니다.
• array를 객체로 변환하는 가장 빠른 방법은 ES6에서 "Spread Operator (...)"를 사용하는 것입니다.

let fruits = ['banana', 'apple', 'orange', 'watermelon', 'orange', 'apple'];
let fruitsObj = { ...fruits };

console.log(fruitsObj); // returns {0: 'banana', 1: 'apple' ...}

6. 배열 병합

• 보통은 concat()을 사용할 겁니다.
• ES6에서 다시 spread 연산자(...)를 다시 사용하여 해결할 수도 있습니다.

let fruits = ['apple', 'banana', 'orange'];
let meats = ['poultry', 'beef', 'fish'];
let vegetables = ['potato', 'tomato', 'cucumber'];

// use spread operator - es6
let foods = [...fruits, ...meats, ...vegetables];
console.log(foods); // 모두 합쳐진 배열이 나옵니다.

// concat() 사용
let foods2 = fruits.concat(meats, vegetables);
console.log(foods2); // 같은 결과. 좀 더 유연한 것 같습니다. es6방법은 직관적인 것 같고..

7. 두 배열 사이에서 같은 값 찾기

let numOne = [0, 2, 4, 6, 8, 8];
let numTwo = [1, 2, 3, 4, 5, 6];

// includes() 사용
let duplicatedValues = [...new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // return [2, 4, 6];

// has() 사용
let firstValues = new Set(numOne);
let duplicatedValues2 = numTwo.filter(item => firstValues.has(item));
console.log(duplicatedValues2); // return [2, 4, 6];

8. 배열에서 falsy 값 제거

• filter()를 사용할 수 있겠죠.

let mixedArr = [0, 'blue', '', NaN, 9, true, undefined, 'white', false, "", null];
let trueArr = mixedArr.filter(Boolean);

console.log(trueArr); // returns ['blue', 9, true, 'white']

• 0, '', NaN, undefined, false, "", null은 모두 falsy 값이죠.
• Boolean으로 체크했네요.

9. 배열 마지막으로 나타나는 요소 찾기

• 배열이 있고 값이 중복되어 마지막에 나타나는 위치를 찾는 것입니다.
• lastIndexOf() 메소드를 사용하여 문제를 해결하십시오.

let nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
let lastIndex = nums.lastIndexOf(5);

console.log(lastIndex); // returns 9

10. 배열의 값을 계산

• for() 또는 foreach()를 사용하고 변수 sum을 선언 한 다음 각 값을 배열에 추가 할 수 있습니다.
• ES6에는 reduce()가 있습니다.

let numbers = [5, 15, 20];

let sum = numbers.reduce(function(a, b) {
    return a + b;
});

let sub = numbers.reduce((a, b) => {
    return a - b;
});

let mul = numbers.reduce((a, b) => {
    return a * b;
});

let div = numbers.reduce((a, b) => {
    return a / b;
});

console.log(sum); // 40
console.log(sub); // -30
console.log(mul); // 1500
console.log(div); // 0.01666666666

11. 배열 뒤집기

• 배열의 순서를 바꿀 때 루프와 함수를 통해 구현할 필요 없습니다.

let colors = ['white', 'green', 'navy'];

let reversedColors = colors.reverse();
// 위와 같이 사용하면 원래 배열의 색상 []도 그에 따라 변경됩니다. 
// 원래 배열을 변경하지 않으려면 다음과 같이 쓸 수 있습니다.
let reversedColors2 = [...colors].reverse();
// or
let reversedColors3 = colors.slice().reverse();

console.log(reversedColors); // returns ['navy', 'green' 'white'];
console.log(colors); // 같은 결과 - 이미 뒤바뀜
console.log(reversedColors2);
console.log(reversedColors3);

12. 배열에서 가장 작은 숫자 찾기

• Math.min()

let numbers = [80, 300, 1500];

let min = Math.min(...numbers);
// or
let min = Math.min.apply(null, numbers);

console.log(min); // 80

요약

• 몇 가지 배열을 다루는 방법들에 많은 도움이 되었길 바랍니다.

출처 : https://morioh.com/p/5d0c6e66ee9c