2021-12-08 BE

36824 ワード
JavaScript UVC Backend nodejs テキストリンク
ブログのコードソース
Node.js教科書改訂2版(知音趙賢英)

復習する


関数Function()

function()を用いて所望の結果を返す方法はreturn句を用いる.
function() {
return x
}
ここでは、xに所望の値や式を加えることができます.
関数を宣言する方法はいろいろあります.화살표 함수と呼ばれる宣言法です.
1. function add1 (x,y) {};
2. const add2 = (x,y) => {};
3. const add3 = (x,y) => {x,y}

文字列String


文字列の接続方法
数字タイプと文字タイプを合わせると+文字列です.
文字列を付けるには2つの方法があります.
1.+演算子の使用
2.${문자열 변수명}を使用する場合、+演算子は使用されません.

アレイ[]


2種類あります.
1. let A = new array('1','2'...)
2. const A =['1','2'...]
推奨される方法は、2番目のconstおよび括弧[ ]を使用することである.
そうかんかんすう
1. concat()
2.

オブジェクト{}


メソッドの宣言
const 객체명 {};
オブジェクトの内容には、属性名と属性値があります.(キー値、キー値とも呼ばれる.)
フォーマットは속성명:속성값属性値は、変数、定数、関数、配列、オブジェクトなどに使用できます.
オブジェクトにアクセスする方法は객체명です.속성명.
  • thisコマンド
    使用方法thisまたはthis.속성명これは前の변수名を指す.(ここで、변수は通常、オブジェクト名である.)

    • 復習する実習


    下[原句]二番目の問題を始めましょう.
    1.変数
  • 変数num 1初期化1(number)
  • 変数num 1コンソール印刷
  • 変数num 2で初期化2(number):
  • 変数num 2コンソール印刷
  • 変数num 1およびnum 2をコンソール印刷
    • に加算する.
  • 変数num 1、num 2の減算値をコンソールに印刷
  • 変数str 1初期化「こんにちは」
  • 変数str 1コンソールで
    • を印刷
  • 変数str 2初期化「ようこそ」
  • 変数str 2コンソールで
    • を印刷
  • 変数myNameで独自の名前
    • を初期化(初期)
  • 変数str 3の間に変数myNameを挿入します.「こんにちは、私は(myName)」
  • 変数str 3コンソールで
    • を印刷
    <html>
  <body>
    211208 오전 복습
  </body>
</html>

<script>
  let num1 = 1
  console.log(num1)

  let num2 = 2
  console.log(num2)
  console.log(num1+num2)
  console.log(num1-num2)

  let str1 = "안녕하세요"
  console.log(str1)
  let str2 = "반갑습니다"
  console.log(str2)

  let myName = "김예찬"
  let str3 = `${str1 } 저는 (${myName}) 입니다`
  console.log(str3)
</script>
  • 関数
  • コンソールの「関数func 1」印刷された関数func 1(functionとして定義)
    • を作成します.
    呼び出し
  • 関数func 1
    • 関数func 2(変数=関数として定義)を作成し、
  • 「関数func 2」を返します.
  • 関数func 2コンソール
    • に印刷
    関数func 3(矢印関数として定義)を作成し、
  • の数値20を返します.
    関数func 4(矢印関数として定義)を作成し、
  • の数値10を返します.
  • 関数func 3、func 4をコンソールに
    • 追加
    関数func 5(矢印関数として定義)を作成し、
  • 関数func 3、func 4から減算した値を返します.
  • 関数func 5コンソール
    • に印刷
    <script>
  function func1 () {
    console.log("함수 fun1 입니다.")    
  }
  func1()

  const func2 = () => {
    const funtion = "함수 func2 입니다"
    console.log(funtion)
    return funtion
  }
  func2()

  const func3 = () => 20
  const func4 = () => 10
  console.log(func3()+func4())

  function func5 () {
    return (func3()-func4())
  }
  console.log(func5())
</script>
  • アレイ

  • 変数arr 1で数値1,2,3,4を初期化する

  • 変数をarr 1コンソールに印刷

  • 変数arr 1に数値5を追加

  • 変数をarr 1コンソールに印刷

  • 変数arr 1の最後のアイテムを削除

  • 変数をarr 1コンソールに印刷

  • 変数arr 2で数値5、6、7、8を初期化

  • 変数をarr 2コンソールに印刷

  • 変数arr 2に数値9を追加

  • 変数をarr 2コンソールに印刷

  • 変数arr 2の最後のアイテムを削除

  • 変数をarr 2コンソールに印刷

  • 変数arr 3上でarr 1とarr 2の値を初期化する

  • 変数をarr 3コンソールに印刷

  • 変数arr 4でarr 2とarr 1の値を初期化する

  • 変数をarr 4コンソールに印刷
    • <script>
  const arr1 = [1,2,3,4]
  console.log(arr1)
  arr1.push(5)
  console.log(arr1)
  arr1.pop()
  console.log(arr1)

  const arr2 = [5,6,7,8]
  console.log(arr2)
  arr1.push(9)
  console.log(arr2)
  arr1.pop()
  console.log(arr2)

  const arr3 =arr1.concat(arr2)
  console.log(arr3)
  const arr4 =arr2.concat(arr1)
  console.log(arr4)
