2019-07-15

21 minutes read (About 3171 words)

chapter8. 배열과 배열 처리

8.1 배열의 기초

1) 배열은 객체와 본질에서 순서가 있는 데이터 집합이며 0으로 시작하는 숫자형 인덱스를 사용합니다.
2) 자바스크립트 배열은 비균질적입니다. 즉 한 배열의 요소가 모두 같은 타입일 필요는 없습니다.
다른 배열이나 객체도 포함 할 수 있습니다.
3) 배열 리터럴은 대괄호로 만들고, 배열 요소에 인덱스로 접근할 때도 대괄호[]를 사용합니다.
4) 모든 배열에는 요소가 몇 개 있는지 나타내는 length 프로퍼티가 있습니다.
5) 배열에 배열 길이보다 큰 인덱스를 사용해서 요소를 할당하면 배열은 자동으로 그 인덱스에 맞게 늘어나며,
빈 자리는 undefined로 채워집니다.
6) Array 생성자를 써서 배열을 만들수도 있습니다.(별로 사용하진 않음)

//배열 리터럴
const arr1 = [1,2,3]; //숫자배열
const arr2 = ["one",2,"three"] //비균질적 배열
const arr3 = [[1,2,3], ["one",2,"three"]]//배열을 포함한 배열
const arr4 = [ //비균질적 배열
    {name :"Fred",type :"object", luckyNumbers=[5,7,13] },
[
 
    {name :"Susan",type:"object"},
    {name :"Anthony",type:"object"},
],
1,
function(){return 'arrays can contain functions too'},
"three",
];
 
//배열 요소에 접근하기
arr1[0]; //1
arr1[2]; //3
arr3[1] //["one",2,"three"]
arr4[1][0] //{name :"Susan",type:"object"}
 
//배열 길이
arr1.length; //3
arr4.length; //5
arr4[1].length //2
 
 
//배열 길이 늘리기 
arr1[4] = 5; //[1, 2, 3, undefined, 5]
arr1.length // 5
 
//배열의 현재 길이보다 큰 인덱스에 접근하는 것 만으로는 길이가 늘어나지 않음
arr2[10];//undefined;
arr2.length //3
 
//Array 생성자 
const arr5 = new Array(); //빈 배열 생성 
const arr6 = new Array(1,2,3) //[1,2,3]
const arr7 = new Array(2) //(2) [empty × 2] 길이가 2개인 빈 배열 
const arr8 = new Array("2");//["2"];

8.2 배열 요소 조작

배열 메서드 중 일부는 배열 ‘자체를’ 수정하며, 다른 일부는 새 배열을 반환한다.

push : 배열 자체를 수정
concat : 새 배열을 반환

8.2.1 배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기

배열의 처음 : 인덱스가 0인 요소
배열의 끝 : 인덱스가 가장 큰 요소 arr.length - 1인 요소

push() : 배열의 끝에서 요소를 추가
pop() : 배열의 끝에서 요소를 제거

※ 데이터를 수직으로 쌓아올리는 스택 stack 에 해당하는 행동

shift() : 배열의 앞에서 요소를 제거
unshift() : 베열의앞에서 요소를 추가

※ 대기열과 비슷한 큐 stack 에 해당하는 행동

const arr = ["b","c","d"];
arr.push("e"); //arr = ["b","c","d","e"];
arr.pop(); // arr = ["b","c","d"];
arr.unshift("a"); // arr = ["a","b","c","d"];
arr.shift();//arr = ["b","c","d"];

8.2.3 배열 일부 가져오기

*slice(a,b) : *배열의 일부를 가져옴
a : 어디서부터 가져올지, b : 어디까지 가져올지(바로 앞 인덱스까지) 지정

두번째 매개변수를 생략하면 배열의 마지막까지 반환
음수 인덱스를 쓸수 있고, 음수 인덱스를 쓰면 배열의 끝에서부터 요소를 센다.

slice

//slice
const arr = [1,2,3,4,5];
arr.slice(3); // [4,5]
arr.slice(2,4); //[3,4]
arr.slice(-2); //[4,5]
arr.slice(1,-2); //[2,3]
arr.slice(-2,-1); //[4]
//arr는 바뀌지 않는다.

8.2.4 임의의 위치에 요소 추가하거나 제거하기

splice(a,b,c) : 배열을 수정
a : 수정을 시작할 인덱스 ,
b: 제거할 요소 숫자 (아무것도 제거하지 않을땐 0 )
c : 배열에 추가될 요소

splice

