▼ 기존 배열에 배열요소들을 합친다.
<script>
var city01=["서울", "부산", "대전"];
var city02=["대구", "광주", "인천"];
var city03=["전주", "부여", "세종"];
var data1=city01.concat("수원", "오산");
var data2=city01.concat(city02);
var data3=city01.concat(city03, city02);
console.group('concat');
console.log(`city01: ${city01}`);
console.log(`data1: ${data1}`);
console.log(`data2: ${data2}`);
console.log(`data3: ${data3}`);
console.groupEnd();
</script>
▼ 배열 연결부의 결과를 바꿔준다.
<script>
var city=["서울", "부산", "대전"];
var joindata1=city.join();
var joindata2=city.join('-');
var joindata3=city.join(' 그리고 ');
console.group('join');
console.log(`joindata1: ${joindata1}`);
console.log(`joindata2: ${joindata2}`);
console.log(`joindata3: ${joindata3}`);
console.groupEnd('join');
</script>
▼ 배열 원소의 순서를 반대로 정렬해준다.
<script>
var data=[9, 8, 7, 6, 5, 4, 3, 2, 1];
var rdata=data.reverse(); // 배열 원소를 반대로 정렬
console.group('reverse');
console.log(`data: ${data}`);
console.log(`rdata: ${rdata}`);
console.groupEnd();
</script>
▼ 배열 원소를 정의해둔 방식으로 정렬해준다.
<script>
var kdata=['서울', '부산', '구포', '대구', '인천', '대전', '세종'];
var str1=kdata.slice(0, 4);
var str2=kdata.slice(2, -1);
var str3=kdata.slice(-4, -2);
//체다 슬라이스 치즈를 떠올리세요
// 즉, 배열의 일정부분을 정해서, 잘라내는 것이죠...
//그런데, 일정부분의 범위 지정시, 음수 인덱스도 사용가능한 것이 특징이죠.
// 과연 배열에서, "음수 인덱스"의 의미가 무엇일까요?
// 음수는 뒤에서부터 index를 측정
// 올바른 인덱스로 치환하였을 때 끝범위가 포함되지 않는다 .
console.group('slice');
console.log(`str1.slice: ${kdata , str1}`);
console.log(`str2.slice: ${kdata , str2}`);
console.log(`str3.slice: ${kdata , str3}`);
console.groupEnd('join');
</script> <script>
console.clear(); console.group('4. sort');
var ndata1=[19, 38, 67, 26, 55, 24, 53, 12, 31];
var ndata2=[132, 2, 41, 123, 45, 1234, 6, 29, 4567];
var edata=['Apple', 'Html', 'Game', 'Computer', 'Java'];
var kdata=['서울', '부산', '구포', '대구', '인천'];
console.log(`인자 없이 sort > 오름차순: ${ndata1.sort()}`);
console.log(`인자 없이 sort > 앞자리 수부터 큰수로 오름차순: ${ndata2.sort()}`);
// 실제 sort 메소드의 정렬방식은, 배열의 원소가 number 이든, String 이든,
// 원소값의 각 자릿수 별로 비교하여 크기를 정하다 보니, 결과가 소위 "사전순서"
// 방식으로 된다 -> 이건 우리가 원하는 일반적인 정렬결과가 아니다 .
// 일반적인 정렬을 수행하게 만들려면, sort 메소드의 인자값으로, 소위 "비교자"
// (Comparator, 함수: 2개의 값을 받고 크기를 비교해서 , 누가 크고 작은지를 숫자로 반환)
// 만일, 두개의 숫자 num1, num2 가 있다고 할 때 , 아래와 같이 크기를 반환한다
// (1) if num1 > num2 , return +(양수값) => 보통 1반환
// (2) if num1 == num2 , return 0
// (3) if num1 < num2 , return -(음수값) => 보통 -1반환
console.log(`비교자를 적어준 sort: ${ndata2.sort(function(a, b) {return a - b;})}`);
console.log(`문자는 정렬방식이 있음: ${edata.sort()}`);
console.log(`한글도 정렬방식이 있음: ${kdata.sort()}`);
console.groupEnd();
</script>
▼ 배열의 특정 범위에 속하는 원소만 선택하여 배열 생성
<script>
var kdata=['서울', '부산', '구포', '대구', '인천', '대전', '세종'];
var str1=kdata.slice(0, 4); // 0~3까지
var str2=kdata.slice(2, -1); // 2~5까지
var str3=kdata.slice(-4, -2); // 3~4까지
//체다 슬라이스 치즈를 떠올리세요
// 즉, 배열의 일정부분을 정해서, 잘라내는 것이죠...
//그런데, 일정부분의 범위 지정시, 음수 인덱스도 사용가능한 것이 특징이죠.
// 과연 배열에서, "음수 인덱스"의 의미가 무엇일까요?
// 음수는 뒤에서부터 index를 측정
// 올바른 인덱스로 치환하였을 때 끝범위가 포함되지 않는다 .
console.group('slice');
console.log(`str1.slice: ${kdata , str1}`);
console.log(`str2.slice: ${kdata , str2}`);
console.log(`str3.slice: ${kdata , str3}`);
console.groupEnd('join');
</script> ▼ 배열의 원소 추가 또는 제거
<script>
console.clear();
console.group('splice');
var kdata=['서울', '부산', '구포', '대구', '대전'];
console.log(`kdata: ${kdata}`);
//배열의 원소를 삭제할 때 : splice 메소드사용
// 부가적인 기능으로 삭제와 동시에, 새로운 원소를 추가 가능!
var str1=kdata.splice(1, 2); // 두번째 원소부터 시작해서 2개원소를 삭제
console.log(`삭제데이터: ${str1}`);
console.log(`kdata: ${kdata}`);
//삭제데이터는 인덱스 1부터 1개 삭제하고 그 위치에 강릉 세종 추가해줘
var str2=kdata.splice(1, 1, '강릉', '세종');
console.log(`삭제데이터: ${str2}`);
console.log(`kdata: ${kdata}`);
//인덱스 2번부터 끝까지 삭제하라!
var str3=kdata.splice(2, Number.MAX_VALUE);
console.log(`삭제데이터: ${str3}`);
console.log(`kdata: ${kdata}`);
console.groupEnd('join');
</script>
▼ 배열 끝에 요소를 추가 끝에 요소를 보여주고 삭제
<script>
//push 메소드: 배열의 마지막 위치에 데이터를 추가하고 배열의 길이를 반환
//pop 메소드: 배열의 마지막 위치에 있는 데이터를 삭제하고 삭제한 데이터를 반환
console.group('push & pop!');
var kdata=['서울', '부산', '구포', '대구', '대전'];
console.log(`데이터: ${kdata}`);
var p1=kdata.push('청주', '세종');
console.log(`push: ${p1}`);
console.log(`데이터: ${kdata}`);
var p2=kdata.pop();
console.log(`pop: ${p2}`);
console.log(`데이터: ${kdata}`);
console.groupEnd('join');
</script>
▼ 배열 처음을 기준으로 pop push와 반대
<script>
// shift 메소드: 배열의 맨 처음 위치에 데이터를 삭제하고 배열의 길이 반환
// unshift 메소드: 배열의 맨 처음 위치에 데이터를 삽입하고 배열의 길이 반환
console.group('push & pop!');
var kdata=['서울', '부산'];
console.log(`데이터: ${kdata}`);
var p1=kdata.unshift('청주', '세종')
console.log(`push: ${p1}`);
console.log(`데이터: ${kdata}`);
var p2=kdata.shift();
console.log(`pop: ${p2}`);
console.log(`데이터: ${kdata}`);
console.groupEnd('join');
</script>▼ 배열을 반복하며 저장된 데이터를 조회
<script>
console.clear();
console.group('9. forEach');
var kdata=['서울', '부산', '청주', '대구'];
console.log(`데이터: ${kdata}`);
//forEach가 개별원소의 값과 인데긋 번호를 넘겨줄테니
// 개별원소에 대해 무엇을 할지를, 함수로 정의(타스크, Task)해주고,
// 이 함수를 foreach에 매개변수로 전달해주면 된다!
function task(item, index){
console.debug(`task(${item},${index}) invoked.`);
} // task
// kdata.forEach(task); //베열의 내부 반복자
// kdata.forEach(function(item, index){
// console.debug(`task(${item},${index}) invoked.`);
// }); // .forEach
kdata.forEach(
(item,inedx) => {console.debug(`task(${item},${index}) invoked.`)};
);// forEach 왜 안될까..ㅠ
console.groupEnd();
</script>
▼ 배열의 데이터를 함수의 인자로 전달하고 함수의 수행 결과를 반환 받아 새로운 배열 생성 ( feat.제곱 연산자 )
<script>
console.clear();
console.group('10. map');
var arr=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log("arr: ", arr);
function mapArr(value) {
console.log(value, 'invoked')
return value ** 2;
}
var mapdata = arr.map(mapArr);
console.log("mapdata: ", mapdata);
console.groupEnd();
</script>
▼ 배열의 데이터 중에 조건이 참인 데이터만 반환하여 새로운 배열 생성
<script>
console.clear();
console.group('11. filter');
var arr=[21, 42, 33, 14, 25, 12, 37, 28, 16, 11];
console.log("arr: ", arr);
function filterArr(value) {
return value>=18;
}
var fdata=arr.filter(filterArr);
console.log("fdata: ", fdata);
//원본 데이터는 건들지 않는다.
console.log("arr: ", arr);
// 원본데이터: 가공되지 않은 데이터
// ==> 분석하기 좋은 데이터(tiny data)를 처리
// ==> 데이터 마이닝, 데이터 머징 등으로 불림
console.groupEnd();
</script>
▼ 배열의 데이터를 검색하여 인덱스 위치를 반환
<script>
console.clear();
console.group('12. indexOf');
const arr=[10, 20, 30, 40, 30, 60, 70, 30, 90,100];
console.log(`데이터: ${arr}`);
console.log("처음부터 검색한 30의 인덱스",arr.indexOf(30));
console.log("마지막부터 검색한 30의 인덱스",arr.lastIndexOf(30));
console.log("세 번째부터 검색한 30의 인덱스",arr.indexOf(30, 3));
console.log("처음부터 검색한 300의 인덱스",arr.indexOf(300));//-1 반환
console.groupEnd();
</script>
배열에는 다 다른 타입이 들어간다
근데!! 함수까지 들어간다
자주 사용해야할 Tip
~~.constructor.prototype 하면 배열이나 객체에 사용할 수 있는 메소드가 어떻게 있는지 확인 할 수있다.
끝!
일단 흐자