1. 程式人生 > >es6解構+基礎擴充套件

es6解構+基礎擴充套件

////語法擴充套件  
//箭頭函式 簡化了函式定義
        var f = function(v){
            return v;
        };
        f(2);
        var f = v =>v;
       // 變數名 = 引數 = 函式體
       //不傳引數
       var a =()=>'abc';
       a();
      // var a = function() {return 'abc'};
      //傳多個引數
      var sum = (n1,n2) => n1+n2;
      sum(2,4);
        //   var sum = function(n1,n2){
        //       return n1+n2;
        //   };

        //map 資料結構物件  是鍵值對的集合 它類似於物件,也是鍵值對的集合,但是“鍵”的範圍不限於字串,各種型別的值(包括物件)都可以當作鍵。
        const m = new Map();
        m.set('name','lili');
        m.get('name');
        m.size;  //長度

        //for...of 迴圈 
        var m2 = new Map();
        m2.set('name','123');
        for(let [key,value] of m2) {
             console.log(key+'+'+value); 
        }
    }
    
////////////////////////////////////////////////
  //字串解構
        var [a,b,c] = 'hello';

        //函式引數的解構賦值
        function fun([a,b]){
            return a+b;
        };
        fun([2,5]);  //7
        //預設值
        function fun([a=0,b=0]){
            return a+b;
        };
        fun([]);  //0
        function fun([a=0,b=0]){
            return a+b;
        };
        fun([3]);  //3

        //物件
        function fun({a=0,b=0}){
            return a+b;
        };
        fun({a:2,b:5});  //7
        function fun({a=0,b=0}){
            return a+b;
        };
        fun({a:2});//2

        //瞭解
        function fun({a=0,b=0} ={}){   //變數為預設值
            return [a,b];
        };
        fun({a:2,b:5});  //2,5
        function fun({a=0,b=0} ={}){
            return [a,b];
        };
        fun({a:2});//[2, 0]
        function fun({a=0,b=0} ={}){
            return [a,b];
        };
        fun();//0,0

        function fun({a,b} ={a:2,b:7}){  //引數為預設值
            return [a,b];
        };
        fun({a:5,b:5});//5,5

        function fun({a,b} ={a:2,b:7}){  //引數為預設值
            return [a,b];
        };
        fun({a:5});// 5 undefined

        function fun({a,b} ={a:2,b:7}){  //引數為預設值
            return [a,b];
        };
        fun();  //2,7

        function fun({a,b} ={a:2,b:7}){  //引數為預設值
            return [a,b];
        };
        fun({});//undefined undefined
        //陣列
        function num(){
            return [1,2,3]
        };
        let [a,b,c] = num();
        //物件
        function num2(){
            return obj = {age:20,name:'abc'};
        }
        let {name,age} = num2(); 

        //JSON
        let data ={
            name:'abc',
            age:18,
            friends:['x','y','z'],
            obj:{a:'a',b:'b'}
        };
        let {name,age:a=20,friends,obj} = data;
          //a =18   obj.a   friends[1]
    }
//////////////////
    //擴充套件
    //字串擴充套件 substring(start,stop) 不包含stop   substr(start,length) indexOf() 首次出現的位置
      let str = 'hello world';
      str.startsWith('h');   //字串是否在原字串的頭部  返回true false  區分大小寫 第二個引數表示搜尋的位置
        str.endsWith('h');   //字串是否在原字串的尾部  第二個引數表示搜尋的位置
        if(str.indexOf('h') !=-1){}
        //匹配是否存在於字串  第二個引數表示搜尋的位置
        if(str.includes('h')){conslole.log('ok')}else {};

         //字串迴圈 for  of
         for(let s of  'helloworld'){    
             console.log(s)  //h e l l ....
         };

         //repeat()    重複
         'a'.repeat(5);  //aaaaa
         'abc'.repeat(3);  //abcabcabc
         'abc'.repeat(0);  //''
         'abc'.repeat(3.6);  //取整

         //補全
         let s2 = 'a';
         s2.padStart(5,'xyz');  //xyzxa   頭部補全
         s2.padEnd(5,'xyz');  //axyzx  尾部補全

         //數值擴充套件
         parseInt(2.2345);
         Number.parseInt(2.2345);
         //判斷一個數值是否為整數
         Number.isInteger(10);   //true
         Number.isInteger(10.342);   //false

         //Math 物件    執行數學任務
         Math.random()   //隨機數  0-1 但不包含0/1
         Math.ceil(3.6)  //向上    4
         Math.floor(3.9)  //向上    3
         Math.round(3.9)   //四捨五入   
         Math.trunc(3.6)  //3   
         Math.trunc(-3.6)   //-3
         Math.sign(-3.6) //判斷數值是正數,負數,零。。。。
         //正數 +1   負數 -1  0   0  其它值 NaN

         //ES6 指數運算子  2**2
         //2**2   4   2**3  8  3**2   9
         let a =2 ; a+=1;  // ===  a=a+1;
         let a =2 ; a**=2;  // ===  a=a*a;
         let a =2 ; a**=3;  // ===  a=a*a*a;

         //函式擴充套件
         //es5
         function fun(x,y){
             y = y || 10;
             console.log(x,y)
         };
         fun(2);
         // ES6
         function fun(x,y=10){
             console.log(x,y)
         };
         fun(2);
         //rest引數
         function fun(...values){   //arguments
             console.log(values)   //values[2]
         };
         fun(2,32,343,324,34,432,5325,24,432,42,42);
         //箭頭函式
         let f = v=>v;
         let f = function(v){
             return v;
         };
         //引數為空    
         let f = ()=>'123';
         //多個引數
         let f = (n1,n2)=>n1+n2;
         let f = (n1,n2)=>{abc()};
         //物件
         let f = (n1,n2)=>({name:n1,age:n2});
         //傳預設值
         let f = (n1,n2=10)=>{
             console.log(n1,n2)
         };
         f(3)  //3 10

        //物件解構
        let fun =({a=0,b=0} ={})=>{   //變數為預設值
            return [a,b];
        };
        fun({a:2,b:5});  //2,5