JavaScriptベースの整理

JavaScriptベースのクリーンアップ

ES6
最も一般的なjavascript標準構文の1つ

(1) Class

等級は何ですか.
オブジェクト向けプログラミングでは、クラスとは、特定のオブジェクトを生成するために変数と関数を定義するフレームワークです.
オブジェクトの状態と関数を定義します.
コードを再利用するには、オブジェクト単位でグループ化します.
1)構成クラス
クラスには、オブジェクトを定義するためのステータス(property)と関数が含まれます.

class Cat {
    // 생성자 함수
    constructor(name) {
        // 여기서 this는 이 클래스입니다.
        this.name = name;
    }

    // 함수
    showName() {
        console.log(this.name);
    }
}

let cat = new Cat('perl');
cat.showName();
console.log(cat);

-コンストラクション関数:クラスインスタンスを作成し、作成したインスタンス(初期値が設定されていると思われる)のロールを初期化します.
-関数:何かをする関数
2)クラスを継承しますか?
継承クラスとは、作成したクラスでサブクラスを作成することです.

class Cat {
    // 생성자 함수
    constructor(name) {
        // 여기서 this는 이 클래스입니다.
        this.name = name;
    }

    // 함수
    showName() {
        return this.name;
    }
}

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
    // 생성자 함수
    constructor(name, age) {
        // super를 메서드로 사용하기
        super(name);
        this.age = age;
    }

    // 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
    // 오버라이딩한다고 해요.
    showName() {
        // super를 키워드로 사용하기
        return '내 고양이 이름은 ' + super.showName() + '입니다.';
    }

    showAge() {
        console.log('내 고양이는 ' + this.age + '살 입니다!');
    }
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

スーパーキーワード
-メソッドとして使用できます.(コンストラクション関数で)
-親のコンストラクション関数を呼び出してパラメータを渡します.
-これを使え
-キーワードとして使用できます.
-親のフィールドまたは関数を参照できます.

(2)let、const、Scope

スキャンとは?
変数を宣言するときに使用できる変数の有効範囲をscopurと呼びます.すなわち、変数の範囲に近づくことができる.
-var:関数単位
-let:block単位(変数:letとして宣言された変数は値を変更できます).
-cont:block単位(定数:宣言された値は一度に変更できません)

function scope() {
    const a = 0;
    let b = 0;
    var c = 0;

    // {} 증괄호 안에 든 내용을 블럭이라고 표현해요.

    if (a === 0) {
        const a = 1;
        let b = 1;
        var c = 1;
        console.log(a, b, c);
    }
    // 앗! c는 값이 변했죠? 
    // 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
    // let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
    console.log(a, b, c);
}

(3)=と==と==

=
=割当てを表します.
ある変数に値を割り当てるときに使います.

==
==等差に等しい.
タイプの等差を比較しません.変数値に基づいて比較します.
(ex.0="0"はtrueを返します.)

===
==も等差です.
厳格なタイプも比較的等差です.
(ex.0=="0"はfalseを返します.)

(4)Spread演算子(Spread構文)

オブジェクトの要素をオブジェクトの外部から取り出す構文.

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);

(5)条件3項演算子

3つの演算子はif文の略です.
使用方法:
条件.もし本当なら:偽物なら

let info = {name: "mean0", id: 0};
let is_me = info.name === "mean0"? true : false;

console.log(is_me);

一般的なArrayの組み込み関数

4つの共通Array内蔵関数map、filter、concat、from

(1) map

mapは、配列内のアイテムを変換するためによく使用されます.
配列に属する項目を必要な値に変換し、変換後の値を新しい配列に変換します.
すなわち,元の配列の特徴は値が変わらないことである.

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ 
    return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array);
// 원본 배열은 그대로 있죠!
console.log(array_num);

(2) filter

filterは、いくつかの条件を満たす項目のみを選択し、新しい配列にする関数です.
元の配列は変わらず、必要な配列をもう1つ作成できます.

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
    // 특정 조건을 만족할 때만 return 하면 됩니다!
    // return에는 true 혹은 false가 들어가야 해요.
    return array_item > 3;
});

console.log(new_array);

(3) concat

concatは、配列と配列を結合したり、配列に特定の値を追加したりする関数です.
元の配列は変更されません.

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요?
console.log(merge);

注意!concatは重複項目を除去しません.
重複を削除するには、他の組み込み関数とともに使用する必要があります.
-重複除外方法

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);

(4) from

fromの使い方
-1)アレイまたは類似のアレイとして作成し、新しいアレイとして作成する場合のコピー
-2)新規シナリオ作成時(初期化ともいう)

    **유사배열?**
    [ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다. DOM nodelist같은 게 유사배열이에요.

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});

console.log(text_array);

// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);

組み込み関数の使用

크롬 브라우저를 열고 콘솔 창에서 해보자

(1)猫が何匹並んでいるか数えてみましょう。地図でやりましょう。

次はmapでドアを交換します.

const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];

let count = 0;
for (let i = 0; i < animals.length; i++) {
    let animal = animals[i];
    if (animal === "고양이") {
        count += 1;
    }
}
console.log(count);       

正解確認

const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];

let count = 0;
animals.map((animal) => {
    if (animal === "고양이") {
        count += 1;
    }
});
console.log(count);            

(2)配列にフィルターを使いましょう!

猫を新しい配列に入れましょうか?
下のforドアを見て、filterに変えてみてください.

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = [];
for (let i = 0; i < animals.length; i++) {
    let animal = animals[i];
    // indexOf는 파라미터로 넘겨준 텍스트가 몇 번째 위치에 있는 지 알려주는 친구입니다.
    // 파라미터로 넘겨준 텍스트가 없으면 -1을 반환해요!
    // 즉 아래 구문은 고양이라는 단어를 포함하고 있니? 라고 묻는 구문이죠!
    if (animal.indexOf("고양이") !== -1) {
        cats.push(animal);
    }
}
console.log(cats);

正解確認

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let cats = animals.filter((animal) => {
        return animal.indexOf("고양이") !== -1;
});
console.log(cats);

(3)2つ並べましょう!concatでやってみよう!

下の2つを1つに並べてください!

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];        

正解確認

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

const animals = dogs.concat(cats);

console.log(animals);            

(4)特定の果物の数世紀の問題

アレイ内の特定の要素の数を求めます-関数mapを使用して解決します
次の「イチゴ」は何個ですか?今回はJavaScriptコンソールウィンドウで!

let fruit_list = ['사과', '감', '감', '배', '포도', '포도', '딸기',
    '포도', '감', '수박', '딸기']

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
    let fruit = fruit_list[i];
    if (fruit == '딸기') {
        count += 1;
    }
}
console.log(count);        

map解答

let fruit_list = ['사과', '감', '감', '배', '포도', '포도', '딸기', '포도', '감', '수박', '딸기']
let count = 0;
fruit_list.map((f) => {
    if (f == "딸기") count += 1
})

console.log(count)