ECMAScript 6ユーティリティノート(更新中…)

11964 ワード

1、ECMAScript 6実用ノート(更新中…)
一、概要
1、現在よく使われているバージョンはECMAScript 3.0で、後に名前を変えました.ECMAScript 5といいます.
ECMAScript 6.0(以下、ES 6という)はJavaScript言語の次世代規格で、2015年6月に正式に発表されました.JavaScript言語は複雑な大規模なアプリケーションを作成し、企業レベルの開発言語になることを目標としています.ECMAScriptとJavaScriptの関係は前者が後者の規格で、後者が前者の実現です.
2、ECMAScript 6の特徴:

ES 6は、モジュールやクラス、ブロックレベルの作用領域、定数および変数

など、多くの必要な特性を追加している.
3、ブラウザのサポートレベル

http://kangax.github.io/compat-table/es6/

4、Babelトランスコーダを通じてES 6のコードをES 5に変えることができます.運行環境がサポートされているかどうか心配しなくてもいいです.chromeの下でES 6を使用することは、ほとんどの文法を正常に使用できるように保証するために、厳格なパターンが必要です.つまり、scriptタグのtype属性に「appication/javascript;version=1.7」の属性値を付けます.
二、let
let宣言変数のキーワード1、同じスコープ内で、letは一つの変数(異なるスコープ内では除外)を繰り返し宣言することができません.2、let宣言の変数は前解析されません.3、一時的なデッドゾーンです.

'use strict'        //    ，  js      'use strict'
console.log(a);     //undefined let           
var a=12;
var a='kaivon';
console.log(a);

//console.log(b);       //            
let b=20;
//let b=30;         //   let          （         ）
console.log(b);

{
    let str='kaivon';
    console.log(str);
}

三、ブロックレベルのスコープ
ブロックレベルのスコープのバッチは、ペアの大かっこです.スコープレベルのスコープの役割領域です.直接に大かっこのペアを書くことができます.これからは自己実行関数を書かなくてもいいです.

{
    let a=12;
    function fn(){
        let a=20;
        console.log(a);
    }
    fn();
}

四、const定数
const声明の一つの定数は、一旦声明を出したら修正できなくなります.1、声明を出してから修正するとエラーが発生します.2、宣言だけでは値を付けなくてもエラーが発生します.3、先に声明を出してから使うしかないです.事前に解析されません.4、繰り返し声明を出すことはできません.1つの定数は注意してください.

'use strict'
            
var a=12;
a='kaivon';
console.log(a);

const str='kaivon';
//str=12;       //                 

console.log(str);

//const b;          //                

//console.log(c);   //              ，       
const c=20;
//const c='kaivon'; //                

//       ，             
const obj={
    name:'kaivon'   
};

obj.name='   ';
console.log(obj); //const

五、配列分解賦課値
プロファイル:
一定のパターンに従って、配列またはオブジェクトからデータを取り出し、変数を割り当てます.
配列解除値:
等号の左と右は配列でなければなりません.配列の分解値は一対一で対応します.対応できないならundefinedです.

'use strict'
/*var a=1;  //      
var b=2;*/

var [a,b,c]=[1,2,3];  //              
console.log(a,b,c);     //1 2 3

let [x,,y,z]=[1,2,3];   //            。          undefined
console.log(x,y,z);     //1 3 undefined 

 var [a,[b,c]]=[1,[2,3]];
 console.log(a,b,c);        //1 2 3      

 //         
 var n1=10;
 var n2=15;

 var [n1,n2]=[n2,n1];
 console.log(n1,n2);        //15 10


 //            
 function fn(){
    return ['red','green','blue'];
 }
 var [d,e,f]=fn();

 console.log(e);        //green

六、オブジェクトの構造解除の値
プロファイル:
一定のパターンに従って、配列またはオブジェクトからデータを取り出し、変数を割り当てます.
オブジェクトの割り当て:
等号左と右は必ず対象です.名前は一々対応します.順番は必要ないです.対応できない値はundefinedです.

'use strict'
            
var obj={
    name:'kaivon',
    QQ:356985332,
    language:['css','html','js'],
    work:function(){
        console.log('js');
    }
};

var {name,work,QQ,age}=obj; //             ，       
console.log(name,work,QQ,age);//kaivon 356985332 js undefined


//            
function fn(){
    return {
        c1:'red',
        c2:'green',
        c3:'blue'
    }
}

var {c1,c2,c3}=fn();

console.log(c2);        //green

七、文字列の拡張方法

includes(s)文字列にはある文字が含まれていますか?パラメータは1文字

です.

starts Width(s)文字列の開始位置の文字はパラメータかどうか、パラメータは文字

