12个非常有用的JavaScript技巧

当提到JavaScript时，故事永远没有尽头。在这篇文章中，我将分享12个非常有用的JavaScript技巧，这些技巧既可以帮助您提高代码的质量和效率，也可以简化您的工作流程。

1. 使用模板文字

ES6引入了一种新的字符串形式- 模板字符串。这可以让您轻松实现字符串插值，而不必使用复杂的字符串拼接。要使一个字符串成为模板字符串，只需使用 反引号（ ） 包裹它。

例如：

const name = 'Lucy';
console.log(`My name is ${name}.`);

输出：

My name is Lucy.

该技巧不仅可以让你避免使用大量的 + 连接字符串，还可以让你轻松实现多行字符串。

2. 使用Array.from()将类似数组的对象转换为数组

有时候会遇到只是类似数组的数据，例如一个 NodeList 对象或者 arguments 对象。这些数据结构虽然看起来像数组，但它们并不是数组，因此没有原生的数组方法。Array.from() 这个方法可以将这些类数组的数据结构转换为真正的数组，在这个新的数组上我们可以使用任何原生的数组方法。

示例：

const nodeList = document.querySelectorAll('li');
const nodeListToArray = Array.from(nodeList);

console.log(nodeList); // NodeList(3) [li, li, li]
console.log(nodeListToArray); // Array(3) [li, li, li]

3. 使用解构赋值

解构赋值是一种新语法，可以让您将对象和数组分解为单独的变量，以便更容易地阅读和使用其中的内容。同时也可以很方便地给这些变量默认值。例如：

const myObj = { name: 'Lucy', age: 28 };
const { name, age } = myObj;

console.log(name); // Lucy
console.log(age); // 28

you can also add default values to variables:

const myObj = { name: 'Lucy', country: 'US' };
const { name, age = 30, country } = myObj;

console.log(age); // 30

4. 使用对象字面量

对象字面量是一种简单的写法，可以让您更容易地创建单个对象。例如：

const name = 'Lucy';
const age = 28;
const myObject = { name, age };

这条语句等价于：

const myObject = { name: name, age: age };

因此，对象字面量可以帮助你避免重复的代码。

5. 使用Destructuring来计算

Destructuring的另一个有用场景是计算或创建更复杂的变量。例如，您可以使用计算值来创建默认选项。

const myOptions = { myName: 'Lucy', country: 'US' };
const { myName: name = 'Lucy', country = 'UK' } = myOptions;

console.log(name); // Lucy
console.log(country); // US

在这个例子中，我们使用了默认值UK来覆盖 myOptions 对象中 country 属性的值。

6. 清除数组中的空值

在数组中移除空值是一个常见的任务。你可以使用 filter 方法来解决这个问题。例如：

const name = ['Lucy', '', 'Larry', null, undefined, 'Tom'];
const removeEmpty = name.filter(Boolean);

console.log(removeEmpty); // ['Lucy', 'Larry', 'Tom']

在这个示例中，我们使用 Boolean 过滤函数来过滤掉数组中的空值，并返回一个不包含空值的新数组。

7. 数组去重

数组去重也是处理数据时经常遇见问题。你可以使用 Set 来创建一个新集合，然后使用 ... 操作符展开集合到一个数组中，在新数组中我们得到没有重复值的数组。

示例：

const names = ['Lucy', 'Peter', 'Lucy', 'Marry', 'Tom'];
const uniqueNames = [...new Set(names)];

console.log(uniqueNames); // ['Lucy', 'Peter', 'Marry', 'Tom']

8. 对象数组排序

使用 Array.sort 可以对数组进行排序。当处理包含对象的数组时，您可以使用属性名称作为参数来排序。例如：

const people = [
  { name: 'Lucy', age: 25 },
  { name: 'Peter', age: 32 },
  { name: 'Tom', age: 21 }
];

people.sort((a, b) => a.age - b.age);

console.log(people); // [{ name: 'Tom', age: 21 }, { name: 'Lucy', age: 25 }, { name: 'Peter', age: 32 }]

在这个例子中，我们根据 age 属性排序了 people 数组。

9. 展开运算符

展开运算符是一种非常有用的语法，可以快速将一个数组展开成多个单独的值，或者将多个单独的值合并成一个数组。例如：

const arr1 = ['Lucy', 'Peter'];
const arr2 = ['Marry', 'Tom'];
const newArr = [...arr1, ...arr2];

console.log(newArr); // ['Lucy', 'Peter', 'Marry', 'Tom']

在这个例子中，我们使用 ... 运算符将两个数组合并成一个新数组。

10. 合并对象

如果您需要合并两个或多个对象，则可以使用 {...} 运算符。例如：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObj = { ...obj1, ...obj2 };

console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }

在这个例子中，我们将 obj1 和 obj2 对象合并成一个新的对象 newObj。

11. 使用数组.reduce()

使用 reduce() 方法可以对单个数组进行迭代，并且可以最终返回某个值。例如，我们可以使用 reduce() 计算数组元素之和。

const array = [1,2,3,4,5];
const sum = array.reduce((acc, currentValue) => acc + currentValue, 0);

console.log(sum); // 15

在这个例子中， array.reduce 计算了数组中所有值的总和。

12. 异步函数

异步函数是一种可在后台执行的函数，可以防止阻塞主线程。您可以使用异步函数来处理长时间运行的任务，并避免网页的瞬间卡顿或崩溃。异步函数使用 async / await 或 Promise 的语法来实现。

示例1 - 使用 async / await：

async function myAsyncFunction() {
    const delay = () => new Promise(resolve => setTimeout(resolve, 1000));
    await delay();
    console.log('Async function');
}

myAsyncFunction();

在这个例子中，我们使用 async 关键字来定义函数。在函数内部，我们使用 await 来等待一秒钟，然后在控制台打印 "Async function"。

示例2 - 使用 Promise：

function myPromiseFunction() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Promise function');
        }, 1000);
    });
}

myPromiseFunction().then(result => console.log(result));

在这个例子中，我们使用 Promise 在异步执行代码。使用 then() 方法在异步执行完成后获取结果。

这些JavaScript技巧可以帮助您更轻松地编写代码，提高代码的质量和效率。您可以在自己的项目中尝试它们，并发现它们的潜力，以便将来可以使用更好的方式进行代码编写。