[JS] Array 의 내장 함수(1)

Array.prototype.sort()

• 배열의 요소를 적절한 위치에 정렬한 후 반환
• 기본 정렬 순서는 유니코드 코드 포인트

//ex) 숫자 배열 sort() 하는 법
[숫자배열].sort((prev, curr) => prev - curr)
역순) [숫자배열].sort((prev, curr) => curr - prev)

 

Array.prototype.from()

• 유사배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 생성한다.

// ex) Map 에서 배열 만들기
const mapper = new Map ([ [ ' 1 ' , ' a ' ] , [ ' 2 ',  ' b ' ] ] )
Array.from(mapper.value())     // [ ' a ', ' b ' ]
Array.from(mapper.key())       // [ ' 1 ', ' 2 ' ]

// ex2) Array.from과 화살표 함수
Array.from( [ 1, 2, 3 ] ,  x => x+x)         // [ 2, 4, 6]
Array.from({length : 5}, (v, i) => i )        // [ 0, 1, 2, 3, 4]

Array.prototype.filter()

• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
• 어떠한 요소도 테스트를 통과하지 못했으면 빈 배열을 반환한다.

Array.prototype.map()

• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

// ex1 )
const array1 = [ 1,4, 9, 16]
const map1 = array1.map( (x) => x * 2 )                 // [ 2, 8, 18, 32]

// ex 2) 배열에 들어가 있는 숫자들의 제곱근을 구하여 새로운 배열로 만들기
var numbers = [ 1, 4, 9 ]
var roots = numbers.map( Math.sqrt )              // [1, 2, 3]

// ex3) map 을 활용해 배열 속 객체를 재구성 하기
var exArray = [ { key : 1, value : 10 },  { key:2 , value : 20}, { key:3 , value : 30 } ]
var reformattedArray = exArray.map( ( obj ) => {
    var rObj = {}
    rObj [ obj.key ] = obj.value
    return rObj            // [ { 1: 10 }, { 2: 20 }, { 3: 30 } ]
} )

// ex4) 인자를 받는 함수를 사용하여 숫자 배열 재구성 하기
var numbers = [ 1, 4, 9 ]
var doubles = numbers.map((num) => {
    return num * 2                            // doubles = [ 2, 8 , 18]
})

// ex5) map 을 포괄적으로 사용하기 ( querySelectorAll )
var elems = doument.querytSelectorAll( '  select option : checked ' )
var value = [ ]. map. call( elems, function (obj) {
    retrun obj.value
})

// ex6)  map 을 포괄적으로 사용하기 2 
var map = Array.prototype.map
var a = map.call( ' Hello World ', ( x ) => return x.charCodeAt(0)))
// [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

Array.prototype.reduce()

• 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 하나의 결과값을 반환 한다.
• Array.prototype.reduceRight() : 오른쪽부터 왼쪽으로 배열을 읽고 수행한다.
• ex1) 

const array [1, 2, 3, 4]
const initialValue = 0;
const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue);
// 10

• ex2 ) 중첩 배열 펼칰기

var flattened = [ [0, 1], [ 2, 3 ], [ 4, 5 ] ].reduce(function (accumulator, currentValue) {
    return accumulator.concat(currentValue);
}, []);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

• ex3 ) 객체배열에서의 값 계산

var initialValue = 0;
var sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce(function (
  accumulator,
  currentValue,
) {
  return accumulator + currentValue.x;
}, initialValue);

console.log(sum); // logs 6

• ex4) 객체 내의 값 인스턴스 갯수 세기

var names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

• 속성으로 객체 분류 하기

var people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, "age");
// groupedPeople is:
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }