배열분해
<!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 = ["canyi", "piao"];
arr[0], arr[1]
let [firstname, secondname] = arr;
console.log(firstname);
console.log(secondname);
</script>
</body>
</html>
split
<!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>
//split 팁
let [a,b,c,d] = " 반도체 전기회로인 CPU, GPU, FPGA를 디자인하는 기업으로, 캘리포니아주 샌타클래라 서니베일에 위치하고 있다".split(",");
console.log(a);
console.log(b);
console.log(c);
console.log(d);
</script>
</body>
</html>
let [a,,b,c,d] = " 반도체 전기회로인 CPU, GPU, FPGA를 디자인하는 기업으로, 캘리포니아주 샌타클래라 서니베일에 위치하고 있다".split(",");a 와 b사이에 공백으 넣을 경우 밀림 + undefind
그냥 문자열을 대입할 경우 각각의 a,b,c에 들어
<!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 [a,b,c] = "abc";
console.log(a);
console.log(b);
console.log(c);
</script>
</body>
</html>
entries 사용법
<!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>
//entries() 함수 이용
let user = {
name : "can",
age : 19,
}
for (let[key, value] of Object.entries(user)){
console.log(`${key} : ${value}`);
};
</script>
</body>
</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 [name1, name2, ...rest] = ["1", "2","3", "4",""];
console.log(name1);
console.log(name2);
console.log(rest[0]);
console.log(rest[1]);
console.log(rest[2]);
console.log(rest.length);
</script>
</body>
</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 [firstname = "canyi", surname = "piao"] = ["1111"];
console.log(firstname);
console.log(surname);
</script>
</body>
</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 options = {
title : "menu",
width : 100,
height : 200,
}
let {title, width, height} = options;
console.log(title);
console.log(width);
console.log(height);
</script>
</body>
</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 options = {
title : "menu",
width : 100,
height : 200,
}
let {title, ...rest} = options;
console.log(title);
console.log(rest.width);
console.log(rest.height);
</script>
</body>
</html>