//splice 
const arr = [1,5,7];
arr.splice(1,0,2,3,4); //[1,2,3,4,5,7];
arr.splice(5,0,6); //[1,2,3,4,5,6,7];
arr.splice(1,2); // [1,4,5,6,7];
arr.splice(2,1,"a","b"); // [1,4,"a","b",6,7];

8.2.5 배열 안에서 요소 교체하기

copyWithin(a,b,c) : ES6에서 새로도입한 메서드
a : 복사한 요소를 붙여넣을 위치
b : 복사할 위치
c : 복사를 끝낼 위치 (생략가능)
slice과 마찬가지로 음수 인덱스를 사용하면 배열의 끝에서 부터 센다.

//copywithin
const arr = [1,2,3,4];
arr.copyWithin(1,2);//[1, 3, 4, 4]
arr.copyWithin(2,0,2);//[1, 3, 1, 3]
arr.copyWithin(0,-3,-1); //[3, 1, 1, 3]
```  

## 8.2.6 특정 값으로 배열 채우기

* **fill()**: 정해진 값으로 배열을 채움
    크기를 지정해서 배열을 생성하는 Array 생성자와 아주 잘 어울림   
    배열의 일부만 채우려고 할때는 시작 인덱스와 끝 인덱스를 지정  
    음수 인덱스도 사용할 수 있다.   
    
```javascript fill
 //fill
    const arr = new Array(5).fill(1);//[1,1,1,1,1];
    arr.fill("a"); // ["a", "a", "a", "a", "a"]
    arr.fill("b",1);//["a", "b", "b", "b", "b"]
    arr.fill("c",2,4);//["a", "b", "c", "c", "b"]
    arr.fill(5.5,-4); //["a", 5.5, 5.5, 5.5, 5.5]
    arr.fill(0,-3,-1); //["a", 5.5, 0, 0, 5.5]

reverse() : 배열의 요소를 반대로 바꿈
sort() : sort는 배열의 요소의 순서를 정렬 (오름차순)

reverse&sort

//reverse
    const arr = [1,2,3,4,5];
    arr.reverse(); // [5,4,3,2,1]
 
    //sort
    const arr = [5,3,2,4,1];
    arr.sort(); // [1,2,3,4,5];

8.3 배열 검색

indexOf() : 찾고자 하는 것과 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환
lastIndexOf() : 배열의 끝에서부터 검색
배열의 일부분을 검색하려면 시작 인덱스를 지정
일치하는 것을 못찾으면 -1을 반환

indexOf

//indexOf 
const o = {name : "Jerry"};
const arr = [1,5,"a",o,true,5,[1,2],"9"];
arr.indexOf(5);//1
arr.lastIndexOf(5);//5
arr.indexOf("a"); //2
arr.lastIndexOf("a"); //2
arr.indexOf( {name : "Jerry"} ); //-1
arr.indexOf(o); //3
arr.indexOf([1,2]); //-1
arr.indexOf("9"); //7
arr.indexOf(9); //-1
 
arr.indexOf("a",5) //-1
arr.indexOf(5,5) //5
arr.lastIndexOf(5,4) //1
arr.lastIndexOf(true,3) //-1순으로 정렬

findIndex() :
보조함수를 써서 검색 조건을 지정할 수 있다.
하지만 검색을 시작할 인덱스를 지정할 수 없고,
뒤에서 부터 찾을 수도 없다.

findIndex

findIndex
const arr = [{id : 5 , name: "Judith"}, {id : 7 , name: "Francis"}];
arr.findIndex(o => o.id===5); //0
arr.findIndex(o => o.name ==='Francis'); //1 
arr.findIndex(o => o ===3); //-1
arr.findIndex(o => o.id ===17); //-1

find() :
indexOf와 findIndexOf()는 조건에 맞는 요소의 인덱스를 찾을 때 알맞지만,
요소의 인덱스가 아닌 요소 자체를 찾을때
조건에 맞는 요소가 없을 때 undefined를 반환

find

1
2
3

const arr = [{id : 5 , name: "Judith"}, {id : 7 , name: "Francis"}];
arr.find(o => o.id===5); //{id: 5, name: "Judith"}
arr.find(o => o.id===2); //undefined

find와 findIndex에 전달하는 함수는 배열의 각 요소를 첫번째 매개변수로 받고,
현재 요소의 인덱스와 배열 자체도 매개변수로 받는다.

특정 인덱스보다 뒤에 있는 제곱수를 찾아야 한다.

