乐趣区

关于es6:8函数的扩展

jiezi

函数参数的默认值

根本用法

es5 中, 传入函数的参数如果为 ”, 那么在进行判断时会转化为 false, 对后果造成影响

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 容许为函数的参数设置默认值, 间接写在参数定义的前面, 只有在参数是 undefined 时才采纳默认值

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

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

function Point(x=0,y=0){
    this.x = x
    this.y = y
}
const p = new Point()
p //{x:0,y:0}

参数的变量是默认申明的, 不能再次申明

function foo(x=5){
    let x =1 // error
    const x =2 // error
}

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

function foo(x,x,y=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
解释:
下面代码只应用了对象的解构赋值默认值，没有应用函数参数的默认值
{x,y =5}是一个参数, 这个参数外面的內容, 赋了默认值, 然而这个参数自身, 并没有默认值, 所以找不到 x

能够写成: 双重默认值: 如果没提供参数,foo 的参数默认一个空对象

function foo({x,y=5}={}){console.log(x,y)
}

上面代码中，函数 fetch 没有第二个参数时，函数参数的默认值就会失效，
而后才是解构赋值的默认值失效，变量 method 才会取到默认值 GET

function fetch(url, { body = '', method ='GET', headers = {} } = {}) {console.log(method);
}

fetch('http://example.com')
// "GET"

有差异的写法:

写法一:
function m1({x=0,y=0} = {}){return [x,y]
}
写法二:
function m2({x,y} ={x:0,y:0}){return [x,y]
}

写法一: 对函数参数进行了解构赋值, 为空对象, 对函数参数外面的內容进行了解构赋值
写法二: 对函数参数进行了解构赋值, 但没进行参数外面內容的解构赋值, 所以只有在没有传入参数的时候, 默认值才失效, 传入参数, 默认值久被笼罩, 返回 undefined

m1() //[0,0]
m2() //[0,0]

m1({x:3,y:8}) //[3,8]
m2({x:3,y:8}) //[3,8]

m1({x:3}) //[3,0]
m2({x:3}) //[3,undefined]

m1({}) //[0,0]
m2({}) //[undefined,undefined]

m1({z:3}) //[0,0]
m2({z:3}) //[undefined,undefined]

参数默认的地位

当定义参数默认值的时候, 应该是函数的尾参数

function f(x=1,y){return [x,y]
}
f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]

