배열 메소드
Array.prototype으로부터 메소드와 Property를 상속받습니다.
1. 원본 배열을 변경하지 않고 참조만 하는 메소드 ⭐
1) join() 배열의 모든 요소를 하나의 문자열로 반환
2) slice() 시작인덱스 종료인덱스 바로 앞까지의 모든 배열요소를 추출하여 새로운 배열을 반환
3) concat() 배열의 뒤에 인수로 전달받은 배열을 합쳐서 새로운 배열을 반환
4) indexOf() 전달받은 값과 동일한 배열 요소가 처음으로 위치하는 인덱스를 반환
5) includes() 전달받은 값과 동일한 배열요소가 있으면 true, 없으면 false를 반환
2. 원본 배열을 변경하는 메소드
1) push() 배열의 마지막 요소를 추가
2) pop() 배열의 마지막 요소 제거
3) shift() 배열의 첫번째 요소 제거
4) unshift() 배열의 첫번째 요소 추가
5) splice() 배열 요소를 제거하거나 새로운 배열요소를 추가 ⭐
6) reverse() 배열 요소의 순서를 반대로 교체함
Number 메소드
Number 객체에 정의되어 있는 숫자와 관련된 작업을 할 때 사용되는 메소드
1. parseInt() 문자열에 포함된 숫자 부분을 정수 형태로 형변환
2. parseFloat() 문자열에 포함된 숫자 부분을 실수 형태로 형변환
3. isNaN() 전달된 값이 NaN인지 아닌지를 검사(NaN이면 true 아니면 false를 반환)
4. isInteger() 전달된 값이 정수인지 아닌지를 검사(정수면 true 아니면 false를 반환)
03array_method.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, element)
let arr = ['green', 'blue', 'red', 'yellow', 'pink'];
// delete arr[1];
// arr.splice(1, 1, 'tomato') 1번 인덱스에서부터 1개만 제거 후 그자리에 tomato 추가
arr.splice(1, 0, 'tomato') // 1번 인덱스에서부터 제거 없이 그자리에 tomato 추가
console.log(arr);
// 02 slice 배열에서 시작 인덱스부터 마지막 인덱스
//(마지막 인덱스는 제외)까지 반환
// 구문 arr.slice(start, end)
let arr2=[1, 2, 3, 4, 5, 6, 7, 4];
let result = arr2.slice(1, 4);
console.log(result);
console.log(arr2);
// 03 indexOf 배열에서 item이 있는지 탐색 후 해당요소의
// 인덱스를 반환 (배열에 값이 없는 경우 -1을 반환)
// 구문 arr.indexOf(item)
let result2 = arr2.indexOf(4); // 요소가 없으면 -1 반환
console.log(result2);
// 04 includes 배열에서 item이 있는지 탐색 후 있으면 true
// 없으면 false 반환
// 구문 arr.includes(item)
let result3 = arr2.includes(20);
console.log(result3);
// 05 join 배열 요소를 모두 합친 후 하나의 문자열을 만들어줌
let result4 = arr.join(',');
console.log(result4);
// 06 concat 배열을 합쳐서 새로운 배열을 반환
let arr3 = ['🍒', '🍓'];
let arr4 = arr.concat(['🍺', '🍷']);
console.log(arr4);
</script>
</body>
</html>
04array_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>
let fruits = ['🍑', '🍊', '🍋', '🍓', '🍏'];
// 01. 문자로 변경하기 join()
let fruitsStr = fruits.join('');
console.log(fruitsStr);
// 02. 문자를 배열로 변경하기 split()
let str= "a*b*c*d*e";
let strarr = str.split('*', 2);
console.log(strarr);
// 03. 해당 조건에 맞는 하나의 값을 찾아서 반환 find()
let score = [60, 70, 80, 90, 95];
let result = score.find(function(sc){
return sc > 70;
})
console.log(result);
let result1_2 = score.find(sc=>{ return sc > 70 }) // let reuslt2 = score.find(sc=> sc > 70)
console.log(result1_2);
// 04. 해당 조건에 맞는 모든 값을 찾아서 배열로 반환 filter()
let result2 = score.filter(function(sc){
return sc> 60;
})
console.log(result2);
// 05. 값을 수정 후 배열로 반환 map();
let result3 = score.map(function(sc){
return `점수는 ${sc}이다.`;
})
console.log(result3);
</script>
</body>
</html>
05array_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>
// 01. 원본배열을 변경하는 메소드
// push() / pop() / shift() / unshift()
// splice() / reverse()
let dogs = ['콩이', '흰둥이', '크림', '구름', '검둥이'];
dogs[dogs.length] = '사랑이';
dogs.push('나추가');
dogs.unshift('앞에추가');
dogs.shift();
dogs.pop();
console.log(dogs);
dogs.reverse();
console.log(dogs);
// splice() 내가 원하는 위치의 값부터 제거 가능, 추가도 가능
// splice(start, num, '추가하는 값')
// dogs.splice(1, 2, '누렁이');
dogs.splice(1, 2);
console.log(dogs);
// 02. 원본 배열을 변경하지 않고 참조만 하는 메서드
// 💚 join() 💚 문자열로 반환
// 💚 slice() 💚 배열의 일부분을 배열로 반환
// 💚 concat() 💚 배열을 합쳐서 새로운 배열을 반환
// 💚 toString() 💚 문자열로 반환
// 💚 indexOf() 💚 전달받은 값과 동일한 값이 배열요소에 있으면 그 요소의 인덱스를 반환
// 없으면 -1을 반환
// 💚 includes() 💚 전달받은 값과 동일한 값이 배열요소에 있으면 true 없으면 false
let arr = ['hi', '안녕', '그린', '목요일'];
let str = arr.join('🍒');
console.log(arr);
console.log(str);
let nArr = arr.slice(1,2);
console.log(nArr);
let nArr2 = arr.concat([1, 2, 3]); // ⭐
let nArr3 = [...arr, 1, 2, 3];
console.log(nArr3); // console.log(nArr2); 랑 결과 같음
let str2 = arr.toString();
console.log(str2);
// 3. 원본배열을 반복적으로 참조하는 메서드
// 💚 forEach() 💚
// 💚 map() 💚
// 💚 filter() 💚
// 💚 reduce() 💚
// some()
// 💚 find() 💚
// every()
let numArr = [10, 20, 30, 40, 50];
// console.log(numArr[0]);
// console.log(numArr[1]);
// console.log(numArr[2]);
// console.log(numArr[3]);
// console.log(numArr[4]);
for(let i=0; i<numArr.length; i++) {
console.log(numArr[i]);
}
for(let i of numArr){
console.log(i);
}
let newNumArr=[];
numArr.forEach(function(a, b){
newNumArr.push(a);
console.log(a,b);
})
console.log(newNumArr);
// let newNumArr2 = numArr.map(val=>{
// return val+5;
// })
let newNumArr2 = numArr.map(val=> val+5);
console.log(newNumArr2);
let newNumArr3 = numArr.filter(a => a > 20);
let newNumArr4 = numArr.find(a => a > 20);
console.log(newNumArr3);
console.log(newNumArr4);
let booleanVal = numArr.some(val => val > 30);
console.log(booleanVal);
let booleanVal2 = numArr.every(val => val > 30);
console.log(booleanVal2);
// 배열.forEach((각 배열요소의 값, 각 배열요소의 인덱스, 원본배열)=>{})
// 배열.reduce((누적값, 현재값, 인덱스, 원본배열)=>{},초기값)
let numArr2 = [1, 2, 3, 4, 5, 6];
let sum=0;
// let result = numArr2.forEach(val=>{
// sum = sum + val;
// return sum;
// })
numArr2.forEach(val=>{
sum = sum + val;
})
let result = sum;
numArr2.reduce((pre,cur)=>{
return pre+cur;
},0)
let result2 = numArr2.reduce((pre,cur)=> pre+cur);
console.log(result2);
let result3 = numArr.reduce((pre,cur)=>{
pre.push(cur+5);
return pre;
},[])
</script>
</body>
</html>
06array_method_ex
<!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>
let arr = [5, 9, 7, 10];
let divisor = 5;
let answer = [];
solution(arr, divisor);
function solution(arr, divisor) {
arr.forEach(function(a){
if(a % divisor == 0) {
answer.push(a);
answer = answer.filter(val => val >= 1);
return answer;
} else {
answer.push(-1);
answer = answer.slice(0, 1);
return answer;
}
})
console.log(answer);
}
</script>
</body>
</html>
06array_method_t_ex
<!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>
function solution(arr, divisor) {
let answer = [];
// arr 배열 요소중 divisor로 나누었을 때 나머지가 0이 되는 요소는
// answer에 넣기
// 1) answer.push()
// 2) filter를 사용하여 해당 배열을 answer에 할당
// 1)
// arr.forEach(val=>{
// if(val % divisor == 0) answer.push(val)
// })
// 2)
answer = arr.filter( val => val % divisor === 0 )
answer = answer.length == 0 ? [-1] : answer;
return answer;
}
console.log(solution([5, 9, 7, 10, 18], 5));
</script>
</body>
</html>
07array_method_ex2.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>
// 문자열을 받아서 p의 개수가 몇개인지? y의 개수가 몇개인지?
// 대소문자는 구분하지 않음
// 개수를 비교해서 일치하면 true 반환 일치하지 않으면 false 반환
//
// 1)
// function solution(s){
// let answer = true;
// s= s.toUpperCase().split('');
// let parr = s.filter(str => str == 'P').length;
// let yarr = s.filter(str => str == 'Y').length;
// answer = parr === yarr? true : false; // answer = parr === yarr;
// return answer;
// }
// let result = solution('py');
// console.log(result);
// 2)
function solution(s){
let answer = true;
let pnum = 0, ynum = 0;
s=s.toUpperCase();
for (let i of s) {
pnum = i === 'P' ? pnum + 1 : pnum;
ynum = i === 'Y' ? ynum + 1 : ynum;
}
answer = pnum == ynum;
return answer;
}
let result = solution('ppyyy');
console.log(result);
</script>
</body>
</html>
'Stack > JavaScript' 카테고리의 다른 글
| [JS] 객체 (0) | 2022.05.04 |
|---|---|
| [JS] 윤년 판별하기 / 소수 구하기 (0) | 2022.05.04 |
| [JS] 배열(Array) (0) | 2022.05.02 |
| [JS] 반복문 (0) | 2022.04.29 |
| [JS] 조건문 2 (0) | 2022.04.28 |