11_자바스크립트 : 배열, 주요메소드 (indexOf , forEach, map, pop...)

 

1 . 배열 생성 방법

 

   ( 1 ) 리터럴 : const arr = [ ' ', ' ', ' ' ];

  

   ( 2 ) 생성자 함수 : const arr = new Array(인수);

 

인수가 1개이고 숫자인 경우
const arr = new Array(10);
=> [ <10 empty items> ]

인수가 2개 이상이거나 숫자가 아닌 경우
const arr = new Array(1, 2, 3);
=> [ 1, 2, 3, '하' ]

 

 

 

    ( 3 )  Array.of  메소드 :  Array.of(인수);

   

console.log(Array.of(5));
console.log(Array.of(100, 2, 5));
console.log(Array.of("hello", "banana"));
=> [ 5 ]
[ 100, 2, 5 ]
[ 'hello', 'banana' ]

 

 

 

 

2 . 배열의 요소

 

const arr = [
    '안녕하세요',
    100,
    true,
    null,
    undefined,
    NaN,
    Infinity,
    [], 
    {},
    function(){}
]; // 자바스크립트의 모든 값은 배열의 요소가 될 수 있음

 

 

 

 

3 . 명시적 할당

const arr = [1, 2, 3, 4, 5];

- 명시적 할당으로 배열의 길이 줄이기
arr.length = 3;
console.log(arr);
=> [ 1, 2, 3 ]  

- 명시적 할당으로 배열의 길이 늘리기
arr.length = 10;
console.log(arr.length);
=> 10
console.log(arr);
=> [ 1, 2, 3, <7 empty items> ]
프로퍼티의 값은 변경되지만, 배열의 길이가 늘어나는 것은 아님.

 

 

4 . 희소배열

    :  배열의 요소 일부가 비어있는 배열

const sparse = [, 2, , 4];
console.log(arr1.length);
=> 4

 

 

 

 

5 .  배열의 메소드

 

 

pop()

: 배열에서 마지막 요소를 제거하고 그 요소를 반환

- 삭제하고 반환하기
let arr = ['박보검', '아이유', '도경수', '조인성'];
console.log(arr.pop());
=> 조인성 
console.log(arr);
=> [ '박보검', '아이유', '도경수' ]

- 반환없이 삭제만 하기
let arr = ['박보검', '아이유', '도경수', '조인성'];
arr.pop();
console.log(arr);
=> [ '박보검', '아이유', '도경수' ]

 

 

 

push()

: 배열의 끝에 요소 추가하고, 배열의 새로운 길이 반환

let arr = ['짜장면', '피자', '햄버거', '냠냠냠'];
arr.push('살찌는 맛~~');
console.log(arr);
=> [ '짜장면', '피자', '햄버거', '냠냠냠', '살찌는 맛~~' ]

 

 

 

 

indexOf 

: 배열에서 요소가 위치한 인덱스를 반환, 존재하지 않으면 -1반환

let arr = ['드라마', '이상한', '변호사', '우영우', '존잼'];

console.log(arr.indexOf('우영우'));
=> 3

console.log(arr.indexOf('냠냠'));
=> -1

 

 

 

 

lastIndexOf 

: 배열의 요소가 위치한 마지막 인덱스를 반환, 요소가 없으면 -1반환

let arr = ['드라마', '이상한', '변호사', '우영우', '존잼'];

console.log(arr.lastIndexOf('우영우'));
=> 3

 

 

 

includes

 : 배열에 해당 요소 포함 여부 판별함.

let arr = ['커피','소주', '맥주'];

console.log(arr.includes('소주'));
=> true
console.log(arr.includes('강아지'));
=> false

 

 

 

unshift 

: 배열의 맨 앞에 요소 추가

let arr = ['커피','소주', '맥주'];

arr.unshift('소주','콜라');
console.log(arr);
=> [ '소주', '콜라', '커피', '소주', '맥주' ]

 

 

 

shift

 : 배열의 맨 앞 요소 제거 후 반환

let arr = ['커피','소주', '맥주'];

arr.shift();
console.log(arr);
=> [ '소주', '맥주' ]

반응형

 

 

 

concat

 : 두 개 이상의 배열을 결합

 : 기준배열명.concat(합칠배열명)

(1) const arr = ['안녕하세요','좋은', '아침입니다'];
const arr1 = ['굿모닝~!']

const arr3 = arr.concat(arr1); //concat사용
console.log(arr3);
=> [ '안녕하세요', '좋은', '아침입니다', '굿모닝~!' ]


(2) arr1 기준으로 합치기
const arr = ['안녕하세요','좋은', '아침입니다'];
const arr1 = ['굿모닝~!']

const arr3 = arr1.concat(arr);
console.log(arr3);
=> [ '굿모닝~!', '안녕하세요', '좋은', '아침입니다' ]

 

 

 

slice 

: 배열의 요소 선택 잘라내기

  slice(시작인덱스, 종료인덱스) 종료인덱스 미포함 

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

console.log(arr.slice(3));
=> [ 'duck', 'elephant' ]
console.log(arr.slice(1, 4));
=> [ 'bison', 'camel', 'duck' ] //종료인덱스 전까지만 반환

 

 

 

 

splice 

