This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Today we’re going to talk about arrow functions

To make it easier to write and use functions, the most important thing in ES6 is the introduction of the arrow function, which allows you to define functions using =>. The arrow function is a shorthand function expression

Depending on the number of parameters passed and the number of statements in the function body, the syntax of the shorthand varies

1.In the case of one statement with one parameter x => x+2
2.If a statement has multiple parameters (x,y) => x + y3.X = > {x++;return x}
4.For multiple statements with multiple parameters (x,y) => {x++; y++;return x*y}
5.If there is no parameter () =>1
6.Return if it is an object, you need to wrap the object with () x =>({key:x})
Copy the code

Summary:

It looks like a lot of formats, but just remember the full format:

() = > {/ / statements
  //return
}
Copy the code

What’s left is to omit () and omit {}

Also by the law:

  • When the number of function arguments is 1, omit ()
  • Do not omit () when the function has more than one argument or no argument.
  • If there is only one return statement on the right, omit {}
  • When the number of statements on the right is greater than 1, do not omit {}

The arrow function has the following properties

  1. The arrow function has no arguments; (You can use… Args, becomes an array.)
let fn = (. args) = >{
	// console.log(arguments); //Uncaught ReferenceError: arguments is not defined
	console.log(args)/ / [1, 2, 3]
}
fn(1.2.3);
Copy the code
  1. Arrow functions cannot be used as constructors; they cannot be new;
let fn = (. args) = >{
	console.log(args)/ / [1, 2, 3]
}
new fn();//Uncaught TypeError: fn is not a constructor
Copy the code
  1. Arrow functions have no prototype properties
let fn = (. args) = >{
	console.log(args)
}
console.log(fn.prototype);//undefined
Copy the code
  1. Arrow functions cannot be newlines;
Both cases are grammatical errorslet fn = (. args) = >{
	console.log(args)
}
/ / or
letfn = (... args) = >{console.log(args)
}
Copy the code

It’s just a newline before or after the equal sign of the arrow. Nothing else

let fn 
= 
(. args) = >
{
	console.log(args)// execute normally [1,2,3]
}
fn(1.2.3)
Copy the code
  1. This in the arrow function inherits from the enclosing parent (parent non-arrow function)

The arrow function runs first in the parent scope, and if the parent is still the arrow function, then we look up until we find the point to which we want this

  1. When the arrow function is called with call or apply, this cannot be bound and the first argument passed is ignored

let fn = (. args) = > {
	console.log(args)
};
const obj = {
	name:"Alice",
}
fn.call(obj,1.2.3);
Copy the code

So call and apply call the arrow function, just like the function normally executes

So the advantage of using the arrow function is that the syntax is concise, the scope is more intuitive, and the binding of this makes it easier to handle the pointing of this.

The arrow function uses contextality

  1. Simplify the callback function
let arr = ['a'.'b'.'c'.'d'];
arr.forEach((val, index) = > {
	console.log(index, val)
});
Copy the code
  1. Used when adding a handler that adds an event to an element
document.body.addEventListener('click'.event= >console.log(event, this)); 
Copy the code
  1. Solve this problem

Var self = this; var self = this; But if you use the arrow function, you can also point to this in the inherited parent function.

function fn() {
	// let self = this; // Use the arrow function to omit this step
	for (let i = 0; i < 1; i++) {
		setTimeout(() = > {
			console.log(this)},20);
	}
}
fn();//window
let obj={}
fn.call(obj);//obj
Copy the code

In addition to the new syntax for the arrow function, there are some other changes to the functions in ES6

Other changes

  1. Functions can have default arguments,Format: Variable name = Default value
function show(a = 1, b = 2, c = 3) {
	console.log(a,b,c)
}
show();// 1, 2, 3
Copy the code
  1. Function arguments are defined by default, and can no longer be declared let or const;
function show(a = 1, b = 2, c = 3) {
	let a ;//Uncaught SyntaxError: Identifier 'a' has already been declared
}
Copy the code
  1. You can use the extension operator… Expand or reset the array, or take the rest of the function’s arguments
function fn(. args){
  console.log(... args);/ / [1, 2, 3]
}
fn(1.2.3)
Copy the code

So that’s some stuff about ES6 functions!