ES 6の再学習は遅かれ早かれ返却します.

10150 ワード

このシリーズのブログはES 6の基礎文法の使用とまとめです.間違いがあれば、ご指摘ください.ES 6の出てくる混はいずれ返すべきです.(四)主にアラー・from()、アラー・オブ()、find()/findIndex()、some()/every()、Promise、ES 6対象強化書き方が含まれます.
Aray.from()/Aray.of()
この二つの方法はプロトタイプの上の方法ではなく、直接使ったらエラーが発生します.
let arr = [1,2,3];
console.log(arr.from());
//Uncaught TypeError: arr.from is not a function

console.log(arr.of()); 
//Uncaught TypeError: arr.of is not a function
Aray.from()
1.使用法は、クラスの配列オブジェクトまたはエルゴードオブジェクトを本物の配列に変換するために使用されます.
クラスの配列オブジェクトは何ですか?
インデックス属性(数値)を持ち、length属性を持つオブジェクト.例えばNodeListオブジェクト
対象は何ですか?
聞いてはいけません.つまり前の二つのノートを見に行きます.
(1)フォーマット:Array.from(arrayLike[, mapFn[, thisArg]])(2)パラメータ:
  • arrayLikeは、行列の擬似配列オブジェクトまたは反復オブジェクトに変換したい.
  • mapFnは任意であり、このパラメータが指定された場合、新しい配列の各要素はこのコールバック関数を実行する.
  • thisArgは、任意でコールバック関数mapFnを実行する場合に、thisオブジェクトを実行します.
  • (3)戻り値:新しい配列例.(4)例
    //  String    
    Array.from('foo'); 
    // [ "f", "o", "o" ]
    
    console.log(Array.from([1, 2, 3], x => x + x));
    // expected output: Array [2, 4, 6]
    Array.from(obj, mapFn, thisArg)のフォーマットはArray.from(obj).map(mapFn, thisArg)に相当する.
    let oLis = document.querySelectorAll('li');
    let num = Array.from(oLis).map(li => li.innerHTML);
    console.log(num); //["1", "2", "3"]
    //   
    let liArr = Array.from(oLis,li => li.innerHTML);
    console.log(liArr); //["1", "2", "3"]
    2.アプリケーションシーン
  • は、関数の中のargmentsオブジェクトを行列に変換してもいいし、出しゃばる一言:この中でも残りのパラメータは、関数パラメータを一つの配列にパッケージ化してもいいと言っています.
    function list(...numbers) {
       console.log(numbers);
    }
    list(1,2,3,4,5);
    
    function list2() {
       console.log(Array.from(arguments));
    }
    list2(6,7,8,9,10);
  • は文字列を文字列配列
    let arr = Array.from('ridiculous');
    console.log(arr);  //["r", "i", "d", "i", "c", "u", "l", "o", "u", "s"]
    
    let str = 'ridiculous';
    let arr2 = str.split('');
    console.log(arr2); //["r", "i", "d", "i", "c", "u", "l", "o", "u", "s"]
  • に変換する.
    Aray.of()
    1.用法Array.of()方法は、パラメータの数やタイプを考慮せずに、可変数パラメータを有する新しい配列例を作成する.
      Array.of() 和  Array コンストラクタ間の違いは、整数パラメータを処理することです.Array.of(7)は、単一の要素が7である配列を作成します. 長さ7の空配列を作成します.7つのArray(7)からなる配列ではなく、7つの空格子点(empty)がある配列を指します.
    let arr = Array(5);
    console.log(arr); //[empty × 5]       5,        
    let arr2 = Array.of(5);
    console.log(arr2); //[5]       1,    5   
    
    let arr = Array(0);
    console.log(arr); //[]
    let arr2 = Array.of(0);
    console.log(arr2); //[0]
    つまり使うということです  undefined 着信データと戻り結果の一貫性を保証することができ、いくつかのパラメータが導入されても、これらの要素からなる配列が返される.Array.of()コンストラクタの不足を補いました.
    let arr = Array(1,2,3);
    console.log(arr); //[1,2,3]
    
    let arr2 = Array.of(1,2,3);
    console.log(arr2); //[1,2,3]
    find()/findIndex()/some()/every()
    find()
    find()方法は、与えられたテスト関数の最初の要素の値を満たす配列に戻る.undefinedを返します.
    条件を満たす最初の一つを見つけたらすぐに停止します.
    1.用法フォーマット:Array()パラメータ:①calbackが行列の各項目で実行する関数で、3つのパラメータを受信します.
  • elementが現在巡回している要素.
  • indexは、現在巡回されているインデックスを選択します.
  • arrayオプション配列自体.
  • ②thisArgは、任意でコールバックを行う場合には、thisのオブジェクトとして使用します.
    値を返します.配列の中で最初に、提供されたテスト関数の要素の値を満たしても、見つけられない場合はundefinedを返します.
    let inventory = [
        {name: 'apples', quantity: 2},
        {name: 'bananas', quantity: 0},
        {name: 'cherries', quantity: 5}
    ];
    
    let cherry = inventory.find(fruit => fruit.name === 'cherries');
    console.log(cherry); // { name: 'cherries', quantity: 5 }
    findIndex()
    findIndex()方法は、与えられた試験関数の最初の要素のインデックスを満たす配列に戻る.見つからなかったら-1に戻ります.1.用法フォーマット:arr.find(callback[, thisArg])パラメータ:①calbackは、配列内の各要素に対して、このコールバック関数を実行し、実行時に自動的に次の3つのパラメータに入ります.
  • element現在の要素.
  • index現在の要素のインデックス.
  • arrayは、findIndexの配列を呼び出します.
  • ②thisArgオプションです.calbackを実行するとthisオブジェクトの値として返します.さもなければ-1を返します
    let cherryIndex = inventory.findIndex(fruit => fruit.name === 'cherries');
    console.log(cherryIndex); //2
    私()
    some()メソッドは、少なくとも1つの要素が供給された関数によってテストされるかどうかをテストします.それはBooleanタイプの値を返します.
    条件を満たす最初の一つを見つけたらすぐに停止します.
    1.用法フォーマット:arr.findIndex(callback[, thisArg])パラメータ:①calbackは各要素の関数をテストするために使用され、三つのパラメータを受け入れる.
  • element配列で処理されている要素.
  • indexオプションの配列で処理されている要素のインデックス値.
  • arrayオプションsome()が呼び出される配列.
  • ②thisArgは、calbackを実行する際に使用するthis値を選択します.戻り値:配列の中の少なくとも1つの要素は、コールバック関数のテストによってtrueに戻ります.すべての要素は、コールバック関数のテストによって返されないとfalseになります.
    let isZero = inventory.some(fruit => fruit.quantity === 0);
    console.log(isZero); //true
    every()
    every()メソッドは、ある指定関数によるテストが可能かどうかをテストします.ブール値を返します.
    falseがあるとすぐにfalseに戻り、後はもう実行しません.
    1.用法フォーマット:arr.some(callback(element[, index[, array]])[, thisArg])パラメータ:①calbackは各要素の関数をテストするために使用され、3つのパラメータを受信することができます.
  • elementは、テストの現在の値に使用されます.
  • indexは、テストのための現在値のインデックスを選択します.
  • arrayは、everyの現在の配列を任意に起動する.
  • ②thisArgがcalbackを実行する時に使う  arr.every(callback[, thisArg]) 値を返します.戻り値:反転関数の毎回の戻り値がtruthyの場合、trueに戻ります.そうでなければfalseに戻ります.
    let allZero = inventory.every(fruits => fruits.quantity === 0);
    console.log(allZero); //false
    Promise
    公式の言い方は長くて臭いです.
    Promiseオブジェクトは、非同期動作の最終的な完了(または失敗)とその結果の値を表すために使用される.
    Promiseコンストラクタが実行されると、直ちにthis関数を呼び出します.  executor 和  resolve 2つの関数は、パラメータとしてrejectに伝達される.executor 和  resolve 関数が呼び出された場合、それぞれプロミスの状態をフルフィルドまたはrejectdに変更します.exectour内部では通常、非同期動作が完了すると(成功するか失敗するかもしれない)promise状態をfulfilledに変更するか、またはrejectを呼び出します. 関数はpromiseの状態をrejectに変更します.もしexector関数にエラーが発生したら、このpromise状態はrejecctedとなります.exector関数の戻り値は無視された.
    1.Promise基本概念1.1 whatpromiseはES 6に追加された非同期プログラミングソリューションです.簡単に言えば、ある未来が終わるイベントの結果が格納されている容器です.文法的には、Promiseはオブジェクトであり、非同期操作のメッセージを取得することができます.rejectによって作成できます.
    1.2 whyはPromiseを通じて実現できます.同期の流れで非同期の操作を表します.コールバック順序の不確実性を解決し、地獄に戻る問題を解決する.
    1.3 howPromise構造関数は、それぞれnew Promise(function(resolve, reject) resolveの関数をパラメータとして受け入れる.それらは2つの関数で、JavaScriptエンジンによって提供されます.自分で配置する必要はありません.rejectの関数は、Promiseオブジェクトの状態を「未完成」から「成功」に変化させ、非同期動作が成功したときに呼び出し、非同期動作の結果をパラメータとして伝達する役割を果たしている.resolveの関数は、Promiseオブジェクトの状態を「未完成」から「失敗」に変化させ(PendingからResolvedに変化させる)、非同期動作に失敗したときに呼び出し、非同期動作が報告されたエラーをパラメータとして伝達する役割を果たしている.
    let p = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/*        */){
        resolve(value);
      } else {
        reject(error);
      }
    });
    2.Promise対象の3つの状態(面接で必ず聞く)
  • pending:デフォルト状態で、プロミスの成功か失敗かを説明しない限り、pending状態
  • です.
  • fulfilled:resove関数を呼出しさえすれば、状態はfulfilledになり、操作が成功したことを表します.
  • rejectied:reject関数を呼び出したら、ステータスはrejectiedになり、操作が失敗したことを表します.
    3.Promiseでよく使われる方法は何ですか?それらの役割は何ですか?3.1 Promise.then
  • Promiseの例は、then方法、すなわち、then方法はプロトタイプオブジェクトPromise.prototypeに定義されている.
  • は、Promiseのインスタンスに状態変更を追加する際のコールバック関数として機能する.
  • then方法の最初のパラメータは、rejectied状態のコールバック関数である.
  • 3.2 Promise.catch Promise.catch方法は、エラーが発生した場合のコールバック関数を指定するrejectまたはPendingのシンタックスキャンディーです.
    3.3 Promise.allall方法は、すべてのインスタンスのpromiseの結果が成功した場合、後のthen方法の内容を実行します.もしpromiseのインスタンスがある状態が失敗したら、catch方法を実行します.
    const userPromise = new Promise((resolve,reject) =>{
      setTimeout(() => {
          resolve(['lucy','lily','eli']);
      },2000)
    });
    
    const moviePromise = new Promise((resolve,reject) => {
      setTimeout(() => {
          // resolve({name: '     ',score: '9.8', published: '1964'});
          reject('no movie found');
      },500);
    });
    Promise.all([userPromise,moviePromise])
          .then(response => {
              console.log(response);
              let [user,movie] = response;
              console.log(user);
              console.log(movie);
          })
          .catch(err => console.log(err));
    Rejectedの状態は成功であると既に決定されているので、all方法の返信内容は.then(null, rejection)の状態に依存する..then(undefined, rejection)の状態が成功している場合、all方法はthenの内容を実行する.正規印刷のレスポンス、user、movieがuserPromiseの状態で失敗した場合、all方法はcatchの内容を実行する.誤りを投げ出す
    3.4 Promise.race race方法は、配列の中で最初のpromiseのインスタンスによって返される状態によって決定され、最初のpromiseが戻ってきた状態が成功したら、race方法はthenメソッドの内容を実行する.最初のプロミスの例が失敗した場合、race方法はcatch方法の内容を実行する.
    const userPromise = new Promise((resolve,reject) =>{
      setTimeout(() => {
          resolve(['lucy','lily','eli']);
      },2000)
    });
    
    const moviePromise = new Promise((resolve,reject) => {
      setTimeout(() => {
          resolve({name: '     ',score: '9.8', published: '1964'});
          // reject(Error('no movie found'));
      },500);
    });
    Promise.race([userPromise,moviePromise])
            .then(response => {
                console.log(response);
            })
            .catch(err => console.log(err));
    race方法の実行結果は、先に実行されたmoviePromiseが戻った結果に依存し、moviePromiseの状態が成功した場合、race方法は、then内のコンテンツを実行する.通常の印刷レスポンスがmoviePromiseの状態で失敗した場合、race方法は、catch内のコンテンツを実行する.ミスを出しました.
    let promise = new Promise((resolve, reject)=>{
      console.log('  promise  ');
      resolve('resolved')
    })
    promise.then(res =>{
      console.log(res)
    })
    console.log("      ");
      setTimeout(()=>{
      console.log("      ");
    }, 0)
    実行の順番:私はpromiseの任務です.同期の任務です.resoved、私は延命の任務です.
    ES 6対象強化書き方
    1.過去にオブジェクトを定義する書き方
    const obj = {
      name: 'ghk',
      age: 18,
      gender: 'male',
      greet: function () 
        console.log(hello);
      }
    }
    2.オブジェクトの属性が外から取得された場合は、次のようにすることができます.
    const name = 'ghk';
    const age = 18;
    const gender = 'man';
      
    const obj = {
      name,
      age,
      gender,
      getName(){
        console.log(this.name);
      }
    };