2021 年 10 月 30 日

8 个有用的 JavaScript 技巧

每一种编程语言都有它自己的实用技巧。开发人员知晓其中的大部分，其中一些相当繁杂。在这篇文章，我将介绍一些我认为有用的技巧。其中的一些在实践中使用，而另一些则是用新的方法解决旧的问题。

确保数组值

使用数组时，需要重新创建初始数据，它们每一行的列长度可能不一样？😌，我知道！你可以使用 Array.fill 方法来确保相等长度的值在每一行中。

let array = Array(5).fill('');
console.log(array);
// outputs (5) ["", "", "", "", ""]

数组去重

ES6 提供了一些非常灵巧的方法来去除一个数组中重复的值。不幸的是，它们不能用于处理数组中非原始类型的值(Number/String/Boolean/null/undefined)。你能从"复杂的数组去重"了解更多。在本文只我们关注原始类型数据。

const cars = ['Mazda', 'Ford', 'Renault', 'Opel', 'Mazda'];

const uniqueWithArrayFrom = Array.from(new Set(cars));
console.log(uniqueWithArrayFrom);
// outputs ["Mazda", "Ford", "Renault", "Opel"]

const uniqueWithSpreadOperator = [...new Set(cars)];
console.log(uniqueWithSpreadOperator);
// outputs ["Mazda", "Ford", "Renault", "Opel"]

使用扩展运算符合并对象和数组

对象合并不是一个罕见的任务，有一个很好的选择来处理过去所做的。不同于过去手工完成这项工作，在未来我们将使用新的 ES6 功能。

// merging objects
const product = {
  name: 'Milk',
  packaging: 'Plastic',
  price: '5$',
};
const manufacturer = {
  name: 'Company Name',
  address: 'The Company Address',
};

const productManufacturer = {
  ...product,
  ...manufacturer,
};
console.log(productManufacturer);
// { name: "Company Name", packaging: "Plastic",
// price: "5$", address: "The Company Address" }

// merging an array of objects into one
const cities = [
  { name: 'Paris', visited: 'no' },
  { name: 'Lyon', visited: 'no' },
  { name: 'Marseille', visited: 'yes' },
  { name: 'Rome', visited: 'yes' },
  { name: 'Milan', visited: 'no' },
  { name: 'Palermo', visited: 'yes' },
  { name: 'Genoa', visited: 'yes' },
  { name: 'Berlin', visited: 'no' },
  { name: 'Hamburg', visited: 'yes' },
  { name: 'New York', visited: 'yes' },
];

const result = cities.reduce((accumulator, item) => {
  return {
    ...accumulator,
    [item.name]: item.visited,
  };
}, {});

console.log(result);
/* outputs
Berlin: "no"
Genoa: "yes"
Hamburg: "yes"
Lyon: "no"
Marseille: "yes"
Milan: "no"
New York: "yes"
Palermo: "yes"
Paris: "no"
Rome: "yes"
*/

映射数组(不使用 `Array.map`)

你是否知道不使用 Array.map 来映射数组值的方法？如果没有，请看下面：

const cities = [
  { name: 'Paris', visited: 'no' },
  { name: 'Lyon', visited: 'no' },
  { name: 'Marseille', visited: 'yes' },
  { name: 'Rome', visited: 'yes' },
  { name: 'Milan', visited: 'no' },
  { name: 'Palermo', visited: 'yes' },
  { name: 'Genoa', visited: 'yes' },
  { name: 'Berlin', visited: 'no' },
  { name: 'Hamburg', visited: 'yes' },
  { name: 'New York', visited: 'yes' },
];

const cityNames = Array.from(cities, ({ name }) => name);
console.log(cityNames);
// ["Paris", "Lyon", "Marseille", "Rome",
// "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

条件对象属性

为了创建拥有特定属性，我们不在需要创建两个不同的对象。扩展运算符可以很好地实现这个目的。

const getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...(emailIncluded && { email: 'john@doe.com' }),
  };
};

const user = getUser(true);
console.log(user);
// outputs { name: "John", surname: "Doe", email: "john@doe.com" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail);
// outputs { name: "John", surname: "Doe" }

解构原始数据

你是否用过含有很多数据的对象？我很确定你用过。最有可能的是我们使用一个包含用户整体数据和详情的对象。我们可以使用新的 ES6 解构功能来帮助。让我们来看一个例子：

const rawUser = {
  name: 'John',
  surname: 'Doe',
  email: 'john@doe.com',
  displayName: 'SuperCoolJohn',
  joined: '2016-05-05',
  image: 'path-to-the-image',
  followers: 45,
  ...
}

上面的对象可以声明为两个不同的上下文方式，像这样：

let user = {},
  userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);

console.log(user);
// outputs { name: "John", surname: "Doe" }
console.log(userDetails);
// { email: "john@doe.com", displayName: "SuperCoolJohn",
// joined: "2016-05-05", image: "path-to-the-image", followers: 45 }

动态属性名

回到过往，如果对象想要设置动态的属性，首先需要声明一个对象然后添加一个属性，不能够直接声明的形式。现在我们可以使用 ES6 功能实现这个。

const dynamic = 'email';
let user = {
  name: 'John',
  [dynamic]: 'john@doe.com',
};
console.log(user);
// outputs { name: "John", email: "john@doe.com" }

字符串插入

最后，一个新的方式连接字符串。如果你正在构建以模版帮助组件，这些可能发挥作用。ES6 模版字符串使得动态模版连接变得容易。

const user = {
  name: 'John',
  surname: 'Doe',
  details: {
    email: 'john@doe.com',
    displayName: 'SuperCoolJohn',
    joined: '2016-05-05',
    image: 'path-to-the-image',
    followers: 45,
  },
};

const printUserInfo = (user) => {
  const text =
    `The user is ${user.name} ${user.surname}.` +
    ` Email: ${user.details.email}. Display Name: ` +
    `${user.details.displayName}. ${user.name} has ` +
    `${user.details.followers} followers.`;
  console.log(text);
};

printUserInfo(user);
// 'The user is John Doe. Email: john@doe.com.
// Display Name: SuperCoolJohn. John has 45 followers.'

结尾总结

JavaScript 正在迅速扩展。大量很酷的功能，可以随时使用。棘手和耗时的问题正逐渐淡出过去，凭借 ES6 的新功能，提供了开箱即用的解决方案。

本文作者 Milos Protic，转载请注明来源链接：
原文链接：https://devinduct.com/blogpost/26/8-useful-javascript-tricks
本文链接：https://tie.pub/2019/06/eight-useful-javascript-tricks/