DREAMコード2付きJavascript

1.Arrow Functionとは何ですか。関数の宣言と表示

1.関数の基礎

デフォルト

関数はオブジェクトです.(変数、パラメータ、コールバックでも構いません.)

function printHello(){
    console.log('hello')
}

printHello();

function log(message){
    console.log(message);
}

log('Hello')
log(12345)

function log(message : string) : number
함수     /             / 타입     /  리턴

javascriptのタイプは明確ではなく、いくつかの難解な点があります:

Object

function changeName(obj){
    obj.name = 'coder';
}

const ellie = {name : 'ellie'};
changeName(ellie);
console.log(ellie)
>>>{ name: 'coder' }

// object는 ref로 메모리에 저장되어 위의 함수에서 name이 메모리에 적용된 것

default parameter:個別に指定されていないパラメータに未知のパラメータを指定し、disport値

を格納できます.

Rest Parameter : ...

(タイル転送)

function printAll(...args){
  for (let i = 0; i<args.length; i++){
    console.log(args[i]);
  }
}

printAll('dream','coding', 'ellie')

>>>
'dream'
'coding'
'ellie'

Pythonのような方法もあります

for (const arg of args){
  console.log(arg)
}

2.scope：ゾーン/グローバル変数

外には中が見えないので、中から外を見るしかありません.

3.return:すべての関数が返されます

early return, early exit?
->条件が正しくない場合は、すぐに戻り、条件が正しい場合にのみ論理

を実行します.

4. callback-hell

function randomQuiz(answer, printYes, printNo){
  if (answer === 'love you'){
    printYes();
  } else {
    printNo();
  }
}

const printYes = function() {
  console.log('yes!')
};

const printNo = function() {
  console.log('No!')
}

randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

>>> No! / Yes!

ここで立ち上がれば立ち上がれますコールバックに関する復習は後ほどのレッスンでお願いします

5. arrow function

function() {} -> "() =>"

const add = function (a,b) {
return a+ b};

-> const add = (a, b) => a + b;

6.IIFE：関数宣言+呼び出し

(function hello() {
  console.log('IIFE')
})();

(かっことかっこ)

2.クラスとオブジェクトの違い（クラスとオブジェクト）；オブジェクト向け言語クラスのクリーンアップ

1.class:属性+メソッド

byオブジェクト向け言語

ES 6以降の新規コンテンツ

構文のみがクラスであり、

が蓄積されます.

1.例

class Person{
  constructor(name, age){
    // 생성자
    this.name = name;
    this.age = age;
  }
  	// 메서드
    speak(){
    console.log(`${this.name}: hello`)
  }
}

const ellie = new Person('ellie', 20)
console.log(ellie.name, ellie.age)
ellie.speak();

ほとんどpython classと...本当に似てる(インスタンスの作成と同様)

2.getter/setter：ユーザーが誤った値を入力しないようにする

class User{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
  
  get age(){
    return this.age;
  }
  set age(value){
    this.age = value;
}
}

const user1 = new User('Steve', 'Job', '-1');
console.log(user1.age);

これで?

「RangeError:Maxim call stack size超過」:無限繰返し
<最終修正>

class User{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
  
  get age(){
    return this._age;
  }
  set age(value){
    if (value < 0){
      throw Error('age can not be negative')
    }
    this._age = value;
}
}

const user1 = new User('Steve', 'Job', '-1');
console.log(user1.age);

3.public/private/static(クラス本シリーズ共通)

テクノロジーが先進的すぎて、参考にしてください(後述のスクリプトを参照).

4.継承/多様性

継承例

class Shape {
  constructor(width, height, color){
    this.width = width;
    this.height = height;
    this.color = color;
  }
draw(){
  console.log(`drawing ${this.color} color of`);
}

getArea() {
  return this.width * this.height;
}
}

// 상속 받는 클래스
class Rectangle extends Shape {}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw()

overriding

