Array 배열

배열의 추가, 삭제 push, pop, shift, unshift, splice

let arr = [1, 2, 3, 4, 5];

1. 배열의 뒤에 추가, 삭제

arr.push() 배열의 맨 뒤에 요소를 넣는다.

arr.push(6);
 console.log(arr); //[1, 2, 3, 4, 5, 6]
 arr.push(7,8);
 console.log(arr);//[1, 2, 3, 4, 5, 6,7,8]

arr.pop() 배열의 맨 뒤의 요소를 하나만 삭제한다.

let el =arr.pop();
 console.log(arr, el);//[1, 2, 3, 4, 5, 6, 7] 8let arr =[1,2,3,4,5];

2. 배열의 앞에 추가, 삭제

shift의 리턴값 => 빼낸 값

arr.unshift() 배열의 맨 앞에 요소를 넣는다.

arr.unshift(1);
 console.log(arr);//[1, 1, 2, 3, 4, 5, 6, 7]
 arr.unshift(1,2,3);
 console.log(arr);//[1, 2, 3, 1, 1, 2, 3, 4, 5, 6, 7]

arr.shift() 배열의 맨 앞의 요소를 하나만 삭제한다.

el = arr.shift();
console.log(arr,el);//[2, 3, 1, 1, 2, 3, 4, 5, 6, 7] 1

3. 배열의 중간에 추가, 삭제

삭제와 추가를 동시에 할 수 있다. splice의 리턴값 => 삭제된 배열

splice() 배열의 중간에 요소를 넣는다.

 💡 arr.splice(처리할 idx, 삭제할 index의 개수, 추가할 값(복수 가능)

 

arr = [1,2,3,4,5];
 arr.splice(2,0,9,10);//(작업할 인덱스, 삭제할 개수, 추가할 요소...)
 console.log(arr);//[1, 2, 9, 10, 3, 4, 5]

---

배열의 복사 slice

배열에서 원하는 값을 복사해 온다.

arr.slice(idx,idx)

//deep copy
 //두번째 인자값이 없을 경우=> 모든 값 
 arr = [1,2,3,4,5];
 let arr2 = arr.slice(1,4);//(시작할 인덱스, 끝날 인덱스(끝 인덱스 비로 직전까지 슬라이스))
 console.log(arr2);//[2, 3, 4]

---

배열의 병합 concat

배열을 병합해준다.

arr.concat()

arr = [1,2,3,4,5];
 arr2 = [6,7,8,9,10];
 let arr3 = arr.concat(arr2);
 console.log(arr3,arr,arr2);
 //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
 //[1, 2, 3, 4, 5] 
 //[6, 7, 8, 9, 10]

---

문자열→배열 split

규칙이 있는 문자열을 배열로 전환

arr.split()

• 예) 고객의 주문을 하나의 문자열로 저장하여 전달→ 배열로 다시 바꾼다.

let str = 'A B C,D,E';
 arr = str.split(',');
 console.log(arr);//['A B C', 'D', 'E']

 //예)고객의 주문을 하나의 문자열로 저장하여 전달하고 배열로 다시 바꾼다.
  str = '11|2|100|red^11|1|95|blue^17|1||blue';
	let order = str.split('^');
	let order2 = [];
	console.log(order);
	order.forEach(function(v, i){
		order2[i] = v.split('|');	// 배열안에 배열을 넣는다.
	});
	console.log(order2);
	console.log(order2[1][3]);

---

배열→문자열 join

배열을 규칙이 있는 문자열로 전환

arr.join()

arr = [1,2,3,4,5];
str = arr.join(',');
console.log(str);//1,2,3,4,5

배열의 정렬 sort, reverse

1. 정렬

arr.sort()

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.sort();
console.log(arr)//[1, 10, 2, 3, 4, 5, 6, 7, 8, 9]

• 오름차순

arr.sort(function(a, b) {
    	return a - b;	//오름차순
});
console.log(arr)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let user = [
    { id: 1, name: '맥스', height: 175, weight: 78 },
	{ id: 2, name: '비비', height: 145, weight: 72 },
	{ id: 3, name: '미미', height: 165, weight: 88 },
	{ id: 4, name: '제이', height: 185, weight: 92 },
	{ id: 5, name: '크롱', height: 195, weight: 68 }
]
user.sort( 
	function(a, b) {
		return  a.weight - b.weight;
	}
)
console.log(user);
/*
0: {id: 5, name: '홍길룡', height: 195, weight: 68}
1: {id: 2, name: '홍길만', height: 145, weight: 72}
2: {id: 1, name: '홍길동', height: 175, weight: 78}
3: {id: 3, name: '홍길이', height: 165, weight: 88}
4: {id: 4, name: '홍길순', height: 185, weight: 92}
*/

