8 个有用的 JavaScript 技巧

英文原文:https://devinduct.com/blogpost/26/8-useful-javascript-tricks

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

确保数组值

使用数组时,需要重新创建初始数据,它们每一行的列长度可能不一样?😌,我知道!你可以使用 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); 
// outputs { 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);
// outputs ["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);
// outputs { 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);
// outputs 'The user is John Doe. Email: john@doe.com. Display Name: SuperCoolJohn. John has 45 followers.'

结尾总结

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

上次更新: 6/10/2019, 9:35:20 AM