ES 6新特性(前編)
43941 ワード
let基本用法
ES 6は、変数を宣言するletコマンドを追加しました.その使い方はvarに似ています.
上記のコードでは、let、varで変数を宣言し、これらの2つの変数を呼び出すと、正しい値が得られますが、両者の間には次の例のような違いがあります.
上のコードではそれぞれlet,varで変数を宣言し,コードブロックの外で呼び出すと,letで宣言された変数がエラーを報告し,varで宣言された変数は正しい値を返した.これはletが宣言した変数がその存在するコードブロックでのみ有効であることを示している.注意:変数名命名規則●見名知義●キーワードや予約文字は使用できない●アルパカマークに従う●変数名は重くできない(誤報する)
let変数リフトは存在しません
varコマンドでは、「変数の昇格」現象が発生します.すなわち、変数は宣言前に使用でき、値はundefinedです.この現象がどれだけ少ないかはおかしいですが、一般的な論理では、変数は文を宣言した後に使用できるはずです.この現象を修正するために、let命令は文法行為を変更し、宣言した変数は必ず宣言後に使用しなければなりません.そうしないと、エラーが発生します.
上記のコードでは、変数aはvarコマンドで宣言され、スクリプトの実行開始時に変数aは既に存在しますが、値がないためundefinedが出力されます.変数bはletコマンドで宣言され、変数のアップグレードは発生しません.これは、宣言する前に変数bが存在しないことを示し、これを使用するとエラーが投げ出される.ブロックレベル役割ドメインletは実際にJavaScriptにブロックレベル役割ドメインを追加した.
上記の2つのコードブロックには変数変数nが宣言され、最後に呼び出された関数出力の結果は5であり、これは外層コードブロックが内層コードブロックの影響を受けないことを示し、varを使用して変数を宣言すると結果は10である.ブロックレベルの役割ドメインは任意のネストを可能にし、外層の役割ドメインは内層の役割ドメインの変数を読み取ることができず、内外層の役割ドメインは同名の変数を宣言することができる.
const基本用法
const宣言の定数は、後期に定数の値を変更することはできません.また、宣言と同時にすぐに初期化する必要があります.後で値を割り当てることはできません.その宣言定数の役割ドメインはletと同じで、コードブロック内で有効です.宣言前に変数を呼び出してエラーを報告します.つまり、const宣言の定数には変数のアップグレードはありません.
テンプレート文字列
従来のJavaScript出力テンプレートは、通常、次のとおりです.
この書き方はかなり煩雑で不便であり,文字列が特に長い場合には+と「」の位置を間違えるかもしれないが,es 6はテンプレート文字列を導入してこの問題を解決した.テンプレート文字列は拡張版文字列で、反引用符`で表し、中の変数は${}で包むことで実現できます.
${}の値について:1.変数2.任意javascript式3.オブジェクトのプロパティ4を取得します.呼び出し関数
簡略化されたオブジェクトの書き方
ES 6は、オブジェクトの属性およびメソッドとして変数および関数を直接書き込むことを可能にする.このような書くのはもっと簡潔だ.
注意:メソッドの簡略化は、通常のメソッドと同じ特性で、主にthisに現れます.
矢印関数
Es 6では、矢印(=>)で関数を宣言することができ、より迅速で便利です.()=>{}はfunction(){}に等しい.矢印関数と単純関数の違いパラメータがない場合の構文:変数名=()=>{関数体}
パラメータがある場合の構文:変数名=(パラメータ1,パラメータ2)=>{関数体}は、1つのパラメータのみであれば()を省略でき、2つ以上のパラメータでは()を省略できず、各パラメータ間を','で区切ることができます.
複数のパラメータの場合、()を省略することはできません.
es 5に書かれた関数は,いずれもes 6の矢印関数で表すことができる.
戻り値がある場合の構文:変数名=(パラメータ)=>{return戻り値}
関数体に1つの文がある場合は括弧｛｝を省略し、この文が戻り値である場合はreturnキーワードを省略することもできます.
矢印関数のthisグローバル関数のthis
Windowで宣言された関数は、es 5とes 6のthisがwindowを指します.
イベント処理関数のthis
イベント処理関数としてes 5のthisは現在のトリガイベントのオブジェクトを指し、es 6のthisはwindowを指す.
オブジェクトメソッドのthis
関数宣言オブジェクトメソッドでは、es 5で関数がグローバルに伝わるためwindowを指し、es 6で関数が定義されているのは誰を指しているのか、thisはDogを指します.矢印関数の注意点矢印関数には、次の点に注意する必要があります.1.関数内のthisオブジェクトは、使用時に存在するオブジェクトではなく、定義時に存在するオブジェクトです.2.コンストラクション関数として使用することはできません.すなわち、newコマンドを使用してはいけません.そうしないと、エラーが放出されます.argumentsオブジェクトは使用できません.このオブジェクトは関数内に存在しません.使用する場合はrestパラメータ(後述)で代用できます.
thisオブジェクト関数内のthisオブジェクトは、使用時に存在するオブジェクトではなく、定義時に存在するオブジェクトです.
コンストラクション数としてコンストラクション関数として使用できません.つまり、newコマンドを使用してはいけません.そうしないと、エラーが発生します.
argumentsオブジェクトは使用できません.argumentsオブジェクトは使用できません.このオブジェクトは関数内に存在しません.使用する場合はRestパラメータで代用できます.
拡張演算子
拡張演算子(spread)は3つの点(...)です.restパラメータの逆演算のように、配列をカンマで区切られたパラメータシーケンスに変換します.
拡張演算子の一般的な適用では、配列をコピーし、類似配列を真の配列に変換できます.
関数のデフォルト
ES 6以前は,関数のパラメータに直接デフォルト値を指定することはできず,融通のきく方法しか採用できなかった.
上のコードは、関数logのパラメータyに値が付与されているかどうかをチェックし、ない場合はデフォルト値をWorldと指定します.この書き方の欠点は、パラメータyが付与されているが、対応するブール値がfalseであると、その付与が機能しないことである.上記のコードの最後の行のように、パラメータyは空の文字に等しく、結果はデフォルト値に変更されます.ES 6は、関数のパラメータのデフォルト値、すなわち、パラメータ定義の後に直接書くことを可能にする.
簡潔さに加えて、ES 6の書き方には2つのメリットがあります.まず、コードを読む人は、関数体やドキュメントを見なくても、どのパラメータが省略できるかをすぐに意識することができます.次に,将来のコード最適化に有利であり,将来のバージョンが対外インタフェースでこのパラメータを徹底的に取り除いても,以前のコードが実行できないことはない.
パラメータ変数はデフォルトで宣言されているため、letまたはconstで再宣言することはできません.
以上は私のES 6の新しい特性の上の部分に対する理解で、中の下の部分は後続の2つの文章の中で詳しく説明して、みんなが互いに交流することを歓迎します!
ES 6は、変数を宣言するletコマンドを追加しました.その使い方はvarに似ています.
let a = 10;
var b = 10;
console.log(a,b);//10 10
上記のコードでは、let、varで変数を宣言し、これらの2つの変数を呼び出すと、正しい値が得られますが、両者の間には次の例のような違いがあります.
{
let c = 10;
var d = 10;
}
console.log(d); //10
console.log(c); //c is not defined
上のコードではそれぞれlet,varで変数を宣言し,コードブロックの外で呼び出すと,letで宣言された変数がエラーを報告し,varで宣言された変数は正しい値を返した.これはletが宣言した変数がその存在するコードブロックでのみ有効であることを示している.注意:変数名命名規則●見名知義●キーワードや予約文字は使用できない●アルパカマークに従う●変数名は重くできない(誤報する)
let変数リフトは存在しません
varコマンドでは、「変数の昇格」現象が発生します.すなわち、変数は宣言前に使用でき、値はundefinedです.この現象がどれだけ少ないかはおかしいですが、一般的な論理では、変数は文を宣言した後に使用できるはずです.この現象を修正するために、let命令は文法行為を変更し、宣言した変数は必ず宣言後に使用しなければなりません.そうしないと、エラーが発生します.
//var
console.log(a); //undefined
var a = 10;
//let
console.log(b); // b is not defined
let b = 10;
上記のコードでは、変数aはvarコマンドで宣言され、スクリプトの実行開始時に変数aは既に存在しますが、値がないためundefinedが出力されます.変数bはletコマンドで宣言され、変数のアップグレードは発生しません.これは、宣言する前に変数bが存在しないことを示し、これを使用するとエラーが投げ出される.ブロックレベル役割ドメインletは実際にJavaScriptにブロックレベル役割ドメインを追加した.
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}
f1();
上記の2つのコードブロックには変数変数nが宣言され、最後に呼び出された関数出力の結果は5であり、これは外層コードブロックが内層コードブロックの影響を受けないことを示し、varを使用して変数を宣言すると結果は10である.ブロックレベルの役割ドメインは任意のネストを可能にし、外層の役割ドメインは内層の役割ドメインの変数を読み取ることができず、内外層の役割ドメインは同名の変数を宣言することができる.
{
let a = 'admin'
console.log(a,1111);
{
let a = 'ujiuye'
console.log(a,222);
}
}
// console.log(a)//a is not defined
const基本用法
const宣言の定数は、後期に定数の値を変更することはできません.また、宣言と同時にすぐに初期化する必要があります.後で値を割り当てることはできません.その宣言定数の役割ドメインはletと同じで、コードブロック内で有効です.宣言前に変数を呼び出してエラーを報告します.つまり、const宣言の定数には変数のアップグレードはありません.
//1. const ，
const PI = 3.1414;
console.log(PI);
PI = 3; //Assignment to constant variable
console.log(PI);
//2. const ， ，
const a; //Missing initializer in const declaration
//3. let ，
if(true){
const block = 10;
}
console.log(block); //block is not defined
//4.const
console.log(up); // up is not defined
const up = 10;
テンプレート文字列
従来のJavaScript出力テンプレートは、通常、次のとおりです.
var n = 10;
$("p").append("there are "+n+""+
"ujiuye IT"+
""+n+"");
この書き方はかなり煩雑で不便であり,文字列が特に長い場合には+と「」の位置を間違えるかもしれないが,es 6はテンプレート文字列を導入してこの問題を解決した.テンプレート文字列は拡張版文字列で、反引用符`で表し、中の変数は${}で包むことで実現できます.
var n = 10;
$("div").append(`there are ${n}`);
， ， 。 ${} 。
var str = `string text line 1
string text line 2`;
console.log(str);
console.log(`${n}`);
${}の値について:1.変数2.任意javascript式3.オブジェクトのプロパティ4を取得します.呼び出し関数
簡略化されたオブジェクトの書き方
ES 6は、オブジェクトの属性およびメソッドとして変数および関数を直接書き込むことを可能にする.このような書くのはもっと簡潔だ.
let foo = 'bar';
let baz = {foo};
baz // {foo: "bar"}
//
const baz = {foo: foo};
， 。
const o = {
method() {
return "Hello!";
}
};
//
const o = {
method: function() {
return "Hello!";
}
};
注意:メソッドの簡略化は、通常のメソッドと同じ特性で、主にthisに現れます.
矢印関数
Es 6では、矢印(=>)で関数を宣言することができ、より迅速で便利です.()=>{}はfunction(){}に等しい.矢印関数と単純関数の違いパラメータがない場合の構文:変数名=()=>{関数体}
//1. ()=>{}
var f =()=>{
console.log("10"); //"10"
}
f();
パラメータがある場合の構文:変数名=(パラメータ1,パラメータ2)=>{関数体}は、1つのパラメータのみであれば()を省略でき、2つ以上のパラメータでは()を省略できず、各パラメータ間を','で区切ることができます.
//2.
var f = n =>{
var sum = 0;
for(let i = 0;i <= n;i++){
sum += i;
}
console.log(sum); //5050
}
f(100);
複数のパラメータの場合、()を省略することはできません.
var f4 = (n,m)=>{
console.log(n*m);
}
f4(10,20);
es 5に書かれた関数は,いずれもes 6の矢印関数で表すことができる.
戻り値がある場合の構文:変数名=(パラメータ)=>{return戻り値}
//
function fun5(n,m) {
return n*m;
}
console.log(fun5(2,3)); //6
//
var fu = (n,m)=>{
return n*m;
}
console.log(fu(10,20)); //200
関数体に1つの文がある場合は括弧｛｝を省略し、この文が戻り値である場合はreturnキーワードを省略することもできます.
//1. ， {}
var f =n=> console.log(n); //10
console.log(f(10));
//2. ， return
var f1 =(n,m)=> n*m; // return
console.log(f1(10,20)); //200
矢印関数のthisグローバル関数のthis
//1. window ，this window
function fun(){
console.log(this); //window
}
fun();
var fun1 = n =>{
console.log(this); //window
}
fun1();
Windowで宣言された関数は、es 5とes 6のthisがwindowを指します.
イベント処理関数のthis
var oDiv = document.getElementById("box");
oDiv.onclick = function () {
console.log(this); //div
}
oDiv.onclick = ()=>{
console.log(this); //window
}
イベント処理関数としてes 5のthisは現在のトリガイベントのオブジェクトを指し、es 6のthisはwindowを指す.
オブジェクトメソッドのthis
// eat ，
function Person() {
this.eat = function () {
return function () {
console.log(this);
}
}
}
var p = new Person();
p.eat()(); // ， ，this-->window
// this，
function Dog() {
this.eat = function () {
return ()=>{
console.log(this);
}
}
}
var d = new Dog();
d.eat()(); // Dog ，this--->Dog
関数宣言オブジェクトメソッドでは、es 5で関数がグローバルに伝わるためwindowを指し、es 6で関数が定義されているのは誰を指しているのか、thisはDogを指します.矢印関数の注意点矢印関数には、次の点に注意する必要があります.1.関数内のthisオブジェクトは、使用時に存在するオブジェクトではなく、定義時に存在するオブジェクトです.2.コンストラクション関数として使用することはできません.すなわち、newコマンドを使用してはいけません.そうしないと、エラーが放出されます.argumentsオブジェクトは使用できません.このオブジェクトは関数内に存在しません.使用する場合はrestパラメータ(後述)で代用できます.
thisオブジェクト関数内のthisオブジェクトは、使用時に存在するオブジェクトではなく、定義時に存在するオブジェクトです.
function Dog() {
this.eat = function () {
return ()=>{
console.log(this);
}
}
}
var d = new Dog();
d.eat()(); // Dog ，this--->Dog
コンストラクション数としてコンストラクション関数として使用できません.つまり、newコマンドを使用してはいけません.そうしないと、エラーが発生します.
var Person = (name)=>{
this.name = name;
}
var p1 =new Person("ujiuye"); //Person is not a constructor
console.log(p1.name);
argumentsオブジェクトは使用できません.argumentsオブジェクトは使用できません.このオブジェクトは関数内に存在しません.使用する場合はRestパラメータで代用できます.
var arg = (a,b,c,d)=>{
console.log(arguments); //arguments is not defined
}
arg(1,2,3,4);
var arg1 = (...num)=>{
console.log(num); //[1, 2, 3, 4]
}
arg1(1,2,3,4);
拡張演算子
拡張演算子(spread)は3つの点(...)です.restパラメータの逆演算のように、配列をカンマで区切られたパラメータシーケンスに変換します.
// 。
console.log(...[1, 2, 3]); //1 2 3
console.log(1, ...[2, 3, 4], 5); //1 2 3 4 5
//
function add(x, y) {
return x + y;
}
const numbers = [2,3];
console.log(add(...numbers)) // 5
拡張演算子の一般的な適用では、配列をコピーし、類似配列を真の配列に変換できます.
//1.
const a1 = [1, 2];
const a2 = [...a1];
//2.
console.log([...'hello']); //["h", "e", "l", "l", "o"]
console.log([...""].length);//1 Unicode
var oDiv = document.getElementsByTagName("div");
console.log([...oDiv]); //[div, div, div]
関数のデフォルト
ES 6以前は,関数のパラメータに直接デフォルト値を指定することはできず,融通のきく方法しか採用できなかった.
function log(x, y) {
y = y || 'World';
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World
上のコードは、関数logのパラメータyに値が付与されているかどうかをチェックし、ない場合はデフォルト値をWorldと指定します.この書き方の欠点は、パラメータyが付与されているが、対応するブール値がfalseであると、その付与が機能しないことである.上記のコードの最後の行のように、パラメータyは空の文字に等しく、結果はデフォルト値に変更されます.ES 6は、関数のパラメータのデフォルト値、すなわち、パラメータ定義の後に直接書くことを可能にする.
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
簡潔さに加えて、ES 6の書き方には2つのメリットがあります.まず、コードを読む人は、関数体やドキュメントを見なくても、どのパラメータが省略できるかをすぐに意識することができます.次に,将来のコード最適化に有利であり,将来のバージョンが対外インタフェースでこのパラメータを徹底的に取り除いても,以前のコードが実行できないことはない.
パラメータ変数はデフォルトで宣言されているため、letまたはconstで再宣言することはできません.
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
以上は私のES 6の新しい特性の上の部分に対する理解で、中の下の部分は後続の2つの文章の中で詳しく説明して、みんなが互いに交流することを歓迎します!