你觉得自己在 JavaScript 上有进步了吗？

让我们来考验一下吧！如果你已经掌握了这 7 个 JavaScript 技巧，那么你绝对已经提升了自己的水平，并且可以为你的进步感到自豪。

这些不仅仅是新手的小技巧——它们是表明你已经开始像真正开发者一样思考的技能。

准备好一探究竟，看看你处于哪个阶段了吗？开始吧！

1. 箭头函数

箭头函数可以让你用更简短的方式编写函数。函数是执行某种操作的代码块，例如将两个数字相加。

这是一个普通的函数：

function add(a, b) {  return a + b;}

这是同样的函数，用箭头函数表示：

const add = (a, b) => a + b;

箭头函数更简洁，它让你的代码看起来更简明扼要。

2. 模板字面量

模板字面量可以让你轻松地将文字和变量组合在一句话中。以前，你需要用加号（+）来连接文字和变量，而现在你可以使用模板字面量。

这是在没有模板字面量的情况下问候某人的方式：

const name = 'Sam';const greeting = 'Hello, ' + name + '! How’s it going?';

现在，用模板字面量来问候：

const name = 'Sam';const greeting = `Hello, ${name}! How’s it going?`;

这样更容易阅读，你不再需要使用加号来连接文字了。

3. 解构赋值

解构赋值可以让你快速地从数组或对象中提取值并将其赋给变量。它节省了空间，使代码更简洁。

这是一个数组的例子：

const [a, b] = [1, 2];console.log(a, b); // 1, 2

这段代码将数组 [1, 2] 的值赋给了变量 a 和 b。

现在这是一个对象的例子：

const person = { name: 'Lucy', age: 10 };const { name, age } = person;console.log(name, age); // Lucy, 10

你可以在一行中从对象中提取值，而不是写多行代码。

4. 展开运算符

展开运算符（...）可以帮助你快速复制数组或对象。它还可以将两个或多个数组或对象合并为一个。

这是一个数组的例子：

const fruits = ['apple', 'banana'];const moreFruits = [...fruits, 'orange', 'grape'];console.log(moreFruits); // ['apple', 'banana', 'orange', 'grape']

展开运算符 ...fruits 复制了第一个水果列表，并在新列表中添加了新的水果。

现在，这是一个对象的例子：

const dog = { breed: 'Labrador', color: 'yellow' };const newDog = { ...dog, age: 3 };console.log(newDog); // { breed: 'Labrador', color: 'yellow', age: 3 }

你复制了第一个 dog 对象，并添加了新的信息（age: 3）。

5. 数组方法：.map()、.filter() 和 .reduce()

这些方法可以帮助你处理数组（项目列表）。它们使更改、排序或汇总数组中的项目变得更容易。

.map() – 此方法遍历数组中的每个项目。

const numbers = [1, 2, 3];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6]

在这个例子中，.map() 将每个数字乘以 2。

.filter() – 此方法可以帮助你筛选出数组中的某些项目。

const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); // [2]

在这个例子中，.filter() 找到了数组中的偶数。

.reduce() – 此方法将数组中的所有项目相加。

const sum = numbers.reduce((total, num) => total + num, 0);console.log(sum); // 6

在这个例子中，.reduce() 将数组中的数字相加，得到总和（6）。

6. 默认参数

默认参数允许你为函数设置默认值。如果你忘记传入值，函数仍然可以运行。

这是一个例子：

function greet(name = 'Friend') {  return `Hello, ${name}!`;}console.log(greet()); // Hello, Friend!console.log(greet('Jake')); // Hello, Jake!

如果你没有给函数传入 name，它会使用 'Friend' 作为默认名称。这确保了函数始终可以运行。

7. 异步/等待（Async/Await）处理 Promise

在编程中，有些任务需要时间，比如从网站加载数据。在 JavaScript 中，你可以使用 promise（承诺） 来处理这些任务。async/await 让你可以编写等待这些任务完成的代码。

这是一个例子：

async function getData() {  try {    let response = await fetch('https://api.example.com/data');    let data = await response.json();    console.log(data);  } catch (error) {    console.error('Something went wrong:', error);  }}getData();

这段代码会等待从网站获取数据（fetch），但看起来像是普通的代码。相比其他处理 promise 和错误的方式，它更容易阅读。

结论

如果你掌握了这 7 个 JavaScript 技巧，那么你已经相当不错了！

它们可以让你的代码更简洁、更快速、更易于理解。继续练习这些技巧，很快你就会像专业人士一样编写代码了！