javaScript的一些技巧（函数参数，函数类等）

本文链接：https://blog.csdn.net/DoLi_JIN/article/details/106216180

推荐几个让你写javaScript时候更得心应手的技巧。

使用函数默认值

一般我们会怎么样定义默认值呢？

栗子：

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

但是我们完全可以使用它本身自带的默认值属性。
栗子

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

函数使用多个参数的处理

函数多个参数来判断是否进行变量的输出
栗子：

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

这时候，我们可以使用对象传参的方式来进行简化。
栗子

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厘米"

函数副作用的避免

污染全局变量

栗子：

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

此时，demo已经不是字符串了，被污染成了数组。

避免方法栗子：

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'

函数的按值传递完美解决了这个问题

避免用户重复点击按钮导致数组重复输入错误

应用场景：用户向数组添加数据，不小心多次点击，导致一份数据添加多次
栗子：

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]

避免方法
第一种，每次修改了arr后调用去重函数（适用于一些情况，不适用于可以重复添加的栗子）
第二种栗子：

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]

缺点：需要在确认添加完成后，使用变量接收一次函数。
####使用 class
糖炒栗子：见 ES6教程
Class 的基本语法

ES6的class（类）到底是什么呢？就是给对象（Object）起了个小名（类,class），你在用变量调用对象时候，他会显示出一个 小名（类,class） 来，让你知道他的作用。例如，我的调用变量名是狗狗，但是在我的 小名(类,class) 是拆家小王子,这样主人立马就知道是我——二哈一脸自豪的说