Java Script -6

배열

배열의기초

-Array 생성자로 만들어진 객체
-데이터 군
-여러 데이터
-컬렉션 프레임워크

참고)
-배열

• 같은 자료형
• 순차적인 나열구조

-> 자바스크립트는 배열 x -> 배열 객체

1) 배열 리터럴로 생성하기

const 배열명 = [...];

2) length 프로퍼티
-배열 객체의 공간의 갯수

참고)
객체의 속성명이 변수명 규칙과 동일 .로 접근 가능
-> 규칙에서 벗어나면 -> ['속성명']

3) 배열 요소의 추가와 삭제

• 추가
  push(): 끝에 추가 -stack
  unshift(): 앞에 추가

• 삭제
  pop() : 가장 끝에 요소 꺼내기 -stack
  shift() : 가장 앞에 요소를 꺼내기

-중간 추가, 삭제, 변경
splice(start, deleteCount, ...items)

fruits
(4) ['apple', 'orange', 'Mango', 'Melon']
fruits.splice(2, 3)
(2) ['Mango', 'Melon']
fruits
(2) ['apple', 'orange']

참고 ) 깊은복사(전개 연산자)

const fruits =["apple", "orange"]

const fruits2 = [...fruits] 
복사됨.

const fruits3 = [...fruits, "melon"] 
melon이 추가 된 채로 복사됨.
(새로운 주소)

4) 배열 요소가 있는지 확인하기

Array.prototype.find : 첫번째 발견 요소
Array.prototype.findIndex : 첫번째 발견 요소의 index (왼쪽 -> 오른쪽)
Array.prototype.findLastIndex : 오른쪽 -> 왼쪽
Array.prototype.include() : 요소가 있는지 (true, false) 체크
Array.prototype.indexOf() : 요소의 위치(왼쪽-> 오른쪽), 못찾으면 -1
Array.prototype.lastIndexOf() : 요소의 위치(오른쪽 -> 왼쪽), 못찾으면 -1

const fruits = ['apple', 'orange', 'Mango', 'Melon']

fruits.find(function(fruit){
	return fruit === "Melon";
});

화살표 함수

1. function 키워드 생략 가능
2. 매개변수와 구현 체({..})사이에 =>
3. 구현내용이 한줄이면 {...} 생략 가능 , return 예약어도 생략 가능
4.매개변수가 1개 -> (...) 생략 가능, 단 매개변수가 없으면 생략 불가


fruits.find(function(fruit){
	return fruit === "Melon";
});


->


fruits.find(x => x === "Melon");



const add = (a, b) => a + b;

-생성자 함수로 역할 x
-arguments 지역 변수 x
-this 범위가 함수를 정의할 때 이미 정의된 this가 this가 된다.

const person = {
	name: : "이이름",
    age: 40,
    showInfo = () =>
    	console.log(this);
   }
   
person.showInfo()
//window 호출됨


const person = {
	name: : "이이름",
    age: 40,
    showInfo = function() {
    	const printInfo = () => console.log(this);
        
        printInfo();
   }
   
person.showInfo()
//person 호출됨

배열의 메서드

1) concat() : 두 개 이상의 배열을 병합, 새로운 배열로 반환

2)filter(callbackFn) : callbackFn이 참으로 반환되는 요소만 걸러주기

3)every(callbackFn) : 모든 요소가 참 -> 참

4)some(callbackFn) : 어떤 것이든지 참이면 -> 참

const nums = [1,2,3,4,5,6,7,8,9,10];

const odds = [];
for ( let i = 0; i < nums.length; i ++) { 
    if (nums[i] % 2 == 1) {
    	odds.push(nums[i]);
    }
}
// 홀수 구하기



2)filter를 사용
const odds = nums.filter(x => x % 2 == 1);
odds;
-> [1, 3, 5, 7, 9]


3)every를 사용
const result = odds.every(x => x % 2 == 1); 
->true


