Javascript
Stack / 삼항연산자 / 스프레드 / Rest / Arguments 정의 및 Object 마음대로 갖고 놀기
Antonio Bae
2023. 7. 5. 11:32
스택/ 마음대로 활용하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>스택 개념정리</title>
</head>
<body>
<script>
//1.스택을 먼저 규정하기
//2.스택의 사용 모습을 보여줘!!
//3.문제를 해결해줘!
// length가 매우 중요함!! 할당제한!! 한정치 이상 들어가면 못넣게 막는 제한 장치가 무조건 필요함
// 자유를 주면 줄수록 그 프로그램이 계속 돌아갈 가능성이 커서 매우 위험함!!
// 기능 1.팝 2.push 3.length(길이제한) 등 구성요소를 먼저 그려라!
const stackArray = [];
function pushStack(anyItem) {
if (weightStack() > 50) {
alert("제한 용량초과");
} else {
stackArray.push(anyItem);
}
}
function popStack() {
return stackArray.pop();
}
function weightStack() {
return stackArray.length;
}
// 그 다음은 1.속성(팔,머리색 등) 2.메소드(동작)
// object는 무조건 한정을 해야함!!!(ex) 별, 물, 배열 등 셀수는 있으나 근사치만 구할수 있으므로
const inputString = prompt("문자 입력해주삼");
let targetString = [];
for (let i = 0; i < inputString.length; i++) {
pushStack(inputString[i]);
// inputString의 요소를 pushStack에 던지겠다
}
document.write("1.inputString:" + inputString + "<br>"); //한번씩 찍어볼것!!
document.write("2.stackArray:" + stackArray + "<br>");
// for (let i = 0; i < weightStack(); i++) {
// document.write("3.i가 빠짐" + weightStack() + "<br>")
// targetString += popStack();
// }
document.write("3.stackArray개수:"+weightStack()+ "<br>");
for (; ;) {
if (weightStack() == 0) { break; } else {
document.write("4. reverse:" + weightStack()+"번째 i가 빠짐" + "<br>")
targetString += popStack();
}
}
document.write("2.stackArray:" + stackArray + "<br>");
document.write("3.stackArray개수:"+weightStack()+ "개<br>");
document.write("5.reverse된 targetString:"+targetString+ "<br>");
if(inputString==targetString) {
document.write("Palindrome" + "<br>");
} else {
document.write("Not palindrome" + "<br>");
}
</script>
</body>
</html>
삼항연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>상항연산자-조건별변수대입!!</title>
</head>
<body>
<script>
// 상항연산자: condition ? / truthy / falsy
let numValue = 6;
// numValue > 10? document.write("big"): document.write("small");
let resultString = numValue > 10? "big": "small";
document.write(resultString); //조건변 변수대입!!
const stackArray = [];
function pushStack(anyItem) {
if (weightStack() > 50) {
alert("제한 용량초과"+ "<br>");
} else {
stackArray.push(anyItem);
}
}
function popStack() {
return stackArray.pop();
}
function weightStack() {
return stackArray.length;
}
const inputString = prompt("문자 입력해주삼");
let targetString = [];
for (; ;) {
if (weightStack() == 0) { break; } else {
document.write("4. reverse:" + weightStack()+"번째 i가 빠짐" + "<br>")
targetString += popStack();
}
}
document.write("5.reverse된 targetString:"+targetString+ "<br>");
const resultString2 = inputString == targetString ? "Palindrome" : "Not Palindrom";
document.write(resultString2+"<br>");
</script>
</body>
</html>
스프레드 개념
https://poiemaweb.com/es6-extended-parameter-handling
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>EC6</title>
</head>
<body>
<script>
const valueA = " ZARD$010-4252-3498";
let valueB = [];
valueB = [...valueA];
document.write(valueB);
function sum(x, y) {
x = x || 0;
// 값이 없다면 0을 집어넣어
y = y || 0;
return x + y;
}
</script>
</body>
</html>
Rest
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Rest</title>
</head>
<body>
<script>
// rest의 장점 파라미터 갯수가 많으면 어쩔건데?
// 파라미터 개수에 상관없이 제목만 기억하고 부를수 있도록 제목만 편하게 부르기 위한 문법!!
// ...이 파라미터 위치에 오면 rest문법
// rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다
function foo(...rest) {
console.log(Array.isArray(rest));
console.log(rest);
}
foo(1,2,3,4,5);
function bar(param1, ...rest){
console.log(param1);
}
bar(1,2,3,4,5);
// rest는 파라미터에 포함되지 않는다!!
function too(...rest) {}
console.log(too.length);//0
function qoo(x, ...rest) {}
console.log(qoo.length);//1
</script>
</body>
</html>
Arguments
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>arguments</title>
</head>
<body>
<script>
// spread문법은 ...) 대상을 개별 요소로 분리한다. spread 문법의 대상은 iterable 해야 한다.
function informationA(...memberId) {
document.write(memberId[0] + "<br>");
document.write(memberId[1] + "<br>");
document.write(memberId[2] + "<br>");
document.write(memberId[0] + memberId[1] + memberId[2]+ "<br>");
}
informationA(10, 20, 50); //arguments의 1,2,3
document.write("=====================" + "<br>");
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2); //arr1.push(4,5,6);
console.log(arr1);
document.write(arr1+ "<br>");
document.write("=====================" + "<br>");
// ES6
const arr4 = [1, 2, 3, 6];
const arr5 = [4, 5];
// ...arr5는 [4, 5]을 개별 요소로 분리한다
arr4.splice(3, 0, ...arr5); // == arr4.splice(3, 0, 4, 5);
document.write(arr4+ "<br>");
console.log(arr4); // [ 1, 2, 3, 4, 5, 6 ]
</script>
</body>
</html>
Object 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>lineArt</title>
</head>
<body>
<script>
const lineArt = {
'groupA': {
'daegeun':[0,1,2],
'chaerin':['a','b','c']
},
'groupB': ['F','M','C','G'],
'groupC': 1004
}
document.write(lineArt.groupA['daegeun']+"<br>");
document.write(lineArt['groupA']['daegeun']+"<br>");
document.write(lineArt.groupB[0]+"<br>");
document.write(lineArt.groupC+"<br>");
</script>
</body>
</html>
Object 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>grades</title>
</head>
<body>
<script>
var grades = {
'cemy': {'a':10, 'b':20, 'c':30},
'stormy': {'koko': 8, 'kiki':11},
'windy': {'hoho':22}
};
for(let fKey in grades) {
for(let sKey in grades[fKey]) {
document.write(grades[fKey][sKey]+"<br>");
}
}
</script>
</body>
</html>
Object 3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>grades</title>
</head>
<body>
<script>
var grades = {
'cemy': [1004,1005,1006],
'stormy': [1007,1008],
'windy': [1009]
}
for(let fKey in grades) {
grades[fKey].forEach(function(v,i,a){
document.write(v + "<br>");
});
}
</script>
</body>
</html>
Object 4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>grades</title>
</head>
<body>
<script>
var grades = [
{ 'ZARD': 'osaka', 'CDR': 'Ansan' },
{ 'balckpink': 'Seoul', 'IU': 'suwon', 'ive': 'singil' }
];
grades.forEach(function (v, i, a) {
for (let pName in v) {
document.write(pName + ": " + v[pName] + "<br>");
}
});
</script>
</body>
</html>