[javascript] ES6 배열 함수

🎈 대상 배열 직접 수정 함수

push / pop / shift / unshift / splice / sort

 var arr=['a','b','c','d'];
arr.toString();//'a,b,c,d'

//push - 배열의 끝에 요소 추가
arr.push('e');
arr.toString();//'a,b,c,d,e'

//pop - 배열의 끝 요소 제거
arr.pop(); //'e'
arr.toString();//'a,b,c,d'

//shift - 배열의 처음 요소 제거
arr.shift();//'a' 
arr.toString();//'b,c,d'

//unshift - 배열의 처음에 요소 추가
arr.unshift('a');
arr.toString();//'a,b,c,d'


//★splice - 임의의 위치에 요소 추가하거나 제거하기
//첫번째 매개변수 : 삽입/삭제할 인덱스
//두번째 매개변수 : 삽입시 0, 삭제시 삭제할 요소 개수
//세번째 매개변수 ~ : 삽입할 요소
arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
arr.toString();//'a,b,c,d,e,f,g'
arr.splice(1,2).toString();//'b,c'
arr.toString();//'a,d,e,f,g'
arr.splice(1,0,'b','c').toString();//'' 
arr.toString();//'a,b,c,d,e,f,g'

//★fill - 정해진 값으로 배열을 채움
//첫번째 매개변수 - 배열을 채울 값
//두번째 매개변수 - 배열을 일부만 채울 경우, 시작 인덱스
//세번째 매개변수 - 배열을 일부만 채울 경우, 종료 인덱스(종료 인덱스 전까지 채움)
arr.toString();//'a,b,c,d,e,f,g'
arr.fill(1).toString();//'1,1,1,1,1,1,1'
arr.fill(5,0,4).toString();//'5,5,5,5,1,1,1'
(new Array(5)).fill('a').toString();//'a,a,a,a,a'

//★reverse - 배열을 역순으로 정렬
arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
arr.reverse().toString();//'g,f,e,d,c,b,a'
arr.toString();//'g,f,e,d,c,b,a'

//★★sort - 특정 기준으로 정렬
arr.sort().toString(); //'a,b,c,d,e,f,g'
arr.toString(); //'a,b,c,d,e,f,g'
var students = [
	{name :'kim',age:12},
    {name :'roh',age:9},
    {name :'han',age:13},
    {name :'anna',age:19},
];
//name(문자열) 오름차순 정렬
students.sort((aStudent,bStudent)=>aStudent.name>bStudent.name?1:aStudent.name<bStudent.name?-1:0);
students.sort((aStudent,bStudent)=>aStudent.name.localeCompare(bStudent.name));
//age(숫자) 오름차순 정렬
students.sort((aStudent,bStudent)=>aStudent.age-bStudent.age);

copyWithin -  배열 요소를 복사해서 다른 위치에 붙여 넣고 기존의 요소를 덮어씀... 한번도 쓴적 없고.. 안쓸 것 같다..

 

 

🎈 대상 배열 수정 X, 새로운 배열 반환하는 함수

concat / slice / map / filter / reduce

var arr=['a','b','c','d'];
arr.toString();//'a,b,c,d'

//★concat - 배열 합치기
var ccArr = arr.concat(['e','f','g']);//arr에 ['e','f','g'] 배열을 추가한 사본 반환
ccArr.toString();//'a,b,c,d,e,f,g'
arr.toString();//'a,b,c,d'  //arr은 수정 x

//★slice - 배열 일부 가져오기
arr.slice(2).toString();//'c,d' //매개변수가 양의 정수이면 입력한 인덱스부터 마지막 인덱스까지 출력
arr.slice(2,3).toString();//'c' //매개변수가 2개이면 첫번째 매개변수 인덱스 부터 두번째 매개변수 인덱스 까지 출력
arr.slice(2,4).toString();//'c,d'
arr.slice(-3).toString();//'b,c,d' //매개변수가 음수를 쓰면 배열의 끝에서 부터 요소를 센다
arr.slice(-3,-1).toString();//'b,c'
//★slice로 배열 복제
var newArr = arr.slice();
newArr.toString();//'a,b,c,d'
newArr.pop();//'d'
newArr.toString();//'a,b,c'
arr.toString();//'a,b,c,d'

//★map - 배열 요소를 변경하여 반환
arr.toString();//'a,b,c,d'
arr.map((o,i,_arr)=>{name:o,idex:i});//_arr는 대상 배열(arr)
//[{name: 'a', idex: 0},{name: 'b', idex: 1},{name: 'c', idex: 2},{name: 'd', idex: 3}]

//★fillter -  특정 조건을 만족하는 배열 반환
arr.filter((o,i,_arr)=>o==='a'||o==='c').toString();//'a,c' //_arr는 대상 배열(arr)


//★reduce - 배열의 각 요소를 돌면서 특정 작업을 하고 결과값을 다음 요소에게 전달. 
//첫번째 매개변수 : 이전 요소로 부터 넘겨 받은 값
//(첫번째 인덱스에서 초기값 셋팅했을 경우 - 초기값 / 안 했을 경우, 첫번째 요소는 작업 x 넘어가고 두번째 요소에서 첫번째 요소를 받아 작업)
//두번째 매개변수 : 배열의 요소
//세번째 매개변수 : 배열의 인덱스
//네번째 매개변수 : 대상 배열
var numArr = [1,14,5,2,66,236];
numArr.reduce((a,num,i,_arr)=>a+num,0);//324
numArr.reduce((a,num,i,_arr)=>a+num);//324
numArr.reduce((a,num,i,_arr)=>a+num,999);//1323

//※map/filter/reduce는 삭제되거나 정의되지 않은 요소에서는 콜백을 호출하지 않는다.

 

 

🎈 배열 검색

indexOf/lastIndexOf/find

var arr=['a','b','c','d','a','b'];
//indexOf - 원시 타입 값으로 특정 요소의 인덱스를 찾음. 없으면 -1
arr.indexOf('a')//0
arr.indexOf('a',3)//3번째 인덱스 부터 검색
//lastIndexOf - 원시 타입 값으로 특정 요소의 인덱스를 찾음. 없으면 -1
arr.lastIndexOf('a')//4

//findIndex - 보조함수를 검색조건으로 사용하여 최조로 찾은 요소의 인덱스 반환
var students = [{name :'kim',age:12},{name :'roh',age:9},{name :'han',age:13},{name :'anna',age:19}];
students.findIndex(o=>o.name==='anna');//3

//find - 요소를 찾는 함수
//첫번째 매개변수 : 배열의 각 요소
//두번째 매개변수(생략가능) : 배열의 인덱스
students.find(o=>o.name==='anna');//{name: 'anna', age: 19}
students.find(o=>o.age>10);//{name: 'kim', age: 12}
students.find((o,i)=>i>2&&o.age>10);//{name: 'anna', age: 19}

//some - 조건에 맞는 요소가 있는지 검색. 요소를 찾으면 즉시 검색을 멈추고 true 반환
students.some(o=>o.age<15);//true
students.some((o,i)=>o.age<15&&i>2)//false


//every - 모든 요소가 조건에 맞는지 검색, 모두 조건에 맞으면 true, 아니면 false 반환
students.every(o=>o.age>8);//true
students.every(o=>o.age>12);//false

 

 

🎈 문자열 병함

join

var fruits = ['apple','banana','orange'];
fruits.join('/'); //'apple/banana/orange'

push / pop / shift / unshift / splice / sort  concat / slice / map / filter / reduce  indexOf/lastIndexOf/find/join