Stack/JavaScript
[JS] 배열 / 객체 / set 복습
7ingout
2022. 6. 13. 17:17
let
const
기본타입
number, string, boolean, null, undefined
Symbol
참조형타입
object
배열 - 순서가 있는 컬랙션
let arr = [];
let arr = new Araay();
let arr = [1, 2, 3, 4, 5, 6, 7];
arr[0]
arr[1]
객체 - key와 value가 있는 컬랙션
let obj = {
key: value,
key2: value2,
key3: value3,
}
let obj2 = {
name: "bella";
age: 22,
}
obj['name']
obj.name
obj['isjob'] = true;
객체 생성자방식
let user = new Object();
객체 리터럴방식
let user = {};
array.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 arr = new Array();
let arr2 = [];
let arr3 = [1, 2, 3, 4, 5];
console.log(arr3[0]);
console.log(arr3[1]);
console.log(arr3);
let fruits = ['🥥', '🍉', '🍒', '🍑'];
fruits.push('🍌'); // 마지막에 추가
fruits.unshift('🍋'); // 제일 앞에 추가
console.log(fruits);
fruits.shift(); // 맨 앞 요소 제거
fruits.pop(); // 마지막 요소 제거
fruits.forEach((item, index) => {
console.log(item, index);
})
for(let i=0; i<fruits.length; i++) {
console.log(fruits[i], i);
}
for(let value of fruits) {
console.log(value);
}
// 배열 메서드
// pop(), push(), shift(), unshift()
// join(), indexOf(), includes(), splice(), slice()
// substr(), map(), fin(), filter(), reduce()
let arrStr = fruits.join("냠냠");
console.log(arrStr);
console.log(typeof(arrStr));
console.log(fruits.indexOf('🍒')); // 있으면 인덱스 번호 반환
console.log(fruits.indexOf('🍇')); // 없어서 -1 반환
console.log(fruits.includes('🍍')); // 없어서 false 반환
let scores = [80, 60, 70, 90, 95];
let sc2 = scores.map(score=>{
return score+10;
})
console.log(sc2);
let sc3 = scores.filter(score=> {
return score>=70;
})
console.log(sc3);
let sc4 = scores.find(score=> {
return score>=70;
})
console.log(sc4);
let sum = scores.reduce((pre, cur)=>{
return pre+cur;
},0)
console.log(sum);
let avg = sum/scores.length;
console.log("점수배열의 평균은 " + avg + "입니다.");
console.log(`점수배열의 평균은 ${avg}입니다.`);
// 2차원 배열
let multyArr = [[1, 10], [2, 20], [3, 30], [4, 40]];
console.log(multyArr[0][1]);
multyArr.forEach(item=>{
item.forEach(i=>{
console.log(i);
})
})
// set - 중복허용 x (중복된 데이터를 제거하구 싶을 때)
let set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(4);
set.add(5);
set.add(2);
console.log(set);
let set2 = new Set();
let green = { name: 'green'};
let blue = { name: 'blue'};
let pink = { name: 'pink'};
set2.add(green);
set2.add(blue);
set2.add(pink);
console.log(set2);
set2.forEach((value,index)=> {
console.log(`value는 ${value}이다.`);
console.log(`index는 ${index}이다.`);
})
set.forEach((value,index)=> {
console.log(`value는 ${value}이다.`);
console.log(`index는 ${index}이다.`);
})
let numSet = new Set([1, 2, 3, 4, 5, 6, 2, 3, 4]);
console.log(numSet);
let newArr = [...numSet];
console.log(newArr);
</script>
</body>
</html>
object2.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 obj1 = new Object();
// 객체 리터럴 방식
let obj2 = {};
console.log(obj1);
console.log(obj2);
obj1.name="green";
obj2.name="blue";
obj1.age=20;
obj2.age=30;
console.log(obj1);
console.log(obj2);
// 프로퍼티 삭제하기
delete obj1.age;
console.log(obj1);
let user = {
name: "John",
age: 30,
"likes birds" : true,
}
// 접근하는 방법
// .표기법 obj.key
// 대괄호 표기법 obj[key]
console.log(user.name);
console.log(user.age);
console.log(user['likes birds']);
// 단축 프로퍼티
// 생성자 함수
function Student(name, age, score, phone) {
// let this = {};
this.name = name;
this.age = age;
this.score = score;
this.phone = phone;
// return this;
}
let stu1 = new Student("민영", 22, 90, '01012341234');
let stu2 = new Student("수진", 27, 60, '01032143214');
console.log(stu2);
function makeUser(name, age) {
return {
name: name, // name,
age: age, // age,
}
}
let user2 = makeUser("green", 20);
console.log(user2);
// in 연산자 = 객체의 프로퍼티가 있는지 확인
// "key" in object
console.log("name" in user2); // true
console.log("abc" in user2); // false
// for in 반복문
for(let key in user2) {
console.log(`객체의 key는 ${key}입니다.`);
console.log(`객체의 값은 ${user2[key]}입니다.`);
}
// 프로퍼티 합계구하기
let students = {
a: 90,
b: 80,
c: 60,
}
// 학생들의 점수를 다 더한 값을 리턴해주는 함수를 생성하시오.
function studentSum(stus) {
let sum = 0;
for (let key in stus) {
sum += stus[key];
}
return sum;
}
console.log(studentSum(students));
// Object.keys(obj) -> 객체의 키를 담은 배열을 반환
// Object.values(obj) -> 객체의 값만 담은 배열을 반환
// Object.entries(obj) -> [키, 값]을 담은 배열을 반환
// Object.fromEntries(array) -> 배열을 다시 객체로 반환
let keyArr = Object.keys(user2);
let valueArr = Object.values(user2);
let entriArr = Object.entries(user2);
console.log(keyArr);
console.log(valueArr);
console.log(entriArr);
let newObj = Object.fromEntries(entriArr);
console.log(newObj);
// 프로퍼티 개수 구하기
let dog = {
name: "구름",
age: 3,
color: "white",
}
// 객체를 매개변수로 받아서 그 객체의 프로퍼티가 몇개인지 반환해주는
// 함수를 만드시오.
function count(obj) {
return Object.keys(obj).length;
}
console.log(count(dog));
</script>
</body>
</html>