• 내림차순

arr.sort(function(a, b) {
    	return b - a;	//내림차순
});
console.log(arr)//[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

2. 역순

arr.reverse()

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.reverse();	// 배열을 뒤집는다.
console.log(arr) //[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

배열의 반복 forEach, map, reduce

👉🏻 for(), for(let i in arr)은 배열의 메서드가 아닌 반복문이다!!

 

1. 배열에 있는 각 요소에 대해 실행

arr.forEach()

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다.

callback은 다음 세 인수와 함께 호출됩니다.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

• callback 각 요소에 대해 실행할 함수
• currentvalue 처리할 현재 요소
• index 처리할 현재의 인덱스
• array forEach를 호출한 배열
• thisArg을 실행할 때  this로 사용할 값.

arr = [1,2,3,4,5];
let squared = [];
arr.forEach(function(v,i){
    squared[i] = v * v;
})
console.log(squared);//[1, 4, 9, 16, 25]

2.

arr.map()

arr = [1,2,3,4,5];
squared=arr.map(function(v,i){
     return v * v;
})
console.log(squared)//[1, 4, 9, 16, 25]

3.

arr.reduce()

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
	let sum = arr.reduce(function(prev, curr, idx) {
		return prev + curr
	});
	console.log(sum);//55

	 user = [
		{ id: 1, name: '민지', height: 175, weight: 78 },
		{ id: 2, name: '유진', height: 145, weight: 72 },
		{ id: 3, name: '선호', height: 165, weight: 88 },
		{ id: 4, name: '지유', height: 185, weight: 92 },
		{ id: 5, name: '재오', height: 195, weight: 68 }
	];
	let userSum = user.reduce(function(prev, curr, idx) {
		curr.name = '총합';
		curr.height = prev.height + curr.height;
		curr.weight = prev.weight + curr.weight;
		return curr;
	});
	console.log(userSum);//{id: 5, name: '총합', height: 865, weight: 398}

---

배열의 필터링 filter(), every(), some(), reduce()

1. 원하는 값만 추출하여 새로운 배열로 리턴

array.filter()

user = [
		{ id: 1, name: '민지', height: 175, weight: 78 },
		{ id: 2, name: '유진', height: 145, weight: 72 },
		{ id: 3, name: '선호', height: 165, weight: 88 },
		{ id: 4, name: '지유', height: 185, weight: 92 },
		{ id: 5, name: '재오', height: 195, weight: 68 }
	];
var over170 = user.filter(function(v, i) {
		return v.height >= 170 ? true : false;
	});
	console.log(over170);
//0: {id: 1, name: '민지', height: 175, weight: 78}
//1: {id: 4, name: '지유', height: 185, weight: 92}
//2: {id: 5, name: '재오', height: 195, weight: 68}

2. 모든 값이 조건에 맞아야 ture 리턴

array.every()

user = [
		{ id: 1, name: '민지', height: 175, weight: 78 },
		{ id: 2, name: '유진', height: 145, weight: 72 },
		{ id: 3, name: '선호', height: 165, weight: 88 },
		{ id: 4, name: '지유', height: 185, weight: 92 },
		{ id: 5, name: '재오', height: 195, weight: 68 }
	];
	var all170 = user.every(function(v, i) {
		return v.height >= 170;
	});
	console.log(all170);//false

3. 하나라도 조건에 맞으면 true 리턴

array.some()

user = [
		{ id: 1, name: '민지', height: 175, weight: 78 },
		{ id: 2, name: '유진', height: 145, weight: 72 },
		{ id: 3, name: '선호', height: 165, weight: 88 },
		{ id: 4, name: '지유', height: 185, weight: 92 },
		{ id: 5, name: '재오', height: 195, weight: 68 }
	];
var one170 = user.some(function(v, i) {
		return v.height >= 170;
	});
	console.log(one170);//true