です.

endsWidth(s)文字列の終了位置の文字はパラメータかどうか、パラメータは文字以上のいくつかの方法でブール値を返します.trueが含まれています.false

ではありません.

repeat(num)は文字列をコピーし、パラメータは数字であり、コピーの回数を表します.パラメータは正数でなければなりません.他のものは

をエラーします.

'use strict'
var str='kaivon';   //      
console.log(str.includes('i'));         //true         'i'
console.log(str.includes('b'));         //false          'b'
console.log(str.startsWith('k'));       //true        'k'
console.log(str.endsWith('n'));         //true        'n'

console.log(str.repeat(3));             //kaivonkaivonkaivon     
//console.log(str.repeat(-1));              //            ，       
//console.log(str.repeat(Infinity));        //            ，

八、テンプレート文字列
テンプレート文字列:文字列とデータの綴り方
1、文字列は一対のバッククォーテーションマークで包む必要があります.複数行の文字列を定義できます.一対のバッククォーテーションマーク2だけで、綴り込むデータは${}の中に入れる必要があります.3、大かっこの中では演算もできます.4、大かっこの中では関数を呼び出すこともできます.

var obj={
    title:‘  ‘,
    content:’    ，   ，   ，     ‘
}
var text=document.getElementById("text");
//text.innerHTML=''+obj.title+'
'+obj.content+''; //       

function fn(){
    return '      ，    ？';
}

//           ${}  
var str1=`${obj.title}  
            ${obj.content}`;
            
//           
var str2=`${obj.title+'+1'}    
            ${obj.content}`;

var str3=`${obj.title+'+1'}
            ${obj.content+fn()}`;    //           
            
//text.innerHTML=str1;
//text.innerHTML=str2;
//text.innerHTML=str3;

九、Mathオブジェクトの拡張方法
Math.trunc(num):小数部を除いて、直接小数部を取り除くのです.
1、数値以外の場合は、まずNumber方法を呼び出して数字2に変換します.空の値と数字に変換できない値はNaNです.

console.log(Math.trunc(12.74));         //12
console.log(Math.trunc(0.5));           //0
console.log(Math.trunc('36.01'));       //36
console.log(Math.trunc('kaivon'));      //NaN

Math.sign(num):一つの数が正数かそれともマイナスかを判断します.それとも0ですか?
1、パラメータは正の値で、1を返します.パラメータは負の値で、-1を返します.パラメータは0で、0を返します.パラメータは-0で、-0を返します.パラメータは他の値で、NaNを返します.

console.log(Math.sign(5));              //1
console.log(Math.sign(-5));             //-1
console.log(Math.sign(0));              //0
console.log(Math.sign(-0));             //-0
console.log(Math.sign('kaivon'));       //NaN

十、配列の拡張方法
Aray.from()クラスの配列を本物の配列に変えます.
length属性のあるオブジェクトは、この方法で本物の配列に変換できます.


    
    

    

    

    



'use strict'
var lis=document.querySelectorAll("li");
//console.log(lis);
var newLis=[].slice.call(lis); //                

var newLis=Array.from(lis);     //Array.from()            
console.log(newLis);            //[li, li, li, li, li]

var str='kaivon';
var newStr=Array.from(str);     //   length                  
console.log(newStr);            //["k", "a", "i", "v", "o", "n"]

//       length       Array.from()       ,    key    0        

var obj={
    0:'red',
    1:'green',
    2:'blue',
    3:'yellow',
    length:4
};
console.log(Array.from(obj)); // ['red','green','blue','yellow']

Aray.of()一組の数値を本物の配列に変換します.

console.log(new Array());       //[]
console.log(new Array(3));      //[, , ,]
console.log(new Array(1,2,3));  //[1, 2, 3]

console.log(Array.of(1));       //[1]
console.log(Array.of(1,2,3));   //[1, 2, 3]

includies(データ、開始位置)検索行列にデータがありますか?

var arr=['red','green','blue','yellow'];
console.log(arr.includes('red'));       //true
console.log(arr.includes('pink'));      //false
console.log(arr.includes('green',2));   //false

巡回関連

for inループは、キー名

を直接読み取ることができます.

for ofループは、キー値

を直接読み取ることができます.

，

keys()は、配列のすべてのキー名

を記憶しています.

values()は、配列のすべてのキー値

を記憶しています.

entries()は、配列のすべてのキーペア

を記憶しています.

'use strict'
var color=['red','green','blue','yellow'];

//for in
for(var attr in color){
    console.log(attr);  //0 1 2 3       
}

//for of
for(var value of color){
    console.log(value); //red green blue yellow       
}

