ES 6新特性(更新編)

8351 ワード

まず、カルニアさんに感謝します.ES 6の矢印関数の中でthisが指すエラーを指摘してくれました.今回は主に矢印関数のthis指向の問題を更新しました.
ECMAScript 6.0(以下、ES 6という)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.JavaScript言語は複雑な大規模なアプリケーションを作成し、企業レベルの開発言語になることを目標としています.
ES 6は多くの機能を追加しました.もっと便利です.私たちの機能はあまり多くないです.本題に入る
ES 6新特性.png
一、変数について
ES 5
1.グローバルスコープ変数と関数スコープ変数だけがあります.「変数のリフティング」(プログラムが新しい関数に入ると、その関数内のすべての変数の宣言を関数の開始位置に置きます.変数の宣言を上げるだけで、変数の割当値は上がりません.)
ES 6新規追加:ブロックレベルスコープ変数
1、let定義ブロックレベルスコープ変数
1、変数の向上がない場合は、先に声明してから2、let声明の変数を使用して、前のlet、var、conset声明の変数と名前を変更することはできません.

    {   
        {
        //console.log(a)//            
        let a = 10;//           
        var b = "abc";//       
        console.log(a);//10
        //let a = 10//   Uncaught SyntaxError: Identifier 'a' has already been declared
        console.log(b);//bac
        }
        console.log(b);//abc
        // console.log(a);//            
    }

2、const定義リードオンリー変数
1、const宣言変数は、同時に値を付けなければならない.const宣言の変数は初期化されなければならない.初期化が完了すると、修正は許されない.2、const宣言変数もブロックレベル作用ドメイン変数3、const声明の変数は「変数の向上」がない.先に声明を出してから4、const声明の変数は前のlet、var、const声明の変数と重複してはいけない.

    {
        const VERSION = "1.2.3"
        console.log( VERSION )//         
    }
    //console.log( VERSION )//VERSION is not defined

二、関数について
ES 6は、モジュラス関数のデフォルト値を設定できます.
つまり、関数を呼び出すと、デフォルトのイメージが設定されていても、関数に参加しなくても、関数の実装はデフォルトのイメージです.

function fun2(a=1,b=2){
    console.log(a,b)//1,2
}
fun2(11,22);//11 22
fun2(100);//100 2

コンストラクタにも使われています.