: 배열의 index 위치의 요소를 수정, 추가, 삭제

  splice(index, 제거수, 추가값1, 추가값2, ...)

const arr = ['자바', '오라클', '자스', '리액트'];

arr.splice(2,1,'자바스크립트')
console.log(arr);
=> [ '자바', '오라클', '자바스크립트', '리액트' ]

 

 

 

join

 : 배열을 구분자로 결합하여 문자열로 반환

const arr = ['에스파','뉴진스', '아이돌'];

console.log(arr.join());
=> 에스파,뉴진스,아이돌

console.log(arr.join(''));
=> 에스파뉴진스아이돌

console.log(arr.join('-'));
=> 에스파-뉴진스-아이돌

 

 

 

 

reverse 

: 배열의 순서를 반전시킴

const arr = ['가나다','ABC', '@#$'];

console.log(arr.reverse());
=> [ '@#$', 'ABC', '가나다' ]

 

 

 

 

6 . 고차함수 메서드

       :  인수를 인수로 전달 받거나 함수를 반환하는 함수

 

map

: 배열 내의 모든 요소를 각각에 대하여 주어진 함수를 호출한 결과를 새로운 배열로 반환

  주로 객체에 필요한 키값을 가져올때 사용함.

  담을 변수 = 사용할변수.map( (이름) => { 리턴값 } );

(1)
const arr = ['100','30', '2'];

const map1 = arr.map(item  => item * 2); // map은 무조건 반환값이 있어야함.
console.log(map1);
=> [ 200, 60, 4 ]
console.log(arr);
=> [ '100', '30', '2' ] //원본은 바뀌지 않음

(2)
const map2 = arr.map(item => item + "haha");
console.log(map2);
=> [ '100haha', '346haha', '393haha' ]

(3)
const arr = [
    {name : "아무개", age : 80,},
    {name : "빠나나", age : 20,}
]

const map1 = arr.map(item=> item.name);
console.log(map1);
=> [ '아무개', '빠나나' ]

 

 

 

 

forEach

: 매개변수에 주어진 함수를 배열 요소 각각에 실행

  forEach(함수)

 

const arr = ['100','346',"숫자",'30', '2',"아이템"];

* forEach 사용 
function  printName (item) {
    console.log(item)
};
arr.forEach(printName);
=> 100
346
숫자
30
2
아이템

* 익명 함수로 사용가능
arr.forEach((item)=>{console.log(item)});

* 인덱스 번호 반환 가능
arr.forEach((item, index)=>{console.log(item, index)});

 

 

 

filter

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

  true, false로 떨어지는 조건을 넣어야 함.

 

const arr = [
    {name : "아무개", age : 80,},
    {name : "원숭이", age : 35},
    {name : "빠나나", age : 20,}
]

const data = arr.filter(item=> item.age < 40);
console.log(data);
=> [ { name: '원숭이', age: 35 }, { name: '빠나나', age: 20 } ]

 

 

 

 

find

: 주어진 함수를 만족하는 첫 번째 요소 값만 반환

const array = [5, 12, 9, 130, 44];

const found = array.find(element => element > 10);

console.log(found);
=> 12

 

 

 

 

findlindex

: 주어진 함수를 만족하는 배열의 첫 번째 요소의 인덱스 반환.

  만족하는 요소가 없으면 -1반환

const arr = [5, 12, 8, 130, 44];

const Number = (element) => element > 13;

console.log(arr.findIndex(Number));
=> 3

 

 

 

 

sort 

: 배열을 정렬 기준으로 정렬

_.sortBy()

: 문자열로 된 숫자들을 조건없이 정렬 가능

(1) 문자열
const arr = ['L', 'E', 'C', 'H'];
arr.sort();
console.log(arr);
=> [ 'C', 'E', 'H', 'L' ]

(2) 문자열인 숫자는 조건식 부여하여 정렬하기 (_.sortBy()로 대체 가능)
const arr = ['1', '100', '5', '235'];
arr.sort((a,b) => a-b );
console.log(arr);
=>[ '1', '5', '100', '235' ]

 

 

reduce

: 배열을 순회하며 각 요소에 대하여 이전의 콜백 함수를 실행하고 그 결과를 반환

  reduce(누적 계산값, 현재값) => return 계산값; 

let arr = [1, 2, 3, 4, 5];

const result = arr.reduce((prev, cur) =>{ return prev + cur});
console.log(result);
=> 15

- 초기값 설정 가능 
const result = arr.reduce((prev, cur) =>{ return prev + cur; },100); //100이 초기값
console.log(result);

some 

: 배열 내 일부 요소가 콜백 함수의 테스트를 통과하는지 확인하여 그 결과를 boolean으로 반환

const array = [1, 2, 3, 4, 5];

const even = (item) => item % 2 === 0;
console.log(array.some(even));
=> true

let result = [1, 5, 3, 2, 4].some(item  => item > 10);
console.log(`result : ${result}`);
=> result : false

 

every

: 배열 내 모든 요소가 콜백함수의 테스트를 통과하는지 확인하여 그 결과를 boolean으로 반환

 

result = [1, 5, 3, 2, 4].every(item  => item > 3);
console.log(result); 
=> false

result = [1, 5, 3, 2, 4].every(item  => item > 0);
console.log(result);
=> true