函数的扩展

rest参数

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

function add(...values){
    let sum = 0;
    console.log(values)
    for(var val of values){
        sum += val;
    }
    return sum;
}

add(2,3,5)

// add穿的参数是三个字符串，使用rest参数，则将传入的三个字符串变成数组的三个元素。就不需要再去使用arguments，而且数组特有的方法都可以用于这个数组。

箭头函数

基本用法

// 有一个参数
var f = v => v;
////// 等同于
var f = function(v){
    return v;
}
//////////////////////////////////////////////////////////////
// 无参数或者多个参数
var f = () => 5;
////// 等同于
var f = function(){
    return 5;
}
//////////////////////////////////////////////////////////////
//// 求和
var sum = (sum1, sum2) => sum1 + sum2;
/////////////////////////////////////////////
////// 返回一个对象  外面加（）   {}  代表的是代码块，返回对象 外面必须加（）
var getObj = id => ({id,name:'111'})
/////////////////////////////////////////////////////////////
////// 与变量结构使用
const getInfo = ({name,age}) => name + '是' + age
getInfo({name:1,age:2}) //  1是2
/////////////////////////////////////////////////////////////
// 简化函数
[1,2,3].map(function(x){
    return x * x
})
// 简写
[1,2,3].map(x => x * x)

var result = values.sort(function(a,b){
    return a - b
})
// 简写
var result = values.sort((a,b) => a - b);
/////////////////////////////////////////////////////////////
// 结合rest参数
const numbers = (...nums) => nums;
numbers(1,2,3) // [1,2,3]

const arr = (a,...b) => [a,b]
arr(1,2,3,4); // [1,[2,3,4]]

注意事项

• 函数体内的this对象就是定义时所在的对象，不是使用时所在的对象
• 不能当做构造函数，不可以使用new命令，会报错
• 不可以使用arguments，使用rest参数代替
• 不可以使用yield命令，因此箭头函数不能作为Generator函数

关于this的指向问题

function foo(){
    setTimeout(()=>{
        console.log(this.id)
    },100)
}
var id = 21
foo() // 21   相当于window.foo()
foo.call({id:42}); // 42   给foo绑定了指定的所在的对象
////////////////////////////////////////////////////////////
////// 剪头函数总是指向函数定义生效时所在的对象  
///  可以简单的理解为 剪头函数体内的this，当没有强制性的给this绑定对象时，指向的就是window，如果绑定了定义时的对象，那指向的就是绑定的对象，如果还不理解，在多看几个例子

function Timer(){
    this.s1 = 0;
    this.s2 = 0;
    // 箭头函数
    setTimeout(()=>{
        console.log(this) 
        this.s1 ++;
    } ,1000)
    // 普通函数
    setTimeout(function(){
        console.log(this)
        this.s2 ++ 
    },1000)
}

var time = new Timer();
time.s1 // 1 
time.s2 // 0
///////////  把 this 的值输出之后不难发现，箭头函数绑定的是定义生效的对象，也就是timer，而setTimeout里的匿名函数的this则指向 window     匿名函数的执行环境具有全局性，this 通常指向 window
// 可以这样更改普通函数内 this 的指向  
function Timer(){
    this.s1 = 0;
    this.s2 = 0;
    // 箭头函数
    setTimeout(()=>{
        console.log(this)
        this.s1 ++;
    } ,1000)
    // 普通函数
    var that = this;
    setTimeout(function(){
        console.log(that)
        that.s2 ++ 
    },1000)
}
var time = new Timer();
time.s1 // 1 
time.s2 // 1

多重嵌套

let insert = value => ({ into: array => ( { after: afterValue => { array.splice(array.indexOf(afterValue) + 1,0,value );return array } } ) })
insert(2).into([1,3]).after(1) // [1,2,3] 在索引 1 的位置增加一个元素

绑定this

es7的一个提案。暂时略过。

尾调用

尾调用：某个函数的最后一步是调用另一个函数

用法

function f(x){
    return g(x);
}
// 函数的最后一步操作是调用函数 g ，不能有其他的任何操作
function f(x){
    if(x > 0){
        return m(x)
    }
    return n(x)
}

优化

调用帧：函数调用会在内部想成一个“调用记录”，保存位置和内部变量等信息

尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为保存位置和内部变量都不在用到。

function f(){
    let m = 1;
    let n = 2;
    return g(m + n);
}
f();
/// 等同于
function f(){
    return g(3);
}
f();
/// 等同于
g(3);

上面的代码中，属于尾调用，调用到最后完全可以删除f()的调用帧，只保留g(3)的调用帧，大大的节省了内存

尾递归

函数最后调用自身

递归耗内存，对于尾递归来说，只存在一个调用帧，所以节省内存，不会发生“栈溢出”

function factorial(n){
    if(n == 1){
        return 1
    }
    return n * factorial(n-1)
}
factorial(5) // 120
// 阶乘递归函数    需要保存n个调用记录，如果计算数大，就会栈溢出，复杂度为 O(n)
// 改写成尾递归
function factorial(n, total){
    if(n == 1){
        return total
    }
    return factorial(n - 1, n * total)
}
factorial(5,1) // 120
////// 只有一个调用帧 节省内存

可以用一个例子来证明 确实尾递归不存在 栈溢出 著名的Fibonacci数列

Fibonacci数列：斐波那契数列（Fibonacci sequence），又称黄金分割数列、因数学家列昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波那契数列以如下被以递推的方法定义：F(1)=1，F(2)=1, F(n)=F(n - 1)+F(n - 2)（n ≥ 3，n ∈ N*）在现代物理、准晶体结构、化学等领域，斐波纳契数列都有直接的应用，为此，美国数学会从 1963 年起出版了以《斐波纳契数列季刊》为名的一份数学杂志，用于专门刊载这方面的研究成果。

function Fibonacci(n){
    if(n <= 1){
        return 1
    }
    return Fibonacci(n-1) + Fibonacci(n - 2)
}
Fibonacci(10)  // 89
Fibonacci(100) //  不建议运行  当前页直接卡死  无奈之下 只能强制退出谷歌浏览器
///////////////////////////////   见证奇迹的时刻来了
/// 使用尾递归优化
function Fibonacci(n, ac1 = 1, ac2 = 1){
    if( n <= 1){
        return ac2
    }
    return Fibonacci(n - 1, ac2, ac1 + ac2)
}
///// 再来试一下
Fibonacci(10) // 89
Fibonacci(100) // 573147844013817200000

//////// 此时已不存在堆栈溢出  页面卡死的状况  充分说明尾调用和尾递归可以充分的节省内存！！！！！

递归函数的改写，如果要修改之前的代码，会发现需要改动的地方比较多，参数也需要改动，所以通过es6的参数默认值可以很大帮助我们优化递归函数为尾递归

//// 原代码
function factorial(n){
    if(n == 1){
        return 1
    }
    return n * factorial(n-1)
}
factorial(5) // 120

// es6 改写尾递归
function factorial(n,total = 1){
    if(n == 1){
        return total
    }
    return factorial(n - 1, n * total)
}
factorial(5) // 120