ES6之 函数（五）

• 函数参数的默认值

  • 当不传入参数的时候默认使用形参里的默认值

  • function Point(x = 0, y = 0) { … }

  • 案例

    <script type="text/javascript">
      // 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
      
      //使用ES6 函数参数的默认值
      function log(x, y = 'World') {
        console.log(x, y);
      }
      log('Hello') // Hello World
      log('Hello', 'China') // Hello China
      log('Hello', '') // Hello
      
      //使用ES6 函数参数的默认值
      function Point(x = 0, y = 0) {
            this.x = x;
            this.y = y;
      }
      let p = new Point();
      p // { x: 0, y: 0 }
    </script>
    

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

    //案例 1
    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() // TypeError: Cannot read property 'x' of undefined
    
    //案例 2
    function fetch(url, { body = '', method = 'GET', headers = {} }) {
    	console.log(method);
    }
    fetch('http://example.com', {})
    // "GET"
    
    fetch('http://example.com')
    // 报错
    

• rest 参数（“…变量名”）

  • 用于获取函数的多余参数，这样就不需要使用arguments 对象。rest 参数搭配的变量是一个数组，该变量将多余的参数放入其中。

  • 案例

      //案例 1：
      function add(...values) {
        let sum = 0;
        for (let val of values) {
          sum += val;
        }
        return sum;
      }
      //10
      console.log(add(2, 5, 3));
      
      //案例 2：
      //下面是一个rest参数代替arguments变量的例子
      // arguments变量的写法
      function sortNumbers() {
        return Array.prototype.slice.call(arguments).sort();
      }
     // rest参数的写法
     const sortNumbers = (...numbers) => numbers.sort();
      
     //案例 3：
     function push(array, ...items) {
      	  items.forEach(function(item) {
      	  	array.push(item);
      	  	console.log(item);
      	   });
      }
      var a = [];
      push(a, 1, 2, 3)
    

  • 注意

    • rest参数之后不能再有其他参数（即只能是最后一个参数），否则会报错

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

• 箭头函数

  • 作用：定义匿名函数

  • 使用场景：多用来定义回调函数

  • 基本语法：

    • 没有参数： () => console.log(‘xxxx’)
    • 一个参数： (i) => i+2
    • 大于一个参数: (i, j) => i+j
    • 函数体不用大括号: 默认返回结果
    • 函数体如果有多个语句, 需要用{ }包围，若有需要返回的内容，需要手动返回(+ return)

  • 箭头函数的特点：

    • 简洁
    • 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所在的对象就是它的this
    • 扩展理解
      • 箭头函数的this看外层的是否有函数
      • 如果有，外层函数的this就是内部箭头函数的this
      • 如果没有，则this是window

  • 案例

    //案例 1：
    var f = v => v;
    //上面的箭头函数等同于：
    var f = function(v) {
      return v;
    };
    
    let fun = function () {
           console.log('fun()');
    };
    fun();
    
    //案例 2：
    //没有形参，并且函数体只有一条语句
    let fun1 = () => console.log('fun1()');
    console.log(fun1());
    
    //案例 3：
    //一个形参，并且函数体只有一条语句
    let fun2 = x => x;
    console.log(fun2(5));
    
    //案例 4：
    //形参是一个以上
    let fun3 = (x, y) => x + y;
    console.log(fun3(25, 39));//64
    
    //案例 5：
    //函数体有多条语句
    let fun4 = (x, y) => {
         console.log(x, y);
         return x + y;
        };
    console.log(fun4(34, 48));//82