ES 6標準まとめ(let、const、import、export、classなど)

8376 ワード
ES 6概要
ECMAScript 6はES 6と略称し、JavaScript言語の次世代標準であり、2015年6月に正式に発表されました.ECMAScriptとJavaScriptの関係:前者は後者の文法規格であり、後者は前者の実現である.
新しい特性
  • letコマンド宣言の変数
  • 重複した声明は許されない.
    var a = 1;
var a = 2;
console.log(a); //   2

let b = 1;
let b = 2;     //  
console.log(b) ;
  • ブロック級作用領域
    • function f1() {
  let n = 5;
  if (true) {
    let n = 10;
    console.log(n); //   10
  }
  console.log(n); //    5
}
  • 変数アップ
    • が存在しません.
    console.log(a); //   undefined
var a = 1;

console.log(b); //  
let b = 1;
  • const命令文の定数
  • ブロックレベルのスコープ.
  • は、単純なタイプのデータ(数値、文字列、ブール値)に対して、変数が指すメモリアドレスに値を格納するので、定数に等しい.
  • ですが、複合タイプのデータ(主にオブジェクトと配列)に対して、変数が指すメモリアドレスは、複合型変数におけるデータを変更することができます.
    • const s = [5, 6, 7];
s = [1, 2, 3]; //   
s[2] = 45; //     
console.log(s); // returns [5, 6, 45]
  • Object.freeze
    • constは、複合タイプのデータが変更不可能であることを保証することができないので、複合タイプの読み取り専用性を保証するための新しいコマンドが必要です.このコマンドはObject.freezeです.
    let person = {
  name:"XiaoMing",
  review:"yes"
};
Object.freeze(person);
person.review = "no"; //         ，    person      
person.newProp = "age"; //           
console.log(obj); 
// { name: "XiaoMing", review:"yes"}
  • 矢印関数
    • 古い標準の中で、私達はこのように関数を書きました.
    const myFunc = function() {
  const myVar = "value";
  return myVar;
}
    カット関数を使って、それを簡略化できます.
    const myFunc = () => {
  const myVar = "value";
  return myVar;
}
    さらに簡略化してもいいです.returnさえいらないです.
    const myFunc = () => "value"
    矢印関数は、
    //        2，   
const doubler = (item) => item * 2;
  • 展開演算子
  • .構成形成値
  • テンプレート文字列(Template String)
    • ES6には、より強力な文字列の書き方が導入されています.テンプレート文字列と呼ばれ、逆引用符(`)で表示されます.使い方は以下の通りです.
    const person = {
  name: "Zodiac Hasbro",
  age: 56
};

//              ，     greeting  
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting); 
//   ：
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.
    上記のコードの中で、三つのところに注意が必要です.
  • テンプレート文字列の識別子は、単一引用符(')ではなく、逆引用符(`)である.
  • が出力する文字列は複数行であり、
    も必要ありません.
  • 文法${}は、変数を取得するために使用することができ、これまでに+で文字列スティッチングを行うための書き方を簡略化する.
    • // es5
var name1 = "bai";
console.log('hello' + name1);
 
// es6
const name2 = "ming";
console.log(`hello${name2}`);
  • オブジェクトをより簡潔に定義する方法
    • //ES5
const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

//ES6，   `function`     
const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

    // ES5
function people(name, age) {
    return {
        name: name,
        age: age
    };
}

// ES6
function people(name, age) {
    return {
        name,
        age
    };
}
  • class
    • ES6には、classキーワードを使用する新しい構文作成オブジェクトが提供されている.ここのclassのキーワードは文法糖だけで、伝統的な対象に向けた言語のような特性を持っていません.ES5において、私たちはしばしばこのように構成関数を作成する.
    var Person = function(name){
  this.name = name;
}
var person1 = new Person('Jim');
    class文法飴を使って、こう書いてもいいです.
    class Person {
  constructor(name){
    this.name = name;
  }
}
const person1 = new Person('Jim');
    classによって定義されたオブジェクトには、構造関数constructor()が追加され、構造関数はnewに呼び出されたときに起動され、新しいオブジェクトを作成します.
  • は、オブジェクト
    • を、取得関数および保存関数でカプセル化する.classによって定義されたオブジェクトには、現在、自身のキーワードgetおよびsetが存在し、使用もより簡単である.
    class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer(){
    return this._author;
  }
  // setter
  set writer(updatedAuthor){
    this._author = updatedAuthor;
  }
}
const lol = new Book('anonymous');
console.log(lol.writer);  // anonymous
lol.writer = 'wut';
console.log(lol.writer);  // wut
    私たちは貯蓄関数と取得関数を呼び出す方法に注意してください.lol.writer.このような呼び方は関数ではないように見えます.
  • import、export
    • https://www.jianshu.com/p/923f642a59af
    デフォルトでは、JavaScriptのモジュール内のすべてのステートメントはローカルで、外部はアクセスできません.モジュール内の一部の声明の内容を公開し、他のモジュールに使用させる必要がある場合は、エクスポート機能が必要であり、最も簡単な方法は、exportキー導出モジュールを追加することである.
    導出できるコンテンツは、クラス、関数、およびvar、let、およびconst修飾の変数を含む.exportコマンドは、モジュールの一番上にある限り、モジュールの任意の位置に現れることができます.ブロックレベルのスコープ内にいるとエラーが発生します.importコマンドも同じです.
    exportコマンドでモジュールの対外インターフェースを定義した後、他のJSファイルはimportコマンドでこのモジュールをロードできます.
    importコマンドはアップグレード効果があり、モジュール全体のヘッダにアップグレードされます.まず実行します.importは静的に実行されるので、式や変数は使用できません.これらは実行時にのみ結果が得られる構文構造です.
    importの後ろのfromでモジュールファイルの位置を指定します.相対パスでも良いし、絶対パスでもいいです.jsパスは省略できます.モジュール名だけで、パスがないなら、設定ファイルが必要です.JavaScriptエンジンの位置を教えてください.
    //     
