ECMAScript 6ベース

32075 ワード

1. ECMAScript 6概要
    JavaScript 三大構成:
        ECMAScript
            JSにおけるデータの種類および関連操作、フロー制御、演算子および関連演算… ECMAScriptのです
        DOM
            ドキュメントのいくつかの操作: 文書オブジェクトモデル
        BOM
            ブラウザのオブジェクトモデル: ウィンドウサイズ、履歴管理、スクロールバーの位置…
ECMAScript 歴史を発展させる https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_Resource
2.両変数の宣言
letとconst
let

/* let a = 0;// var    
console.log(a); */
let a = 0;
var b = 10;//           (  let)      
/*
    var : 
        1.var       
    
    let:
        1.            
*/

letのブロックレベルのスコープ

if(true){
    let a = 1;
}
console.log(a);//  !!~
{
    //             
　　//let      ,            

}
console.log(a);//->1; let->     
/*
    var : 
        1.var       
        2.   :              
    
    let:
        1.            
        2.   :              {}
*/

letとvarの違い

//JS        ! -> var               ,     ,      undefined;
console.log(a);//var->undefined let->  
let a = 1;
/*
    var : 
        1.var       
        2.   :              
        3.      
    
    let:
        1.            
        2.   :              {}
        3.      
*/

const定数

/* 
    const :   
                 ,         
        1.            
        2.     
        3.     
           let  
 */
// const a = 10;//const          ,         !
const a = undefined;
// a = 20;//    !
console.log(a);//10

ブロックレベルのスコープ

 
     
     
       /* { 
      
     
           let a = 1; 
      
     
           console.log(a); 
      
     
       } */ 
      
     
       /*  
      
     
       if(true){ 
      
     
           let a = 1; 
      
     
       } */ 
      
     
 
     
       //循环之中的块级作用域 
      
     
       { 
      
     
           let lis = document.querySelectorAll("li"); 
      
     
           for(let i = 0;i 
     
               lis[i].onclick = function(){ 
      
     
                   console.log(i);//所以在这里就不要加索引值了! 
      
     
               } 
      
     
           } 
      
     
           // console.log(i);//当然循环后let是不能用的! 
      
     
           //let 的作用域如下: 
      
     
           /* { 
      
     
               let i = 0; 
      
     
               lis[i].onclick = function(){ 
      
     
                   console.log(i); 
      
     
               } 
      
     
           } 
      
     
           { 
      
     
               let i = 1; 
      
     
               lis[i].onclick = function(){ 
      
     
                   console.log(i); 
      
     
               } 
      
     
           } 
      
     
           { 
      
     
               let i = 2; 
      
     
               lis[i].onclick = function(){ 
      
     
                   console.log(i); 
      
     
               } 
      
     
           } */ 
      
     
       } 
      
     
    
    3.解构赋值

对象的解构赋值 let {a,b} = obj;

//           :  
let obj = {
    a : 1,
    b : 2,
    c : 4,
    d : 3
}
/* let a = obj.a;
let b = obj.b;
console.log(a,b); */
//      ->        ,            
let {a,b,c} = obj;
console.log(a,b,c);

配列の解除

//           :     
// let arr = ["a","b","c"];
// let [e,f] = arr;
// console.log(e,f);//a b

//    :        
let a = 0;
let b = 1;
console.log(a,b);//0 1;
[a,b] = [b,a];
console.log(a,b);//1 0;

他のタイプの解凍値-文字列の解凍値

let str = "abc";
let [e,f] = str;
console.log(e,f);//a b
// let nub = 123;
// let [c,d] = nub;
// console.log(c,d);//1 2
/* 
          ,            (      )
*/

4.演算子を展開する…
配列の展開演算子

//      :      、       -> ...
let arr = [1,2,3,4];
let arr2 = ["a","b",...arr,"c","d"];
console.log(arr2);//a,b,1,2,3,4,c,d
//     :               
let [a,b,...c] = arr;
console.log(a,b,c);//1,2,[3,4]

オブジェクト展開演算子

let obj = {
    a:1,
    b:2
}
/* let obj2 = {
    ...obj,
    c:3,
    d:4
} */
// console.log(obj2);//{a: 1, b: 2, c: 3, d: 4}

// let {a,b,...c} = obj2; //         
// console.log(a,b,c);//1 2 {c: 3, d: 4}

let obj2 = {...obj};
obj2.a = 10;
// console.log(obj.a);//10      
console.log(obj);
console.log(obj2);

