Learn ES6 [函数篇] - Githubissues

函数参数的默认值

规则

参数变量是默认声明的，所以不能用let或const再次声明

 let oPlus = (x,y=5) => {
    let x = 1; // 语法错误
   return x + y;
 }

3.当传入的参数是undefined时，如果有默认参数，将会调用默认值，传入参数为null时，不会调用默认值

let oPlus = (x,y='world') => {
  return x+y;
}
console.clear(); 
console.log(oPlus('hello ',undefined));  //'hello world'
console.log(oPlus('hello '));  //'hello world'
console.log(oPlus('hello ',null));  //'hello null'

4.非尾部的参数设置默认值，实际上这个参数是没法省略的

let oPlus = (x='world',y) => {
  return x+y;
}
console.clear(); 
console.log(oPlus());  // 报错
console.log(oPlus(,));   // 1 undefined
console.log(oPlus(null)); // null undefined
console.log(oPlus(undefined)); 1 undefined

代码示例CODEPEN

// es5中默认参数的写法
function oPlus(x,y) {
    if (typeof y === 'undefined') {
        y = 'world'
    } 
    return x + y;
}
// es6中默认值写法
let oPlus = (x,y='world') => {
  return x+y;
}
console.clear(); 
console.log(oPlus()); // 'undefinedworld'
console.log(oPlus('hello '));  //'hello world'
console.log(oPlus(undefined)); // 'undefinedworld'
console.log(oPlus(null)); // 'nullworld'
console.log(oPlus(undefined,undefined)); // 'undefinedworld'
console.log(oPlus(null,null)); // 0
console.log(oPlus(undefined,'ok')); // 'undefinedok'
console.log(oPlus(null,'ok')); // 'nullok'
console.log(oPlus(null,undefined)); // 'nullworld'
console.log(oPlus(undefined,null)); // NaN

与解构赋值默认值一起使用

规则

默认参数仍然可以进行二次默认参数设置，比如 {x,y=5} = {}或者 {x,y} = {x:1,y:5}

这两种写法稍微有些不同，个人更倾向于第一种

// {x,y=5} = {} 等同于 {x,y} = {y:5} 双重默认值
let destructFunc = ({x,y=5} = {}) => {
  console.log(x,y);
}
console.clear();
destructFunc(); // undefined 5
destructFunc({x:1}) // 1 5
destructFunc({x:2,y:10}) // 2 10
let foo = ({x,y=5}) => {
  console.log(x,y);
}
foo(); // 报错
foo({x:1}); // 1 5
foo({}) // undefined 5

函数的length

规则

函数length的含义指的是预计传入函数的参数个数，如果用...rest表示参数的话，其length = rest.length;
参数设置默认值后，自身以及后续参数都不纳入函数length统计范围;
示例代码

 (x,y=5) => {}  // length: 1
 (x=5,y) => {} // length: 0
 (x,y=5,z) => {} // length: 1
 ({x,y=5}) =》 {}  // lenght: 1
 ({x,y}) =》 {}  // lenght: 1
 ({x=1,y}) =》 {}  // lenght: 1
 ({x,y=5} = {}) =》 {}  // lenght: 0

作用域

规则

默认参数的作用域规则也符合一般变量的作用域规则，即首先是函数作用域，其次是全局作用域

示例代码

let x = 1;
let foo = (y=x) => {
   let x  = 3;
   console.log(y);
}
foo();//1
// 参数默认值是函数
let strfoo = 'bar';
let sfunc = (func = () => strfoo) => {
  let strfoo = 'ccc';
  console.log(func());
}
// 传值的变量是全局变量是
let sx = 1;
let sxfoo = (x, y= () => { sx=x }) => {
  console.log('inner',x);
  x  = 4;
  y();
  console.log(sx);
}
sfunc(); // 'bar'
sxfoo(5); // 'inner' 5 \n 4
console.log(sx); // 4

原理

从上面可以看出，sxfoo执行时，分以下几步：

一、执行参数部分

先通过函数传参，显示指明第一个参数x等于5;
由于没有传值给参数y，此时其值为undefined,自动赋值y =() => {sx = x} ，然后初始化此匿名箭头函数，顺序也是从参数到函数体。由于该匿名函数此时只是进行一系列函数初始化并未执行，因此sx只是绑定了window'x'一个引用

二、执行函数体部分

执行函数体代码，x仍等于5，此时程序向控制台输出 inner 5
x= 4 将全局变量x即window['x']设置为4,
执行y() 此时sx= x实际执行，赋值sx等于window['x']即4
程序执行到最后一句console.log(sx),向控制台输出 4
rest

规则
rest是一个真正的数组，可以使用数组对象的一切方法
rest参数后不能再有参数，否则会报错
函数的length属性不包括rest参数
示例代码

  // rest可以使用一个真正的数组方法
  let arrPush = (array,..items) => {
     items.forEach( item => array.push(item));
  }
  let a = [];
  arrPush(a,1,2,3,4);
  // 函数长度
  let restFunc = (y,...rest) => {};
  let restFunc1 = (...rest) => {}
  console.log(reestFunc.length,restFunc1.length); // 1 0;

扩展运算符

1.扩展运算符可以将数组变成以逗号为分隔的字符串 2.如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

代码示例CODEPEN