function f(x, y = 5, z) {return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

函数的 length 属性

length 属性的含意: 该函数预期传入的参数个数

(function (a){...}).length //1

当参数指定了默认值之后,length 将返回没有指定默认值的参数个数

(function (a=5){}).length // 0
(function (a, b, c = 5) {}).length // 2

当指定了默认值的参数不是尾参数,length 将不再计入前面的参数

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

作用域

当给参数设置了默认值, 当函数初始化时, 参数会造成一个独自的作用域, 初始化完结, 作用域隐没

var x = 1
function f(x,y=x){console.log(y)
}
f(2) //2

下面代码中，参数 y 的默认值等于变量 x。调用函数 f 时，参数造成一个独自的作用域。
在这个作用域外面，默认值变量 x 指向第一个参数 x，而不是全局变量 x，所以输入是 2。

let x = 1
function f(y = x){
    let x = 2
    console.log(y)
}
f() //1

下面代码中，函数 f 调用时，参数 y = x 造成一个独自的作用域。
这个作用域外面，变量 x 自身没有定义，所以指向外层的全局变量 x。
函数调用时，函数体外部的局部变量 x 影响不到默认值变量 x。

如果此时，全局变量 x 不存在，就会报错。

function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // ReferenceError: x is not defined

上面代码中，参数 x = x 造成一个独自作用域。
理论执行的是 let x = x，因为暂时性死区的起因，这行代码会报错”x 未定义“。

var x = 1;
function foo(x = x) {...}
foo() // ReferenceError: x is not defined

如果参数的默认值是一个函数, 该函数的作用域也恪守这个规定

let foo = 'outer'
function bar(func = () =>foo){
    let foo = 'inner'
    console.log(func())
}
bar() //outer

如果写成上面这样，就会报错。

function bar(func = () => foo) {
  let foo = 'inner';
  console.log(func());
}
bar() // ReferenceError: foo is not defined
var x=1;
function foo(x,y=function(){x=2}){
    var x = 3
    y()
    console.log(x)
}
foo() //3
console.log(x) //1

解释:

var x1 = 1; 
function foo (x2, y = function () {x2 = 2; console.log(x2); }) {
    var x3 = 3;
    y();
    console.log(x3); 
}
foo();
console.log(x1);

首先全局作用域中有一个 x(x1), 函数 foo 的参数 (两头作用域) 中有一个 x(x2), 函数 foo 外部有一个 x(x3)
在 foo 参数造成的作用域里申明了变量 x,y.
y 的默认值是一个函数, 这个函数外部的 x, 指向同一个作用域的 x.
在 foo 外部造成的作用域里申明了变量 x, 因为和 x1 不在同一个作用域, 所以不同于 x1, 是 x3
所以执行 y 后，外部变量 x 和内部全局变量 x 的值都没变

两头作用域
如果将 var x = 3 的 var 删掉, 函数外部的 x 指向内部的 x

利用

  • 利用参数默认值，能够指定某一个参数不得省略，如果省略就抛出一个谬误。

参数的默认值不是在定义时执行，而是在运行时执行。如果参数曾经赋值，默认值中的函数就不会运行。

rest 参数

(… 变量名), 用于获取多余函数,rest 参数搭配的变量是一个数组, 该变量将多余的参数放入数组中

function add(...values){
    let sum = 0
    for(var val og values){sum += val}
    return sum
}
add(2,5,3) //10

上面是一个 rest 参数代替 arguments 变量的例子。

// arguments 变量的写法
function sortNumbers() {return Array.prototype.slice.call(arguments).sort();}

// rest 参数的写法
const sortNumbers = (...numbers) => numbers.sort();

/*arguments 对象不是数组，而是一个相似数组的对象。
所以为了应用数组的办法，必须应用 Array.prototype.slice.call 先将其转为数组。*/
上面是一个利用 rest 参数改写数组 push 办法的例子

function push(array,...items){items.forEach(function(item){array.push(item)
    })
}
var a = [];
push(a, 1, 2, 3)

留神 :rest 参数之后不能再有其余参数（即只能是最初一个参数），否则会报错。
函数的 length 属性，不包含 rest 参数

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

严格模式

函数参数应用了默认值、解构赋值、或者扩大运算符，
那么函数外部就不能显式设定为严格模式，否则会报错
两种办法能够躲避这种限度。第一种是设定全局性的严格模式，这是非法的。

'use strict';

function doSomething(a, b = a) {// code}

第二种是把函数包在一个无参数的立刻执行函数外面。

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

name 属性

返回该函数的函数名

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

Function 构造函数返回的函数实例，name 属性的值为 anonymous。(new Function).name // "anonymous"

bind 返回的函数，name 属性值会加上 bound 前缀。function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound"

箭头函数

根本用法

var f = v => v;
// 等同于
var f = function (v) {return v;};
  • 如果箭头函数不须要参数或须要多个参数，就应用一个圆括号代表参数局部
var f=()=>5;
// 等同于
var f = function(){return 5};

var sum = (num1,num2)=>num1+num2
// 等同于
var sum = function(num1, num2) {return num1 + num2;};
  • 如果箭头函数的代码块局部多于一条语句，就要应用大括号将它们括起来，并且应用 return 语句返回
var sum = (num1, num2) => {return num1 + num2;}
  • 因为大括号被解释为代码块，所以如果箭头函数间接返回一个对象，必须在对象里面加上括号
// 报错
let getTempItem = id => {id: id, name: "Temp"};

// 不报错
let getTempItem = id => ({id: id, name: "Temp"});
  • 如果箭头函数只有一行语句，且不须要返回值，能够采纳上面的写法
let fn = ()=>void doesNotReturn()
  • 箭头函数能够与变量解构联合应用。
const full = ({first, last}) => first + ' ' + last;

// 等同于
function full(person) {return person.first + ' ' + person.last;}
  • 简化回调函数
[1,2,3].map(x=>x*x)

[1,2,3].map(function (x) {return x * x;});

var result = values.sort((a,b)=>{a*b})

var result = values.sort(function(a,b){return a*b})
  • rest 参数和箭头函数联合
const numbers = (...nums)=>nums
numbers(1,2,3,4,5)  // [1,2,3,4,5]

const headAndTail = (head,...tail)=>[head,tail]
headAndTail(1,2,3,4,5) //[1,[2,3,4,5]

留神点:

  • this 对象, 是定义失效时所在的对象, 而不是应用时所在的对象
  • 不能够当作构造函数, 不能够应用 new 命令
  • 不能够应用 arguments 对象, 该对象在函数体内不存在, 能够用 rest 参数代替
  • 不能够应用 yield 命令, 箭头函数不能用作 Generator 函数
function foo(){setTimeout(()=>{console.log('id':this.id)
    },100)
}
var id = 21
foo.call({id:42}) //id:42

解释:

下面代码中，setTimeout()的参数是一个箭头函数，这个箭头函数的定义失效是在 foo 函数生成时，而它的真正执行要等到 100 毫秒后。如果是一般函数，执行时 this 应该指向全局对象 window，这时应该输入 21。然而，箭头函数导致 this 总是指向函数定义失效时所在的对象（本例是{id: 42}），所以打印进去的是 42
function Timer(){
    this.s1 = 0;
    this.s2 = 0;
    setInterval(()=>this.s1++,1000)
    setInterval(function(){this.s2++},1000)
}
var timer = new Timer()

setTimeout(() => console.log('s1:', timer.s1), 3100);
setTimeout(() => console.log('s2:', timer.s2), 3100);
// s1: 3
// s2: 0

解释:

Timer 函数外部设置了 2 个定时器:
箭头函数的 this 指向了定义时所在的作用域, 所以是 Timer 函数
一般函数的 this 指向了运行时所在的作用域, 所以是 window(全局对象)
所以 3100ms 后,timer.s1 被更新了 3 次,timer.s2 一次都没更新
var handler = {
    id:'123456',
    init:function(){
        document.addEventListener('click',
        event=>this.doSomething(event.type),false)
    },
    doSomething:function(type){console.log('Handling' + type  + 'for' + this.id);
    }
    
}

解释:

init 办法中箭头函数的 this 指向 handler 对象.

this 指向固定化, 并不是因为箭头函数外部绑定 this, 而是箭头函数没有本人的 this,
导致外部的 this 就是外层代码块的 this, 也是因为没有 this, 就不能用作构造函数.

es6:
function foo(){setTimeout(()=>{console.log('id':this.id)
    },100)
}
es5:
function foo(){
    var _this = this
    setTimeout(funciton(){console.log('id',_this.id)
    },100)
}
function foo() {return () => {return () => {return () => {console.log('id:', this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码中，箭头函数外部的变量 arguments，其实是函数 foo 的 arguments 变量

function foo(){setTimeout(()=>{console.log('args:',arguments)
    },100)
}
foo(2,4,6,8) //args:[2,4,6,8]

因为箭头函数没有本人的 this, 所以 bind(),apply(),call()都不能扭转 this 指向

(function (){return[(()=>this.x).bind({x:'inner'})()]    
}).call({x:'outer'})
//['outer']

不实用场合

  • 定义对象的办法
const cat = {
    lives:9,
    jump:()=>{this.lives--}
}

因为对象不形成独自的作用域, 所以此时的箭头函数的 this 指向全局对象
如果是一般函数的 this 指向 cat

  • 须要动静的 this 的时候
var button = document.getElementById('press')
button.addEventListener('click',()=>{this.classList.toggle('on')
})

下面代码运行时，点击按钮会报错，
因为 button 的监听函数是一个箭头函数，导致外面的 this 就是全局对象。
如果改成一般函数，this 就会动静指向被点击的按钮对象。

嵌套的箭头函数

* es5:
function insert(value) {return {into: function (array) {return {after: function (afterValue) {array.splice(array.indexOf(afterValue) + 1, 0, value);
      return array;
    }};
  }};
}

insert(2).into([1, 3]).after(1);
* es6:
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]

indexOf, 存在返回对应地位, 不存在返回 -1
splice(新增 / 删除地位, 删除的数量(如果为 0 就不删除), 內容)

一个部署管道机制（pipeline）的例子，即前一个函数的输入是后一个函数的输出

const pipeline = (...funcs)=>{val=>funcs.reduce((a,b)=>b(a),val)
} 
const plus1 = a=>a+1
const mult2 = a=>a*2
const addThenMult = pipeline(plus1,mult2)
addThenMult(5) //12
即:
const plus = a=>a+1
const mult2 = a=>a*2
mult2(plus1(5))
// 12

reduce():

arr.reduce(function(prev,cur,index,arr){...},init)
arr: 原数组
prev: 上一次调用回调时的返回值. 或者初始值 init
cur: 以后正在解决的元素
index: 示意以后正在解决的数组元素的索引，若提供 init 值，则索引为 0，否则索引为 1
init: 初始值

尾调用优化

概念

尾调用: 函数式编程的一个概念, 指某个函数的最初一步时调用另一个函数

function f(x){return g(x)
}

下面代码中，函数 f 的最初一步是调用函数 g，这就叫尾调用。
以下三种状况，都不属于尾调用。

// 状况一: 调用 g 之后还有赋值操作
function f(x){let y = g(x);
  return y;
}

// 状况二: 调用 g 之后还有别的操作
function f(x){return g(x) + 1;
}

// 状况三:return 的时 undefined
function f(x){g(x);
}

尾调用不肯定呈现在函数尾部，只有是最初一步操作即可

function f(x){if(x>0){return m(x)
    }
    return n(x)
}

m 和 n 都属于尾调用

尾调用优化

尾调用优化: 只保留内层函数的调用帧

function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {return g(3);
}
f();

// 等同于
g(3);

如果所有函数都是尾调用，那么齐全能够做到每次执行时，调用帧只有一项，
这将大大节俭内存。这就是“尾调用优化”的意义。

function addOne(a){
    var one = 1
    function inner(b){retrun b+one}
    return inner(a)
}

留神: 目前只有 Safari 浏览器反对尾调用优化，Chrome 和 Firefox 都不反对

尾递归

递归: 函数调用本身
尾递归: 尾调用本身
上面代码是一个阶乘函数，计算 n 的阶乘，最多须要保留 n 个调用记录，复杂度 O(n)。

function factorial(n) {if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

改写成尾递归，只保留一个调用记录，复杂度 O(1)

function factorial(n, total) {if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5, 1) // 120

非尾递归的 Fibonacci 数列实现如下

function Fibonacci (n){if(n<=1){return 1}
    return Fibonacci(n-1)+Fibonacci(n-2)
}
Fibonacci(10) // 89
Fibonacci(100) // 超时
Fibonacci(500) // 超时
function Fibonacci(n,ac1=1,ac2=1){if(n<=1){return ac2}
    return Fibonacci(n-1,ac2,ac1+ac2)
}

Fibonacci2(100) // 573147844013817200000
Fibonacci2(1000) // 7.0330367711422765e+208
Fibonacci2(10000) // Infinity
ES6 中只有应用尾递归，就不会产生栈溢出（或者层层递归造成的超时），绝对节俭内存

递归函数的改写

如果想采纳尾递归的实现, 须要改写递归函数, 确保最初一步只调用本身
做到这一点的办法，就是把所有用到的外部变量改写成函数的参数
计算 5 的阶乘, 怎么做才能够只传入一个参数:

办法一: 是在尾递归函数之外，再提供一个失常模式的函数

function tailFactorial(n, total) {if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

function factorial(n) {return tailFactorial(n, 1);
}

factorial(5) // 120

柯里化: 将多参数的函数转换成单参数的模式

办法二:es6 的函数默认值

function factorical(n, total = 1){if (n === 1) return total;
      return factorial(n - 1, n * total);
}
factorial(5) // 120

递归的实质是循环操作,
纯正的函数式编程语言没有循环操作命令，所有的循环都用递归实现，
这就是为什么尾递归对这些语言极其重要。

严格模式

ES6 的尾调用优化直再严格模式下开启, 失常模式有效
这是因为在失常模式下，函数外部有两个变量，能够跟踪函数的调用栈。

func.arguments：返回调用时函数的参数。func.caller：返回调用以后函数的那个函数。

尾调用优化产生时，函数的调用栈会改写，因而下面两个变量就会失真。
严格模式禁用这两个变量，所以尾调用模式仅在严格模式下失效。

function restricted() {
  'use strict';
  restricted.caller;    // 报错
  restricted.arguments; // 报错
}
restricted();

尾递归优化的实现

(https://es6.ruanyifeng.com/?s…[没看!]

(https://segmentfault.com/a/11…

函数参数的尾逗号

ES2017 容许函数的最初一个参数有尾逗号（trailing comma）。

此前，函数定义和调用时，都不容许最初一个参数前面呈现逗号。

function clownsEverywhere(
  param1,
  param2
) {/* ... */}

clownsEverywhere(
  'foo',
  'bar'
);

下面代码中，如果在 param2 或 bar 前面加一个逗号，就会报错。

如果像下面这样，将参数写成多行（即每个参数占据一行），当前批改代码的时候，想为函数 clownsEverywhere 增加第三个参数，或者调整参数的秩序，就势必要在原来最初一个参数前面增加一个逗号。这对于版本管理系统来说，就会显示增加逗号的那一行也产生了变动。这看上去有点冗余，因而新的语法容许定义和调用时，尾部间接有一个逗号。

function clownsEverywhere(
  param1,
  param2,
) {/* ... */}

clownsEverywhere(
  'foo',
  'bar',
);

这样的规定也使得，函数参数与数组和对象的尾逗号规定，保持一致了。

Function.prototype.toString()

批改后的 toString()办法，明确要求返回截然不同的原始代码。

function /* foo comment */ foo () {}
原来:
foo.toString()
// function foo() {}

es6:
foo.toString()
// "function /* foo comment */ foo () {}"

catch

以前明确要求 catch 命令前面必须跟参数
try {// ...} catch (err) {// 处理错误}

ES2019 做出了扭转，容许 catch 语句省略参数。try {// ...} catch {// ...}
退出移动版