class Rectangle extends Shape {}
class Triangle extends Shape {
  getArea() {
  return this.width * this.height / 2;
}}


const rectangle = new Rectangle(20, 20, 'blue');
rectangle.getArea()

const triangle = new Triangle(20, 20, 'red');
triangle.getArea()

特定の機能を継承して変更する場合は

です.
サブメソッドで

親のメソッドを使用する場合、super.~(Pythonと同じ)

クラスから派生したインスタンス

をどのように知るか

console.log(rectangle instanceof Rectangle);

3.整理対象

1. object?

1.基本概念

key、valueの集合です.

変数には1つの値しか含まれません->いくつか入れたいです.

データ管理の合理化

:{}を作成する方法で、クラス(newobject)を作成できます.

動的変更(実行時でも追加、削除)->停止
e.g)上で思う存分作って、他の場所に要素を入れて...

2.方法

ellie.name(コードの瞬間)or ellie[「name」](正確な値が分からないので、好奇心があれば)
jsonデータを受信したときに何が届くか分からない[]と書かれたPythonに似ています

2.速記（繰り返しても面倒ではない）&constructor Function

関数を作成します.ただし、戻り値ではキーのみ

の方が簡単ですか?:クラスの作成

3.in演算子(鍵はありますか?)

console.log('name' in ellie)

4. for in / for of

for (key in ellie){
  console.log(key)
}
; key 출력

for (value of array){
  console.log(key)
}
; value 출력

5.オブジェクトコピー

const user4 = {}
Object.assign(user4, user);
console.log(user4);

4. array & API

ウサギとニンジン:対象

:資料構造

ダイナミックタイプ...一つのかごにはいろいろなデータが入っていますが...つり上げる

データ構造とアルゴリズム:検索、挿入、ソート、削除効率

1.シナリオの作成と使用

const arr1 = new Array or [1, 2]

他の方法はPythonに似ています

foreachなど少し違う方法

各配列のValueは、私が渡した関数を出力します.

push, unshift, pop, shift... (前回清掃確認)

shift,unshift:データ処理速度自体が遅い.(データ位置のため)

splice:インデックスを開始~何個削除しますか?新しいを削除して追加できます)

concat(タイル)=タイル

indexOf(「内容」):何回目?(もし-1;ちょっとPython findの感じがしなかったら)

include(「内容」):ありますか?

Pythonのレイアウトを学ぶときもそうですが、Googleゲームをするときは、必要なときに探して使って、ゆっくり慣れていくのもいいですね.

5.10種類の配列関数&API

Pythonとの類似点と相違点の表示

1.join（分解配列）

const fruits = ['banana', 'apple', 'orange'];
const result = fruits.join()
console.log(result);
>>>'banana,apple,orange'

このときjoinに「,」を入れると、Pythonのように並び、休憩時に適用して印刷することができます.

2.split：Joinと反対

const fruits = 'banana,apple,orange';
const result = fruits.split(',');
console.log(result)

Pythonのコンセプトとは少し違います

3. array.reverse()

アレイ逆

4. array.slice()

0~n-1にのみ切ります.

4. array.find()

array.find(function (student)=>return student.score === 90;)
  // 순차적으로 호출될 때 90점인 학생 리턴

api

は、対応する要素を返します.

5. .map()

コールバック関数を呼び出し、

配列のすべての要素を加工値で置き換えます.

const result = students.map((student)=> student.score)
// 원래 객체인데 점수만 있는 배열 만들기

6. some()

const result = students.some((student)=> student.score < 50)
// 한 사람이라도 50점 미만안거 있나?

eachのすべての値は

である必要があります.

7. reduce(prev, curr)

順次転送
1 2
2 3
3 4...
(値を積算!)
すべての値の合計は

です.

還元権利:逆に

例:平均学生点数

const result = students.reduce((prev, curr) => prev + curr.score, 0)
console.log(result / student.length -1)

平均などもっと簡単な方法はありませんか?