// 将数组转化为逗号分隔的字符串
let a = [1,2,3]
console.log(...a) // 1 2 3 
console.log(1,2,3);
// 合并数组
let b = [4,5]
a.push(...b)
console.log(a) // 1 2 3 4 5
// 替代apply
console.log(Math.max(...a)); // 3
console.log(Math.max.apply(null,a)); // 3
// 与解构赋值一起使用
const [first,...second] = [1,2,3,4];
console.log(first,second);// 1,[2,3,4]
const [ifirst,...isecond] = [];
console.log(ifirst,isecond); // undefined [];
const [...iisecond,iifirst] // 报错
// 处理函数的返回值，函数的返回值只有一个，如果想多个值，可以返回数组
let foo = () => [1,2,3];
console.log(...foo());
// 将字符串转化为真正的数组
console.log(...'helloworld');
/* 任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。
...document.getElementsByTagName document.childNodes
上面代码中，arrayLike是一个类似数组的对象，但是没有部署Iterator接口，扩展运算符就会报错。这时，可以改为使用Array.from方法将arrayLike转为真正的数组。
*/
let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
// Map和Set结构，Generator函数都可以使用扩展运算符
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]
var go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

函数name

规则

将函数名称标准化了，纠正了es5，匿名函数赋值，函数名称为空的现象

代码示例

 let foo = () => {} // function name is 'foo'
 var foo = function() {} // function name is ''
 function foo() {} // function name is foo

严格模式

规则

参数使用了默认参数，解构赋值，扩展符的不能在函数体内部使用‘use strict’
在全局下使用严格模式，即将‘use strict’显示声明在所有函数体外
把函数包在一个无参数的立即执行函数里面，可以规避第一条规则

const doSomething = (() => {
  'use strict'
 return function(value=43) {
    return value; 
 }
})

原理

函数执行的顺序是先执行参数部分，再执行函数体，如果在函数内部常规声明严格模式，由于参数部分先执行，此时严格模式还没生效，而到了函数体部分，严格模式又生效了，这样参数部分和函数体部分就出现不一致的验证的规则，增加了程序的复杂度，es6标准索性禁止设置严格模式。

箭头函数

规则

箭头函数的this指的是它定义时的上下文环境，而不是运行时的上下文环境;
箭头函数不能当作构造函数，因为它没有new命令，否则会报错;
箭头函数不能使用arguments，因为箭头函数没有arguments这个值，可以用rest替代;
不可以用作yield函数，因为箭头函数不能用作Generator函数;
除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new target;
由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
代码示例

// 简单的箭头函数
let foo = () => {}
// 作为回调函数被执行
[].map(v => v+1);
[].map(v => { return v+1;})
//等同于
[].map(function(v) { return v+1})
// 结合扩展符
let a = [1,2,3];
let oitem = (...numbers) => {
    let sum = 0;
    numbers.forEach(n => sum+=n);
    return sum;
}
console.log(oitem(...a)); //6
//和变量解构一起使用
let oput = ({first,second}) => `${first}${second}`;
console.log(oput({
  first: 'cuc',
  second: 'baidu'
})); // 'cucbaidu'
// 箭头函数的this指向
console.clear();
window['s2'] = 0;
class Timer {
  constructor() {
    this.s1 = 0;
    this.s2 = 0;
    this.count = 0;
    setInterval( () => {
      this.s1++;
    },1000);
    setInterval(function() {
      this.s2++;
      this.count++;
    },1000);
  }
}
let timer = new Timer();
console.log(timer.s2); // 0
setTimeout(() => console.log('s1',timer.s1,window['s1']),2100); // 2 undefined
setTimeout(() => console.log('s2',timer.s2,window['s2']),2100); // 0  2
console.log(window['s2']); // 0 
/* 
声明了一个类，类里面一个使用箭头函数作为回调函数，一个使用普通函数作为回调函数。
箭头函数绑定定义时的上下文环境也就是Timer，而普通函数绑定的是运行时的上下文环境，即window
*/

尾调用

什么是尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数;
尾调用只发生在严格模式下。
最有最后一步调用的是函数，才可以称为尾调用

function f(x) {
    return g(x);
}
function f(x) {
    if (x<0) {
     return m(x);
    } else {
     return n(x);
    }
}
只有最后一步调用的是函数才是尾调用

原理

尾调用之所以与其他调用不同，就在于它的特殊的调用位置。我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

尾递归

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。 CODEPEN

// hack尾递归方式一
 function currying(func,n) {
     return function(m) {
        return func.apply(this,m,n);
     }
  }
function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

const factorial = currying(tailFactorial, 1);
console.log(factorial(5)); // 120
// hack 尾递归方式二
function factorial(n,total = 1) {
    if (n===1) {
        return total;
    }
    return factorial(n-1,total);
}
console.log(factorial(5)) // 120
// hack 尾递归方式三
let tco = (f) => {
  let value = null;
  let active = false;
  let accumArr = [];
  return function() {
    accumArr.push(arguments);
    while(accumArr.length) {
      active = true;
      value = f.apply(this,accumArr.shift());
    }
    active = false;
    return value;
  }
}

let sum = tco((n,m) => {
  if (m>0) {
    return sum(n+1,m-1);
  } else {
    return n;
  }
});

console.log(sum(1,1000));

ihtml5 / blog

Learn ES6 [函数篇] #21

函数参数的默认值

规则

代码示例CODEPEN

与解构赋值默认值一起使用

规则

函数的length

规则

示例代码

作用域

规则

示例代码

原理

从上面可以看出，sxfoo执行时，分以下几步：

rest

规则

示例代码

扩展运算符

代码示例CODEPEN

函数name

规则

代码示例

严格模式

规则

原理

箭头函数

规则

代码示例

尾调用

什么是尾调用

原理

尾递归

相关链接