es6之函数拓展

本文目录

• 1.参数默认值
• 2.rest参数
• 3.箭头函数
• 4.箭头函数的简写技巧

1.参数默认值

默认参数就是当用户没有传值的时候函数内部默认使用的值，在es5中我们通过逻辑运算符||来实现

function Fn(a, b) {
    //注意：在函数的形参中，let b定义了一个局部变量，所以接下来的b只需要赋值就可以了
    b = b || "nodeing";
    return a + b
}
console.log(Fn("hello"))  //hellonodeing
console.log(Fn("hello"，''))   //hellonodeing

这样写有一个缺点就是当我传入一个空字符串的时候，返回的结果并不是我想要的结果，正确的输出结果应该是：hello，但是因为空字符串会被转换成false， b = b || "nodeing",所以最终输出的结果会是“hellonodeing“，因此，我们还需要去判断b有没有值

function Fn(a, b) {
    if(typeof b === "undefined"){
        b = "nodeing"
    }
    return a + b
}
console.log(Fn("hello",""))

在es6中没有必要那么麻烦，可以在函数定义的时候给定默认值

function Fn(a, b = "nodeing"){
    return a+b
}
console.log(Fn("hello"))  //hellonodeing
console.log(Fn("hello",''))   //hello

2.rest参数

fn(...参数名),这种形式的参数叫做rest参数，作用就是获取函数多余的参数，这样就不需要arguments对象了

function Fn(...arg){
    for(var i = 0; i < arg.length; i++){
        console.log(arg[i])
    }
}
Fn(1,3,4,5,6)

使用rest参数和普通参数混用的时候需要注意的是一一对应关系

function Fn(a,b,...arg){
    console.log(a,b,arg)
}
Fn(1,2,4,5,6)//  1传给a 2 传给b， 4、6、6传给arg，arg是一个数组

还应该注意的一点是rest参数必须放在最后

function Fn(...arg,a,b){}  //错误

3.箭头函数

在es6中，定义函数可以使用箭头（=>）的形式

let f = n => n*2

这种写法等价于

let f = function(n){
    return n * 2
}

上面函数只是传入了一个参数，如果有多个参数的时候，需要写成这样

let f = (a, b) => a + b;

等价于

let f = function(a,b){return a + b}

如果函数体有多条语句的时候写成这样

let f = (a, b) => {
    if(a>b){
        console.log(a)
    }else{
        console.log(b)
    }
}

如果没有参数的时候，括号不能省略
在函数内部只有一条语句的时候，大括号{}是可以省略的

let f = () => console.log(1)
    f()

//f =  => console.log(1) 如果写成这样会报错

注意事项：
（1）箭头函数没有自己的this，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

document.onclick = ()=>{
    console.log(this) // window
};

上面代码中调用后面箭头函数的是document对象 但是指向的却是window，因为箭头函数在window环境下定义的

document.onclick = function () {
    console.log(this)  //document
    let f = ()=>{
        console.log(this) // document
    };
    f();
}

上面代码中箭头函数里的this指向的是document，原因是箭头函数是在事件处理函数function(){}中调用的，在onclick后面的匿名函数function中this是指向document的，所以内层的箭头函数里的this和外层函数的this都会指向document
再举一个例子：

document.onclick = ()=>{
        console.log(this) //window
};
function fn() {
    setInterval(()=>{console.log(this)}, 1000)  //document
}
// fn()
document.onclick = fn;

上面代码中，setInterval中的匿名函数是在外层的fn环境下定义的，外层fn中的this是指向document，所以箭头函数中的this也指向document
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

let F = ()=>{}
let f1 = new F()  //报错

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

//原来的
function fn(){
    console.log(arguments)
}
fn(1,2,3)   //1,2,3

//箭头函数中
let f = ()=>{console.log(arguments)}
f()  //报错
//正确的使用方法
let f = (...rest)=>{console.log(rest)}
f(1,2,3)  //1,2,3

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数

4.箭头函数的简写技巧

使用箭头语法，你可以定义比函数表达式短的函数。在某些情况下，你可以完全省略：

• 参数括号 (param1, param2)
• return 关键字
• 甚至大括号 { }

下面就让我们来探讨一下如何使箭头函数简洁明了、易于阅读。另外你会发现一些需要注意的棘手情况。

减少参数括号

以下函数 greet 只有一个参数：

const greet = (who) => {
  return `${who}, Welcome!`
};
greet('Aliens'); // => "Aliens, Welcome!"

greet 箭头函数只有一个参数 who 。该参数被包装在一对圆括号(who) 中。
当箭头函数只有一个参数时，可以省略参数括号。
可以利用这种性质来简化 greet：

const greetNoParentheses = who => {
  return `${who}, Welcome!`
};
greetNoParentheses('Aliens'); // => "Aliens, Welcome!"