</script>
  • オブジェクト

  • オブジェクトpersonに名前、年齢、誕生日プロパティを追加

  • オブジェクトpersonに関数funcを追加して「オブジェクトに関数を含める」を返します.

  • 数値1,2,3を含む配列プロパティをオブジェクトpersonに追加

  • オブジェクトpersonのnameプロパティに「オブジェクト内のオブジェクト」文字列(string)を挿入

  • 印刷オブジェクトperson

  • 印刷オブジェクトpersonのプロパティname

  • 印刷対象personのプロパティage

  • 印刷オブジェクトpersonのプロパティbirthday

  • 印刷オブジェクトpersonのプロパティ配列0インデックス値

  • 印刷オブジェクトpersonのプロパティ配列の最初のインデックス値

  • 印刷オブジェクトpersonのプロパティ配列の2番目のインデックス値

  • 印刷オブジェクトpersonのプロパティfunc

  • 印刷オブジェクトpersonのプロパティob

  • 印刷オブジェクトpersonのプロパティobのname
    • <script>
  const person = {
    name : "kim",
    age :"31",
    birthday : "910204",
    func(){
      return"객체안에 함수"
    },
    array:[1,2,3],
    ob:ob={
      name:"객체안에 객체"
    }
  }
  console.log("person : ",person)
  
  console.log("person name: ",person.name)
  console.log("person age: ",person.age)
  console.log("person birthday: ",person.birthday)

  console.log("person array0: ",person.array[0])
  console.log("person array1: ",person.array[1])
  console.log("person array2: ",person.array[2])

  console.log("person func: ",person.func())
  console.log("person ob: ",person.ob)
  console.log("person ob.name: ",person.ob.name)

</script>

    授業に出る


    ES2015+


    構造分解の割り当て


    array[]分配構造分解p.73

    let array = ["Baram", "Lee"]
let [firstname,lastname] = array
    以上のように,arrayという配列を構造分解配分した.
    変数を宣言して配列に初期化する性質があります.
      const firstName = array[0]
  const lastName = array[1]
    その利点は、
  • 符号の長さを短縮できることである.
    ※特定の配列だけを配列中に分解したい場合は、不要なものをスペースとして残すことができます.let [,lastname] = array

    • 割当てオブジェクト{}構造分解p.72


    次の最初のコードも,オブジェクトを構造分解して割り当てる方法である.
      const option = {
    title: "home",
    width: 300,
    height: 500
  }

  const title = option.title
  const width = option.width
  const height = option.height
    下図のように簡単です.
      const option = {
    title: "home",
    width: 300,
    height: 500
  }
  
  const {title, width, height} = option

    以下のように特殊に使用できます.
    姉妹:babyのように属性値に変数を指定できます.
    祖父のように新しい属性を追加できます.
      let family = {
    grandmother : "Harrison",
    sister: "Ethan",
    brother: "Austin"
  }
  // const brother = family.brother
  // const baby = family.sister
  // const grandmother = family.father

  const { grandmother, sister:baby,brother, grandfather="Hudson"} = family
  console.log(baby)

    ※オブジェクトで1つの属性を分解したい場合は、1つの属性を作成するだけです.const { brother } = famaily

    プロミズp.75


    JSとNODEJSは主に非同期に接触する.特にイベントリスナーを使用する場合、コールバック関数がよく使用されます.ES 2015からJSとNODEJSのAPIは、コールバックではなくPromise(Promise)をベースにしており、悪名高いコールバック地獄(Callbackhell)現象を克服したと評価されている.
    プロミスは理解しなければならない対象だ.
  • コールバック関数->再呼び出し関数

    • 非同期処理とは?


    JSの特性は、特定の演算を実行および終了する前に、以下のコードを実行することである.
    例)
    add 1()、add 2()関数があります.
    add1();//運転時間1分
    add2();
    上記の手順で関数を実行し、add 1()の演算完了時間は1分です.
    add 1()とadd 2()を実行するのに数ミリ秒しかかかりません.
    add 1()演算結果をエクスポートする前にadd 2()を実行するか、add 2()がadd 1()より先にエクスポート結果を実行します.

    コールバックとは?

    <script>
  const wait_count = (callback) => {
    console.log('ONE')
    setTimeout(()=>{
      console.log('TWO')
      callback()
    } , 1000)
  }
  const count3 = () => console.log('THREE')
  
  wait_count(count3)
