Array API

자주사용하는 Array에 대해서 헷갈려하던 부분이 있어서 Array API에 대해서 정리 해보았습니다.

Array

length: number;

배열의 길이를 가져오거나 설정합니다. 이것은 배열에 정의 된 가장 높은 요소보다 하나 높은 숫자입니다. number를 리턴합니다.

toString(): string;

배열의 문자열 표현을 반환합니다.

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.toString()); // apple,banana,orange

toLocaleString(): string;

사용자의 지역에대한 값을 리턴한다.예로는 한국에서는 '1995년 12월 18일 월요일'가 미국에서는 '04/15/98'이고 영국에서는 '15.04.98'이다.

아래는 생활코딩 사이트의 예제

day = new Date(1980,0,3,1,28,35)
alert(day.toLocaleDateString()); // 1980년 1월 3일 목요일
alert(day.toLocaleTimeString()); // 오전 1:28:35
alert(day.toLocaleString()); // 1980년 1월 3일 목요일 오전 1:28:35

pop(): T | undefined;

배열의 마지막 요소를 제거한 값을 반환합니다.

push(...items: T[]): number;

새로운 요소를 배열에 추가, 그리고 배열의 새 길이를 반환합니다.

 const fruits = ['🍐'];
 
 fruits.push('🍓','🍏');
 console.log(fruits); //["🍐", "🍓", "🍏"]
 fruits.pop(); //"🍏"

concat(...items: ConcatArray[]): T[];

두개 또는 더 많은 갯수의 배열을 합칩니다.

  console.log(fruits);// (3) ["🍋", "🍎", "🍓"]

   const fruits2 =['🍑','🍒'];
   const newFruits = fruits.concat(fruits2);
   console.log(newFruits);// (5) ["🍋", "🍎", "🍓", "🍑", "🍒"]

join(separator?: string): string;

구분 기호 결과 문자열에서 배열의 한 요소를 다음 요소와 구분하는 데 사용되는 문자열입니다. 생략하면 배열 요소가 쉼표로 구분됩니다.
지정된 구분자 문자열로 구분 된 배열의 모든 요소를 추가합니다.

  const fruits = ['apple', 'banana', 'orange'];
  console.log(fruits.join(''));//applebananaorange
  console.log(fruits.join()); //apple,banana,orange

reverse(): T[];

배열의 요소를 반대로

  const array = [1, 2, 3, 4, 5];
console.log(array.reverse()); //[5, 4, 3, 2, 1]

shift(): T | undefined;

배열의 첫번째 요소를 제거 합니다.

console.log(newFruits); //(4) ["🍎", "🍓", "🍑", "🍒"]
newFruits.shift(); //"🍎"
console.log(newFruits); //(3) ["🍓", "🍑", "🍒"]

unshift(...items: T[]): number;

새요소를 배열의 시작부분에 추가한다.
@param items 추가할 요소.

const fruits = ['🍓','🍏'];

//unshift:add an item to the benigging
 fruits.unshift('🍐','🍋');
 console.log(fruits); //(4) ["🍐", "🍋", "🍓", "🍏"]

slice(start?: number, end?: number): T[];

배열의 시작 파라미터부터,다음 파라미터의 갯수만큼 배열을 반환합니다.

const array = [1, 2, 3, 4, 5];
const newarray = array.slice(2);
console.log(newarray); //(3) [3, 4, 5]
console.log(newarray.slice(0,1)); //[3]

splice(start: number, deleteCount?: number): T[];