import people from './example'

//                ，                   
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())

//     ，    default  ，     
import {name, age} from './example'


//     ,         
export default App

//     
export class App extend Component {};
  • 文字列の拡張
  • includes() 
    • // includes：               
let str = 'hahah';
console.log(str.includes('y')); // false
  • repeat() 
    • // repeat:        n 
let s = 'he';
console.log(s.repeat(3)); // 'hehehe'
  • startsWith()は、パラメータ文字列がソース文字列のヘッダにあるかどうかを示すブール値を返します.
  • endsWith()は、パラメータ文字列がソース文字列の末尾にあるかどうかを示すブール値を返します.
  • 数値の拡張
  • Number.isFinite()はInfiniteを検査する.
  • Number.isNaN()はNaNを検査する.
  • Number.parseInt()
  • Number.parseFloat() ES 6は、大域的な方法parseInt()とParseFloat()をNumberオブジェクトに移植する.このように、グローバル性を徐々に減らすための方法であり、言語を徐々にモジュール化する.
  • Number.isInteger()この方法は、1つの値が整数であるかどうかを判断するために使用される.
  • 配列の拡張
  • Array.from():類似の配列のオブジェクトおよびエルゴードのオブジェクトを真の配列に変換する.
  • Array.of():一組の数値を行列に変換します.例えば、Aray.of(3,11,8)／／［3,11,8］
  • fill()方法は、与えられた値を用いて配列を充填する方法である.例えば、new Aray(3).fill(7)/[7,7,7]
  • 配列例のエルゴード.keys()はキーの名前に対する遍歴であり、values()はキーの値に対する遍歴であり、entries()はキーの値に対する遍歴である.
  • 関数の拡張
  • 関数のパラメータ設定のデフォルト値
    • function greeting(name = "Anonymous") {
  return "Hello " + name;
}
console.log(greeting("John")); //    Hello John
console.log(greeting()); //    Hello Anonymous
  • リセットパラメータ
    • ES6にrestパラメータが導入されており、その形式は... である.restパラメータを使用することにより、関数に異なる数のパラメータを入力することができます.
    function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); //       
console.log(howMany("string", null, [1, 2, 3], { })); //
    restパラメータの変数は配列を表し、すべての配列特有の方法はこの変数に使用できます.
    function push(array, ...items) {
  items.forEach(function(item) {
    array.push(item);
    console.log(item);
  });
}
var a = [];
push(a, 1, 2, 3)
console.log(a)  //   [1， 2， 3]
    restパラメータの後に他のパラメータがないとプログラムがエラーします.
    function add(...values){
    let sum = 0;
    for(var val of values){
        sum += val;
    }
    return sum;
}
add(2, 5, 3); //10
//add         ，  rest                 。
  • 拡張演算子
  • 拡張演算子、3つの点(…)は、1つの配列をカンマで区切られたパラメータシーケンスに切り替える役割を果たしています.
    • console.log(1,...[2,3,4],5);//1 2 3 4 5;
  • 拡張演算子代替配列のappy方法は、拡張演算子が直接に配列を分解することができます.例えば、
    • //ES5
function f(x,y,z){};
var args = [0,1,2];
f.apply(null, args);

//ES6
function f(x,y,z){};
var args = [0,1,2];
f(...args);
  • 拡張演算子は、行列結合の新しい方法を提供する.
    • //ES5
[1,2].concat(more)
//ES6
[1,2, ...more]
  • Promise
    • 同期方式で非同期コードを書きます.
    //       
fetch('/api/todos')
    .then(res => res.json())
.then(data => ({
    data
}))
.catch(err => ({
    err
}));
    Linux-js/linuxシミュレータをWebで実行します.