es6笔记——chapter5

给函数参数赋默认值

    function log(x,y="hello") {
        console.log(x,y);
    }
    log("hai~","大妹纸");
    log('hi');
    log('hi',"");
    log();

    function Point(x,y) {
        this.x = x;
        this.y = y;
    }
    const p = new Point(10,10);
    console.log(p);

参数变量是默认声明的，因此不能用let const再次声明

    function foo(x = 5) {
        console.log(x);
        var x = 1;
        console.log(x);
       // let x = 2;//Identifier 'x' has already been declared
    }
    foo();

使用参数默认值时，函数不能有同名参数

         // 不报错
        function foo1(x, x, y) {
            // ...
        }

        // 报错
       function foo2(x, x, y = 1) {
            ...
       }
        // SyntaxError: Duplicate parameter name not allowed in this context

参数默认值是惰性求值的

         let x = 99;
        function foo(p = x + 1) {
            console.log(p);
        }

        foo()

        x = 100;
        foo()

参数默认值与解构赋值默认值联合使用

        function foo({x,y=5}) {
            console.log(x,y)
        }
        foo({});
        foo({x:2});
        // foo();

函数参数为空时 设置默认值为空对象 对象属性为空时 默认值为设定值

        function foo1({x,y=5}={}) {
            console.log(x,y)
        }
        foo1({});
        foo1({x:2});
        foo1();

下面两个方法的不同之处

        function m1({x = 0,y=0}={}) {
            console.log(x,y)
        }
        function m2({x,y}={x:0,y:0}) {
            console.log(x,y)
        }
        m1();
        m2();
        m1({x:1});
        m2({x:1})

    //    m1方法设置参数默认值为空对象 且利用了对象的解构赋值
    //    m2方法仅设置了参数默认值为一个固定对象 未设置对象的解构赋值

定义默认值的参数应该是函数的尾参数， 如果非尾部的参数设置默认值，实际必须传入undefined 否则会报错

        function f1(x=1,y) {
            console.log(x,y);
        }
        // f1(undefined,2);
        function f2(x,y,z=2) {
            console.log(x,y,z);
        }
        f2(2,3);

函数的length属性在设置默认参数的情况下 返回为指定默认值的参数个数  length属性的含义：该函数预期传入的参数个数

        console.log((function (a) {}).length )
        console.log((function (a = 5) {}).length )

rest参数不会计入length属性，如果指定默认值的参数不是尾参数，那么length属性不再计入其后的参数个数

        console.log((function (a = 0, b, c) {}).length);
        console.log((function (a, b = 1, c) {}).length);

  设置了函数默认值，进行函数初始化时会形成一个单独的作用域，初始化结束后，该作用域会消失  不设置函数参数默认值时不存在该行为

        let x = 1;
        function f(x,y=x) {
            console.log(y)
        }
        f(2);
        function f3(y=x) {
            let x = 3;
            console.log(y);
        }
        f3();

        function f4(x,y=function (){x = 2}) {
            var x = 3;
            y();
            console.log(x);
        }
        f4();
        console.log(x)
        function f5(x,y=function (){x = 2}) {
            x = 3;
            console.log(x);
            y();
            console.log(x);
        }
        f5();

rest参数用于获取函数多余参数 代替arguments对象 rest参数是真正数组 可直接使用数组方法 arguments对象是类数组 需使用Array.prototype.slice.call()方法转换为真正的数组

        function add(...values) {
            var sum = 0;
            values.forEach((item)=>{
                sum += item;
            })
            return sum;
        }
        console.log(add(1,2,3));

上面的方法用arguments变量写的话

        function add() {
            let args = Array.prototype.slice.call(arguments);
            let sum = 0
            args.forEach((item)=>{
                sum += item;
            })
            return sum;
        }
        console.log(add(1,2,3))

注：rest参数之后不能再有其他函数参数，否则会报错   且函数的length属性不包括rest参数

        // 报错
        function f(a, ...b, c) {
            ...
        }