5セットとMapオブジェクト
setオブジェクト

//                     :      
let arr = [3,1,2,2,3,4,5,3,5];
let s = new Set(arr);
console.log(s);//     

arr = [...s];
console.log(arr);//

セット属性

 1 //                     :      
 2 let arr = [3,1,2,2,3,4,"a",5,3,5];
 3 let s = new Set(arr);
 4 // console.log(s.size);//5 size        length    
 5 // s.clear();//     
 6 // console.log(s.delete("a"));//     ,          
 7 // s.add(6).add(7).add(8);//          !
 8 // console.log(s.has("a"));//true ->         
 9 /*
10     set.clear();
11              
12            :undefined
13     set.deleta(val);
14              
15           :
16             val      
17            :
18                ,        
19     set.has(val);
20                 
21           :
22             val      
23            :
24             true||false        
25     set.add(val);
26             
27           :
28             val      
29            :
30             set     
31 */
32 console.log(s);

Mapオブジェクト

//                     :      
let arr = [
    ["a",1],
    ["b",2],
    ["c",3]
];
let m = new Map(arr);
// m.clear();
// console.log(m.delete("a"));
// console.log(m.get("a"));
// console.log(m.has("a"));
// console.log(m.set("d",4));
m.set("a",4).set("e",5)
console.log(m);

/* 
clear();      
delete(key);
         
       :   ,      
get(key);
          
       :     
has(key);
             
       :   
set(key,val);      
      :
        key    key 
        val    val 
       :
        map     
*/

6.矢印関数
矢印関数

/* function fn(){
    return ;
} */
/* let fn = ()=>{
    console.log(1);
}; */
// let fn = nub=>nub*2;
// let fn = (nub,nub2)=>nub*nub2;
// let fn = ()=>"   ";
// console.log(fn());
// fn();

let fn = ()=>{
    console.log("     ");
    return "   ";
}
// fn();
console.log(fn());

/* 
    :
  =>   
(  ,  )=>   
()=>   
()=>{
        
}

()=>{
        
    return    
}
(  )=>{
        
    return    
}
*/

矢印関数の不定参照

function fn(){
    console.log(arguments.length);
};
fn(1,2,3,4);
//          : arguments

パラメータ

let fn = (a,b,...arg)=>{
    console.log(a,b,arg);
};
fn(1,2,3,4);

// rest      ...

矢印関数のthis方向

/* document.onclick = ()=>{
    console.log(this);
}; */
// document.onclick = function(){
//     let fn = ()=>{
//         console.log(this);
//     }
//     /* function fn(){
//         console.log(this);
//     } */
//     fn();
// };

let fn;
let fn2 = function(){
    console.log(this);//window
    fn = ()=>{
        console.log(this);
    }
}
fn2 = fn2.bind(document.body);
fn2();
fn();

/* 
             this,       this ,              this;
*/

矢印関数のパラメータのデフォルト値

let fn = (a=10,b=2)=>{
    // a : 10
    // b : 2
    console.log(a*b);
};
fn();

7.配列新規方法
Aray.from()

/* 
    Array.form(   )               
           :      length;
           :         
*/
// new Date().getTime();
// Date.now();
// new Array();
// Array.from();
// arr.forEach();
//              ,          !

{
    let lis = document.querySelectorAll("#list li");
    lis = Array.from(lis);
    console.log(lis);
    // lis.map(itme=>{
    //     return itme;
    // });
}

from()メソッドでクラス配列を配列に変換する方法

{
    let lis = document.querySelectorAll("#list li");
    var arr = [];
    // lis = Array.from(lis,function(itme,index){
    //     console.log(itme,index,this);// this            
    //     return index;
    // },arr);
    lis = [...lis];//            
    console.log(lis);//      from   index
}

メソッド

{
    console.log(Array.of(1,2,3,4,"a"));//               
}

isarry()方法は一つのものが配列であるかどうかを判断します.

{
    let lis = document.querySelectorAll("#list li");
    console.log(Array.isArray(lis));//false ->        
    lis = [...lis];
    console.log(Array.isArray(lis));//true
}

配列下のfind()メソッドfindIndex()メソッド

{
    let arr = [1,2,3,4];

    /* let val = arr.find((itme,index)=>{
        if(itme > 3){
            return index;
        }
    }); */
    //   :
    // let val = arr.find(itme=>itme>=3);//    ( ),        undefined
    // console.log(val);

    let index = arr.findIndex(itme=>itme>=3);//    
    console.log(index);
}

