ECMAScript6 function default parameter _ javascript skills

This article describes the default parameters of the ECMAScript6 function. For more information, see the new features in the language update, which are extracted from the needs of millions of developers, standard adoption can reduce the programmer's pain and bring convenience.

We often write this

function calc(x, y) {  x = x || 0;  y = y || 0;  // to do with x, y  // return x/y}

Simply put, x and y provide a default value of 0. If no value is transmitted, x and y are calculated as 0. If it is passed in, it is calculated based on the actual value.

Another example is to define an ajax

function ajax(url, async, dataType) {  async = async !== false  dataType = dataType || 'JSON'  // ...}

A simple ajax function encapsulated by native JS. the url is required. async and dataType are optional. If this parameter is not set, requests are synchronized by default and JSON format data is returned.

Another example is to define a rectangle class.

function Rectangle(width, height) {  this.width = width || 200;  this.height = height || 300;}

If this parameter is set to new, a rectangle with a default width and height of 200*300 is created.

Whether it's a calc, ajax function, or Rectangle class, we all need to handle the default value in the function body. isn't it fun if the language handles itself? ES6 provides this feature (Default Parameters). The following are the calc, ajax, and Rectangle that are rewritten with the new features of ES6.

Function calc (x = 0, y = 0 ){//... console. log (x, y)} calc (); // 0 0 calc (1, 4); // 1 4 function ajax (url, async = true, dataType = "JSON "){//... console. log (url, async, dataType)} ajax ('.. /user. action ');//.. /user. action true JSONajax ('.. /user. action ', false );//.. /user. action false JSONajax ('.. /user. action ', false, 'xml ');//.. /user. action false XML function Rectangle (width = 200, height = 300) {this. width = width; this. height = height;} var r1 = new Rectangle (); // 200*300 Rectangle var r2 = new Rectangle (100 ); // 100*300 Rectangle var r3 = new Rectangle (100,500); // 100*500 Rectangle

We can see that ES6 moved the default value from the braces to the parentheses, and reduced the "|" operation. the function is reduced. The default value of the parameter should have been defined in the parameter, which seems a lot simpler. O (Partition _ partition) O

The default parameter can be defined at any position, for example, defining

function ajax(url, async=true, success) {  // ...  console.log(url, async, success)}

Defines a default parameter async. url and success are required. in this case, you need to set the intermediate parameter to undefined.

ajax('../user.action', undefined, function() {   })

Note: do not change undefined to null. even if null = undefined, after null is passed, async in the function is null and not true.

Note the following:

1. after the default parameter is defined, the length attribute of the function will be reduced, that is, several default parameters are not included in the length calculation.

function calc(x=0, y=0) {  // ...  console.log(x, y)}function ajax(url, async=true, dataType="JSON") {  // ...  console.log(url, async, dataType)}console.log(calc.length); // 0console.log(ajax.length); // 1

2. you cannot use let and const to declare the default value again. var can

Function ajax (url = ".. /user. action ", async = true, success) {var url =''; // allow let async = 3; // report const success = function () {}; // error}

It is also interesting that the default parameter can be a function call instead of a value type.

function getCallback() {  return function() {    // return code  }} function ajax(url, async, success=getCallback()) {  // ...  console.log(url, async, success)}

We can see that the success parameter is a function call. if the third parameter is not passed when ajax is called, the getCallback function is executed, and a new function is assigned to success. This is a very powerful function that gives programmers a lot of space to play.

For example, you can use this feature to forcibly specify a parameter that must be passed. if it is not passed, an error is returned.

Function throwIf () {throw new Error ('less passed parameter');} function ajax (url = throwIf (), async = true, success) {return url ;} ajax (); // Error: the parameter is missing

The above is all the content of this article. I hope you will like it.