1 2	const arr = [1,17,16,5,4,16,10,3,49]; arr.find((x,i) => i >2 && Number.isInteger(Math.sqrt(x)));

find와 findIndex에 전달하는 함수의 this도 수정 할 수 있다. 함수가 객체의 메서드인 것처럼 호출 할 수 있다.

간혹, 조건을 만족하는 요소의 인덱스나 요소 자체가 아닌, 단순히 조건을 만족하는 요소가 있는지 없는지만 알아도 될때

some() :
조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true 를 반환, 찾지 못하면 false를 반환
every() :
배열의 모든 요소가 조건에 맞아야 true를 반환하며, 그렇지 않으면 false를 반환
조건에 맞지 않은 요소를 찾아야만 검색을 멈추고 false를 반환

some&every

//some
const arr = [5,7,12,15,17];
arr.some(x => x%2 ===0); //짝수 찾기  12가 짝수이므로  true
arr.some(x => Number.isInteger(Math.sqrt(x))); //제곱수 false 
 
//every
const arr = [4,6,16,36];
arr.every(x => x%2 ===0); //짝수찾기 모든 요소가 짝수 true 
arr.every(x => Number.isInteger(Math.sqrt(x))); //false 6이 제곱수가 아님

8.4 map과 filter

map(a,i) :
배열 요소를 변형 , 사본을 반환하며 원래 배열은 바뀌지 않는다.
a : 요소
i :인덱스
filter() :
배열에서 필요한 것들만 남김, 사본을 반환하며 새 배열에는 필요한 요소만 남음

map&filter

//map
const cart =[{name : 'Widget',price : 9.95},{name : 'Gadget',price : 22.95}];
const names = cart.map(x => x.name); // ['Widget','Gadget'];
const prices = cart.map(x => x.price); // [9.95,22.95];
const disCountPrices = prices.map(x => x*0.8); //[7.96,18.36];
 
//filter
const cards = [];
for(let suit of ["H","C","D","S"])
    for(let value=1; value<=13; value++)
        cards.push({suit,value});
 
//value가 2인 카드
cards.filter(c => c.value ===2);
/*
[
0: {suit: "H", value: 2}
1: {suit: "C", value: 2}
2: {suit: "D", value: 2}
3: {suit: "S", value: 2}
]
*/
 
//다이아몬드
cards.filter(c => c.suit ==="D"); //length = 13
 
//킹,퀸,주니어
cards.filter(c => c.value > 10); //length = 12
 
 
//하트의 킹,퀸,주니어
cards.filter(c => c.suit ==="H" && c.value> 10); //length = 12
/*
[
0: {suit: "H", value: 11}
1: {suit: "H", value: 12}
2: {suit: "H", value: 13}
length: 3
]
*/

8.5 배열의 마법 reduce

reduce(a,b,i) :
배열 자체를 변형, 배열을 값 하나로 줄이는데 쓰임
a : 누적값
b: 현재값
i : 인덱스
예) 배열에 들어있는 숫자를 더하거나, 평균을 구하는 것 배열의 값을 하나로 줄이는 동작
reduce가 반환하는 값 하나는 객체일 수도 있고, 다른 배열일 수도 있다.
```
1. map과 filter와 마찬가지로 콜백 함수를 받는다.  
  2. reduce가 받는 첫 번째 매개변수는 배열이 줄어드는 대상인 어큐물레이터이다.   
  3. reduce는 초기값도 옵션으로 받을 수 있다. 
  
```

reduce

1 2	const arr = [5,7,2,4]; const sum = arr.reduce((a,x)=> a +=x,0); //sum =18

reduce의 콜백함수는 매개변수로 누적값  a와 현재배열요소 x를 받음
누적값 : 0 으로 시작

1 2	const arr = [5,7,2,4]; const sum = arr.reduce((a,x)=> a +=x); //sum =18

위 처럼 첫번째 배열 요소가 그대로 초기값이 될 경우에는 초기값을 생략해도된다.
reduce는 보통 숫자나 원시 값을 누적값으로 사용하지만, 객체 또한 누적값이 될 수 있다.

예)영단어로 이뤄진 배열이 있고, 각 단어를 첫 글자에 따라 묶는 예제

//영단어로 이뤄진 배열이 있고, 각 단어를 첫 글자에 따라 묶는 예제 
const words = ["Beachball","Redeo","Angel","Adrdvark","Xylphone"];
const alphabetical = words.reduce((a,x) => {
    if(!a[x[0]]) a[x[0]] =[];
    a[x[0]].push(x);
    return a;
}, {});
 
