DREAMコード3付きJavascript

54329 ワード
エンタープライズコラボレーション JavaScript TIL テキストリンク
全体的な概念を捉えてみましょう

1.JSONコンセプトの整理と使用方法


1. JSON to...

const rabbit = {
  name : 'tori',
  color : 'white',
  size : null,
  birthday : new Date(),
  jump:()=>{ console.log(`${name} can jump!`);
        },
  
};


// object to JSON
json = JSON.stringify(rabbit);
console.log(json)

// JSON to object
json = JSON.stringify(rabbit)
const obj = JSON.parse(json)
console.log(obj)

  • 単跳びの方法はありません.(関数)

  • objはstringです.できません.
    • console.log(rabbit.birthday.getDate()) - 29
console.log(obj.birthday.getDate()) -> type error
    どうしよう.
    // JSON to object
json = JSON.stringify(rabbit)
const obj = JSON.parse(json, (key, value) => {
  console.log(`key : ${key}, value : ${value}`)
return key === 'birthday' ? new Date(value) : value;
});

console.log(obj)

console.log(rabbit.birthday.getDate())
console.log(obj.birthday.getDate())

    2. callback

  • javascriptは同期されています.
    • 順序は
  • です.
  • Hoisting??? : var,function decは一番上です.ブート後のコードの表示順序の自動実行
    宣言のいかんにかかわらず、上へ引っ張らなければならない.

    • 1.コールバック関数：


    コメントブログ
    コメントブログ
    リファレンス映像
    リファレンス映像
    非同期関数が実行中の場合、settimeoutで次のアクションを待つ関数(名前の付いていない関数など)
  • example 1 
    • console.log("1")

setTimeout(() => {
  console.log("2");
}, 1000)
// 1초 뒤에 실행하래!
console.log("3")
    順序:非同期、1、3、2
  • example2 
    • function first(a,b,callback){
	let v=a*b;
	callback(v);
}

first(1,2,function(v){
	console.log(v);		//2
})
  • example3 
    • function task(){
  let val = 1+2;
  console.log(val)
}
function atask(){
  // atask는 setTimeout, 즉 예약 거는 것만 함(셋타임 실행)
  setTimeout(function(){
      let val = 1 + 2;
  console.log(val)
    // 얘는 setTimeout이 찍어줌.
  }, 1000);
  // 1초 후에 안에 함수를 실행하달라고 예약하는 코드
  // 예약 걸고 실행하고 하니까 end보다 늦게 뜨는게 맞음
}

atask();
// end가 먼저 찍힘
console.log('end')
// end는 task가 종료되지 않으면 실행할 수 없음
  • 私が作成した例
    • function test (a, b) {
  let result = a + b
  console.log(result)
  
  setTimeout(
  function(){
    console.log("Wait!");
  }, 5000)
}

test(1, 3)

    2.「あとで呼びましょう」

  • でも非同期で使わなければならないのでしょうか?->No
  • 同期
  • 非同期

    • 3.カルバック地獄体験


    1. setting

    class UserStorage {
    loginUser(id, password, onSuccess, onError){
      setTimeout(()=>{
        if (
          (id === 'ellie' && password === 'dream')||
          (id === 'coder' && password === 'academy')
          ){
          onSuccess(id);
        }else{
          onError(new Error('not found'));
        }
      }, 2000)
    }
    getRoles(user, onSuccess, onError){
      setTimeout(() => {
        if(user === 'ellie'){
          onSuccess({name : 'ellie', role : 'admin'});
  }else{
    onError(new Error('no access'))
  }
      }, 1000);
      
    }
  }

    2.通信コードの作成

    const userStorage = new UserStorage();
  const id = prompt('enter your id');
  const password = prompt('enter your password');
  userStorage.loginUser(id, password, 
     (user)=>{
         userStorage.getRoles(user,userWithRole => {
             alert(`Hello, ${userWithRole.name}, You have a ${userWithRole.role}`)

         },
         error => {})
     },
    error =>{
        console.log(error)
    })

    3.質問

  • ダイヤルバックビジネスロジックの理解、読み取り可能性の差
  • デバッグ、問題分析困難
  • メンテナンスが困難
    • 非同期コードをクリーンアップする方法:fromisから~

    4.そもそもcallbackは使わないのですか?


    議論の結果、プロジェクトが大きくなると(ビジネスロジックが大きくなる)、コールバックを放棄するのではなく、上記の原因が発生することが明らかになった.

    3. promise

  • 非同期コード
    • をクリーンアップする

    1.state（実行中？終了？）

  • pending -> fullfilled or rejected

    • 2.生産者/消費者差異


    1.productor:resolveというコールバック関数の例

    const promise = new Promise((resolve, reject)=>{
    // doing some heavy work
    console.log('doing something')
  // 그 순간 바로 통신, 작업 시작
  // 사용자가 요청한 경우에만 해야하면..??! -> 불필요한 통신이 일어나버림..유의 ; setTimeout 등
})

    2. Consumer

    promise.then((value) => {
  console.log(value)
})

    3.じゃあ断る?!

    const promise = new Promise((resolve, reject)=>{
    // doing some heavy work
    console.log('doing something')
  setTimeout(()=>{
    reject(new Error('not network'));
  }, 2000);
})

