[javascript] Array

Array

array 출력

  • 아래와 같은 3가지 방법이 있으며 결과는 동일하다.
const cities = ['seoul', 'incheon', 'busan'];

//for
for(let i = 0; i < cities.length; i++){
    console.log(cities[i]);
}

//for..of
for(let city of cities){
    console.log(city);
}

//forEach
cities.forEach((city) => console.log(city));
  • forEach의 파라미터로 함수를 넣어 사용할 수도 있다.
cities.forEach(function doCapitalize(city, index, array){
    const result =  city.charAt(0).toUpperCase() + city.slice(1, city.length);
    console.log(`capitalized: ${result}`);
});
-> capitalized: Seoul
-> capitalized: Incheon
-> capitalized: Busan

puch, pop, unshift, shift

  • puch: 배열의 끝에 값을 추가
  • pop: 배열의 끝에서 부터 반환&제거
  • unshift: 배열의 시작에 값을 추가
  • shift: 배열의 처음부터 반환&제거
  • unshift, shift는 성능에 악영향을 끼친다.
  • 앞의 칸을 비우거나 채우기 위해 전체 데이터가 옮겨져야 하기 때문
cities.push('suwon', 'ilsan');
console.log(cities);
-> ["seoul", "incheon", "busan", "suwon", "ilsan"]

cities.pop();
console.log(cities);
-> ["seoul", "incheon", "busan", "suwon"]

cities.unshift('hanyang');
console.log(cities);
-> ["hanyang", "seoul", "incheon", "busan", "suwon"]

cities.shift();
console.log(cities);
-> ["seoul", "incheon", "busan", "suwon"]

splice(startNum, [deleteCount], [obj], ..., [obj])

  • 배열의 startNum 부터 deleteCount개 만큼 반환&제거
  • deleteCount는 생략 가능- > startNum부터 전부 반환&제거
  • 그리고 제거된 자리에 obj, ..., obj를 넣는다.
-> ["seoul", "incheon", "busan", "suwon"]
const splicedCities = cities.splice(0, 2);
console.log(cities);
-> ["busan", "suwon"]

console.log(splicedCities);
-> ["seoul", "incheon"]

cities.splice(1, 1, 'seoul', 'incheon', 'ilsan');
console.log(cities);
-> ["busan", "seoul", "incheon", "ilsan"]

concat

  • 배열 결합
const japanCities = ['tokyo','osaka'];
const globalCities = cities.concat(japanCities);
console.log(globalCities);
-> ["busan", "seoul", "incheon", "ilsan", "tokyo", "osaka"]

indexOf, includes

  • indexOf(value): value의 위치를 반환(없으면 -1)
  • includes(value): value가 있는지를 true/false로 반환
console.log(globalCities.indexOf('tokyo'));   -> 4
console.log(globalCities.includes('nagoya')); -> false
console.log(globalCities.indexOf('nagoya'));  -> -1

lastIndexOf(value)

  • value가 가장 마지막에 나타난 위치를 반환(없으면 -1)
globalCities.push('tokyo');
-> ["busan", "seoul", "incheon", "ilsan", "tokyo", "osaka", "tokyo"]
console.log(globalCities.lastIndexOf('tokyo'));
-> 6

join([구분자])

  • 배열을 문자열로 반환하는 함수
  • 구분자는 생략 가능하다.
const fruits = ['apple', 'banana', 'orange'];
let allFruits = fruits.join(', ');
console.log(allFruits);
-> apple, banana, orange

split(구분자, [num])

  • 문자열을 구분자를 기준으로 문자열 배열로 반환함
  • num은 생략이 가능하며, 구분자를 기준으로 num개를 가지는 배열을 반환함
const strFruits2 = 'apple, kiwi, banana, cherry';
const arrFruits2 = strFruits2.split(',', 3);
arrFruits2.forEach(function (fruit, index, array){
    array[index] = fruit.trim();
});
console.log(arrFruits2);
-> ["apple", "kiwi", "banana"]

reverse

  • 배열의 순서를 뒤집음
const arrNumbers = [1, 2, 3, 4, 5];
arrNumbers.reverse();
console.log(arrNumbers);
-> [5, 4, 3, 2, 1]

slice(num1, num2)

  • 배열의 num1 부터 num2 -1 만큼 반환
const arrNumbers2 = [1, 2, 3, 4, 5];
const arrResult2 = arrNumbers2.slice(1, 4);
console.log(arrResult2);
-> [2, 3, 4]

find([value], [index], [array])

  • return 조건, 을 넣으면 조건에 맞는 배열의 요소가 반환됨
  • 조건에 맞는 요소를 찾는 순간 함수를 종료하므로 유일한 값을 가진 배열의 요소를 찾을 때 사용해야 함
const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 90)
];

const findStudent = students.find((student) => {
    return student.name === 'D';
});
console.log(findStudent);
-> Student?{name: "D", age: 40, enrolled: false, score: 66}

filter([value], [index], [array])

  • return 조건, 을 넣으면 조건에 맞는 배열의 요소가 반환됨
  • 조건에 맞는 요소들을 배열로 반환
const filterStudent = students.filter((value) => {
    return value.enrolled === true;
})
console.log(filterStudent);
-> 
 0: Student {name: "A", age: 29, enrolled: true, score: 45}
 1: Student {name: "C", age: 30, enrolled: true, score: 90}
 2: Student {name: "E", age: 18, enrolled: true, score: 90}

map([value], [index], [array])

  • 배열의 요소들에서 특정 값만 뽑아 낼 때 사용
const mapStudent = students.map((student) => student.name);
console.log(mapStudent);
-> ["A", "B", "C", "D", "E"]

some/every([value], [index], [array])

  • 조건을 가지고 true/false를 반환
  • some: 배열의 요소 중 조건에 하나라도 걸리면 true
  • every: 배열의 요소 전부가 조건에 부합해야 true
console.log(students.some((student) => return student.score < 50));
-> true
console.log(students.every((student) => return student.score > 50));
-> false

reduce(prev, curr, index, array)

  • 배열에 있는 요소의 값을 누적
let sum = students.reduce((prev, curr) => {
    console.log(prev + '+' + curr.score);
    return prev + curr.score;
}, 0); // <- 0은 prev 값 지정
console.log(`sum: ${sum}`);
-> 0+45
-> 45+80
-> 125+90
-> 215+66
-> 281+90
-> sum: 371

sort

  • 기본은 오름차순
// 내림차순으로 정렬
const complexResult = students
    .map((student) => student.score)
    .sort()
    .reverse();

console.log(complexResult);
-> [90, 90, 80, 66, 45]

//더 효율적인 방법
const complexResult = students
    .map((student) => student.score)
    .sort((a, b) => b - a);
    //식의 결과가 음수이면 자리를 바꾸는 구조
    //a - b 가 오름차순

console.log(complexResult);
-> [90, 90, 80, 66, 45]

Array.from

  • 배열 복제

links

social