/*
{B: Array(1), R: Array(1), A: Array(2), X: Array(1)}
A: (2) ["Angel", "Adrdvark"]
B: ["Beachball"]
R: ["Redeo"]
X: ["Xylphone"]
 
*/

1. 배열의 모든 요소에서 콜백 함수는 전 단계의 결과에 이 단어의 첫번째 글자인 프로퍼티가 있는지 확인 
2. 그런 프로퍼티가 없다면 빈 배열을 추가

예) 문자열을 누적값으로 사용

const words = ["Beachball","Redeo","Angel","Adrdvark","Xylphone"];
 
const longWords = words.reduce((a,w)=> w.length > 6 ? a + " " : a ,"" ).trim();
 
//trim() : 문자열 좌우 공백제거 메서드
/*
 
longWords
 
"Beachball Adrdvark Xylphone"
 
*/

8.6 삭제되거나 정의되지 않은 요소들

> Array 메서드에서,  
삭제되거나 정의되지 않은 요소들에서 이상하게 동작하기도 한다.  
map,filter,reduce는 삭제되거나 정의되지 않는 요소들에서 콜백함수를 호출하지 않는다.

//삭제되거나 정의되지 않은 요소들 
const arr = Array(10).map(function(x){return 5});
 
/*
//arr
//(10) [empty × 10]
*/

//arr는 전부 undefined

const arr = [1,2,3,4,5];
delete arr[2]; //arr : (5) [1, 2, empty, 4, 5]
arr.map(x => 0); //[0,0,undefined,0,0]
//(5) [0, 0, empty, 0, 0]

//배열 중간 요소를 삭제하고 map을 호출하면 가운데 구멍이 생김

8.7 문자열 병합

Array.prototype.join() :
매개변수로 구분자 하나를 받고 요소들을 하나로 합친 문자열을 반환
매개변수가 생략되면 기본값은 쉼표(,)
정의되지 않은 요소, 삭제된 요소,null,undefined 모두 빈 문자열로 취급한다.

//문자열 병합 
const arr = [1,null,"hello","world",true,undefined];
delete arr[3];
arr.join(); //"1,,hello,,true," 
arr.join(''); //"1hellotrue"
arr.join(' -- '); //"1 --  -- hello --  -- true -- "

*8.8 요약 *

표 8-1 배열 함수의 매개변수(순서대로)

메서드	설명
reduce에만 적용	누적값, 초깃값 또는 마지막 호출에서 반환한 값
모든 메서드	요소(현재 요소의 값)
모든 메서드	현재 요소의 인덱스
모든 메서드	배열 자체(그다지 쓸모는 없음)

콜백을 받는 메서드들은 옵션으로 콜백을 호출할 때 this로 사용한 값을 받을 수 있다.

표 8-2 배열 콘텐츠 조작

하고 싶은 일	사용할 메서드	수정 또는 사본
스택(후입 선출)을 만들때	push(바뀐 길이 반환), pop	배열 수정
큐(선입 선출)을 만들때	unshift(바뀐 길이 반환),shift	배열 수정
여러 요소를 배열 마지막에 추가할 때	concat	사본 반환
배열 일부가 필요할 때	slice	사본반환
임위의 위치에 요소를 추가하거나 제거	splice	배열 수정
배열 안에서 요소를 교체	copyWithin	배열 수정
배열을 채울 때	fill	배열 수정
배열 반대 정렬	reverse	배열 수정
배열 정렬	sort(정렬 함수 사용 가능)	배열 수정

표 8-3 배열 검색

찾고자 하는 것	사용할 메서드
요소의 인덱스	indexOf(단순한 값), findIndex(복잡한 값)
인덱스를 뒤에서 부터 찾을 때	lastIndexOf(단순한 값)
요소 자체	find
조건을 만족하는 요소가 들어 있는지 확인	some
모든 요소가 그 조건을 만족하는지 확인	every

표 8-4 배열 변형

하고 싶은 일	사용할 메서드	수정 또는 사본
배열의 모든 요소를 변형	map	사본 반환
조건에 맞는 요소만 남김	fill	사본 반환
배열 전체를 다른 데이터 타입으로 변형	reduce	사본 반환
요소를 문자열로 바꿔서 하나로 합침	join	사본 반환

[##Image|kage@FQF0t/btqwDJ8nvzH/toKJ3Ysq9UFUuAszaHgM0k/img.jpg|alignCenter|data-filename=”B2328850940_l.jpg” width=”154” height=”198”|러닝 자바스크립트##]

# 배열