ES6学习之路(五) 函数的扩展

来源:互联网 发布:知乎lookfantastic 编辑:程序博客网 时间:2024/06/08 18:58

参数默认值

es6允许在参数中写入默认值
注意点:
1.在函数中,参数变量是默认声明的,如果使用let或者const在函数内部再次声明会报错
2.函数不能有同名参数,否则就报错
3.如果参数默认值是包含变量的表达式,那么参数就不能传值,需要修改变量的值来改变参数值
4.如果函数的参数是一个对象,那么必须调用时传入对象才会生效,否则就报错;
5.可以给对象参数设置一个对象默认值,这样就不会报错了
6.参数默认值要放到参数末尾,否则这个参数就没办法省略
7.默认值参数必须写到尾部
8.length属性显示的是没有默认值的参数的个数,有默认值的参数会被忽略,length不会去查找含有默认值参数之后的参数个数
9.当函数的参数中有设置默认值的参数时,包含参数的圆括号就会形成一个作用域
10.rest参数 与之前的变量结构赋值的rest变量是一个东西;rest参数也会被length属性所忽略,rest参数必须放到参数的最后一个

下面会进行演示

在函数中,参数变量是默认声明的

        //如果使用let或者const在函数内部再次声明会报错        function Point(x=0,y=0){            this.x=x;            this.y=y;        }        var p=new Point()        console.log(p.x,p.y);//0,0        //函数不能有同名参数,否则就报错         function Point2(x=0,x,y=0){            //Duplicate parameter name not allowed in this context            this.x=x;            this.y=y;         }        //如果参数默认值是包含变量的表达式,那么参数就不能传值,需要修改变量的值来改变参数值        let o=99;        function foo(p=o+1){            console.log(p)        }        foo();//100        o = 100;        foo() // 101

如果参数是对象

        //如果函数的参数是一个对象,那么必须调用时传入对象才会生效,否则就报错        function foo({x,y=0}){            console.log(x,y);        }        foo({})//undefined , 0        foo({x:1})//1,0        foo({x:1,y:2})//1,2        foo();//Cannot match against 'undefined' or 'null'.        function fetch(url,{body='',method='GET',headers={}}){            console.log(method);        }        fetch('http://example.com',{})//GET        fetch('http://example.com')//报错        //可以给对象参数设置一个对象默认值,这样就不会报错了        function fetcd(url,{body='',method='GET',headers={}}={}){            console.log(method);        }        fetcd('http://example.com',{})//GET        fetcd('http://example.com')//GET

参数默认值的位置

        //参数默认值要放到参数末尾,否则这个参数就没办法省略        function f(x=1,y){            return console.log([x,y]);        }        f();//1,undefined        f(2);//2,undefined        f(,2)//Unexpected token , 省略x的参数就报错        f(undefined,1)//1,1 必须显示的设置 x 为Undefined才会触发默认值        function f(x,y=7,z){            return console.log([x,y,z]);        }        f();//[undefined, 7, undefined]        f(1);//1,7,undefiend        f(1,,2);//空出y 的位置就报错        f(1,undefined,2)//1,7,2 必须显示的设置Undefined

函数的length属性

        //默认值参数必须写到尾部        //length属性显示的是没有默认值的参数的个数,有默认值的参数会被忽略,        console.log((function(x,z,y=9){}).length);//2        //length不会去查找含有默认值参数之后的参数个数        console.log((function(y=9,x,z){}).length);//0

参数作用域

        //当函数的参数中有设置默认值的参数时,包含参数的圆括号就会形成一个作用域        let x=1;        //参数y有默认值x,所以圆括号就形成一个临时作用域,y=变量x,变量x=参数x,参数通过传值得到 2 ,而取不到全局的x值        function f(x,y=x){            console.log(y);        }        f(2)//2----------------------------------------------------------------------------------        let x=1;        //参数y有默认值x,所以圆括号就形成一个临时作用域,y=变量x,由于本作用域中没有x变量,所以向全局中取得x的值        function f(y=x){            console.log(y);        }        f()//1--------------------------------------------------------------------------------        //下面这样写 也会报错,变量必须先声明再调用        var x = 1;        function foo(x = x) {         ...        }        foo() // ReferenceError: x is not defined

参数可以使函数

        //参数默认值 可以使函数        let foo ='outer';        function bar(func = x=>foo){            console.log(func());        }        bar();//outer

rest参数

{…rest}

rest参数 与之前的变量结构赋值的rest变量是一个东西;
需要注意的是,rest参数会被length属性忽略,就是前面说的函数length;
rest参数与参数默认值一样 必须放到参数的最后一个

拓展运算符

与rest非常相似,写法…spread(其实就是rest,没发现什么不同)
将一个数组转为用逗号分隔的参数序列。

        function add(x,y){            return console.log(x+y);        }        let arr = [2,18];        add(...arr);//20  从头匹配参数-----------------------------------------------------------             [a,b,...z]=[1,2,3,4,6,4,5]        console.log(a,b,z)//1,2,[3,4,6,4,5]-----------------------------------------------------------             //代替apply,将数组转换为参数        function f(x,y,z){            //...        }        var args = [0,1,2];        f(...args);        //Math方法        console.log(Math.max(...[3,4,5]));        var arr1=[0,1,2];        var arr2=[3,4,5];        arr1.push(...arr2);

函数的name属性

函数的name属性,返回该函数的函数名。
Function构造函数返回的函数实例,name属性的值为anonymous。
bind返回的函数,name属性值会加上bound前缀。

        var f =function(){}        console.log(f.name);//f        //命名函数        var c=function c1(){};        console.log(c.name)//c1        var d = new Function;        console.log(d.name);//anonymous        //bind         function foo() {};        foo.bind({}).name // "bound foo"        (function(){}).bind({}).name // "bound "

箭头函数

1.箭头函数 没有this,所有他的this全部指向生成是所在的对象
2.箭头函数没有arguments,apply,call, bind,因为箭头函数根本没有this,所以改变this指向的函数对他无效,
3.箭头函数不能作为构造函数,不能使用new;
4. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

原创粉丝点击