4)some을 사용
const nums = [1,2,3,4,5,6,7,8,9,10];
const some = odds2.some(x => x % 2 == 1); 
->true

5)forEach() : 배열의 각 요소에 대해 제공된 callbackFn 함수를 오름차순 인덱스 순서로 한 번씩 호출
3번째 요소에는 배열을 그대로 대입하게됨. 필수x (원본 데이터를 변경하기 위함)
ex) fruits.forEach((el, i, arr)

const fruits = ['apple', 'orange', 'Mango', 'Melon']

fruits.forEach((el, i) => {
	console.log ("el", el , "index : " , i);
});
    

6)map(callbackFn) : 반환값으로 새로운 배열 객체 생성

const nums = [1,2,3,4,5,6,7,8,9,10];

const num2 = nums.map(x => x * x);

num2;
->[1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

7)flatMap : 중첩된 배열 객체 -> 1차원적인 배열 객체 변환

const nums = [[1,2,3], [4,5,6],[7,8,9]];

const nums2 = nums.flatMap(x => x);

nums2
->[1, 2, 3, 4, 5, 6, 7, 8, 9]

8) join("결합문자열 - 기본값) : 배열 -> 문자열

const fruits = ['apple', 'orange', 'Mango', 'Melon']

const str = fruits.join();

str;
->'apple,orange,Mango,Melon'

const str = fruits.join(#);
str;
->'apple#orange#Mango#Melon'

참고) String.prototype.split("구문 문자열") -> 문자열을 구분 문자열로 쪼개서 -> 배열 객체

const fruits = 'apple,orange,Mango,Melon'

const fruits2 = fruits.split(',')

fruits2
-['apple', 'orange', 'Mango', 'Melon']

9) keys : 배열의 각 인덱스에 대한 키를 포함하는 새로운 배열 반복자 객체를 반환

const nums = [...(new Array(101)).keys()];

nums
-> [1...100까지의 숫자]

10) reverse() : 배열의 순서를 거꾸로 뒤집음

11)slice(1,2) : 깊은복사, 원본데이터를 변화시키지 않음.
자른 데이터 배열을 새로운 배열로 복사함.

const fruits = ['apple', 'orange', 'Mango', 'Melon']

const fruits2 = fruits.slice(1, 2)

fruits2
->['orange']

12) sort() : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환

const nums = [10, 5, 99, 33, 1, 30];

nums.sort((a, b) => a - b);   // 오름차순
->[1, 5, 10, 30, 33, 99]

13)reduce(callbackFn, initalValue(생략가능)) : 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환

const nums = [99, 100, 3, 5, 21];


const total = nums.reduce((acc, cur) => {
	console.log("acc", acc, "cur:", cur);
	acc += cur;
    return acc;
});

symbol.iterator가 정의된 경우

반복자 패턴 구현
-> 디자인 패턴
커서: 이동 위치
커서를 한칸씩 이동하며 대상을 지정한다.
next(): 커서이동 -> 다음 요소 접근

• for .. of 구문 <- Symbol.iterator가 구현된 객체이면 사용가능

const fruits = ['apple', 'orange', 'Mango', 'Melon']

const iter = fruits[Symbol.iterator]();

iter.next();
->{value: 'apple', done: false} //커서 끝에 도착할 경우 done이 true로 변경됨.




//for .. of 구문
for (const fruit of fruits) {
	console.log(fruit)
   }
   
->
apple
orange
Mango
Melon

다차원 배열

배열 객체 안에 배열 객체를 정의
[ ... ] - 1차원 배열
[[...]], [...]] - 2차원 배열

유사배열

상속관계(프로토타입 체인)이 Array.prototype이

비구조화 할당

const person = {
	name: "이이름",
	age: 40,
    address: { zipcond: '01234', addr1: '주소1'}
};

const { name, address : { zipcode } } = person;


name
이이름

zipcode
01234

나머지 연산자

const nums = [1,2,3,4,5,6,7,8]

const [a,b,...rest] = nums;

rest
->[3, 4, 5, 6, 7, 8]