[0617]Java Web開発プロセス🌞

Set

let set = new Set();
set.add(5);
set.add(5);
set.add(5);
set.add(6);

console.log(set.size); // 2, 중복값 제거

let arr = [2, 3, 4, 2, 1, 2, 4, 3, 5, 6, 12];
let lotto = new Set(arr);
console.log(lotto.size); // 7, 중복값 제거

Setオブジェクト値のリスト

let arr = [2, 3, 4, 2, 1, 2, 4, 3, 5, 6, 12];
let lotto = new Set(arr);
console.log(lotto.size); // 7

// 전체를 나열하는 서비스
// 1. foreach: 원래 지원되던 과거의 방법
// -> for-in: 키를 뽑아주는 제어 구조
lotto.forEach(function(v, k, s) { // s: lotto, 키와 값을 뽑아낸 원본
    console.log(`k:${k}, v:${v}`);
})

for(let key in set) {
    console.log(key);
} // 결과 출력 안됨 - ES6에 추가된 for-of 반복문을 통해서 set의 키와 값을 뽑아낼 수 있음

// 2. iterator: es6에서부터 지원하는 새로운 방법
// -> for-of: 값을 뽑아주는 제어 구조
for(let v of arr) {
    console.log(v);
}

Map

値の列挙方法

let exam = new Map();
exam.set("kor", 10);
exam.set("eng", 20);
exam.set("math", 30);

for(let v of exam.values()) {// key 뽑아내기
    console.log(v); // key를 가지고 값 꺼내기
}

// iterator는 for in문 사용 불가
// for of문으로 iterator 반복하기
for(let k of exam.keys()) { // key 뽑아내기
    console.log(exam.get(k)); // key를 가지고 값 꺼내기
} // 결과: 10, 20, 30

for(let [k, v] of exam.entries()) {
    console.log(`key: ${k}, values: ${v}`); 
} 

Default Parameters

function print(x, y=10) {
    console.log("1번: " + arguments.length); // arguments에는 default 값이 아닌 함수로 전달한 값만 들어간다!
    console.log(`2번: x: ${x}, y:${y}`);
}

print(10); // 1번: 1 / 2번: 10, y:10
print(10,30); // 1번: 2 / 2번: 10, y:30
print(undefined); // 1번: 1 / 2번: undefined, y:10

Arrow Function

基本構文

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }

例

let arr = [34, 2, 3, 44, 6, 23, 12, 2, 7, 5];
arr.sort((a, b) => a - b); // 순차정렬
console.log(arr); // [2, 2, 3, 5, 6, 7, 12, 23, 34, 44]

let arr1 = [34, 2, 3, 44, 6, 23, 12, 2, 7, 5];
arr1.sort((a, b) => b - a); // 역정렬
console.log(arr1); // [44, 34, 23, 12, 7, 6, 5, 3, 2, 2]

カプセル化

初期化オブジェクトのジェネレータを作成!

function Exam(kor, eng, math) {
    this.kor = kor;
    this.eng = eng;
    this.math = math;
}

var exam = new Exam(10, 20, 30);
console.log(exam); // {kor: 10, eng: 20, math: 30}

this

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

function Exam(kor, eng, math) { 
    // console.log(this); // Exam 객체(아래에서 new Exam()을 통해 객체를 생성해줬기 때문)
    this.kor = kor; 
    this.eng = eng;
    this.math = math;

    this.total() = function() {
        return this.kor+this.eng+this.math;
    }
}

let exam = new Exam(10, 20, 30);
console.log(exam.total()); // 60

Function vs Instance Method

Prototypeパッケージの使用

function Exam() { 
    // console.log(this); // Exam 객체
    this.kor = 0; 
    this.eng = 10;
    this.math = 20;
}

// prototype 정의
Exam.prototype.aa = [1,2,3]; 
Exam.prototype.total = function() {
    return this.kor+this.eng+this.math;    
}

let exam1 = new Exam();
let exam2 = new Exam();
console.log(exam1.total === exam2.total); // true
console.log(exam1.aa === exam2.aa); // true

クラス定義

例

class Exam { // Exam 클래스 정의
    constructor(kor, eng, math) { // 생성자
        this.kor = kor;
        this.eng = eng;
        this.math = math;
    }

    total() { // Prototype
        return this.kor+this.eng+this.math;
    }
}

let exam = new Exam(10, 20, 30);
let exam1 = new Exam(1, 2, 3);
console.log(exam.total()); // 60
console.log(exam1.total()); // 6

コメントサイト