新版本的箭头函数 greetNoParentheses 在其单个参数 who 的两边没有括号。少两个字符：不过仍然是一个胜利。
尽管这种简化很容易掌握，但是在必须保留括号的情况下也有一些例外。让我们看看这些例外。
注意默认参数
如果箭头函数有一个带有默认值的参数，则必须保留括号。

const greetDefParam = (who = 'Martians') => {
  return `${who}, Welcome!`
};
greetDefParam(); // => "Martians, Welcome!"

参数 who 的默认值为 Martians。在这种情况下，必须将一对括号放在单个参数(who ='Martians')周围。
注意参数解构
你还必须将括号括在已解构的参数周围：

const greetDestruct = ({ who }) => {
  return `${who}, Welcome!`;
};
const race = {
  planet: 'Jupiter',
  who: 'Jupiterians'
};
greetDestruct(race); // => "Jupiterians, Welcome!"

该函数的唯一参数使用解构 {who} 来访问对象的属性 who。这时必须将解构式用括号括起来：({who {}})。
无参数
当函数没有参数时，也需要括号

const greetEveryone = () => {
  return 'Everyone, Welcome!';
}
greetEveryone(); // => "Everyone, Welcome!"

greetEveryone 没有任何参数。保留参数括号 ()。

减少花括号和 return

当箭头函数主体内仅包含一个表达式时，可以去掉花括号 {} 和 return 关键字。
不必担心会忽略 return，因为箭头函数会隐式返回表达式评估结果。
这是我最喜欢的箭头函数语法的简化形式。
没有花括号 {} 和 return 的 greetConcise 函数：

const greetConcise = who => `${who}, Welcome!`;
greetConcise('Friends'); // => "Friends, Welcome!"

greetConcise 是箭头函数语法的最短版本。即使没有 return，也会隐式返回 $ {who}，Welcome! 表达式。
注意对象文字
当使用最短的箭头函数语法并返回对象文字时，可能会遇到意外的结果。
让我们看看这时下会发生些什么事：

const greetObject = who => { message: `${who}, Welcome!` };
greetObject('Klingons'); // => undefined

期望 greetObject 返回一个对象，它实际上返回 undefined。
问题在于 JavaScript 将大括号 {} 解释为函数体定界符，而不是对象文字。 message: 被解释为标签标识符，而不是属性。
要使该函数返回一个对象，请将对象文字包装在一对括号中：

const greetObject = who => ({ message: `${who}, Welcome!` });
greetObject('Klingons'); // => { message: `Klingons, Welcome!` }

({ message: ${who}, Welcome! })是一个表达式。现在 JavaScript 将其视为包含对象文字的表达式。

粗箭头方法

让我们定义一个包含粗箭头方法的 Greet 类：

class Greet {
  constructor(what) {
    this.what = what;
  }
  getMessage = (who) => {
    return `${who}, ${this.what}!`;
  }
}
const welcome = new Greet('Welcome');
welcome.getMessage('Romulans'); // => 'Romulans, Welcome!'

getMessage 是 Greet 类中的一个方法，使用粗箭头语法定义。 getMessage 方法中的 this 始终绑定到类实例。
你可以编写简洁的粗箭头方法吗？是的你可以！
让我们简化 getMessage 方法：

class Greet {
  constructor(what) {
    this.what = what;
  }
  getMessage = who => `${who}, ${this.what}!`
}
const welcome = new Greet('Welcome');
welcome.getMessage('Romulans'); // => 'Romulans, Welcome!'

getMessage = who => `{this.what}! 是一个简洁的粗箭头方法定义。省略了其单个参数 who 周围的一对括号，以及大括号 {} 和 return关键字。

简洁并不总是意味着可读性好

我喜欢简洁的箭头函数，可以立即展示该函数的功能。

const numbers = [1, 4, 5];
numbers.map(x => x * 2); // => [2, 8, 10]

x => x * 2 很容易暗示一个将数字乘以 2 的函数。
尽管需要尽可能的使用短语法，但是必须明智地使用它。否则你可能会遇到可读性问题，尤其是在多个嵌套的简洁箭头函数的情况下。
我更喜欢可读性而不是简洁，因此有时我会故意保留大括号和 return 关键字。
让我们定义一个简洁的工厂函数：

const multiplyFactory = m => x => x * m;
const double = multiplyFactory(2);
double(5); // => 10

虽然 multiplyFactory 很短，但是乍一看可能很难理解它的作用。
这时我会避免使用最短的语法，并使函数定义更长一些：

const multiplyFactory = m => { 
  return x => x * m;
};
const double = multiplyFactory(2);
double(5); // => 10

在较长的形式中，multiplyFactory 更易于理解，它返回箭头函数。