front_basic/9.js_basic.html at main · luail/front_basic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js.basic</title>

    <script>
        function showObject() {
            let person = {name:'hong', email:'hong@naver.com', age:30};
            // 객체 전체조회
            console.log(person);
            // 객체 특정 요소 조회 방법1 : person.name
            console.log(person.name);
            person.name = 'kim'; //객체 요소 변경

            // 객체 특정 요소 조회 방법2 : person['name']
            console.log(person['name']);

            // Object.keys(객체명) : 객체의 키를 배열형태로 반환***
            const keyArr = Object.keys(person);

            for(let i = 0; i < keyArr.length; i++) {
                console.log(person[keyArr[i]]);
            }

            keyArr.forEach(k=>console.log(person[k]));
        }

        function makeObject() {
            // 방법1. 리터럴 방식으로 세팅.
            let person = {name:'hong', email:'hong@naver.com', age:30};

            // 방법2. 동적으로 키와 값을 추가.
            let person2 = {};
            person2.name='kim';
            person2.email='abc@naver.com';
            person2.password='1234';
            person2['age']=30;
            console.log(person2);

            // 단축 속성명 방식 : key와 value값이 동일하게 사용될 때 간편하게 객체 생성하는 방식식
            const name = 'lee';
            const age=30;
            const person3={name, age};
            console.log(person3);

            const obj1 = {key1:'value1'};
            const obj2 = {obj1}; //{obj1:{key1:'value1'}}
            console.log(obj2);

            // 스프레드 문법 : ...키워드를 통해 obj3객체의 요소를 obj4에서 사용.
            const obj3 = {a:1, b:2};
            const obj4 = {...abj3, c:3};

        }

        function makeArr() {
            let fruits = ['사과', '바나나','오렌지'];
            // 배열요소 추가 : push
            fruits.push('포도');
            console.log(fruits);
            // 배열요소의 마지막 꺼내기 : pop
            console.log(fruits.pop());
            console.log(fruits);

            // 배열의 접근 : 배열명[index];
            console.log(fruits[0]);

            // 배열요소의 수정
            fruits[0] = '망고';
            console.log(fruits);

            // for문 기본
            for(let i = 0; i < fruits.length; i++) {
                console.log(fruits[i]);
            }

            // foreach문
            for(let f of fruits) {
                console.log(f);
            }

            // 함수형프로그래밍 foreach
            fruits.forEach(f=>console.log(f));
            fruits.forEach((a,b)=>console.log("a : " +a+"  b : "+b));

            // filter
            const nums = [1,2,3,4,5,6];
            const newNums = nums.filter(a=>a%2==0);
            console.log(newNums);

            // map
            const newNums2 = nums.map(a=>a*a);
            console.log(newNums2);

            // 스프레드 문법
            const newNums3 = [...nums,7,8,9];
            console.log(newNums3);

        }

        function makeObjectArr() {
            const arr = [{name:'hong1',age:20},{name:'hong2',age:25},{name:'hong3',age:30}];
            console.log(arr);
            const newArr = arr.filter(a=>a.age >= 30);
            console.log(newArr);

            // for문을 통한 배열내의 객체 요소 원본 변경
            // for(let i = 0; i < arr.length; i++) {
            //     arr[i].email='test@naver.com';
            // }

            const newArr2 = arr.map(a=>{return {...a, email:'test@naver.com'}});
            console.log(newArr2);

        }

        function convertType() {
            let numStr = "10";
            let str = "hello";
            let num1 = Number(numStr);
            console.log(typeof num1);
            num1 = String(num1);
            console.log(typeof num1);
            let num2 = Number(str);
            // NaN(Not a Number) 담김.
            console.log(num2);

            // ==(값체크) ===(타입까지체크)의 차이
            console.log(10=='10'); //true
            console.log(10==='10'); //false

            let var1;  //undefined
            let var2=null;  //null
            console.log(var1==var2);  //true
            console.log(var1===var2); //false
        }
    </script>
</head>
<body>
    <h2>js객체</h2>
    <button onclick="showObject()">객체 조회</button>
    <button onclick="makeObject()">객체 생성</button>
    <button onclick="makeArr()">배열 생성</button>
    <button onclick="makeObjectArr()">배열안에 객체 생성</button>
    <button onclick="convertType()">형변환</button>
</body>
</html>