几个实用的JavaScript编写技巧(下)

下面继续我们JavaScript编写技巧的学习

5. 熟练地实现For循环

如果您仍在 JavaScript 中使用 C/C++ 风格的 for 循环，那么，您肯定需要提升您的技能。

下面的代码是没问题的，但是他还不够JavaScript

const arr = ['Y', 'a', 'n', 'g']
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// Y
// a
// n
// g

在编写JavaScript代码中，推荐使用数组方法代理for循环

forEach

forEach 方法非常适合迭代数组的元素：

const author = [ 'Y', 'a', 'n', 'g' ];
author.forEach((c)=>{console.log(c)})
// Y
// a
// n
// g

map()

如果您阅读开源 JavaScript 程序，您可能会遇到 map() 函数。它是 JavaScript 中最流行的方法之一

const author = [ 'Y', 'a', 'n', 'g' ];
author.map((c)=>{console.log(c)})
// Y
// a
// n
// g

map() 函数的行为与 forEach() 基本相似，但有一个显着差异：

map() 方法返回一个与原始数组长度相同的新数组，其中每个元素都是对相应元素调用函数的结果。原始数组保持不变。forEach() 方法不返回任何内容。

以下代码说明了如何使用map()函数获取新数组：

const author = ['Y', 'a', 'n', 'g'];
const cute_author = author.map((c) => c + ':)')
console.log(cute_author)
// [ 'Y:)', 'a:)', 'n:)', 'g:)' ]
console.log(author)
// [ 'Y', 'a', 'n', 'g' ]

但是，我们无法使用 forEach() 函数获取新数组：

const author = ['Y', 'a', 'n', 'g'];
const cute_author = author.forEach((c) => c + ':)')
console.log(cute_author)
// undefined
console.log(author)
// [ 'Y', 'a', 'n', 'g' ]

for...of...

ES6 是 JavaScript 的一个里程碑。这个版本引入了许多好的功能。“for...of...”方法就是其中之一。

const author = [ 'Y', 'a', 'n', 'g' ];
for (let char of author){
    console.log(char);
}
// Y
// a
// n
// g

for...in...

“for...in...”语法也能够实现与我们相同的功能。但我们应该注意“for…in…”和“for…of…”之间的区别。下面的代码片段对此进行了解释：

const author = [ 'Y', 'a', 'n', 'g' ];
for (let idx in author){
    console.log(author[idx]);
}
// Y
// a
// n
// g

6.删除数组重复元素最快的办法(数组去重)

ES6 为 JavaScrip 引入了一种新的数据结构——集合。集合是唯一的项目的集合。

由于集合的特性，它使得删除数组的重复值变得更加简单。

const a = [1, 2, 1, 6, 6, 6, 9]
const unique_a = [...new Set(a)]
console.log(unique_a)
// [ 1, 2, 6, 9 ]

如上面的程序所示，我们可以利用展开运算符和 Set() 方法来方便地获取数组的唯一元素。

7. 用一行代码反转字符串

要在 JavaScript 中反转字符串，我们不需要编写 for 循环。

执行此操作需要 3 个步骤：

将字符串拆分为数组
反转数组
将数组转换为字符串

这 3 个步骤需要利用 3 种不同的内置方法，如下所示：

const author = "A Cheng";
const reversedAuthor = author.split("").reverse().join("");
console.log(reversedAuthor);
// uohZ gnaY

顺便说一句，检查 JavaScript 字符串是否为回文的一个简单方法是将字符串与其反转版本进行比较

const author = 'ACheng'
const isPalindrome = author.split("").reverse().join("") === author
console.log(isPalindrome)
// true

8.快速计算数组中的元素

如何计算 JavaScript 数组中的每个元素？

使用for循环一项一项地遍历项目并在此过程中对它们进行计数？

这是一个解决方案，但根本不是一个优雅的解决方案。我想说 lodash 是一个超级有用的 JS 库：

const _ = require('lodash');
const author = ['Y', 'a', 'a', 'a', 'n', 'n', 'g', 'g', 'g', 'g']
console.log(_.countBy(author))
// { Y: 1, a: 3, n: 2, g: 4 }

如果你不想使用第三方库，自己实现类似的功能并不难：


const countBy = (arr) => {
    let count = {};
    arr.forEach((e) => {
        count[e] = (count[e] || 0) + 1;
    });
    return count;
}

const author = ['Y', 'a', 'a', 'a', 'n', 'n', 'g', 'g', 'g', 'g']
const charCount = countBy(author);
console.log(charCount);
// { Y: 1, a: 3, n: 2, g: 4 }

如果您只需要计算一个特定项目，则 filter() 方法是一个不错的选择：

const author = ['Y', 'a', 'a', 'a', 'n', 'n', 'g', 'g', 'g', 'g']

// Filter all elements equal to 'a' and return the length (count)
const countOfa = author.filter(x => x === 'a').length
console.log(countOfa)
// 3

9. 使用逗号运算符简化代码

由于逗号运算符的语法，逗号在 JavaScript 中更加强大。

逗号 (,) 运算符计算每个表达式（从左到右）并返回最后一个表达式的值。如果你能熟练地利用它的力量，这对简化你的代码将会非常有帮助。

例如，以下程序演示了如何利用逗号运算符通过一行代码实现两个不同的目的：

let sum = 0;
const squares = [1, 2, 3, 4, 5].map((x) => (sum += x, x * x));
console.log(squares);
// [1, 4, 9, 16, 25]
console.log(sum);
// 15

鉴于逗号运算符始终返回最后一个表达式的结果，我们可以利用此功能来避免编写许多 return 关键字。

例如，以下代码的 get_author() 函数返回更改后的 arr：

const get_author = arr => {
    arr.push('g')
    return arr
}
console.log(get_author(['Y','a','n']))
// [ 'Y', 'a', 'n', 'g' ]

这是让逗号运算符炫耀的最佳场景：

const get_author = arr => (arr.push('g'), arr)
console.log(get_author(['Y', 'a', 'n']))
// [ 'Y', 'a', 'n', 'g' ]