es5开始函数内部可以设定为严格模式 函数体第一行 ‘use strict’

        function f6() {
            "use strict";
        }

es6 规定 使用了默认参数、解构赋值、扩展运算符，函数内部就不能设置为严格模式，否则会报错 Illegal 'use strict' directive in function with non-simple parameter list

        function f7(x,y=0) {
            // "use strict";
        }

因为函数的严格模式适用于函数参数和函数体 执行顺序是先执行函数参数再执行函数体，但是否使用严格模式是在函数体中决定的，因此产生矛盾  规避方法如下

设置全局性的严格模式

        "use strict"
        function f8() {

        }

把函数放在无参数的立即执行函数中

        (function () {
            "use strict";
            function f9() {

            }
        })()

函数的name属性，返回函数的名字 对某些特殊情况es5和es6返回值不一样   

匿名函数的name值 es5返回空字符串“”  es6返回匿名函数赋值的变量名

         let a = function () {

        }
        console.log(a.name);

具名函数赋值给变量后 函数的name属性返回函数本来的名字

        let b = function c() {

        }
        console.log(b.name)

Function构造函数实例 name值为anonymous

console.log(new Function().name)

bind返回的函数 name值为加入bound前缀

        function a() {

        }
        console.log(a.bind(this).name)

箭头函数 参数大于1个或者没有参数时箭头前用圆括号  函数体语句大于1条时用{}包裹 并使用return语句

        let a = (num1,num2) => num1+num2;
        console.log(a(11,22))

如果箭头函数返回的是一个对象 必须在对象外加（） 否则会被解释为代码块标识

        let a = (a,b) => ({a:a,b:b});
        console.log(a(10,20));

箭头函数与结构赋值联合使用

        const full = ({first,last})=> first+","+last
        console.log(full({first:"再见",last:"你好"}));

常用方法示例

        const isEven = num => num%2===0 ;
        const squre = num => num*num;
        [1,2,3].map(item=>item*item);
        [3,5,2,4,1].sort((a,b)=> a-b);
        const arr = (...nums) => nums;
        const headAndTail = (head,...tail) => [head,tail];

箭头函数注意点：
1.函数内部的this指向函数定义生效时所在的对象箭头函数内部没有this 不能用call()bind()apply()改变this的指向                2.不可以做构造函数 不能使用new命令
3.不能使用arguments对象 可用rest参数代替
4.不能使用yield 命令 不能做Generator函数

        function abc() {
            setTimeout(()=>{console.log(this.id)},100)
        }
        var id = 21;
        abc();
        abc.apply({id:42});

        function Timer() {
            this.s1 = 0;
            this.s2 = 0;
            setInterval(()=>this.s1 ++,1000);
            setInterval(function () {
                this.s2 ++;
            },1000)
        }
        let timer = new Timer();
        setTimeout(() => console.log(timer.s1),3001);
        setTimeout(() => console.log(timer.s2),3001);

双冒号运算符  将运算符右边的方法绑定到运算符左边的对象上 如果::运算结果是一个对象，可采用链式写法

        foo::bar1;
        foo::bar2(...argument);

        ::obj.foo

尾调用是指 函数的最后一步是调用某个方法

        function f(x) {
            if (x > 0) {
                return m(x)
            }
            return n(x);
        }

尾调用优化：用内层函数的调用帧取代外层函数的调用帧 ，只保留内层函数的调用帧，节省内存空间   只有不在使用外层函数的内部变量，才能进行尾调用优化

递归是指函数调用自身  尾递归是指函数的最后一步调用自身方法

        //    阶乘函数
        function factorial(n) {
            if(n ===1)return 1;
            return n*factorial(n-1);
        }
        console.log(factorial(3));
        //改写成尾递归 只保留一个调用记录
        function factorial1(n,total) {
            if(n ===1) return total;
            return factorial1(n-1,n*total)
        }

改写递归函数 将函数内部用到的变量改写成函数参数 尾调用优化和尾递归优化都只有在严格模式下才生效