zoukankan      html  css  js  c++  java
  • es6箭头函数

    • 默认值
        //1、参数默认值 位置在所有形参的后面
        //es6之前的采取的默认值只能变相采取
        function test(a,b) {
            a=a||2;
            b=b||2;
            return a*b
        }
        console.log(test());
    //但是这个有弊端  当我们传递的值为0的时候,还是会走默认值。改造之后
        function test1(a,b) {
            a=typeof a==="undefined"?2:a;
            b=typeof b==="undefined"?2:b;
            return a*b
        }
    
        console.log(test1(0,0))
    //    es6为我们提供了默认值
    //    语法糖:  function(a,b=2){}
         let test2=(a=2,b=2) =>{
            return a*b
        };
        console.log(test2());

    • 默认参数的名字 默认参数的名字不能和函数内的形参名字相同,如果相同会报错,没有默认值的情况下,形参名字可以相同。
        //使用默认参数的时候,函数的形参中的参数名字不能和默认参数的名字一样 会报错。但是不是默认参数的时候可以是相同的名字
        function fn (a,a) {
            return arguments[0]*arguments[1]
        };
        console.log(fn(2,2));
        //但是如果使用的是默认参数的时候不能同名
        function fn1 (a,a=2) {
            console.log(2)
        }
        console.log(fn1(2,2));

    • 默认参数不是传值,每次在使用默认值得时候,才进行表达式求值。即惰性求值
    1 //    默认参数 不是传值,每次在使用的时候都会进行计算,惰性求值。
    2     let  a=(a,b=2+1)=>{
    3         return a*b
    4     };
    5     console.log(a(2));
    1    let  valEx=(a=2,b=2)=>{
    2         console.log("执行一次");
    3         return a*b
    4     };
    5     let  a=(a,b=valEx())=>{
    6         return a*b
    7     };
    8     console.log(a(2));

     1 //  通过函数参数的默认值和解构赋值来结合使用
     2     let f=({a,b=2})=>{
     3         console.log(a,b)
     4     };
     5     f({});
     6     f({a:2,b:2});
     7     // f();//这种情况下 我们传递不是对象的时候,会报错 TypeError: (destructured parameter) is undefined。
     8 //    解决上面的f()报错问题我们可以定义默认值给对象即可避免。
     9     f=({a,b=2}={})=>{
    10         console.log(a,b)
    11     };
    12     f();

     练习

     1 // 写法一 解构的时候给变量设置默认值。在传参的时候的设置默认值 这种情况不给函数传递对象的时候会使用解构的默认值
     2 function m1({x = 0, y = 0} = {}) {
     3     return [x, y];
     4 }
     5 
     6 // 写法二 这种情况没有给解构赋默认值,在传递空对象的时候,x y都是undefined
     7 function m2({x, y} = { x: 0, y: 0 }) {
     8     return [x, y];
     9 }
    10 
    11 // 函数没有参数的情况
    12 m1();//[0,0]
    13 m2() ;//[0,0]
    14 
    15 // x 和 y 都有值的情况
    16 m1({x: 3, y: 8});//[3,8]
    17 m2({x: 3, y: 8});//[3,8]
    18 
    19 // x 有值,y 无值的情况
    20 m1({x: 3});//[3,0]
    21 m2({x: 3});//[3,undefined]
    22 
    23 // x 和 y 都无值的情况
    24 m1({}) ;//[0,0]
    25 m2({});//[undefined,undefined]
    26 
    27 m1({z: 3}) ;////[0,0]
    28 m2({z: 3}) ;//[undefined,undefined]
    •  函数的length 函数length的属性,表示函数的形参的长度。
    1 function test(x,y,c){
    2 
    3 }
    4 console.log(test.length);
    • 在给函数赋予默认值的时候,此时函数的长度是形参的长度减去有默认值的形参的长度。
    1 //形参的默认值,会导致函数的length的失效,此时的length的长度是所有形参的个数减去有默认值的形参的个数。
    2     let a=(d,c,f=1)=>{};
    3     console.log(a.length);
    • 默认参数的作用域
     1 // 作用域 在使用形参默认值的时候,在出事的默认值的时候,默认值会形成单独的作用域。默认值初始化完毕之后,该作用于消失,如果没有参数的默认值不会存在这个作用域。
     2     let x=12;
     3     let  fn=(x,y=x)=>{
     4         console.log(x,y);//2 2
     5     };
     6     fn(2);
     7     //函数fn 在给y初始化默认值的时候,使用的x这个形参,而不是全局的x。他会从当前的作用域查找。如果没有依次向上查找。即从他的作用域链查找。函数内部的声明的变量并不会改变全局的
     8     let u=2;
     9     let fn1=(j=u)=>{
    10 
    11         let u=4;
    12         console.log(j,u);
    13     };
    14     fn1();//2 ,4
    15     console.log(u)//2
    • 应用  为必须参数抛出错误。比较方便
    1 //默认参数的应用
    2     let missParam=()=>{
    3         throw  new Error("require paramter!")
    4     };
    5     let fn=(x=missParam())=>{};
    6     fn();
    7 //    也说明默认参数是惰性执行,也就是只有当缺少默认值的时候才会执行默认值后面的表达式

    • rest 参数
     1 //rest 参数 es6中 rest参数代替es5中的arguments   语法:...变量名
     2     let fn=(...arr)=>{
     3         let sum=0;
     4         for(var val of arr){
     5             sum+=val;
     6         }
     7         return sum
     8     };
     9     console.log(fn(1,2,3,4,5));
    10     //函数的length的方法,计算不包含rest参数。
    11     console.log(fn.length);

  • 相关阅读:
    纯C分割 字符串 devC++版本 vs各种奇怪的问题,
    C的字符串操作 split
    MyArray框架搭建与实现
    三目运算符(C++)
    ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
    sqlServer not in 分页
    web 移动端开发手机查看效果
    webpack 安装babel处理ES6语法
    webpack 的环境搭建
    web 服务器添加数据到 SQL server
  • 原文地址:https://www.cnblogs.com/evilliu/p/10929391.html
Copyright © 2011-2022 走看看