array_method1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ★ 배열 메서드
// ●● 01) splice 배열에서 선택한 요소를 제거, 새로운 요소 추가
// 구문) arr.splice(start, num, ele..)
// 시작부터 몇개까지 제거?, 추가도 가능
let arr = ['green', 'blue', 'red'];
// 0, 1, 2
// (1)
arr.splice(1,0,'tomato');
console.log(arr);
// 1번 인덱스에서부터 1개만 제거, 제거후 그 자리에 tomato 추가
// →'green', 'tomato', 'red'
// (1,0,'tomato') → 'green', 'tomato', 'blue', 'red'
// (2)
// delete arr[1];
// console.log(arr);
// → 요소는 지웠지만, 길이는 3 그대로, 공간이 사라지지 않음
// ●● 2) slice 배열에서 시작 인덱스부터 마지막 인덱스(마지막 인덱스는 제외)까지 반환
// 구문) arr.slice(strat, end)
// end는 제외
let arr2 = [1, 2, 3, 4, 5, 6, 7];
// 0, 1, 2, 3, 4, 5, 6
let result = arr2.slice(1,4); // 2~4
console.log(result);
console.log(arr2);
// ●● 03) indexOf 배열에서 item이 있는지 탐색 후
// 해당요소의 인덱스를 반환 (배열에 값이 없는 경우 -1 반환)
// 구문) arr.indexOf(item)
// 같은 숫자 있을시, 제일 앞쪽 데이터 반환
let result2 = arr2.indexOf(4); // → 4는 3번째에 있음 → 3 반환
console.log(result2);
// ●● 04) includes 배열에서 item이 있는지 탐색 후
// 있으면 true, 없으면 false 반환
// 구문) arr.includes(item)
let result3 = arr2.includes(5);
console.log(result3);
// ●● 05) join 배열 요소를 모두 합친 후 하나의 문자열로 만들어줌
// let result4 = arr2.join(); // join('') / join(' ')
let result4 = arr2.join(', ');
console.log(result4);
// ●● 06) concat 배열을 합쳐서 새로운 배열을 반환
let arr3 = ['🍇', '🍎'];
let arr4 = arr3.concat(['❤', '👀']);
console.log(arr4);
</script>
</body>
</html>
array_method2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 01. 문자로 변경하기 (배열을 문자열로) → join ()
let fruits = ['🍎','🍏','🍑','🍓','🍍'];
let fruitsStr = fruits.join(' _ ');
console.log(fruitsStr);
console.log(typeof fruitsStr); // string
// 02. 문자를 배열로 변경하기 → split()
// let str = "a, b, c, d, e";
let str = "a*b*c*d*e";
let strarr = str.split('*', 2); // number - 2개만 배열에 넣겠다.
console.log(strarr);
// ▼▼ 결과
// 0: "a"
// 1: "b"
// 2: "c"
// 3: "d"
// 4: "e"
// length: 5
// 03. 해당 조건에 맞는 하나의 값을 찾아서 반환 → find()
let score = [60, 70, 80, 90, 100];
let result = score.find(function (sc) { // 함수가 들어오는 자리 → function ()
return sc > 70 ; // sc 에 값들이 순차적으로 들어옴, 60 → 70 → 80, 하나만 return하고 끝남
})
console.log(result);
// ▼▼ 결과
// 80
// let result = score.find( sc => sc > 70 ) ★
// ( () => {} ) →→→ 하나하나씩 생략 가능, 하나만 있다면 ★★
// ( (sc) => { return sc > 70 } )
// ( sc => { return sc > 70 } )
// ( sc => return sc > 70 )
// ( sc => sc > 70 )
// 04. 해당 조건에 맞는 모든 값을 찾아서 배열로 반환 → filter() ★★
let result2 = score.filter(function(sc) {
return sc > 60 ;
})
console.log(result2);
// ▼▼ 결과
// [70, 80, 90, 100]
// 05. 값을 수정 후 배열로 반환 → map() ★★
let result3 = score.map(function(sc) {
// return sc+5;
return `점수는 ${sc}이다.`;
})
console.log(result3);
// ▼▼ 결과
// [65, 75, 85, 95, 105]
// ['점수는 60이다.', '점수는 70이다.', '점수는 80이다.', '점수는 90이다.', '점수는 100이다.']
</script>
</body>
</html>
array_method3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ⭐⭐⭐⭐ 다 중요 / 다 외워 ⭐⭐⭐⭐
// ⭐(1) 원본배열을 변경하는 메서드
// push() pop() shift() unshift()
// splice() reverse()
// 0 1 2 3 4 5
let dogs = ['콩이','흰둥이','크림','구름','검둥이'];
dogs[dogs.length] = '🍓'; // 아무것도 없는 index에 추가
dogs.push('🥨');
dogs.unshift('🍑');
dogs.pop();
console.log(dogs);
dogs.reverse(); // 순서 반대로
console.log(dogs);
// splice() 원하는 위치의 값부터 제거 가능, 추가도 가능
// splice(start, num, '추가하는값')
dogs.splice(1, 0,'🍏'); // 제거 안하고 추가
console.log(dogs);
dogs.splice(1, 2); // 제거만
console.log(dogs);
dogs.splice(1, 4,'🍏');
console.log(dogs); // ['🍓', '🍏', '🍑']
// ⭐(2) 원본배열을 변경하지 않고 참조만 하는 메서드
// join() 배열을 문자열로 반환
// slice(start, end) 배열의 일부분을 배열로 반환
// concat() 배열을 합쳐서 새로운 배열을 반환
// toString() 문자열로 반환
// indexOf() 전달받은 값과 동일한 값이 배열요소에 있으면
// 그 요소의 인덱스를 반환, 없으면 -1을 반환
// includes() 전달받은 값과 동일한 값이 배열요소에 있으면 true 없으면 false 반환
// concat()
// 0 1 2 3
let arr = ['hi','hello','hao'];
let str = arr.join('❤'); // () → , 자동으로 들어감
console.log(arr); // ['hi', 'hello', 'hao']
console.log(str); // hi,hello,hao
let narr = arr.slice(1,2); // end, 2는 포함하지 않음
console.log(narr); // ['hello']
let narr2 = arr.concat([1, 2, 3]);
console.log(narr2); // ['hi', 'hello', 'hao', 1, 2, 3]
// 같음 ↑↓
let narr3 = [...arr, 1, 2, 3];
console.log(narr3); // ['hi', 'hello', 'hao', 1, 2, 3]
// join 과 비슷
let arr2 = [1,2,3,4];
let str2 = arr2.toString();
console.log(str2); // 1,2,3,4
// ⭐(3) 원본배열을 반복적으로 참조하는 메서드 (for문처럼)
// forEach()
// map() : 값의 형태 변환
// filter() : 여러개 찾음
// reduce() ★
// some()
// find() : 하나만 찾음
// every()
// {1}
let num = [10, 20, 30, 40, 50];
// {1}
for(let i=0; i<num.length; i++) {
console.log(num[i]); // 10~50 순차적으로 출력
}
// {2} for ~ of 문
for(let i of num) {
console.log(i); // 10~50 순차적으로 출력
}
// {3} 콜백함수 ↓함수 - 외워 function(val, index, arr)
num.forEach(function(a, b, c) { // ↓매개변수 자리
console.log(a, b, c); // 10 0 (5) [10, 20, 30, 40, 50]
})
// {4}
console.log(num[0]); // 10
console.log(num[1]); // 20
// {5}
let newNum = [];
// ↓ function(val, index, arr)
num.forEach(function(a, b) {
newNum.push(a); // [10, 20, 30, 40, 50]
console.log(a, b); // 10 0, ...
})
console.log(newNum);
let newNum2 = num.map(val => val+5); // {}, return 생략 가능
console.log(newNum2); // [15, 25, 35, 45, 55]
let newNum3 = num.filter( a => a > 20);
console.log(newNum3); // [30, 40, 50]
let newNum4 = num.find( a => a > 20);
console.log(newNum4); // 30
let booleanVal = num.some(val => val > 30);
console.log(booleanVal); // true
let booleanVal2 = num.every(val => val > 30); // 조건이 모두에게 해당되냐 ?
console.log(booleanVal2); // false
// ⭐어려움
// 배열.forEach((각배열요소의 값, 각배열요소의 인덱스, 원본배열) => {})
// 배열.reduce((누적값, 현재값, 인덱스, 원본배열) => {}, 초기값)
let num2 = [1, 2, 3, 4, 5, 6]; // 다 더한 값 구하기
let sum = 0;
// forEach
// let result = num2.forEach(val => {
// sum = sum + val;
// })
// ↓ forEach 덧셈 ★
num2.forEach(val => {
sum = sum + val;
})
let result = sum;
document.write(result); // 21
// reduce
// pre : 0, cur : 1
// num2.reduce((pre, cur) => {
// return pre+cur; // 0+1=1, 1+2=3, 3+3=6, 6+4=10,...15+6=21
// }, 0);
// 초기값은 있어도되고 없어도되고
// 같음 ↑↓
let result2 = num2.reduce((pre, cur) => pre+cur);
console.log(result2); // 21
// pre : [], cur : 1
let result3 = num.reduce((pre, cur) => {
pre.push(cur+5); // []+1=[6], [6]+2=[6, 7], [6, 7]+3=[6, 7, 8]
return pre;
}, [] )
console.log(result3);
// , 다음 초기값자리에 빈배열 넣기 []
</script>
</body>
</html>