配列平準化fiat()方法

//       ,              ,                    
let arr = [
    ["  ",18],
    ["  ",20],
    [
        [1,
            [2,3],
            [4,
                [5,6,
                    [7,8]
                ]
            ]
        ]
    ]
];
console.log(arr.flat(Infinity));//  :     Infinity:

配列平準化fiat Map()方法

//       ,              ,                    
let arr = [
    ["  ",18],
    ["  ",20]
];
let newArr = arr.flatMap((itme)=>{
    itme = itme.filter((itme,index)=>{
        return index == 0;
    });
    return itme;
});
console.log(newArr);

メソッド充填

let arr = [1,2,3,4,5];
arr.fill("a",3);//"a","a","a","a","a"   ,     ,        ,     ,                   
console.log(arr);

includes()方法

let arr = ["a","b","c","d","e"];
console.log(arr.includes("a",2));
/* 
            (val); ->      
         :
              
*/

8.文字列の追加方法
文字列方法starts With()endsWith()

let str = "Afan JackAfan  Afan";
console.log(str.startsWith("Afan",4));
console.log(str.endsWith(" ",4));
/* 
    startsWith
                val
             :
                    
          :
               
    endsWith
                val
             :
                    

*/

repeat()方法

{
    let str = "a";
    console.log(str.repeat(10));//          
    /* 
        repeat
                 
    */
}

テンプレート文字列補間表式{}

let p = document.querySelector("p");
let name = "  ";
let age = 18;
let scholl = "  ";
// p.innerHTML = '  '+name+'  '+age+'  ,     '+scholl+' !';
p.innerHTML = `  ${name}  ${age}  ,     ${scholl} !`

/* 
      :              
    1.``
    2.${}      
                 
*/

通常の文字列とテンプレート文字列の違い

let p = document.querySelector("p");
let name = "  ";
let age = 18;
let scholl = "  ";
// p.innerHTML = '  '+name+'  '+age+'  ,     '+scholl+' !';
p.innerHTML = `
  ${name}  ${age}  ,     ${scholl} !
`

/* 
     
    1.``
    2.${}      
                 
    3.         
     
         
*/

補間式

let p = document.querySelector("p");
let name = ()=>{
    var n = "  ";
    return n;
};
let age = 18;
let scholl = "  ";
// p.innerHTML = '  '+name+'  '+age+'  ,     '+scholl+' !';
p.innerHTML = `
  ${name()}  ${age>18?18:"  "}  ,     ${scholl} !
`

/* 
${}        :
                
*/

9.オブジェクトの追加方法
プロフィール表示法

let a = 0;
let b = 0;
/* let obj = {
    a : a,
    b : b
} */
let obj = {
    a,//  a    
    b,//  b    
    c(){
        console.log("a");
    }
}
console.log(obj)

属性名式

let name = "  ";
let obj = {
    c(){
        console.log("a");
    },
    [name] : 111
}
// obj[name] = 111;
console.log(obj)

オブジェクトマージassign()

let obj = {
    a:1,
    b:2
}
let obj2 = {
    c:3,
    d:4
}
// Object.assign(obj2,obj);//{c: 3, d: 4, a: 1, b: 2}
obj2 = Object.assign({},obj,obj2);//{a: 1, b: 2, c: 3, d: 4}
console.log(obj2);

is()と==

/* if(+0){
    console.log(" ")
}else{
    console.log(" ")
}
if(-0){
    console.log(" ")
}else{
    console.log(" ")
} */
console.log(+0 === -0);//true -> false===false
// console.log(Object.is(1,"1"));//false   ===     

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

10.ECMAScriptの対応バベル
http://www.babeljs.com/



<span style="color: #008000;">/*</span><span style="color: #008000;"> 
  babel      ,                    (   );
</span><span style="color: #008000;">*/</span><span style="color: #000000;">
let a </span>= 0<span style="color: #000000;">;
let b </span>= 1<span style="color: #000000;">;
let obj </span>=<span style="color: #000000;"> {
    a,
    b,
    c(){
        console.log(</span>1<span style="color: #000000;">);
    }
}
let obj2 </span>=<span style="color: #000000;"> {
    d:</span>4<span style="color: #000000;">,
    ...obj,
    e:</span>5<span style="color: #000000;">
}
console.log(obj2);
</span>

フロントエンドの一般的な検証規則