</script>

    例1
      function buyCoffee(coffeeName, price, quantity, callback)
  {
    console.log(`${coffeeName}를 ${quantity}개 구입하려 합니다.`)
    console.log(`${coffeeName} 한 개 ${price}원 입니다.`)
    setTimeout(()=>{
      //return price*quantity
      callback(price*quantity)
    },1000)
    
  }
  //buyCoffee('카라멜 마끼아또', 5000, 3)

  function pay(money){
    console.log(money, "원을 지불 하였습니다.")
  }

  buyCoffee('카라멜 마끼아또', 5000, 3, pay)

    例2
      function buyCoffee(coffeeName, price, quantity, callback)
  {
    console.log(`${coffeeName}를 ${quantity}개 구입하려 합니다.`)
    console.log(`${coffeeName} 한 개 ${price}원 입니다.`)
    setTimeout(()=>{
      //callback(price*quantity)
      callback(quantity)
    },1000)
    
  }
  //buyCoffee('카라멜 마끼아또', 5000, 3)

  function pay(money){ //커피값 계산 결과 출력 함수
    console.log(money, "원을 지불 하였습니다.")
  }

  function quantity(num){ //주문 수량 출력 함수
    console.log(`주문하신 수량은 ${num} 개 입니다.`)
  }
  
  buyCoffee('카라멜 마끼아또', 5000, 3, quantity)

    同時出力例1+例2
      function buyCoffee(coffeeName, price, quantity, callback,callback1)
  {
    console.log(`${coffeeName}를 ${quantity}개 구입하려 합니다.`)
    console.log(`${coffeeName} 한 개 ${price}원 입니다.`)
    setTimeout(()=>{
      callback(price*quantity)
      callback1(quantity)
    },1000)
    
  }
  //buyCoffee('카라멜 마끼아또', 5000, 3)

  function pay(money){ //커피값 계산 결과 출력 함수
    console.log(money, "원을 지불 하였습니다.")
  }

  function quantity(num){ //주문 수량 출력 함수
    console.log(`주문하신 수량은 ${num} 개 입니다.`)
  }
  
  buyCoffee('카라멜 마끼아또', 5000, 3, pay, quantity)

    外で定義したpay()関数をコールバック関数として関数化する.
    コールバックという関数があり、外に定義されています(pay()...
      let ramenList = ''

  const addSamyang = (name) => {
    ramenList = name
    console.log(ramenList)
    setTimeout(addShin, 500, '신라면')
  }
  const addShin = (name) => {
    ramenList += ', ' + name
    console.log(ramenList)
    setTimeout(addJin,500,'진라면')
  }

  const addJin = (name) => {
    ramenList += ', ' + name
    console.log(ramenList)
    setTimeout(addNuguri,500,'너구리')
  }

  const addNuguri = (name) => {
    ramenList += ', ' + name
    console.log(ramenList)
  }

  //addSamyang('삼양라면')
  setTimeout(addSamyang, 500,'삼양라면')

    callback_hell


    settimeout()関数は、実際には3番目のパラメータを入力できます.
    settimeout(名称)=>{console.log(名称)},1000,「金礼賛」
    すると、結局1秒後に金礼賛が出力された.
    次はcallbackを用いて最初の「グーグー」出力後、0.5秒ごとに次の文字列を出力するコードです.
      setTimeout((name)=>{
    let ramenList =name
    console.log(ramenList)
    setTimeout((name) => {
      ramenList += ', ' + name
      console.log(ramenList)
      setTimeout((name) => {
        ramenList += ', ' + name
        console.log(ramenList)
        setTimeout((name) => {
          ramenList+= ', ' + name
          console.log(ramenList)
        }, 500,'어딜감히 삼양라면');
      },500,'불마왕')  
    },500,'신라면')
  },500,'꼬꼬면')

    コールバック説明ブログ


    (参照:https://dalkomit.tistory.com/65)

    Promise(promise object)

    <html>
  <body>
    promise object
  </body>
</html>

<script>
  new Promise((resolve)=>{
    let name = '삼양라면'
    resolve(name) //여기 name변수가 아래 .then(result로 들어간다)

  })
  .then((result)=>{
    console.log(result)

  })
</script>
  • .もう一度使えばundefinedが得られます.
  • 大尉.その後promise()と発表されれば下位です.その時に使えます.
    • 以下は通常のコールバックのようにsetTimeoutを設定したときです.
  • 2setTimeoutを使用していても、一般的な場合は次の.thenに移動します.
    しかしその結果、それぞれのresolve運転が完了し、次の.thenに移行した.
    理由は….これはPromise()の固有の機能です.Promise()は、対応するresolveの運転を待機し、次の段階に進む.
    • <script>
  const addRamen = (name, prevName) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        let newName = ''
        if(prevName) {
          newName = `${prevName}, ${name}`
        } else {
          newName = name
        }
        console.log(newName)        
        resolve(newName)
      }, 500);
    })
  }
  addRamen('삼양라면')
  .then(ramenList => addRamen('신라면', ramenList)) // '삼양라면', '신라면'
  .then(ramenList => addRamen('진라면', ramenList)) // '삼양라면', '신라면', 진라면
</script>
    エラー
    [clean Code] TIL(22.02.25)