Some skills of javaScript (function parameters, function classes, etc.)

Recommend a few tips to make you more handy when writing javaScript.

Use function defaults

How do we generally define default values ?

chestnut:

function exampleFun(name){
    
    
    return (name || '未命名')
};

But we can use its own default value attribute .
chestnut

function exampleFun(name = '未命名'){
    
    
    return name
};

Function handling with multiple parameters

The function has multiple parameters to determine whether to output the variable.
Chestnut:

function exampleFun(name = 'xx',age = 'xx',height = 'xx'){
    //输出格式：xx岁的xx身高xx（如果有未定义的变量，则用xx代替）
    return age+'岁的'+name+'身高'+height+'厘米'
};

At this time, we can use the object parameter method to simplify.
chestnut

function exampleFun({
    
     name = "xx",age = "xx",height = "xx" }){
    
    
    //输出格式：xx岁的xx身高xx（如果有未定义的变量，则用xx代替）
    return age+'岁的'+name+'身高'+height+'厘米'
};
// 调用
exampleFun({
    
    name:'二哈',height:'70',age:'6'})
//输出结果："6岁的二哈身高70厘米"
exampleFun({
    
    })
//输出结果："xx岁的xx身高xx厘米"

Avoidance of function side effects

Polluting global variables

chestnut:

var demo = 'I am demo';
function arrSplitDemo() {
    
    
  demo = demo.split(' ');
}
console.log(demo) // 'I am demo'
arrSplitDemo()
console.log(demo) // ["I", "am", "demo"]

At this point, the demo is no longer a string, it is polluted into an array.

Ways to avoid chestnuts:

var demo = 'I am demo';
function arrSplitDemo(demo) {
    
    
  return demo = demo.split(' ');
}
console.log(demo) // 'I am demo'
arrSplitDemo(demo) // ["I", "am", "demo"]
console.log(demo) // 'I am demo'

Function passing by value perfectly solves this problem

Avoid users repeatedly clicking the button to cause repeated input errors in the array

Application scenario: The user adds data to the array and accidentally clicks multiple times, causing a piece of data to be added multiple times.
Chestnut:

var arr = [1,2,3];
function arrPushError(push){
    
    
  arr.push(push)
};
//此时，用户不小心点击了三次
arrPushError(4); // [1, 2, 3, 4]
arrPushError(4); // [1, 2, 3, 4, 4]
arrPushError(4); // [1, 2, 3, 4, 4, 4]

Avoidance method The
first one is to call the de-duplication function after each modification of arr (applicable to some cases, not suitable for chestnuts that can be added repeatedly).
The second chestnut:

var arr = [1,2,3];
function arrPushError(push){
    
    
  return arr = [...arr,push]
};
//此时，用户不小心点击了三次
arrPushError(4); // [1, 2, 3, 4]
arrPushError(4); // [1, 2, 3, 4]
arrPushError(4); // [1, 2, 3, 4]

Disadvantage: After confirming that the addition is complete, you need to use the variable to receive a function.
####Use class to
fry chestnuts: see the basic syntax of Class in ES6 tutorial

What exactly is ES6's class? It is to give the object (Object) played a nickname (category, class) , when you call the object with the variable, he will show a nickname (category, class) to let you know his role. For example, I call variable names are dogs, but my nickname (category, class) is the demolition of small prince, so the owner immediately knew it was me - two ha proudly say

Naming conventions for variables, constants, functions, classes/classes

The benevolent sees benevolence, the wise sees wisdom, there is no certain standard.
But at least it has named readability , single responsibility principle .

In particular aspects of the function, to high cohesion , low coupling , the unity of maintaining a good function.

Like it, just comment. Thanks, even if it is a typo.