函数定义功能汇总（箭头函数、函数生成器声明等）

本文链接：https://blog.csdn.net/PINGER0077/article/details/81989455

今天偶的发现一个新鲜的生成器函数，故此查询到了所有的函数声明定义的相关资料。供以后参考，累积。。

主要包括：函数声明函数表达式生成器函数声明生成器函数表达式箭头函数表达式几大类

一、函数声明（function声明）

声明函数有一种特殊的语法：

函数名称（[ param [, param [,... param]]]）{ statements }

name 功能名称

param 要传递给函数的参数的名称

statements包含功能主体的陈述

二、函数表达式（function表达式）

function [ name ] ([ param [, param [, ... param ]]]) { statements}

name 功能名称，可以省略，在这种情况下，该函数称为匿名函数

param 要传递给函数的参数的名称

statements 包含功能主体的陈述

1）匿名函数

var myFunction = function() {
    statements
}

2）命名函数

var myFunction = function namedFunction(){
    statements
}

命名函数表达式的好处是当我们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。

3）IIFE (Immediately Invokable Function Expressions)

(function(){
    statements
})()

立即执行函数只使用一次

三、函数生成器声明 (`function*` 语句)

function* name([ param[, param[, param]]]) { statements }

name 函数名称

param 传递给函数的参数的名称，一个函数最多可以有255个参数

statements 组成函数体的声明语句

因为这种声明语句不常见到，故此给出example，加深大家的映象

function* foo(){
	yield 'a',
	yield 'b',
	yield 'c';
}

var str = '';
for (let val of foo()){
	str = str + val;
}
console.log(str)

四、箭头函数表达式 (=>)

1) 箭头函数表达式有着更短的语法，并在词汇方面结合这个值.

（[param] [,param]） => { statements } param => expression

param 参数名称无参数需要用()表示，只有一个参数时不需要括号。(例如 foo => 1)

statements or expression 多个声明statements需要用大括号括起来，而单个表达式不需要。表达式expression也是该函数的隐式返回值

基本语法：

<span style="color:#333333">（param1，param2，...，paramN）=> {statements} 
（param1，param2，...，paramN）=>表达式
//等价于：=> {return expression; }

//当只有一个参数名称时，括号是可选的：
（singleParam）=> {statements}
singleParam => {statements}

//没有参数的函数的参数列表应该用一对括号写。
（）=> {statements}</span>

高级语法：

<span style="color:#333333">//括号化函数体以返回对象文字表达式：
params =>（{foo：bar}） 

// <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">其余的力学参数</a>和<a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a>都支持
（param1，param2，... rest）=> {statements} 
（param1 = defaultValue1，param2，...，paramN = defaultValueN）=> { 
陈述} 

// <a data-cke-saved-href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构</a>的参数列表中也支持
var f =（[a，b] = [1,2]，{x：c} = {x：a + b}）=> a + b + c;
F（）; // 6</span>

2) example1

var materials =  [
	'Rydrogen',
	'Relium',
	'Lithium',
	'Reryllium'
],

console.log(material.map(material => material.length)),

3) example2

var elements = {
	'Hydrogen',
	'Helium',
	'Lithium',
	'Beryllium'
};

elements.map(function(element ) {
	return element.length;
});

elements.map(elememt => element.length);

elements.map(({ length }) => length);

4) 箭头函数没有单独的this

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `that` variable of which
    // the value is the expected object.
    that.age++;
  }, 1000);
}


function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the Person object
  }, 1000);
}

var p = new Person();