10/31 32-7 [JS] Array 메소드 이어서....

4. 배열 요소 삭제 및 동시추가( .splice(시작인덱스 [, 삭제할 개수 ,추가할 값  ] ) )

말그대로 삭제와 동시에 추가가 되어서 원본에 변형이 일어납니다.

   4-1 시작인덱스만 씀 (시작 인덱스부터 끝까지 추출해서 내뺌)

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
method_= method.splice(2);
    console.log('원본배열:',method);
    console.log('생성된배열:',method_);

4-2 시작인덱스와 삭제 할 개수 설정(시작인덱스 부터 몇 개 삭제?)

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
method_= method.splice(2,2); //2번 인덱스부터 2개 요소까지 삭제
    console.log('원본배열:',method);
    console.log('생성된배열:',method_);

 4-3 시작인덱스 삭제 할 개수 + 추가까지!!

    추가는 시작인덱스에서 부터 추가된당!

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
method_= method.splice(2,2,'삼백','사백','오백');
    console.log('원본배열:',method);
    console.log('생성된배열:',method_);

 

4-4 삭제없이 추가만하기!

   역시 시작인덱스부터 추가가 된당

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
 method_= method.splice(2,0,'오백');  // 삭제없이 추가만 되는데 지정한 위치에 추가가 되네!!
    console.log('원본배열:',method);  
    console.log('생성된배열:',method_);

 

5.배열요소 찾기

    console.log(method); // 현재상황 Array(6) [ 100, 200, "오백", "삼백", "오백", 500 ]   
    console.log('5.요소찾기')
    console.log('오백의 인덱스번호(왼쪽):',method.indexOf('오백'));
    console.log('오백의 인덱스번호(오른쪽):',method.lastIndexOf ('오백'));
    console.log(method.indexOf('뷁'));

 

[ map 함수 ]

 배열 내의 모든 요소 각각에 대하여 인자로 전달 된 콜백 함수를 적용하여 새로운 배열을 반환
 배열의 모든 요소를 변경하는 함수 !!!
  ==> arr.map(callback(currentValue[,index[,array]]))[,thisArg]; 콜백함수는 내가 호출하는게 아녀,, 값의 수에 따라 알아서 호출 되는 겨  직접 보면 알껴

 

6. 배열의 요소 변경

 var arr=[1,2,3,4,5];
 var arr_ = arr.map(function(item,index) {  
    				console.log('인덱스값 확인:',index);
   				    return item*2; // arr의 요소들이 하나씩 item 으로 들어가서 연산 후 반환됨 
  				  });
    console.log('원본배열:',arr);
    console.log('새 배열:',arr_);

[ reduce 함수 ]

7.배열의 요소들 하나로 만들기

 데이터의 차원을 줄이거나 결과값을 줄여주는 함수!  변환 값을 하나로!! ( 거의 누적함수네??) 
  ==>arr.reduce(callback [,initialValue])

    console.log('7.배열의 요소수를 하나로 만들기');
    console.log('reduce 후 :',arr.reduce(function(pre,curr){return pre+curr}));
    // 초기의 pre값은 0 요소들이 curr으로 차례로 들어가면 기존 요소는 pre로 빠지고
    console.log('원본:',arr);  // 원본값은 변하지 않는군

 

[ join ( [구분자]) ]  : 구분자로 연결하기

8. 배열의 모든요소를 하나의 "문자열로" 만들기(줄이는 게 아님)

console.log('8.배열의 모든 요소를 하나의 "문자열"로 만들기');
console.log(arr.join());  // 구분자 없으면 그냥 통 째로 문자열이 됨
console.log('타입:',typeof arr.join())
console.log(arr.join('★'));

 

9.거꾸로 재배치(원본 변경O)

 console.log('9.배열의 모든 요소를 거꾸로 재배치 하기');
console.log(arr.reverse());
console.log(arr);

 

10.배열 정렬하기 !!

sort([콜백함수]) - 배열 안의 요소들을 정렬하여 반환 (원본 변경o)
   숫자일땐: - , 문자일땐: localeCompare
   function(인자1,인자2) {return 인자1-인자2};   오름차순
    function(인자1,인자2) {return 인자2-인자1};  내림차순

 숫자먼저 적용해보자

 console.log('10.배열 정렬하기');
 var newArr = [5,7,3,0,1,2,6];
 newArr.sort();   // 오름차순
 console.log(newArr);
 newArr.sort(function(x,y){return y-x;});  //내림차순
 console.log(newArr);

 

 문자열도 적용해보쟈

newArr=['가','소','구','차','퍼','허','삭'];
newArr.sort();  //오름차순
console.log(newArr);
//newArr.sort(function(x,y){return y-x;});이거 안됨
newArr.sort(function(x,y){return y.localeCompare(x);});  //compareTo는 없고 비슷한기능을 하는 이걸 쓰세염
console.log(newArr);

 

11 .배열의 여러 요소 한꺼번에 추가하기 .concat () (원본변경 X)

newArr.splice(0,newArr.length,5,8,4,9,2,7,1);  // 새로 셋팅
console.log('newarr:',newArr);
newArr_ = newArr.concat(19,6,3,10);  // 추가하고
console.log('newarr_',newArr_.sort(function(x,y){return x-y}));  // 정렬까지

 

12.순회하며 배열 요소 출력하기

  배열명.forEach()함수 

이거 for문이랑 비슷하넴넴넴

 console.log(newArr);
newArr.forEach(function(item /*,index*/){ // 인덱스 생략 가능!
			console.log(item /*,index*/);
   					 });
newArr.forEach(function(item ,index){
        console.log('요소:%s,인덱스:%s',item,index);
    	});