JS开发技巧

原创

Blue_007

修改于 2023-11-02 22:24:05

1530

修改于 2023-11-02 22:24:05

文章被收录于专栏：代码生涯

1. 箭头式编程

箭头编程语法非常有趣，高逼格！上代码！

//箭头语法
函数名 = (参数) => {函数代码体};
---------------------------------------------
//如用普通函数编写代码
function f1() {
    console.log("普通函数编写");
}
//调用
f1();
----------------------------------------------
//使用箭头式函数编写代码
f1 = () => { console.log("箭头函数编写"); };
//调用
f1();

一个字：漂亮

因为它的漂亮，我上网去了解了一下，它有一个问题，那就是this的指针，在对象中普通函数编写代码this的指针指向当前对象，而箭头式函数的this指针指向外一层的作用域。这里就不举例了，可上网仔细了解。

2. 逻辑与(&&)

逻辑与本身没什么好讲的，但在JS中使用它编写的代码异常简约漂亮

//什么真值假值，我就不解释了，直接上代码
----------------------------------------------
//这是不使用逻辑与时，要处理一些业务时使用的代码
let i = 1;
//判断b的结果
if(i == 1){
    console.log("i等于1");
} else {
    console.log("i不等于1");
}
//这只是例子，但总的来说平时总会的这样的业务
----------------------------------------------
//这时使用逻辑与
let i = 2;
i == 1 && console.log("i等于1");
i != 1 && console.log("i不等于1");
//"&&"这种的行为称做“短路”
----------------------------------------------
上面JavaScript代码是完全等价的
----------------------------------------------
//再一次举例
if (a == b) stop();  //只有在a==b的时候才调用stop()
(a == b) && stop();  //同上

3. 逻辑或(||)

逻辑或它也具有一些更复杂的行为。它的作用就是当表达式1不成立时就运行表达式2以此推算，直到表达式返回真值才OK

这个运算符最常用的方式是用来从一组备选表达式中选出第一个真值表达式:
//如果max_width已经定义了，直接使用它,否则在preferences对象中查找max_width
//如果没有定义它,则使用一个写死的常量
let max = max_width || preferences.max_width || 500;
	
这种惯用法通常用在函数体内,用来给参数提供默认值:
//将o的成员属性复制到p中,并返回口
function copy(o, p)
	p = p || {} 
	//如果向参数p没有传入任何对象,则使用一个新创建的对象
}