#015 자바스크립트 200제 - Array 객체의 메소드 01

push() : 배열 뒤에 요소 추가하기

const festa = ['mang'];
festa.push('chimmy');
festa.push('tata');
festa.push('cooky');
festa.push('shooky');
festa.push('koya');
festa.push('rj');

festa.forEach(name => {
    console.log(name);
})

//mang
//chimmy
//tata
//cooky
//shooky
//koya
//rj

- forEach 반복문 : 오직 Array 객체에서만 사용가능한 메서드, 배열의 요소들을 반복하여 작업을 수행

 

 

unshift() : 배열 맨 앞에 요소 추가하기

const festa = ['mang'];
festa.unshift('chimmy');
festa.unshift('tata');
festa.unshift('cooky');
festa.unshift('shooky');
festa.unshift('koya');
festa.unshift('rj');

festa.forEach(name => {
    console.log(name);
})

//rj
//koya
//shooky
//cooky
//tata
//chimmy
//mang

 

length : 배열 길이 구하기

const ship = {
    max: 4,   //배의 정원 수를 의미
    passengers: [],
    onBoard: function(name) {
        if (this.passengers.length === 4) {
            console.log(`This ship is full. ${name} can not board this ship.`);
        } else {
            this.passengers.push(name);
            console.log(`${name} boarded.`)
        }
    }
}

ship.onBoard('chloe');
ship.onBoard('jay');
ship.onBoard('david');
ship.onBoard('asher');
ship.onBoard('deniel');
console.log(ship.passengers);

//chloe boarded.
//jay boarded.
//david boarded.
//asher boarded.
//This ship is full. deniel can not board this ship.
//["chloe", "jay", "david", "asher"]

 

concat : 배열 합치기

const prevList = [1, 2, 3];
const currentList = [4, 5, 6];
const nextList = [7, 8, 9];

console.log(prevList.concat(currentList)) //[1,2,3,4,5,6]
console.log(prevList.concat(currentList, nextList)); //[1,2,3,4,5,6,7,8,9]

console.log(['배열'].concat('합치기'));  //['배열','합치기']
console.log(['배열'].concat('합치기','JavsScript200'));  //['배열','합치기','JavaScript']

- concat 함수를 호출하는 첫 번째 리터럴이 배열 자료형이어야만 Array객체 메소드 concat이 실행됨

 

 

join : 배열에 특정 구분자를 넣어 문자형을 변환하기

- 배열의 각 요소 사이에 구분자를 넣어 하나의 문자열로 병합

const dialogue = [
    '원숭이 엉덩이는 빨개',
    '빨가면 사과 사과는 맛있어',
    '맛있으면 바나나 바나나는 길어',
    '길으면 기차 기차는 빨라',
    '빠르면 비행기 비행기는 높아.'
];

console.log(dialogue.join('. '));  
console.log(dialogue.join('.\n'));

//원숭이 엉덩이는 빨개. 빨가면 사과 사과는 맛있어. 맛있으면 바나나 바나나는 길어. 길으면 기차 기차는 빨라. 빠르면 비행기 비행기는 높아.

//원숭이 엉덩이는 빨개.
//빨가면 사과 사과는 맛있어.
//맛있으면 바나나 바나나는 길어.
//길으면 기차 기차는 빨라.
//빠르면 비행기 비행기는 높아.

 

 

pop() : 배열의 마지막 요소 추출하기

- 요소를 추출할 때 원본 배열도 함께 수정되기 때문에 미리 고려해야 함

const arr = [1, 2, 3];
console.log(arr.pop()); //3
console.log(arr.pop()); //2
console.log(arr.pop()); //1
console.log(arr.pop()); //undefinded

 

shift() : 배열 맨 앞에 요소 추출하기

 

- 요소를 추출할 때 원본 배열도 함께 수정되기 때문에 미리 고려해야 함

const arr = [1, 2, 3];
console.log(arr.shift()); //1
console.log(arr.shift()); //2
console.log(arr.shift()); //3
console.log(arr.shift()); //undefinded

 

slice() : 배열 특정위치의 요소 추출하기

- 시작와 끝을 지정하여 배열요소를 추출