function Person(name,age,sex=" "){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
var p1 = new Person("  ",20);
console.log(p1)// Person {name: "  ", age: 20, sex: " "}
var p2 = new Person("  ",30);
console.log(p2)// Person {name: "  ", age: 30, sex: " "}
var p3 = new Person("  ",20," ");
console.log(p3)// Person {name: "  ", age: 20, sex: " "

矢印関数

//    
var fun3 = function(a){
    console.log(a);
}
//    
var fun3 = (a)=>{console.log(a);}
fun3(999);

例えば矢印関数で1から100までの和を計算します.

var fun4 = ()=>{
    var sum=0;
    for(var i = 0; i<=100; i++){
        sum = sum+i
    }
    return sum;
}
console.log(fun4());//1000

var person = {
    name:"tom",
    sayHi:()=>{
        console.log(this);//window  
        console.log("hello,everyone. my name is "+this.name);//hello,everyone. my name is window name
    }
}
person.sayHi();

thisの認識を復習します.
1.関数の体外で、thisはwindowオブジェクトのことを指します.関数の中で、関数thisを呼び出した人は誰を指しますか?3.コンストラクションでは、thisは新しく作成したオブジェクトのことを指します.
三、配列に関する展開演算
配列の前に3つの点を加えます.

var arr = [1,2,3,4,5];
console.log(arr);//[1, 2, 3, 4, 5]
console.log(...arr)// 1 2 3 4 5

行列の展開に応じて演算できます.行列は関数の大量の参照に使用されます.

function fun5(a,b,c,d,e,f){
    //        ，      
    //console.log(a,b,c,d,e,f)//[1, 2, 3, 4, 5] undefined undefined undefined undefined undefine
    console.log(a,b,c,d,e,f)//11 22 33 44 55 66
    //return a+b+c+d+e+f
}
//fun5([1,2,3,4,5])
fun5(...[11,22,33,44,55,66])

四、アプリとコールについて
applyとcallは、いずれも対象自体に属性や方法がないので、他のオブジェクトの属性や方法を引用します.つまり、どちらもthisの属性を変更できます.
異なったところ
apply(thisの指向、配列/argments)call(thisの指向、パラメータ1、パラメータ2、パラメータ3)

var name ="window name";
var obj = {
    name:"obj name",
    showName:function(v1,v2,v3){

        console.log(v1,v2,v3)
    }
}
obj.showName();
obj.showName.apply(window,[10,20,30]);//10 20 30
//apply      ，           this   
obj.showName.call(window,10,20,30)//10  20  30

var color = "yellow";
function showColor(){
    console.log(this.color)
}
var obj = {
    color:"red",
}
showColor();//yellow
showColor.apply(obj);//red
showColor.call(obj);//red
showColor.apply(this);//yellow
showColor.call(window);//yellow

五、構成分割について
配列の解除

    var [a,b,c]=[11,22,33]
    console.log(a,b,c)//11 22 33

    var [e,[f,g],k] = [1,[2,3],5]
    console.log(e,f,g,k)//1 2 3 5

オブジェクトの割り当て値

    var{name,age}={name:"  ",age:"20"}
    console.log(name,age)//   20

以前は二つの変数の値を交換しましたが、第三の変数を借りる必要があります.

    var f1 = 88;
    var f2 = 99;
    [f1,f2]=[f2,f1];
    console.log(f1,f2)//99 88

Jsonを解体する

    var jike = {"name":"tom","age":"23","sex":" "};
    var {name,age,sex}=jike;
    console.log(name,age,sex)//tom 23  

    function cal(a,b){
        var ret1 = a+b;
        var ret2 = a-b;
        var ret3 = a*b;
        var ret4 = a/b;
        return [ret1,ret2,ret3,ret4]
    }
    var [r1,r2,r3,r4] = cal(10,5);
    console.log(r1,r2,r3,r4)//15 5 50 2

六、stringにincludeを入れる方法
includies(「文字」)文字列の中にある文字が存在するかどうかを判断するために、trueに戻りfalseに戻ります.
includes(「文字」、startIndex)文字列の下に表示されているstartIndexがあるかどうかを判断するために使用されます.trueに戻ります.falseに戻りません.

var str = "hello";
console.log( str.includes("e") )//true
console.log( str.includes("e",3) );//false

七、オブジェクトの作成
ES 5でオブジェクトを作成するいくつかの方法
1.字面量法2.工場モード3.コンストラクション4.組み合わせ方式コンストラクタ+プロトタイプモード
ES 6でオブジェクトを作成

class   {
        //          
        //        ，          ,    
    constructor(){}  //  ：       
        //             run  dark
    run(){}
    dark(){}
}

例をあげる

class Person{
    //          
    constructor(name,age,sex,nativePlace){
        this.name=name;//  ：     
        this.age=age;
        this.sex=sex;
        this.nativePlace=nativePlace;
    }
    //       
    eat(){console.log("    ")}
    study(){console.log("  ")}
    play(){console.log("   ")}
}

var sunShine = new Person("fanfan","22"," ","   ");
console.log(sunShine)//Person {name: "fanfan", age: "22", sex: " ", nativePlace: "   "}

八、継承する

class Animal{
    constructor(age,sex){
        this.age = age;
        this.sex = sex;
    }
    eat(){
        console.log("   ")
    }
}
class Dog extends Animal{
    constructor(name,age,sex){
        //super     ，          ，        
        super(age,sex)
        //console.log(super);//        
        this.name=name;
    }
    bark(){
        console.log("   ")
    }
    //  ：              
    // eat(){
    //  console.log("   ")
    // }
}
var d = new Dog("  "," ",5)
console.log(d)
d.bark();
d.eat();
//ES6   ，      ，                
console.log( Dog.prototype)//Animal {}
console.log( Dog.constructor==Animal.constructor)//true
console.log( Dog.prototype.__proto__==Animal.prototype)//true

九、セット()とMap()
set()順序付きリストセット(重複なし)
Set()とは、シーケンステーブルのセット(setの要素は重複していない)のことです.
setに含まれる方法add()、has()、delete()、clear()など
アドド()追加

var s = new Set();
s.add(1);
s.add(window);
s.add(true);
s.add(1);
console.log(s);//      
console.log(s.size)//      3

delete(value)指定要素の削除

//    
s.delete(window);
console.log(s)   //1  true
console.log(s.size)   //2

has(value)は、指定された値がsetセット内に存在するかどうかを判断するために、trueに戻りfalseに戻ります.

//    
console.log( s.has(1) )//true

clear()と一緒に空を掃除してセットします.

//    
s.clear()
console.log(s)//

例えば、10個の乱数を1～20個生成し、重複してはいけないことを要求します.

var arr3 = new Set();

 while(arr3.size<10){
    var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1);
    arr3.add(yuan);     
 }
 console.log(arr3)

Map()キーペアを格納するための集合key/value

var map = new Map();
map.set("name","  ");
map.set("age",20);
console.log(map)    //Map {"name" => "  ", "age" => 20}

get(key)はkey値に基づいてvalueを取得する.

console.log( map.get("name"))//

has()キーが存在するかどうかを判断します.trueに戻ります.いいえ、fasleに戻ります.

console.log( map.has("age") ) //true
 console.log( map.has("age1") ) //false

クリーン集合

 
map.clear();
console.log(map);//Map {}

なぜか急に止まったような感じがします.
じゃ、止まってください.
いいえ、ありません
老後を拝む
老後は楽しいですね
いいえ、ありません
読者の皆様、新年おめでとうございます.いいね

JavaScriptのよく使う方法