Home > Article > Web Front-end > ECMAScript6 function default parameters_javascript tips
Every new feature added during the language update is extracted from the needs of millions of developers. Standard adoption can reduce the pain of programmers and bring convenience.
We often write like this
function calc(x, y) { x = x || 0; y = y || 0; // to do with x, y // return x/y }
To put it simply, x and y provide a default value of 0. When not passed, x and y are calculated with the value 0. Once passed, the actual value will be used for calculation.
Another example is defining an ajax
function ajax(url, async, dataType) { async = async !== false dataType = dataType || 'JSON' // ... }
A simple ajax function encapsulated with native JS. The url is required, async and dataType are optional. If not filled in, the default is to request and return JSON format data synchronously.
Another example is defining a rectangle class
function Rectangle(width, height) { this.width = width || 200; this.height = height || 300; }
Without passing any parameters when new, a rectangle with a default width and height of 200*300 will be created.
Whether it is calc, ajax function or Rectangle class, we all need to handle the default value in the function body. Wouldn’t it be nice if the language handles it by itself? ES6 provides this feature (Default Parameters). The following are calc, ajax, and Rectangle 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 JSON ajax('../user.action', false); // ../user.action false JSON ajax('../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的矩形 var r2 = new Rectangle(100); // 100*300的矩形 var r3 = new Rectangle(100, 500); // 100*500矩形
As you can see, ES6 moved the default value part from braces to parentheses, and also reduced the "||" operation, and the function body has since been slimmed down. The default value of the parameter should be in the place where the parameter is defined, which looks a lot simpler. O(∩_∩)O
Default parameters can be defined at any position, such as defining a
in the middlefunction 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 middle parameter to undefined
ajax('../user.action', undefined, function() { })
Note, don’t take it for granted and change undefined to null. Even if null == undefined, after passing null, the async in the function body will be null and not true.
The following points need to be noted:
1. After defining the default parameters, the length attribute of the function will be reduced, that is, several default parameters are not included in the calculation of length
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); // 0 console.log(ajax.length); // 1
2. Let and const cannot be used to declare the default value again, var can be
function ajax(url="../user.action", async=true, success) { var url = ''; // 允许 let async = 3; // 报错 const success = function(){}; // 报错 }
Another interesting thing is: the default parameter can not be a value type, it can be a function call
function getCallback() { return function() { // return code } } function ajax(url, async, success=getCallback()) { // ... console.log(url, async, success) }
You can see that the parameter success here is a function call. If the third parameter is not passed when calling ajax, the getCallback function will be executed, which returns a new function assigned to success. This is a very powerful function that gives programmers a lot of room for imagination.
For example, you can use this feature to force a certain parameter to be passed, otherwise an error will be reported
function throwIf() { throw new Error('少传了参数'); } function ajax(url=throwIf(), async=true, success) { return url; } ajax(); // Error: 少传了参数
The above is the entire content of this article, I hope you all like it.