ES6 Arrow function =>__ function

1 Basic usage

ES6 allows you to define functions using the arrows (=>).

var f = v => v;
The above arrow function is equivalent to:
var f = function (V) {return
V;
};
If the arrow function requires no arguments or requires more than one argument, a parenthesis is used to represent the parameter portion.
var f = () => 5;  equivalent to
var f = function () {return 5};
var sum = (NUM1, num2) => num1 + num2;  equivalent to
var sum = function (NUM1, num2) {return
num1 + num2;
};

If there are more than one statement in the code block of the arrow function, enclose them with curly braces and return using the returns statement. (Feel this useless, all written like this, why not write a good function)

var sum = (NUM1, num2) => {return num1 + num2;}

Because curly braces are interpreted as blocks of code, if the arrow function returns an object directly, parentheses must be added outside the object.

var gettempitem = ID => ({id:id, Name: "Temp"});

Arrow functions can be used in conjunction with variable deconstruction.

Const FULL = ({i, last}) =>-i + last;  equivalent to
function full [person] {return
Person.first + ' + person.last;
}

The arrow function makes the expression more concise. (This is the core of the arrow function, making the code more concise, not making the code more difficult to understand)

Const IsEven = n => n% 2 = 0;
Const SQUARE = n => n * n;

With just two lines in the code above, two simple tool functions are defined. If you don't use the arrow function, you might want to occupy more than a line, and it's not as eye-catching as it is now. One use of the arrow function is to simplify the callback function.

  normal function notation
[1,2,3].map (function (x) {return
x * x;
});
The  arrow function is written
[1,2,3].map (x => x * x);
Another example is
//  normal function notation
var result = Values.sort (function (A, b) {return
a-b;
});
The  arrow function is written
in var result = Values.sort ((A, B) => a-b);
The following is an example of a combination of rest parameters and arrow functions.
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]]

2 Use attention points

The arrow function has several use points of attention.
(1) The This object in the function body is the object in which it is defined, not the object in which it is used.
(2) can not be used as a constructor, that is, you cannot use the new command, or an error will be thrown.
(3) You cannot use the arguments object, which does not exist in the function body. If you want to use it, you can replace it with the Rest parameter.
(4) The yield command cannot be used, so the arrow function cannot be used as a generator function.
Of the above four points, the 1th is particularly noteworthy. The This object is pointing to a variable, but in the arrow function it is fixed.

function foo () {
settimeout () => {
console.log (' ID: ', this.id);}
var id =;
Foo.call ({id:42});
Id:42

In the code above, the SetTimeout argument is an arrow function whose definition takes effect when the Foo function is generated, and its actual execution waits until 100 milliseconds. If this is a normal function, this should point to the Global object window at execution time, and 21 should be output. However, the arrow function causes this to always point to the object in which the function definition takes effect (this example is {id:42}), so the output is 42.
The arrow function allows this in settimeout, the scope where the binding is defined, not the scope where the runtime is located. Here is another example.

function Timer () {
	this.s1 = 0;
	THIS.S2 = 0;  arrow function
	setinterval (() => this.s1++, 1000);  General function
	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

In the code above, the timer function is set up with two timers, using the arrow function and the normal function, respectively. The first is the scope (that is, the timer function) where the this binding is defined, and the latter points to the scope (that is, the global object) where the runtime is located. So, after 3100 milliseconds, TIMER.S1 was updated 3 times, and Timer.s2 was not updated once. The arrow function allows the this point to be fixed, which is advantageous in encapsulating the callback function. The following is an example where the callback function of a DOM event is encapsulated within an object.

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);
	}
;

In the Init method of the code above, the arrow function is used, which causes this in the arrow function to always point to the handler object. Otherwise, the this.dosomething line will complain when the callback function runs, because this points to the document object.
This point is not fixed because there is a mechanism within the arrow function that binds this, and the actual reason is that the arrow function does not have its own this, resulting in the inside of this is the outer code block of this. It is because it does not have this, so it cannot be used as a constructor.
So, the arrow function turns into ES5 code as follows.

ES6
function foo () {
	settimeout () => {
		console.log (' ID: ', this.id);
	}
ES5
function foo () {
	var _this = this;
	settimeout (function () {
		console.log (' ID: ', _this.id);
	}

In the code above, the converted ES5 version clearly shows that the arrow function does not have its own this at all, but refers to the outer layer of this.
May I ask the following code for a few of this.

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

In the code above, there is only one this, which is the This of function foo, so t1, T2, T3 all output the same result. Because all the inner functions are arrow functions, none of their own this, and their this is actually the outermost foo function of this.
In addition to this, the following three variables do not exist in the arrow function, pointing to the corresponding variables of the outer function: arguments, Super, New.target.

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

In the code above, the variable arguments inside the arrow function is actually the arguments variable of the function foo.
In addition, because the arrow function does not have its own this, it is certainly not possible to change the point of this by using call (), apply (), bind ().

(function () {return
	[
		() => this.x). Bind ({x: ' inner '}) ()
	];
}). Call ({x: ' outer '});
[' outer ']

In the code above, the arrow function does not have its own this, so the bind method is invalid, and the internal this points to the external this.
The This object of the JavaScript language has long been a headache, and you must be very careful about using this in object methods. The arrow function "bind" this, to a large extent, solves this obsession.

(This is the point, the arrow function does not even have this, so the scope used is external, it seems that this is the reason the arrow function was born)

3 Nested arrow functions

Arrow functions inside, you can also use the arrow functions. The following is a multiple nested function of a ES5 syntax.

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); [1, 2, 3]

The above function can be rewritten using the arrow function.

Let Insert = (value) => ({to: (array) => ({after: (Aftervalue) => {
	Array.splice (array.indexof) + 1, 0, value);
	return array;
}});
Insert (2). into ([1, 3]). After (1); [1, 2, 3]

The following is an example of a deployment pipeline mechanism (pipeline), where the output of the previous function is the input of the latter function.

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)
/////
If you think the above writing is less readable, you can also use the following wording.
Const PLUS1 = a => a + 1;
Const MULT2 = a => A * 2;
The Mult2 (PLUS1 (5))///
arrow function also has a function to easily rewrite the lambda calculus.
the//λ calculus is written in
fix =λf. ( ΛX.F (λv.x (x) (v))) (Λx.f (λv.x (x) (v))
//ES6 the wording
var fix = f => (x => F (v => x (x) (v)))
(x => f (v) => x (x) (v)));

The above two kinds of writing, almost one by one corresponding. Because the lambda calculus is very important for computer science, this allows us to explore computer science using ES6 as an alternative tool.