배열에서 요소를 제거하고 필요한 경우 해당 위치에 새 요소를 삽입하여 삭제 된 요소를 반환합니다.
@param start 요소 제거를 시작할 배열의 시작하는 위치입니다.
@param deleteCoun 제거할 요소의 수

 console.log(fruits); //(4) ["🍋", "🍎", "🍌", "🍓"
 fruits.splice(1); //몇개 지울지 정하지 않아서 1번방 배열 부터 모두다 지워버림 
 console.log(fruits);// ["🍋"]
 fruits.push("🍎", "🍌", "🍓");
 console.log(fruits); //(4) ["🍋", "🍎", "🍌", "🍓"

 fruits.splice(2,1); //2번인덱스인 바나나 부터 한개 (바나나만 지운다)
 console.log(fruits); //(3) ["🍋", "🍎", "🍓"]
  console.log(fruits); //(3) ["🍋", "🍎", "🍓"]
 fruits.slice(1,1,'🍉','🥝'); //1번인덱스 사과 지우고 사과가 지워진 자리에 수박과 키위를 넣는다
 console.log(fruits); //(4) ["🍋",'🍉','🥝', "🍓"]

sort(compareFn?: (a: T, b: T) => number): this;

배열을 정렬한다.요소의 순서를 결정할때 반환순서를 정하기위해서 파라미터로 비교함수를 정해줄수 있다.

[11,2,22,1].sort((a, b) => a - b) //(4) [1, 2, 11, 22]

indexOf(searchElement: T, fromIndex?: number): number;

배열에서 값이 처음 나타나는 인덱스를 반환합니다.
@param searchElement 배열에서 찾을 값입니다.
@paramfromIndex 검색을 시작할 배열 인덱스입니다. fromIndex가 생략되면 검색은 인덱스 0에서 시작합니다.

console.log(fruits); // (3) ["🍋", "🍎", "🍓"]
console.log(fruits.indexOf('🍋')); //0
console.log(fruits.indexOf('🍎'));  //1
console.log(fruits.indexOf('🍑'));//-1

lastIndexOf(searchElement: T, fromIndex?: number): number;

배열에서 값이 마지막에 나타나는 인덱스를 반환합니다.

console.log(fruits); //(4) ["🍋", "🍎", "🍓", "🍋"]
console.log(fruits.indexOf('🍋')); //0
console.log(fruits.lastIndexOf('🍋')); //3)

every<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): this is S[];

배열의 모든 멤버가 지정된 테스트를 충족하는지 여부를 확인합니다.

const studentsAge = [23, 20, 25, 21, 20 ];
const result = studentsAge.every((age) => age>10);
console.log(result); //true
const result2 = studentsAge.every((age) => age<0); //false
console.log(result2);
                                                   

some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;

지정된 콜백 함수가 배열의 요소에 대해 true를 반환하는지 여부를 확인합니다.

const studentsAge = [23, 20, 25, 21, 20, 9 ];
const result = studentsAge.some((age) => age>10);
console.log(result); //true
const result2 = studentsAge.some((age) => age<10); //true
console.log(result2);const result3 = studentsAge.some((age)=>age>30);
console.log(result3);//flase

forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;

각 배열의 요소에게 특정한 action을(callback함수를) 수행한다.
@param callback함수, forEach는 부른다 그 callback함수를 한번 각 배열의 요소에.

const fruits = ['🍎','🍌'];
fruits.forEach((fruit)=>console.log(fruit)); 
//🍎 
//🍌

filter(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];

주어진 함수의 action(callback함수)을 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

 const studentsAge = [23, 20, 25, 21, 20, 9 ];
 const result = studentsAge.filter((age) => age > 22) ;
console.log(result); // [23, 25]

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;

배열원소를 입력으로 callback함수를 실행하여 원소를 줄여가며 누적값을 만듭니다.

초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됩니다.
배열을 순회하면서 전값을 전달받아서 사용할 수 있습니다.

const array = [1,2,3,4,5];
const result = array.reduce((prev,curr) => prev + curr);
console.log(result); //10
const result2 = array.reduce((prev,curr) => prev + curr, 10 );
console.log(result2); //25

reduceRight(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

[n: number]: T;

}
reduce와 반대로 배열을 순회합니다.

읽어볼것

https://medium.com/@hongkevin/js-3-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%84%9C%EB%93%9C-reduce-100-%ED%99%9C%EC%9A%A9%EB%B2%95-feat-egghead-io-97c679857ece