[ JS ] Array

🔴  Array.of 

⚪  배열 만들기

 

const friends = Array.of("a", "b", "c", "d");

console.log(friends);  // ["a", "b", "c", "d"]

 

🟠  Array.from

⚪   Array-like object를 Array로 만들기

 

// 사전에 HTML에 btn이라는 class를 갖는 button 10개를 생성한다.
const buttons = document.getElementByClass("btn");

Array.from(buttons).forEach(button => {
  button.addEventListener("click", () => console.log("I ve been clicked"));
};

 

🟡  Array.find  &&  Array.findIndex

⚪  Array.find   배열의 각 요소를 확인하면서 조건에 맞는 첫 번째 요소를 리턴한다.

⚪  Array.findIndex   배열의 각 요소를 확인하면서 조건에 맞는 첫 번째 요소의 인덱스를 리턴한다.

 

const friends = [
  "jeong@gmail.com",
  "seung@naver.com",
  "ryong@kakao.com",
  "lin@korea.com",
  "hyun@hotmail.com"
];

const target = friends.find(friend => friend.includes("@korea.com"));
console.log(target);  // lin@korea.com

const index = friends.findIndex(friend => friend.includes("@korea.com"));
console.log(index);  // 3

 

🟢  Array.fill

⚪  배열의 요소를 파라미터에 해당하는 요소로 변경한다.

 

const array1 = [1, 2, 3, 4];

// index 2부터 index 4 이전까지 0으로 채우기
console.log(array1.fill(0, 2, 4));
// output: [1, 2, 0, 0]

// index 1부터 끝까지 5로 채우기
console.log(array1.fill(5, 1));
// output: [1, 5, 5, 5]

console.log(array1.fill(6));
// output: [6, 6, 6, 6]

 

🔵  Array.flat

 

const complexArray = [1, [2], [ [8], [8], [ [ [8], [8], [ [6], [5], [3] ] ] ] ] ];
/*
[
  1,
  [2],
  [ [8],
    [8],
    [ [8],
      [8],
      [ [6], [5], [3] ]
    ]
  ]
]
*/

> [1, [2], [ [8], [8], [ [ [8], [8], [ [6], [5], [3] ] ] ] ] ].flat()
// (5) [1, 2, Array(1), Array(1), Array(1)]

> [1, [2], [ [8], [8], [ [ [8], [8], [ [6], [5], [3] ] ] ] ] ].flat(2)
// (5) [1, 2, 8, 8, Array(3)]

> [1, [2], [ [8], [8], [ [ [8], [8], [ [6], [5], [3] ] ] ] ] ].flat(3)
// (7) [1, 2, 8, 8, Array(1), Array(1), Array(3)]

> [1, [2], [ [8], [8], [ [ [8], [8], [ [6], [5], [3] ] ] ] ] ].flat(4)
// (9) [1, 2, 8, 8, 8, 8, Array(1), Array(1), Array(1)]

> [1, [2], [ [8], [8], [ [ [8], [8], [ [6], [5], [3] ] ] ] ] ].flat(5)
// (9) [1, 2, 8, 8, 8, 8, 6, 5, 3]

 

🟣  Array.sort

⚪  원하는 조건에 따라 sort를 진행하면 배열값 자체가 변경된다.

⚪  조건을 걸지 않을 경우, 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9" 앞에 오는 상황이 발생한다.

 

const fruits = ["apple", "strawberry", "avocado"];

// 배열 요소 길이 오름차순 정렬
const sortFruitByLength = (fruitA, fruitB) => {
  return fruitA.length - fruitB.length;
}

console.log(fruits.sort(sortFruitByLength));
// [ 'apple', 'avocado', 'strawberry' ]

// 배열 요소 길이 내림차순 정렬
const sortFruitByLength2 = (fruitA, fruitB) => {
  return fruitB.length - fruitA.length;
}

console.log(fruit.sort(sortFruitByLength2));
// [ 'strawberry', 'avocado', 'apple' ]

 

// 배열 속성 중 하나의 값을 기준으로 정렬
const people = [
  {
    name: "ryong",
    age: 28
  },
  {
    name: "dragon",
    age: 32
  },
];
// 오름차순 정렬
const orderPeopleByAge = (personA, personB) => {
  return personA.age - personB.age;
}

console.log(people.sort(orderPeopleByAge));
// [ { name: "ryong", age: 28 }, { name: "dragon", age: 32 } ]

// 내림차순 정렬
const orderPeopleByAge2 = (personA, personB) => {
  return personB.age - personA.age;
}

console.log(people.sort(orderPeopleByAge));
// [ { name: "dragon", age: 32 }, { name: "ryong", age: 28 } ]

 

🟤  Array.filter

⚪  주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * 검색 조건에 따른 배열 필터링(쿼리)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

 

🔴  Array.reduce

⚪  배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

 

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

Array.prototype.reduce() - JavaScript | MDN

 

🟠  Array.concat

⚪  인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.

 

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

 

🟡  Array.slice

⚪  어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]