배열 메소드 정리 Array mathod - 1탄

.concat( )

배열 여러개를 결합해서 하나의 배열로 만드는 것

배열을 합친다고 기존의 배열이 바뀌어지는 것은 아니다

첫 번째 배열에 속한 값 뒤에 두 번째 배열에 속한 값을 더하는 방식으로 두 배열을 결합한다

 

let cat = [ '고등어' , '치즈' , '턱시도' ]
let dog = [ '말티즈' , '푸들' , '진돗개' ]

let catDog = cat.concat(dog) = [ '고등어' , '치즈' , '턱시도' , '말티즈' , '푸들' , '진돗개' ]

 

---

.indexOf(찾을문자열)

찾은 문자열의 시작 위치를 반환한다

문자열이 없을경우 -1이 반환된다(배열 안에 없다는 뜻)

 

[ ] 괄호를 이용해 인덱스의 값을 얻어냈던 것 과 반대의 개념   ex ) color[0] / 빨강

중복 될 경우 제일 앞에있는 값을 리턴한다

 

대소문자 구분 없이 검색하기 위해서는 문자열을 대문자나 소문자로 변환 후 검색하면 된다.

예) str.toLowerCase().indexOf('javascript');

.indexOf(찾을문자열,시작위치)

찾을 위치를 두 번째 인자에 부여하면 시작 위치부터 문자열을 찾는다.

 

let pokemon = [ '피카츄' , '파이리' , '꼬부기' ]

pokemon.indexOf('꼬부기')  = 2 
pokemon.indexOf('파이리')  = 1

let pokemon = [ '피카츄' , '파이리' , '꼬부기' ,'파이리','피존투']
pokemon.indexOf('꼬부기',3)  = -1
pokemon.indexOf('파이리',0)  

 

 

.lastIndexOf(찾을문자열)

.lastIndexOf(찾을문자열,시작위치)

배열의 원소 인덱스를 끝에서부터  검색할 값을 찾는 메소드.

중복이 된 경우 젤 끝에있는 원소 인덱스를 리턴한다

 

var arr = ['a','b','c','d','e','f','g'];
arr.lastIndexOf('c',); = 2

 

 

---

.join( )

배열에 포함된 원소를 하나의 문자열로 만들어준다

기본으로 쉼표로 구분자가 반환 되고

()안에 * - 띄어쓰기 등 원하는 걸 넣으면 그게 구분자로 된다

 

숫자가 들어있던 배열도 문자열로 바뀐다

 

let iLike = [ ' 영화 ' , ' 만화 ' , ' 넷플릭스 ' , ' 유투브 ' ]

iLike.join(' ♥ ')  = '영화 ♥ 만화 ♥ 넷플릭스 ♥ 유투브'

let age = [ 5 , 20 , 30 ]
age.join() = ' 5 , 20 , 30 '

---

.pop( )

배열의 마지막 원소가 제거된다

마지막 원소를 제거한 뒤에 제거된 원소를 값으로 반환하는 두가지 역할을 수행합니다

 

변수를 지정한 뒤 메소드를 쓰면 반환된 값이 변수에 저장됨

 

let dessert=[ ' 마카롱 ' , ' 쿠키 ' , ' 딸기케이크 ' , ' 와플 ' ]

let lastDessert = dessert.pop();
dessert = [ ' 마카롱 ' , ' 쿠키 ' , ' 딸기케이크 ' ]

lastDessert = '와플'

---

.push( )

배열의 끝에 원소를 추가한다.

추가되고, 배열의 길이가 반환된다

let animals = [ ' 고양이 ' , ' 토끼 ' , ' 멍멍이 ']
animals.push('호랑이')
4
animals = [ ' 고양이 ' , ' 토끼 ' , ' 멍멍이 ' , ' 호랑이 ' ]

---

.unshift( )

배열에 시작부분에 원소를 추가하기, 배열의 길이가 반환된다

let animals = [ ' 고양이 ' , ' 토끼 ' , ' 멍멍이 ' ]
animals.unshift('호랑이')

4
animals = [ ' 호랑이 ' , ' 고양이 ' , ' 토끼 ' , ' 멍멍이 ' ]

---

.reverse( )

배열을 순서대로 정렬해주는데, 거꾸로 정렬한다

let az = [ ' 가 ' , ' 나 ' , ' 다 ' , ' 라 ' ]
az.reverse();  =  [ ' 라 ', ' 다 ', ' 나' , ' 가'  ]

 

