배열과 배열처리

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• 1. 배열의 요소 조작
• 2. 배열 검색
• 3. 배열의 요소 변형
• 4. 배열 자체를 변형
• 5. 문자열 병합 

 

<배열과 배열처리>

배열의 요소 조작	배열에 요소 하나 추가/제거	push/pop(끝) unshift/shif(처음)
	배열의 끝에 여러 요소 추가	concat
	배열일부 가져오기	slice
	임의의 위치에 요소 추가/제거	splice
	배열 안에서 요소 교체하기	copyWithin
	특정 값으로 배열 채우기	fill
	배열 정렬	sort/reverse
배열 검색	조건에 맞는 요소의 인덱스 검색	indexOf/lastIndexOf   또는 findIndex
	조건에 맞는 요소 검색	find
	some과 every
배열의 요소 변형	요소 변형, 사본 반환	map
	요소 변형, 배열에서 필요한 것만 남긴 사본 반환	filter
배열 자체를 변형	reduce
문자열 병합	Array.prototype.join(구분자)

 

1. 배열의 요소 조작

1-1) 배열에 요소 하나 추가/제거

• push/pop - 배열의 끝에 요소를 추가/제거
• unshift/shif - 배열의 처음에 요소를 추가/제거

var fruits = ["Apple","Banana","Orange","Strawberry"];

var push = fruits.push("Grape");  //맨 끝에 "Grape"추가
var pop = fruits.pop();           //맨 끝에 "Grape"제거
var unshift = fruits.unshift("Grape");  //맨 앞에 "Grape"추가
var shift = fruits.shift();             //맨 앞에 "Grape"제거

console.log(push);
console.log(pop);
console.log(unshift);
console.log(shift);

console.log(fruits);

1-2) 배열의 끝에 여러 요소 추가

• concat - 배열의 끝에 value 요소들을 추가한 새로운 사본을 반환

arr.concat(value);
var arr = [1, 2, 3];

var newArr = arr.concat(4, 5, 6);      // newArr: [1, 2, 3, 4, 5, 6]
var newArr = arr.concat([4, [5, 6]]);  // newArr: [1, 2, 3, 4, [5, 6]]

1-3) 배열일부 가져오기

• slice( a, b ) - 인덱스 a~(b-1)까지 가져옴

var fruits = ["Apple","Banana","Orange","Strawberry"];
var a = [1, 2, 3, 4, 5];
a.slice(0, 3); // [1, 2, 3]을 반환한다.
a.slice(3); // [4, 5]를 반환한다. 
a.slice(1, -1); // [2, 3, 4]를 반환한다. 
a.slice(-3, -2) // [3]을 반환한다.

1-4) 임의의 위치에 요소 추가/제거

• splice( x, n, 추가될 요소들 ) - 인덱스 x에서 n개만큼 가져오기

var fruits = ["Apple","Banana","Orange","Strawberry"];
var splice = fruits.splice(1, 2);  //fruits[1]부터 2개 가져오기
console.log(splice);
console.log(fruits);

#출력결과
["Banana","Orange"]
["Apple","Strawberry"]

1-5) 배열 안에서 요소 교체하기

• copyWithin( x, a, b ) - 인덱스 a~(b-1)까지 복사해 인덱스 x에 복사한 요소를 붙여놓음 

const arr = [1, 2, 3, 4];

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

1-6) 특정 값으로 배열 채우기

• fill( x, a, b ) - 인덱스 a~(b-1)까지 x로 채움

const arr = new Array(5).fill(1)    // arr = [1, 1, 1, 1, 1]로 초기화됨

arr.fill("a");    // arr = ["a", "a", "a", "a", "a"]
arr.fill("b", 1)    // arr = ["a", "b", "b", "b", "b"]
arr.fill("c", 2, 4) // arr = ["a", "b", "c", "c", "b"]
arr.fill(5.5, -4)     // arr = ["a", 5.5, 5.5, 5.5, 5.5]

1-7) 배열 정렬

• sort() - 정렬
• reverse() - 역순 정렬

 

 

2. 배열 검색

2-1) 조건에 맞는 요소의 인덱스 검색

• indexOf/ lastIndexOf - 배열 처음/ 끝에서 부터 요소 검색해 정확히 일치하는 첫번째 요소의 인덱스 반환
• findIndex - 보조 함수로 검색 조건 지정하여 검색 가능, 없을 경우 -1반환

2-2) 조건에 맞는 요소 검색

• find - 보조 함수로 검색 조건 지정하여 검색 가능, 없을 경우 undefinded반환

#indexOf/ lastIndexOf 예제
let str = 'Brave new world';

console.log(str.indexOf('w'));  // output>  8
console.log(str.lastIndexOf('w'));  // output>  10
console.log(str.indexOf('new'));  // output>  6
console.log(str.lastIndexOf('new'));  // output>  6

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//findIndex
const findIndexValue = arr.findIndex(data => data % 2);
console.log('findIndexValue', findIndexValue); // 0

//find
const findValue = arr.find(data => data % 2);
console.log('findValue', findValue); // 1

※find와 findIndex에 전달하는 함수

• 매개변수로 받는 것 : 1. 배열의 각 요소  2. 현재 요소의 인덱스, 배열 자체
• this수정 가능 : this이용하면 함수가 객체의 메소드인 것처럼 호출이 가능하다.

arr.find(function(p){
    return p.id === this.id
}, juliet);

2-3) some과 every

• some - 조건에 맞는 요소 찾으면 즉시 검색 중단하고 true 반환, 찾지 못하면 false 반환
• every - 배열의 모든 요소가 조건에 맞아야 true 반환, 조건에 맞지 않는 요소를 찾아야 false 반환

every와의 차이점은 every는 모든값이 true여야하고 some은 하나만 true를 반환하면 된다.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//some
const someArr = arr.some(data => data > 2);
console.log('someArr', someArr); // true

//every
const everyValue = arr.every(data => data > 2);
console.log('everyValue', everyValue); // false

 

 

3. 배열의 요소 변형 - map과 filter

3-1) 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.25, 22.95]
const discountPrices = price.map(x => x * 0.8); // [7.96, 18.36]

3-2) filter - 배열에서 필요한 것만 남긴 사본 반환

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

words.filter(word => word.length > 6);  // ["exuberant", "destruction", "present"]

 

 

4. 배열 자체를 변형 - reduce

4-1) reduce( a, x ) - 첫 번째 매개변수인 a에는 배열이 줄어드는 대상인 accumulator, 두 번째 매개변수부터는 (현재 배열요소, 현재 인덱스, 배열 자체) 이다.

reduce는 총 합을 반환하거나, 영단어로 이루어진 배열을 첫 글자에 따라 묶거나, set의 평균 및 분산을 계산할 때 사용할 수 있다.

#배열의 총 합을 반환
const arr = [5, 7, 2, 4];
const sum = arr.reduce((a, x) => a += x, 0); // 18

 

 

5. 문자열 병합

5-1) Array.prototype.join(구분자)

const arr = [1, null, "hello", "world", true, undefined];
delete arr[3];

arr.join();        // "1,,hello,,true,"
arr.join('');    // "1hellotrue"
arr.join(' -- ');    // "1 -- -- hello -- -- true -- "