在最新版的JavaScript 中，JavaScript 语言引入了更多的有用语法。在本文中，我将介绍几个在JavaScript新旧版本中易于阅读的技巧。
1、短循环
你知道在 JavaScript 中你可以在一行中缩短循环吗？这意味着你现在可以为循环编写更少的代码。
var names = ["John", "Trevor", "Steve", "Jacob"]
// long method
for(var i = 0; i < names.length; i++) {
console.log(names[i])
}
//short single line method
for(let name of names) console.log(name)
2、三元运算符
我们可以使用三元运算符以简洁的方式编写 if...else 语句。而不是写：
const x = 20;
let grade;
if (x >= 50) {
grade = "pass";
} else {
grade = "fail";
}
我们可以写：
const x = 20;
let grade = (x >= 50) ? "pass" : "fail";
他们都检查 x 是否大于或等于 50，然后分配字符串 'pass' 如果为真，否则为假。
我们还可以使用三元运算符编写嵌套的 if 语句，如下所示：
const x = 20;
let grade = (x >= 50) ? "pass" : (x >= 25) ? "good fail" : 'bad fail';
这与下面代码一样：
const x = 20;
let grade;
if (x >= 50) {
grade = "pass";
} else {
if (x >= 25) {
grade = "good fail";
} else {
grade = "bad fail";
}
}
3、调整一个数组的长度
你知道我们可以使用 JavaScript length方法调整数组的大小吗？长度不仅用于获取数组的大小。如果我们将数组的长度设置为任意数字，它将对数组进行切片。
var array1 = [1, 2, 3, 4, 5, 6]
var array2 = ["Python", "JavaScript", "C++", "Dart"]
array1.length=3
array2.length=1
console.log(array1) // [1, 2, 3]
console.log(array2) // ["Python"]
4、设置默认值
如果变量为假，我们可以通过编写以下内容来设置默认值：
let x;
let y = x || 10;
这与下面代码一样：
let x;
let y;
if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
y = 10;
}
因为 x || 10 表示如果 x 为假，即 x 为 undefined、null、0、空字符串或 NaN，那么我们将 10 赋值给 y，这与：
if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
y = 10;
}
5、 JavaScript 中的时间戳
你知道在 JavaScript 中我们有很多方法可以使用 Date 方法来获取日期吗？查看下面的代码示例。
// original method
var date = new Date()
timestamp = date.getDate()
console.log(timestamp)
// shorter method
timestamp = new Date().getDate()
console.log(timestamp)
// shortest method
timestamp += new Date();
console.log(timestamp)
6、声明多个变量的简写
我们可以通过编写来声明多个变量：
let x = y = z = 5;
这与下面代码一样：
let x = 5;
let y = 5;
let z = 5;
它的工作原理是，首先将 5 分配给 z，然后将 z 的值分配给 y，最后将 y 的值分配给 x 。
7、删除数组中的一个值
通常，我们使用 delete 方法从数组中删除一个项目。但这就是在阵列中打孔的方法。它将 undefined 放在删除项目索引上。
我们可以使用该splice方法做一些工作，但它会从数组中完全删除索引，而不会留下任何漏洞。
// synatax : splice(array index, number of value to delete )
var array = [1, 2, 3, 4, 5, 6]
//delete method
delete array[4]
//splice method
array.splice(4,1)
console.log(array) // [1, 2, 3, 4, 6]
8、If Truthy
检查某些东西是否为真的JavaScript简写，它不是 undefined、null、0、空字符串或 NaN，如下所示：
if (x){
console.log('x is truthy')
}
上面的代码检查 x 是否为真，如果是，则执行 console.log。
9、For...Of 循环简写
从 ES6 开始，我们可以使用 for...of 循环来遍历数组或类数组对象中的变量，其中包括 Maps、Sets、参数对象、生成器、迭代器以及任何带有 [Symbol.iterator]方法。
我们可以写：
let fruits = ['apple', 'orange', 'grape'];
for (let fruit of fruits) {
console.log(fruit);
}
这比使用带有索引的常规 for 循环更干净，并且它也适用于其他可迭代对象。例如，我们可以将它与生成器一起使用：
let fruits = function*() {
yield 'apple';
yield 'orange';
yield 'fruits';
}
for (let fruit of fruits()) {
console.log(fruit);
}
10、JavaScript 中的 IN 运算符
通过使用in运算符，你可以检查对象中是否存在键。当你检查对象中是否存在特定键时，这个技巧就会派上用场。
var a = 4
var b = 5
var list = {1:7, 3:9, 4:0, 2:9}
console.log(a in list) //true
console.log(b in list) // false
11、Array.forEach
我们可以使用 Array.forEach 方法来遍历数组，尽管它比循环慢。
要使用它，我们可以编写如下代码：
let fruits = ['apple', 'orange', 'grape'];
fruits.forEach((fruit, index) => console.log(fruit));
12、函数参数
你不需要定义函数参数，你可以将函数参数用作数组对象，而无需在函数实现时声明参数。
function add() // no paramter is defined
{
var sum = 0
for(var i=0; i < arguments.length; i++)
{
sum=sum + arguments[i]
}
console.log("Total Sum : ", sum) // Total Sum : 9
}
// calling function
add(1, 3, 5)
13、十进制底指数
我们可以指定指数，而不是写出带有所有尾随零的整数。
例如，如果我们有：
1e0
为1
1e1
10
1e2
100
1e3
为 1000 等。
14、JavaScript 字符串填充
JavaScript 填充用在字符串文本中添加。我们可以在字符串的开头或结尾添加填充。这是padStartand的语法padEnd。
padStart(targetLength, padString(optional))
padEnd(targetLength, padString(optional))
PadString 是两种 Padding 方法中的可选参数。下面是理解他们工作的代码示例。
console.log("123".padStart(5)) // 123
console.log("123".padStart(5, "0")) // 00123
console.log("123".padEnd(5, "0")) // 12300
console.log("123".padEnd(10, "0")) // 1230000000
15、数字分隔符
最新的浏览器允许我们使用下划线来分隔数字，以便于阅读。例如，我们可以写：
100_000_000
一亿，下划线可以放在我们选择的任何地方。
16、Power ** 运算符
此功能将为你节省大量数学计算时间。你可能使用Math.pow()函数来计算数字的幂。但我们可以使用 ** 运算符代替它。
// old method
var p = Math.pow(2,5)
console.log(p) // 32
// new method
var p = 2**5
console.log(p) // 32
你会认为Math.pow()仍然是最好的方法。那么使用这种方法的长数学方程呢？
// old method
var p = Math.pow(2,5) + Math.pow(2,5) + Math.pow(2,1) + Math.pow(2,3) + Math.pow(2,4) + Math.pow(2,9)
console.log(p) // 602
// new method
var p = 2**5 + 2**5 + 2**1 + 2**3 + 2**4 + 2**9
console.log(p) // 602
嗯，它比使用Math.pow()函数更清晰易懂。
17、对象属性简写
而不是写：
const foo = 1,
bar = 2;
const obj = {
foo: foo,
bar: bar
};
我们可以写：
const foo = 1,
bar = 2;
const obj = {
foo,
bar
};
两段代码完全一样。
18、一元运算符 (+)
一元运算符可以方便地将字符串数字转换为数字格式并将日期转换为毫秒。看看下面的代码示例。
var strnum = "324.5"
var num = +strnum
console.log(num) // 324.5
var currentDate = new Date();
var millisSince = +currentDate;
console.log(millisSince)
19、箭头函数
如果箭头函数只有一行，那么我们就不需要大括号，我们可以在不使用 return 关键字的情况下从它返回一个值。
例如：
() => 1
与下面代码是相同的：
() => {
return 1
}
如果我们不关心 this 的值，我们可以使用箭头函数，因为箭头函数不会改变函数内部的 this 值。
20、includes()
我敢打赌，你们中的大多数人都用来indexOf在数组中查找元素。不要使用那个方法。因为我们有更好的方法来做同样的工作。使用include方法而不是indexOf返回布尔值的结果。
var array = ["Python", "JavaScript", "C++", "Dart", "JAVA"]
console.log(array.includes("JavaScript")) //True
console.log(array.includes("C#")) // false
21、重定向到 URL
JavaScript 有一些方法可以在你执行代码后，将你重定向到浏览器中的网站。当用户在网站上执行任何操作并且 JavaScript 将用户重定向到另一个 URL 时，这个就会派上用场。
const Redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url);
redirect('https://medium.com/@codedev101')
22、将浮点数转换为整数（快速方法）
要将浮点数转换为整数，你必须使用Math.floor()、Math.round()和Math.ceil()方法，但你可以使用|按位 OR 运算符以更快的方式进行转换。查看下面的代码示例。
// old way
console.log(Math.floor(23.56))
// Quick way
console.log(23.56 | 0)
最后的想法
上面的技巧大多来自 ES6。这个版本的 JavaScript 提供了许多快捷的方式方法，可以让我们更轻松地编写代码和阅读。
for...of 循环非常有用，因为它可以遍历数组和类似数组的对象。没有其他循环可以做到这一点。
数字分隔符较新，仅在最新浏览器中可用。
最后，感谢你的阅读。