目录
- 常见的JavaScript 使用场景及技巧
- 总结
1 条件短路
primary
//如果相爱，就在一起
if (love) {
goTogether();
}
senior
//如果相爱，就在一起
love && goTogether()
常用于判断条件符合，便执行下一步操作。
2 空值合并运算符
primary
let foo;
if (foo === null || foo === undefined) {
foo = 'default string';
}
console.log(foo);
// expected output: "default string"
senior
const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"
const bar = 0
console.log(bar||100) //100
cosole.log(bar ?? 100) //0
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。
3 数组去重
primary
/** ES5 */
function unique(arr){
var newArr = []
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i])
}
}
return newArr
}
senior
/** ES6 */
let unique = (arr) => [...new Set(arr)]
推荐ES6的写法。
4 模板字符串
primary
var message = 'Hello ' + name + ', it\'s ' + time + ' now'
senior
const message = `Hello ${name}, it's ${time} now`
推荐ES6的写法。
5 解构
primary
var data = { name: 'cat', age: 1 }
var name = data.name,
age = data.age
senior
const data = {name:'cat', age:1}
const {name, age} = data
推荐ES6的写法。
6 数组求和
primary
var foo = [1, 2, 3, 4, 5];
//不优雅
function sum(arr){
var x = 0;
for(var i = 0; i < arr.length; i++){
x += arr[i];
}
return x;
}
sum(foo) // => 15
senior
//优雅
foo.reduce((a, b) => a + b) // => 15
推荐reduce的写法。
7 函数式编程
primary
//命令式
let feds = [];
for(let i = 0; i < companies.length; i++){
feds.push(companies[i].fe)
}
senior
//声明式
let feds = companies.map(item => item.fe);
命令式是指通过指令让计算机进行一系列操作，这样做的缺点繁杂，因为是你要先声明一个实例数组feds，再进行for循环遍历，遍历里面再进行if逻辑判断,再push到feds数组里。相反，声明式写法则相对优雅很多，如何进行计数器迭代，返回的数组如何收集，这些细节都隐藏了起来，它指明的是做什么，而不是怎么做。这种声明式写法也是函数式编程的一个很大的优点。
8 对象解构来模拟命名参数
如果你需要将一系列可选项作为参数传入函数，那么你也许倾向于使用了一个对象(Object)来定义配置(Config)。
primary
// 函数定义
function doSomething(config) {
const foo = config.foo !== undefined ? config.foo : 'Hi';
const bar = config.bar !== undefined ? config.bar : 'Yo!';
const baz = config.baz !== undefined ? config.baz : 13;
// ...
}
// 调用
doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
senior
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
// ...
}
如果你想让这个参数是可选的，可以这样：
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
// ...
}
9 if else判断
假设规定a和b有如下关系：
a = 5 b = 3
a = 10 b = 6
a = 12 b = 9
a = 15 b = 4
其余情况下，b的值始终等于0
primary
let b = 0;
if(a == 5){
b = 3;
} else if(a == 10){
b = 6;
} else if(a == 12){
b = 9;
} else if(a == 15){
b = 4;
} else {
b = 0;
}
senior
let b = 0;
switch(a){
case 5 :
b = 3;
break;
case 10 :
b = 6;
break;
case 12 :
b = 9;
break;
case 15 :
b = 4;
break;
default :
b = 0;
}
senior+
let b = (a==5 && 3) || (a==10 && 6) || (a==12 && 9) || (a==15 && 4) || 0;
senior++
let b={'5':1,'10':2,'12':3,'15':4}[a] || 0;
平时做业务经常遇到判断，这种写法可拓展到自己的平时写业务代码上面。
10 函数劫持
在一个函数运行之前把它劫持下来，添加我们想要的功能。
// 函数定义
function A () {
console.log("我是原函数");
}
/**
*
* @param {*要劫持的函数所在的对象} obj
* @param {*计划要劫持的函数名} method
* @param {*回调函数} fun
*/
const hijack = (obj, method, fun) => {
let orig = obj[method];//保存原函数
obj[method] = fun(orig);//将重写的函数作为回调函数的返回值赋给原函数变量
}
hijack(window,'A',function(orig){
return function (){
//做任何你想函数A执行时候你想做的事情
console.log("我劫持了函数A");
orig.call(this);
}
})
A();
函数劫持也是常见的钩子函数的原理之一。
11 柯里化
柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
假设有一个curry的函数：
// 函数定义
function add(a, b) {
return a + b;
}
let add1 = add.curry(1);
console.log(add1(5)); // 6
console.log(add1(2)); // 3
怎么实现这样一个curry的函数？它的重点是要返回一个函数，这个函数有一些闭包的变量记录了创建时的默认参数，然后执行这个返回函数的时候，把新传进来的参数和默认参数拼一下变成完整参数列表去调原本的函数，所以有了以下代码：
Function.prototype.curry = function() {
let defaultArgs = arguments;
let that = this;
return function(){
return that.apply(this,
defulatArgs.concat(arguments));
}
}
但是由于参数不是一个数组，没有concat函数，所以需要把伪数组转成一个数组，可以用Array.prototype.slice：
Function.prototype.curry = function() {
let slice = Array.prototype.slice;
let defaultArgs = slice.call(arguments);
let that = this;
return function() {
return that.apply(this,
defaultArgs.concat(slice.call(argumens)));
}
};
总结
平时工作中大多数时间都在忙着实现业务，笔者觉得更应该多总结一些技巧和更好的写法，不断鞭策自己，提高自己的技术能力。