promise.then((value) => {
  console.log(value)
})

>>> Uncaught (in promise) Error: not network

    4.最後まで流れる(許諾切寧)

  • Python異常処理
    • を考慮


    5.新しい例（非同期例を含む）


    • const fetchNumber = new Promise((resolve, reject) =>{
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
  return new Promise((resolve, reject)=>{
    setTimeout(()=> resolve(num-1), 1000);
  });
})
.then(num => console.log(num))
  • 結果値から入力を省略できるエンクロージャ&errorハンドル
  • の間にエラーが発生したら?:
    • catch(console.log)
  return (대체)

    6.ダイヤルバックの改善

    class UserStorage {
    loginUser(id, password){
        return new Promise((resolve, reject)=>{
            setTimeout(()=>{
                if (
                  (id === 'ellie' && password === 'dream')||
                  (id === 'coder' && password === 'academy')
                  ){
                  resolve(id);
                }else{
                  reject(new Error('not found'));
                }
              }, 2000);
        });

    }
    getRoles(user){
        return new Promise((resolve, reject)=>{
            setTimeout(() => {
                if(user === 'ellie'){
                  resolve({name : 'ellie', role : 'admin'});
          }else{
            reject(new Error('no access'))
          }
              }, 1000);
        })

      
    }
  }

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your password');
  userStorage.loginUser(id, password)
  .then(user => userStorage.getRoles)
  .then(user=alert(`Hello, ${userWithRole.name}, You have a ${userWithRole.role}`))
  .catch(console.log)

    4. async / await

  • Promiseを簡潔でシンプルなキャラクターにする
  • が約束したチェニンは、非動機を動機のように
    • を使用させる.
  • 既存の承諾の簡単なAPI方式で...(文法糖...)

    • 1. async

    function fetchUser(){
  return 'ellie'
  // 10초 걸린다 치면
}

const user =  fetchUser();
console.log(user)
// 비동기 처리 안 하면 진짜 10초 걸리고 다른 데이터가 표시가 안 됨
  • 前のレッスン:呼び出しプロセスコールバック関数による非同期呼び出し
    • function fetchUser(){
  return new Promise((resolve, reject)=>{
  return 'ellie'    
  })
}

const user =  fetchUser();
console.log(user)
>>>Promise { <pending> }
// 팬딩 상태 ; resolve, reject를 꼭 해줘야 결과가 바뀜
    しかし、これらの直接運転をしない方法はasyncです.

    example

    async function fetchUser() {
  return 'ellie'
}

const user = fetchUser();
user.then(console.log);
console.log(user)

    2. await


    example

    function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple(){
  await delay(3000);
  // 3000 기다줌
  return 'apple'
}

async function getBanana(){
  await delay(3000);
  // 3000 기다려줌
  return 'banana'
}

async function pickFruits(){
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`;
}
pickFruits().then(console.log);
  • は,自然にコードを書くように,実際に非同期処理が発生している.

    • に質問


    関係のないりんごとバナナが待っている
    async function pickFruits(){
  const applePromise = getApple();
  const bananaPromise = getBanana();
  // 만들자 마자 실행함
  
  const apple = await applePromise;
  const banana = await bananaPromise;
  // 되는데로 기다렸다가 바로 실행함, 독립적, 병렬적
  return `${apple} + ${banana}`;
    でもこれは汚いです.

    3. API


    1.改善

    function pickAllFruits(){
  return Promise.all([getApple(), getBanana()]).then(fruits=>fruits.join(' + ')
                                                    );
}
pickAllFruits().then(console.log)

    誰が先に来ますか。

    function pickOnlyOne(){
  return Promise.race([getApple(), getBanana()]);
}

pickOnlyOne().then(console.log)
  • アップルの発売は速く、
    • How To Compile OpenCV based programs in Linux
    IllegalStateException-要求からparamを取り出す