JavaScript的11个小技巧整理

在这篇文章中，我们将学习JavaScript中一些有用的小技巧，这些技巧可能会使我们的代码更加简短和高效。

1. 数组拆分和连接

在JavaScript中，我们可以使用扩展运算符 ... 来拆分和连接数组。

数组拆分

例如，我们可以将一个数组拆分成两个数组：

const arr = [1, 2, 3, 4, 5];
const [firstTwo, rest] = arr;
console.log(firstTwo); // 输出 1,2
console.log(rest); // 输出 3,4,5

数组连接

我们也可以使用 ... 运算符连接两个或多个数组，例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出 1,2,3,4,5,6

2. 使用解构赋值交换变量值

在JavaScript中，我们可以使用解构赋值交换两个变量的值，而不需要使用中间变量。例如：

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 输出 2
console.log(b); // 输出 1

3. 字符串模板

字符串模板是一种简单的方法，用于在字符串中插入变量。我们可以使用反引号和 ${} 来实现这一点，例如：

const name = "John";
console.log(`Hello ${name}!`); // 输出 Hello John!

4. 使用默认值

当变量为空或未定义时，我们可以使用默认值语法来设置默认值。例如：

const value = undefined;
const newValue = value || 10;
console.log(newValue); // 输出 10

如果 value 为空或未定义，则 newValue 将设置为默认值 10。

5. 短路求值

我们还可以使用短路求值来设置默认值。例如：

const value = undefined;
const newValue = value && 10;
console.log(newValue); // 输出 undefined

如果 value 为空或未定义，则 newValue 将设置为 undefined。

6. 使用合并对象语法

我们可以使用合并对象语法来创建新对象。例如：

const person = { name: "John" };
const newPerson = { ...person, age: 20 };
console.log(newPerson); // 输出 { name: "John", age: 20 }

在这个示例中，我们创建了一个名为 person 的对象，然后使用 ... 运算符来创建一个新对象 newPerson，该对象除了 person 中的属性外，还包括一个新属性 age: 20。

7. 数组去重

我们可以使用 [...new Set(array)] 进行数组去重。例如：

const array = [1, 2, 2, 3, 3, 4, 5, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出 1, 2, 3, 4, 5

在这个示例中，我们创建了一个名为 array 的数组，然后使用 new Set(array) 创建了一个包含独特值的集合，最后使用 ... 运算符将集合转换回数组。

8. 数组平均值

我们可以使用 reduce() 和 length 属性来计算数组的平均值。例如：

const array = [1, 2, 3, 4, 5];
const average = array.reduce((prev, curr) => prev + curr) / array.length;
console.log(average); // 输出 3

在这个示例中，我们创建了一个名为 array 的数组，然后使用 reduce() 方法计算数组的总和，并除以数组的长度来计算平均值。

9. 箭头函数

箭头函数可以让我们编写更简短的函数。例如：

const double = (x) => x * 2;
console.log(double(2)); // 输出 4

在这个示例中，我们创建了一个箭头函数，该函数将 x 作为参数，并将 x 值的两倍作为结果返回。

10. 使用数组的 map 进行转换

我们可以使用数组的 .map() 方法，对数组进行转换。例如：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((x) => x * 2);
console.log(doubledNumbers); // 输出 2, 4, 6, 8, 10

在这个示例中，我们创建了一个名为 numbers 的数组，然后使用 .map() 方法将数组中的每个元素乘以 2。

11. 使用数组的 filter 方法进行筛选

我们可以使用数组的 .filter() 方法，对数组进行筛选。例如：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((x) => x % 2 === 0);
console.log(evenNumbers); // 输出 2, 4

在这个示例中，我们创建了一个名为 numbers 的数组，然后使用 .filter() 方法筛选出数组中所有的偶数。