• 【ES6】函数


    函数默认值问题

    在ES6之前,不能直接为函数指定默认值,但是ES6允许为函数的参数设置默认值

    之前实现方式

    function log(x, y) {
      y = y || 'World';
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello World

    解析:缺点在于如果给参数y赋值了,但是对应的布尔值是false,则会出现最后一样的输出结果

    ES6实现方式

    function log(x, y = 'World') {
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello

    ps:  参数变量是默认声明的,所以不能用let或者const再次声明,否则会报错;

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

      参数默认值是惰性求值的;

    例子

    //不能let或者const再次声明参数变量x
    function foo(x = 5) {
      let x = 1; // error
      const x = 2; // error
    }
    
    //使用参数默认值,参数不能同名
    // 不报错
    function foo(x, x, y) {
      // ...
    }
    
    // 报错
    function foo(x, x, y = 1) {
      // ...
    }
    
    //参数默认值惰性求值
    //参数p的默认值是x+1.每次调用函数foo,都会重新计算x+1,而不是默认p=100
    let x = 99;
    function foo(p = x + 1) {
      console.log(p);
    }
    
    foo() // 100
    
    x = 100;
    foo() // 101
    

    与解构赋值默认值结合使用

    //只使用解构赋值默认值
    
    function foo({x, y = 5}) {
      console.log(x, y);
    }
    
    foo({}) // undefined 5
    foo({x: 1}) // 1 5
    foo({x: 1, y: 2}) // 1 2
    foo() //报错
    
    解构赋值默认值和函数参数默认值结合使用
    function foo({x, y = 5} = {}) {
      console.log(x, y);
    }
    
    foo() // undefined 5

    没有第二个参数时,函数参数的默认值就会生效,然后才是解构赋值的默认值生效,变量想y才会取到默认值5。

    例题

    // 写法一
    function m1({ x = 0, y = 0 } = {}) {
        return [x, y];
    }
    
    // 写法二
    function m2({ x, y } = { x: 0, y: 0 }) {
        return [x, y];
    }
    
    // 函数没有参数的情况
    console.log(m1());// [0, 0]
    console.log(m2());// [0, 0]
        
    
    // x 和 y 都有值的情况
    console.log(m1({ x: 3, y: 8 }));// [3, 8]
    console.log(m2({ x: 3, y: 8 }));// [3, 8]
        
    
    // x 有值,y 无值的情况
    console.log(m1({ x: 3 }));// [3, 0]
    console.log(m2({ x: 3 }));// [3, undefined]
        
    
    // x 和 y 都无值的情况
    console.log(m1({})) // [0, 0];
    console.log(m2({}));// [undefined, undefined]
        
    console.log(m1({ z: 3 }));// [0, 0]
    console.log(m2({ z: 3 }));// [undefined, undefined]

    解析:相同:都有函数参数默认值

       不同:

        写法一 函数参数默认值空对象 设置了对象解构赋值的默认值

        写法二 函数参数默认值为一个有具体属性的对象 没有设置对象解构赋值默认值

    箭头函数

    //无参数的箭头函数
    var f = () => 5;
    
    等价于
    var f = function () { return 5 };
    
    //一个参数的箭头函数
    var f = v => v;
    
    等价于
    var f = function(v) {
      return v;
    };
    
    //2个参数的箭头函数
    var sum = (num1, num2) => num1 + num2;
    
    等价于
    
    var sum = function(num1, num2) {
      return num1 + num2;
    };
    

    ps:

    //箭头函数代码块语句多于一条,需要使用花括号括起来,并且使用return语句
    var sum = (num1, num2) => { return num1 + num2; }
    
    //如果箭头函数直接返回一个对象,必须加上括号,否则会报错
    // 报错
    let getTempItem = id => { id: id, name: "Temp" };
    // 不报错
    let getTempItem = id => ({ id: id, name: "Temp" });

    箭头函数注意事项

    (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
    2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
    
    (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
    
    (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

    箭头函数的this的问题

    function foo() {
      setTimeout(() => {
        console.log('id:', this.id);
      }, 100);
    }
    
    var id = 21;
    
    foo.call({ id: 42 }); 
    //输出结果为42 并非21
    

    函数绑定运算符

    它是并排的两个冒号(::),该运算符会自动将左边的对象,作为上下文环境(this对象),绑定到右边的函数上, 

    写法:对象::函数

    作用:用函数运算符来取代call,apply,bind调用。

     应用:

    //普通双冒号运算符应用
    foo::bar
    
    等同于
    
    bar.bind(foo)
    
    
    foo::bar(...arguments)
    
    等同于
    
    bar.apply(foo,arguments)
    
    //双冒号左边为空,右边是一个对象的方法,则是将该方法绑定到该对象上
    
    let log = ::console.log;
    
    // 等同于
    
    let log = console.log.bind(console);

    相关资料:https://www.cnblogs.com/wangyingblog/p/5583825.html

           http://www.jb51.net/article/80861.htm

         http://blog.csdn.net/ganyingxie123456/article/details/70855586

  • 相关阅读:
    vue定时调用接口
    vue初始化页面加载数据
    elementUI提示框
    vue+axios使用get请求
    Summernote编辑器的使用
    Springboot返回json对象
    vue+axios使用post请求
    Nginx负载均衡当其中一台服务器挂掉之后,Nginx负载将会怎样呢?
    vue解决前端输入框不能输入问题
    vue获取html文本化,页面转为html格式渲染
  • 原文地址:https://www.cnblogs.com/websmile/p/8342812.html
Copyright © 2020-2023  润新知