.shift()

배열의 첫 번째 원소를 제거하거나 반환한다

 

let az = ['가','나','다','라']
az.shift() = '가'
az = [ '나', '다', '라' ]

 

.slice()

어떤 배열의 시작부터 마지막까지(마지막 미포함)에 대한 복사본을 새로운 배열 객체로 반환한다.11 
기존의 배열은 바뀌지 않는다.

 

let az = ['가','나','다','라']
az.slice(1,3) = [ '나' , '다' ]

 

.fill()

 배열의 시작 인덱스부터 끝 인덱스의 이전까지 값 하나로 채우는 것

const 동물 = ['토끼','멍멍이','야옹이','햄스터']

동물.fill( '동물' , 1 , 3 ) = ['토끼','동물','동물','햄스터']

시작 인덱스부터 end index 전까지 value값으로 채워주는 메소드당

음수일때 시작 인덱스는 length+start 이다

마지막 원소는 -1 이 되고 앞으로 올 수록 인덱스가 감소한당

 

const 동물 = ['토끼','멍멍이','야옹이','햄스터']

동물.fill( ' 동물 ' , -4 , -2) = [ '동물', '동물', '야옹이', '햄스터' ]

 

.flat()

하위 배열을 이어붙인 새로운 배열.

중첩 배열 구조를 평탄화할 때 사용할 깊이 값. 기본값은 1이다

(중첩된 배열을 평평하게 만드는거)

 

const 강아지 = [ '멍멍' , '월월' ,[ '크르릉' , '컹컹' ] ];
강아지.flat() = [ '멍멍', '월월', '크르릉', '컹컹' ]   평평하게..!!!!

 

2번째 하위는 평평하게 되지않음

const arr1 = [ 1 , 2 , [ 3 , 4 , [ 5 , 6 ] ] ] 
arr1.flat() = [ 1 , 2 , 3 , 4 , [ 5 , 6 ] ]

 

중첩배열 전부 평평하게 하려면 인자를 2넣어주면됨

arr1.flat(2) = [ 1 , 2 , 3 , 4 , 5 , 6  ]

 

 

배열 안에 구멍도 제거함

const 강아지 = [ ' 멍멍 ' ,  , ' 컹컹 ' ];
강아지.flat() = [  ' 멍멍 ',' 컹컹 ' ]

 

 

.splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하는 것

 

*slice와의 차이점

slice는 원본 배열이 변경되지 않지만 splice는 원본 배열이 변경된다

 

 

 

- splice 함수를 사용해 원하는 위치에 요소를 추가하기!

 

0	1	2	3	4
A	B	C	D	E

const a = [ ' A ' , ' B ' ,  ' C ' ,  ' D ' ]

이러한 배열 상태에서 다음 코드를 실행하면

a.splic( 2 , 0 , ' 3 ' );

 

👇👇👇👇👇

 

0	1	2	3	4	5
A	B	3	C	D	E

---

a의 처음상태로 돌아가 다음 코드를 실행하면

a.splic( 0 , 0 , ' 3 ' );

 

0	1	2	3	4
A	B	C	D	E

 

👇👇👇👇👇

 

0	1	2	3	4	5
3	A	B	C	D	E

 

---

splice를 이용해 삭제를 하는 방법

a.splic( 2 , 1 );   =  2번 index에서 1개 요소 제거

 

0	1	2	3	4
A	B	C	D	E

 

👇👇👇👇👇

 

0	1	2	3
A	B	D	E

---

splice를 이용해 제거하고 추가하기

a.splic( 1 , 2, ' FG '  );   =  1번 index에서 2개 요소 제거후 FG추가

 

0	1	2	3	4
A	B	C	D	E

 

👇👇👇👇👇

 

0	1	2	3
A	FG	D	E

---

Array.prototype.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다

-조건을 주고 해당 조건이 참인 요소를 모아 새로운 배열로 반환.

 

 

기본구문

arr.filter(callback(element[, index[, array]])[, thisArg])

callback : 각 요소에 대한 조건값

element : 처리할 현재 요소

index : 현재 인덱스

array : filter를 호출한 배열

thisArg : callback을 생행 할 때 this로 사용하는 값

 

---

작성방법3개

=>를 사용하면 지원이 안되는 브라우저가 있어서 function 을 사용하는게 좋다고 한다

 

예시3개(위에꺼 포함)