箭头函数及扩展运算符

//箭头函数    不能作为构造函数   不能使用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"]

猜你喜欢

转载自blog.csdn.net/zhujiarunm/article/details/83795892