Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you about the ES6 arrow function, rest parameters, extension operators and Symbol how to use the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Simplified object writing

ES6 allows variables and functions to be written directly in curly braces as properties and methods of objects, which is more concise.

How to create an object in ES5:

Let name = "Jiang Liuer"

Let showName = function () {

Console.log ("name:", this.name)

}

Const People = {

Name: name

ShowName: showName

Func: function () {

Console.log ("on my way to the west!" )

}

}

Console.log (People)

How to create an object in ES6:

Let name = "Jiang Liuer"

Let showName = function () {

Console.log ("name:", this.name)

}

Const people = {

Name,// omits repetitive work

ShowName

Func () {

Console.log ("on my way to the west!" )

}

}

Console.log (people)

Arrowhead function and declaration characteristics

ES6 allows you to use the arrow = > to define a function

Declare a function

How to create a function in ES5:

Let fn = function (a, b) {

... / / Code body

}

How to create a function in ES6:

Let fn = (a, b) = > {

... / / Code body

}

Characteristics of arrow function

This is static, and this always points to the value of this in the scope in which the function is declared, even if you use the call, apply, and bind functions to modify this.

/ / ES5 writing method

Function getName1 () {

Console.log ("ES5:", this)

}

/ / ES6 writing method

Let getName2 = () = > {

Console.log ("ES6:", this)

}

Const people = {

Name: Jiang Liuer

}

GetName1.call (people); / / people

GetName2.call (people); / / window

Cannot instantiate an object as a constructor

Let Person = (name, age) = > {

This.name = name

This.age = age

}

Let stu = new Person (Heart Apes, 5000)

Console.log (stu); / / err

You cannot use the arguments variable

Let fn = () = > {

Console.log (arguments)

}

Fn (1,2,3); / / err

Abbreviation of arrowhead function

1) omit parentheses when there is only one parameter

Let add = n = > {

Return naughn

}

Console.log (add (9)) / / 18

2) when curly braces are omitted, when there is only one statement in the contemporary code body, the return must be omitted, and the result of the statement execution is the return value of the function.

Let pow = n = > n * n

Console.log (pow (9)); / / 81

The practice of Arrow function

1) the color changes to pink after clicking div 2s.

Write it in ES5:

Div {

Width: 200px

Height: 200px

Background-color: # 58a

}

Let div = document.getElementById ("box")

Box.addEventListener ("click", function () {

/ / the value of this must be saved in ES5.

Let _ this = this

/ / timer

SetTimeout (function () {

/ / modify background color this

_ this.style.background = "pink"

}, 2000)

})

Use the arrow function in ES6 to write:

Let div = document.getElementById ("box")

Box.addEventListener ("click", function () {

/ / Save the value of this

/ / let _ this = this

/ / timer

SetTimeout () = > {

/ / modify background color this

/ / _ this.style.background = "pink"

This.style.background = "pink"

}, 2000)

})

2) return an even number of elements from the array

Const arr = [1,6,9,10,14,200]

Const result = arr.filter (item = > item% 2 = = 0)

Console.log (result); / / [6,10,14,200]

The arrow function is suitable for this-independent callbacks. Timer, method callback of array

The arrow function is not suitable for this-related callbacks. For example, event callback, object method

That's all for the article "how to use ES6 arrow functions, rest parameters, extension operators, and Symbol. Thank you for reading!" I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.