Introduction to new features of ECMAscript

Introduction to new features of ECMAscript

1. Default values ​​for function parameters

1.1 Specifying default values ​​for function parameters

In ECMAScript 2015 , it is allowed to add default values ​​for function parameters by writing the default values ​​directly after the parameters.

The sample code is as follows:

// Function parameters specify default values ​​function fun(a = 1, b = 2) {
  console.log(a + b);
}
fun() // 3


It is worth noting that parameter variables are declared by default, so they cannot be declared again using let or const, otherwise an exception will be thrown.

Also, the default parameters are at the end of the parameter list, otherwise it will cause ambiguity, and the omitted parameters cannot be omitted.

The following code example:

// The default parameter position should be at the end function fun(a = 1, b) {
  console.log(a, b);
}
// Call the function, passing a parameter fun(20); // 20 undefined


1.2 Use with decoupled assignment

Default parameter values ​​can be used in conjunction with default values ​​for destructuring assignments. There are two ways to set a default value for it. The sample code is as follows:

function fun([a, b = 5] = [3]) {
  console.log(a, b);
}
fun() // 3 5


1.3 Scope of function parameters

Once the default values ​​of the parameters are set, the parameters will form a separate scope when the function is declared and initialized. When initialization is complete, the scope disappears. This syntax behavior will not occur if the default value of the parameter is not set.

The sample code is as follows:

let x = 5

function fun(y = x) {
  x = 10
  console.log(y);
}
fun() // 5


2.rest parameters

ECMAScript 2015 introduced rest parameters (in the form of ...variable name) to obtain redundant parameters of a function, so there is no need to use the arguments object. The variable that is used with the rest parameter is an array, which contains the extra parameters.

The sample code is as follows:

// Use the arguments object to find the maximum value of the passed parameters function max1() {
  return Math.max.apply(null, arguments)
}

console.log(max1(1, 5, 6, 33, 65, 35, 15)); // 65

// Using rest parameters function max2(...arg) {
  return Math.max(...arg)
}
console.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65

3. Arrow Function

3.1 What is an arrow function

ECMAScript 2015 added arrow functions (also known as fat arrow functions), which have a shorter syntax than function expressions and bind this lexically. Arrow functions are anonymous in most cases.

The grammatical structure of an arrow function is as follows:

// Basic syntax structure (parameter 1, parameter 2, ..., parameter N) => {function declaration}
(param1, parameter2, ..., parameterN) => expression (single)
// Equivalent to: (parameter 1, parameter 2, ..., parameter N) => {return expression}

// When there is only one parameter, the subscript is optional (parameter) => {function declaration}
// or parameters => {function declaration}

// If there is no parameter, you should write a pair of parentheses () => {function declaration}

// Can be used with rest parameters and default parameters (parameter 1, parameter 2, ...rest) => {function declaration}
(param1, parameter2, ..., parameterN = default valueN) => {function declaration}

Arrow functions can also define function names for them. The syntax structure is as follows:

let funName = (parameter 1, parameter 2, ..., parameter N) => {function declaration}


The sample code is as follows:

let sum = (a, b) => {
  return a + b
}
console.log(sum(10, 20)); //30


3.2 Notes on Arrow Functions

There are several points to note when using arrow functions:

  • this object in the function body is the object where it is defined, not the object where it is used.

The sample code is as follows:

// ES5 notation let fun1 = function () {
  console.log(this.id);
}
// ES6 arrow function writing let fun2 = () => {
  console.log(this.id);
}

let obj1 = {
  id: 666,
  fun: fun1
}
let obj2 = {
  id: 666,
  fun: fun2
}
obj1.fun() // 666
obj2.fun() // undefined

From the code we can see that this of a normal function is determined when it is called, while this of our arrow function is determined when it is defined.

  • It cannot be used as a constructor, that is, the new command cannot be used, otherwise an error will be thrown.
  • The arguments object cannot be used; it does not exist within the function body. If you want to use it, you can use the rest parameter instead.

4. Function tail call

Tail call is an important concept in functional programming. It is very simple and can be explained in one sentence. It means that the last step of a function is to call another function.

The sample code is as follows:

let x = (x) => {
  return 2 * x
}

let y = function (y) {
  return x(y)
}

console.log(y(20)); // 40

This is the end of this article about the new features of ECMAscript: function extension. For more information about the extension of ECMAscript functions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • ECMAScript6 adds new value comparison function Object.is
  • ECMAScript6 function rest parameters (Rest Parameters)
  • ECMAScript6 function default parameters
  • Function type in ECMAScript
  • A detailed introduction to the new feature of ECMAScript6, Arrow Function

<<:  Steps for IDEA to integrate Docker to achieve remote deployment

>>:  Analysis and solution of a.getAttribute(href,2) problem in IE6/7

Recommend

Nginx cache configuration example

When developing and debugging a web application, ...

Detailed explanation of the seven data types in JavaScript

Table of contents Preface: Detailed introduction:...

Introduction to commonly used MySQL commands in Linux environment

Enter the mysql command: mysql -u+(user name) -p+...

SQL insert into statement writing method explanation

Method 1: INSERT INTO t1(field1,field2) VALUE(v00...

The simplest form implementation of Flexbox layout

Flexible layout (Flexbox) is becoming increasingl...

Detailed explanation of various usages of proxy_pass in nginx

Table of contents Proxy forwarding rules The firs...

JavaScript lazy loading detailed explanation

Table of contents Lazy Loading CSS styles: HTML p...

Why are the pictures on mobile web apps not clear and very blurry?

Why? The simplest way to put it is that pixels are...

About the problem of vertical centering of img and span in div

As shown below: XML/HTML CodeCopy content to clip...

MySQL incremental backup and breakpoint recovery script example

Introduction Incremental backup means that after ...

MySQL 5.7.23 decompression version installation tutorial with pictures and text

It is too troublesome to find the installation tu...

Problems and solutions when installing and using VMware

The virtual machine is in use or cannot be connec...

DD DT DL tag usage examples

We usually use the <ul><li> tags, but ...

Mysql join table and id auto-increment example analysis

How to write join If you use left join, is the ta...