1. 程式人生 > >箭頭函式及擴充套件運算子

箭頭函式及擴充套件運算子

//箭頭函式    不能作為建構函式   不能使用new
        var f = () =>{}
        var f1 = new f();   //f is not a constructor
        //原型 沒有原型屬性
        function f(){}
        f.prototype;
        var f2 = () =>{}
        f2.prototype;   //error

        // this 箭頭函式中this指向是定義是的this ,而不是執行時的this
        //箭頭函式中this 是外層呼叫者
        //setTimeout   this   window
        function Fun(){
            this.i = 0;
            setTimeout(function(){
                console.log(this);   //window
            },2000);
        };
        var f3 = new Fun();
        //es6
        function Fun(){
            this.i = 0;
            setTimeout(()=>{
                console.log(this);   //Fun()
            },2000);
        };
        var f3 = new Fun();
        //   物件中箭頭函式的方法表示window物件
        var obj = {
            age:18,
            getAgeA:function(){
                console.log(this.age)   //Obj
            },
            getAgeB:()=>{
                console.log(this.age)  //window
            }
        };
        obj.getAgeA();
        obj.getAgeB();
        //物件中箭頭函式如何外層呼叫者的方式
        var obj = {
            age:18,
            getAgeA:function(){
                var fn =()=> this.age;    ////Obj
                return fn();
            }
        };
        obj.getAgeA();

        //apply()   call()  
        function Cat(name,color){
            this.name = name;
            this.color = color;
        };
        //var cat = new Cat();
        var o ={};
        Cat.apply(o,['1111','2222']);   //Cat函式在o中執行
        o.name; 
        //雙冒號運算子  ::    左邊是一個物件,右邊是一個函式   自動將左邊的物件繫結到右邊的函式上面
        //o::Cat(['1111','2222']);  //===Cat.apply(o,['1111','2222']);   //Cat函式在o中執行

        //作用域   作用域中如果設定了引數的預設值  獨立作用域
        var x = 1;
        function fn(x,a = x){
            console.log(a);
        };
        fn(10);   //10
        //
        var x = 1;
        //a = x形成了一個單獨的作用域,變數X本身沒有定義,所以指向了全域性的變數X,
        //呼叫時,區域性變數影響不到預設值的變數
        function fn(a = x){    
            let x = 10;
            console.log(a);
        };
        fn();   //1

        //嚴格模式  'use strict'
        //es5  OK
        function fn2(){
            'use strict';
        };
        //es6  函式的引數使用預設值,解構,擴充套件運算子。。。。 
        function fn2(x,a = x){
            'use strict';    //error
        };
        'use strict';    //OK
        function fn2(){
            'use strict';      //OK
            return function(x,a = x){

            }
        };

        //...擴充套件運算子    用於函式呼叫
       // fun(陣列,引數);
       var arr1 = [1,2,3];
       var arr2 = [4,5,6];
       function fun(arr1,...arr2) {
           arr1.push(...arr2);
       };
       //arr1=[1,2,3,4,5,6],相當於...arr2將變為引數序列,意思就是將arr2裡的資料變成引數。
       fun(a,[1,2,3,4]);
       var arr1 = [1,2,3];
       var arr2 = [4,5,6];
       arr1.push(arr2);  //[1, 2, 3, Array(3)]
      //concat
       var arr1 = [1,2,3];
       var arr2 = [4,5,6];
       arr1 = arr1.concat(arr2);  //[1, 2, 3, 4, 5, 6]
       //ES6
       var arr1 = [1,2,3];
       var arr2 = [4,5,6,7,9,10];
       arr1.push(...arr2);  //[1, 2, 3, 4, 5, 6]

       //函式中的引數
       function add (a,b){
           return a+b
       };
       var num = [3,9];
       add(...num);
       //
       function f(...items) {
           console.log(...items)
       };
       var num = [1,2,3];
       var num2 = [4,5,6];
       f(1,...num,2,...num2);  //1 1 2 3 2 4 5 6
       
       //深拷貝
       var a1 = [1,2,3,4];
       var a2 = a1;
       a2[1] = 100;
       console.log(a1);  //1,100,3,4
       //es5解決方法   concat();  slice();
       var a1 = [1,2,3,4];
       var a2 = a1.concat();
       a2[1] = 100;
       console.log(a1);   //1,2,3,4
       //ES6  深拷貝
       var a1 = [1,2,3,4,5];
       var a2 = [...a1];
       //var [...a2] = a1;
       a2[1] = 100;
       console.log(a1);

       //陣列的合併
       var arr1 = [1,2,3];
       var arr2 = [4,5,6];
       var arr3 = [12,3,4,5,2];
       arr1 = arr1.concat(arr2,arr3);
       [...arr1,...arr2,...arr3];

       //解構
       var [a,b,c,d] = [1,2,3,4];
       var [a,...b] = [1,2,3,4];  //ok
       a   //1
       b  //[2,3,4];
       var [...a,b] = [1,2,3,4];   //error   擴充套件運算子只能放在引數的最後一位,否則報錯
       var [a,...b,c] = [1,2,3,4];   //error

       //字串轉陣列
       var str = 'hello';
       console.log(str.split(''));  //["h", "e", "l", "l", "o"]
       //es6
       var str = 'hello';
       [...str];   ////["h", "e", "l", "l", "o"]