배열.slice(시작 인덱스, 끝 인덱스)

const arr = ['멜론', '레몬', '소스', '사과', '주스'];
console.log(`과일이 아닌 요소는 ${arr.slice(2,3)}과 ${arr.slice(4,5)}입니다.`);
console.log(arr.slice(0, 10));

//과일이 아닌 요소는 소스과 주스입니다.
//["멜론", "레몬", "소스", "사과", "주스"]

 

splice() : 배열 인덱스로 특정 요소 수정하기 

- 특정 위치의 요소를 삭제하거나 수정할 수 있음

배열.splice(시작인덱스, 삭제할 요소의 갯수, 추가될 요소들...)

- 시작인덱스 : 필수값이며 배열 요소가 변경될 시작지점. 반드시 배열의 길이보다 작아야 유효함

- 삭제할 요소의 갯수 : 시작 인덱스의 위치부터 삭제하고자 하는 갯수만큼 제거

- 추가될 요소 : 시작인덱스부터 해당 요소들이 추가됨

const fruits = ['멜론', '레몬', '소스', '사과', '주스'];

fruits.splice(4, 1); //['멜론', '레몬','소스','사과']
fruits.splice(4, 0, '포도') // ['멜론', '레몬','소스','사과', '포도']
fruits.splice(2, 1, '딸기', '석류', '수박'); //['멜론', '레몬','딸기','석류','수박','사과', '포도']
console.log(fruits);

- 삭제할 갯수를 지정하지 않으면 추출되는 요소가 없음

 

 

indexOf() : 배열의 특정요소 위치 확인하기

배열.indexOf(검색할 값, 시작 인덱스)

- 첫번째 인자값을 배열 내부에서 검색하다가 값이 일치하는 경우 해당인덱스를 반환

- 두번째 인자인 시작인덱스는 필수값은 아니지만, 그안에 숫자형 값을 넣으면 indexOf는 숫자형 값의 인덱스부터 찾음

- 만약 찾는 값이 없다면 숫자 -1을 반환

const arr = ['Jay', 'Joy', 'Vivian', 'Mark', 'Elin', 'Sam'];

console.log(`"Vivan" is in this index ${arr.indexOf('Vivian')}`);
console.log(`"Vivian" is not here, look this value ${arr.indexOf('Vivian', 3)}`);

// "Vivan" is in this index 2
// "Vivian" is not here, look this value -1

 

 

forEach() : 배열 순환하기

- 배열 내부요소를  순환하면서 각 요소에 대해 콜백함수를 실행

배열.forEach( 콜백함수 )

const arr = [
    { id: 0, name: 'RED', age: 6 },
    { id: 0, name: 'ORANGE', age: 3 },
    { id: 0, name: 'YELLOW', age: 5 },
    { id: 0, name: 'GREEN', age: 2 }
];

arr.forEach((el) => {
    console.log(el.name);
})

//RED
//ORANGE
//YELLOW
//GREEN

 

 

sort() : 배열 정렬하기 

- 배열 내부요소를  원하는 순서대로 정렬 (인자로 비교함수를 대입하여 정렬), 오름차순, 내림차순

배열.for(function(a,b) {
     return 비교값;
})

const numArr1 = [2, 0, 3, 4, 1];
const numArr2 = [2, 0, 3, 4, 1];
const objArr = [
    { id: 2, name: 'red' },
    { id: 0, name: 'brown' },
    { id: 3, name: 'black' },
    { id: 4, name: 'green' },
    { id: 1, name: 'blue' }
];

numArr1.sort(function(a, b) { return a - b });
numArr2.sort(function(a, b) { return b - a });
objArr.sort(function(a, b) {
    if (a.name > b.name) return 1;
    else if (b.name > a.name) return -1;
    else return 0;
});

console.log(`오름차순 : ${numArr1}`);
console.log(`내림차순 : ${numArr2}`);
console.log(objArr);


//오름차순 : 0,1,2,3,4
//내림차순 : 4,3,2,1,0
//[{ id: 2, name: 'red' },
//  { id: 0, name: 'brown' },
//  { id: 3, name: 'black' },
//  { id: 4, name: 'green' },
//  { id: 1, name: 'blue' }]