ES6学习笔记06——函数扩展

1.基本用法

    //函数的参数可以加默认值,只有不传实参的时候才会走默认值
     function fn1(x="x",y) {
        console.log(x,y);
     }
     fn1(1,2) //1 2

     function fn2({x=0,y=0}={}){
        return{x,y}
     }
     console.log(fn2({x:1})) //{x: 1, y: 0}

     function fn3({x,y}={x:1}){
        return {x,y}
     }
     console.log(fn3({x:1})) //{x: 1, y: undefined}

     //一般会把默认值放在最后边
     function fn4(x,y,z=1){
        return {x,y,z}
     }
     console.log(fn4(1,2))//{x: 1, y: 2, z: 1}

2.参数集合

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

     function fn6(x,y=2){}
     fn6();
     //没有默认值的情况下，形参的长度
     //如果有默认值，当前默认值就会影响他的length，默认值参数的位置
     console.log(fn6.length) // 1

3.参数作用域问题

    function fn1(x = n, y = m) {
        let n = 1, m = 2;
        console.log(x, y);//Uncaught ReferenceError: n is not defined
    }
    fn1();

    //形参所在的小括号，是一个单独的作用域，遇到了变量先看自己作用域下有没有，没有再往上一级找
    let x = 10;

    function fn2(x = 1, y = x) {
        //let x=20;
        console.log(y);
    }
    fn2();

4.扩展运算符

 /* ... 可以将数组变成非数组，也可以将非数组变成数组*/
    let ary = [1, 2, 3];
    console.log(...ary);//1 2 3
    //将字符串变成数组
    let str = "123a45";
    console.log([...str]);//["1", "2", "3", "a", "4", "5"]
    //将类数组变成数组
    function fn() {
        return [...arguments].sort()
    }

    console.log(fn(2, 3, 4, 2, 1, 6));//[1, 2, 2, 3, 4, 6]

    /*应用：求最大值的方法*/
    console.log(Math.max(2, 4, 56, 2));//56
    let ary1 = [1, 2, 3, 4, 6, 23];

    //方法一：
    eval("Math.max(" + ary1 + ")");//23

    //方法二：
    Math.max.apply(null, ary1);//23

    //方法三：
    Math.max(...ary1);//23

    /*数组拼接*/
    let a1=[1,2,3],a2=[2,6,7];
    console.log(a1.concat(a2));//[1, 2, 3, 2, 6, 7]
    console.log([...a1, ...a2]);//[1, 2, 3, 2, 6, 7]

5.函数name属性

function fn() {
    }

    console.log(fn.name);//fn

    /*bind,用来改变this的，返回新的函数*/
    let obj = {};
    var fn1 = fn.bind(obj);
    fn1();
    console.log(fn1.name);//bound fn,因为是通过fn的bind得来的

    //通过构造函数创建的，名字比较特殊
    let f=new Function("n","return n");
    console.log(f.name);//anonymous 匿名

6.箭头函数

    /*箭头函数*/
    let fn1 = (x) => {
    };
    x => x; //相当于 function fn(x){return x}; 如果函数体只有一行代码而且是return ；可以简写
    /*箭头函数中的this问题*/
    //箭头函数没有this指向，它里面的this是谁，看他的上一级作用域（上一级作用域不是箭头函数）
    let obj = {
        fn: function () {
            console.log(this);//{fn: ƒ, fn1: ƒ}
            let f = () => {
                console.log(this);
            };
            f();//{fn: ƒ, fn1: ƒ}
        },
        fn1: () => {
            console.log(this);//Window{postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,…}
        }
    };
    obj.fn();//this==obj;
    obj.fn1();//this==window;

    /*应用*/
    box.onclick=()=>{
        console.log(this);//window
    }