//        for of
var str='kaivon';
for(var value of str){
    console.log(value);     //k a i v o n                
}


//  keys
for(var key of color.keys()){
    console.log(key);       //0 1 2 3           
}

//  values
/*for(var value of color.values()){            
    console.log(value);     //red green blue yellow     ，chrom    
}*/

//  entries
for(let [key,value] of color.entries()){
    console.log(key,value); //0 "red"    1 "green"  2 "blue"        3 "yellow"             
}

十一、関数のパラメータのデフォルト値

'use strict'
function fn(a,b){
    b=b||'kaivon';  //          
    console.log(a,b);
}
fn('hello');        //hello kaivon
fn('hello','moto'); //hello moto

//          ，   let  const    
function fn2(a=20,b=10){    //              
    //console.log(a,b);     //20 10
    //let a=12;             //  
    console.log(a+b);       //30
}
fn2();          //30
fn2(23,45);     //68

十二、矢印関数
文法:1、functionはvar、let、constで表します.2、パラメータは最初の等号の後に書きます.

1、パラメータがない場合は、ペアの空きカッコ

を書く必要があります.

、パラメータが一つしかないなら、直接書いてください.

、パラメータが複数あります.括弧を入れる必要があります.パラメータはカンマで

を分離します.

'use strict'
/*function fn1(){
    console.log('kaivon');
}
fn1();*/ //    

var fn1=()=>console.log('kaivon');  //es5         ，          
fn1();


let fn2=a=>console.log(a);  //      ，     ，     
fn2('kaivon');          //kaivon

const fn3=(a,b)=>{      //     ，        ，       
    let result=a+b;
    console.log(result);
}
fn3(1,2);       //3

十三、対象の簡潔な表現法
属性と方法は簡潔に表現できます.

'use strict'
/*function fn(){
    var x=10;
    var y=20;
    function sum(){
        return x+y;
    }
    
    return {x:x,y:y,sum:sum}
}
console.log(fn());*/        //             


function fn(){              //ES6           
    var x=10;
    var y=20;
    function sum(){
        return x+y;
    }
    
    return {
        x,
        y,
        sum(){
            return x+y;
        }
    }
}
console.log(fn());
console.log(fn().sum())         //30

14、属性名表現
数式を中かっこに入れて属性名として使うことができます.

'use strict'

let key='interest';

let obj={
    name:'kaivon',
    [key]:'   ',
    ['show'](){
        console.log(this.name);
    }
}
console.log(obj);

十五、Object.is()
二つの値が等しいかどうかを比較すると、==の結果と同じですが、やはり違いがあります.

によって返された結果は、ブール値の違いです.

1、＋0と−0の比較結果はfalse

である.

、NaNとNaNの比較結果はtrue

です.

'use strict'
console.log(Object.is('kaivon','kaivon'));      //true

console.log(+0===-0);           //true
console.log(Object.is(+0,-0));  //false

console.log(NaN===NaN);         //false
console.log(Object.is(NaN,NaN));    //true

十六、Object.is()
オブジェクトの属性を別のオブジェクトにコピーします.

は少なくとも2つのパラメータ

が必要です.

1、最初のパラメータは、統合されたオブジェクト

である.

、2番目のパラメータからマージされるすべてのオブジェクト

です.

、同名の属性があれば、前を覆っている

4、ネストされたオブジェクトがあれば、上書きされます.

は追加されていません.

'use strict'
var obj1={a:1};
var obj2={b:2};
var obj3={a:4,c:3};

Object.assign(obj1,obj2,obj3);
console.log(obj1); //{a:1,b:2,c:3}  //        ，         

//     
const merge=(target,...souce)=>{
    Object.assign(target,...souce);
    return target;
}
console.log(merge(obj1,obj2,obj3));     //Object {a: 4, b: 2, c: 3}

//        ，        
var obj4={
    d:{
        e:5
    }
}
var obj5={
    d:{
        f:6
    }
}

console.log(merge({},obj4,obj5)); //{a: 4, b: 2, c: 3}

17、セットデータ構造
Setデータ構造、類似配列.すべてのデータは一意で、重複した値はありません.それ自体は構造関数です.

sizeデータの長さ

add()データを追加します.

deleate()データを削除します.

has()あるデータを検索して、ブール値

を返します.

clear()全データ削除

'use strict'
var set=new Set([1,3,4,5,4,3,2]);
set.add(6);     //         6 
set.delete(1);  //         1
console.log(set.has(5));    //true             5
set.clear();    //        
console.log(set,set.size);          //Set {1, 3, 4, 5, 2} 5

JavaScript数学関数の数字整理と四捨五入などの数字方法