17 个优雅 JavaScript 代码的小技巧（下）

在上一篇文章中，我们介绍了其中9个JavaScript小技巧，没阅读过的小伙伴可以先看看：

17 个优雅 JavaScript 代码的小技巧（上）

今天这篇文章我们再来看看剩下的8个技巧。

10.多行字符串的简写

当我们在代码中处理多行字符串时，我们可以这样做：

//普通写法
const data = 'abc abc abc abc abc abc\n\t'
    + 'test test,test test test test\n\t'
//优雅写法
const data = `abc abc abc abc abc abc
         test test,test test test test`

11.隐式返回的简写

我们可以使用箭头函数直接返回值，而不用写return
语句。

Longhand:
//longhand
function getArea(diameter) {
  return Math.PI * diameter
}
//shorthand
getArea = diameter => (
  Math.PI * diameter;
)

12.条件查找的简写

如果我们的代码中需要检查变量的类型，然后基于不同类型调用不同的方法，那么我们除了使用if-else
语句或者switch
语句来判断外，还可以使用更简单的方法吗？

// 普通写法
if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  throw new Error('Invalid value ' + type);
}
// 优雅写法
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && throw new Error('Invalid value ' + type); func();

13.Object.entries()

这个特性可以将一个对象转换成一个对象数组。

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'test1', 'abc' ],
  [ 'test2', 'cde' ],
  [ 'test3', 'efg' ]
]
**/

14.Object.values()

这也是ES8的一个新特性，它和Object.entries()
的功能类似，但是返回结果中没有key值。

const data = { test1: 'abc', test2: 'cde' };
const arr = Object.values(data);
console.log(arr);
/** Output:
[ 'abc', 'cde']
**/

15.多次重复字符串

为了重复操作同一个字符串，我们可以在同一个for
循环中将它们连接起来，那么有没有更好的方法呢？

//普通写法 
let test = ''; 
for(let i = 0; i < 5; i ++) { 
  test += 'test '; 
} 
console.log(str); // test test test test test 
//优雅写法 
'test '.repeat(5);

16.Math.pow()简写

//普通写法
Math.pow(2,3); // 8
//优雅写法
2**3 // 8

17.数字分隔符

现在，我们只需使用_
即可轻松分隔数字，这可以帮助开发者更容易处理较大的数字。

//老语法
let number = 98234567

//新语法
let number = 98_234_567