8 个有用的js技巧(推荐)

 更新时间:2019年07月03日 09:16:32   作者:前端小智   我要评论

这篇文章主要介绍了8 个有用的js技巧(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

为了保证的可读性,本文采用意译而非直译。

想阅读更多优质文章请猛戳github博客,一年百来篇优质文章等着你!

这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧。

1. 确保数组值

使用 grid ,需要重新创建原始数据,并且每行的列长度可能不匹配, 为了确保不匹配行之间的长度相等,可以使用array.fill方法。

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

2. 获取数组唯一值

es6 提供了从数组中提取惟一值的两种非常简洁的方法。不幸的是,它们不能很好地处理非基本类型的数组。在本文中,主要关注基本数据类型。

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"]

3.使用展开运算符合并对象和对象数组

对象合并是很常见的事情,可以使用新的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"
*/

4. 数组 map 的方法 (不使用array.map)

另一种数组 map 的实现的方式,不用 array.map。

array.from 还可以接受第二个参数,作用类似于数组的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"]

5. 有条件的对象属性

不再需要根据一个条件创建两个不同的对象,可以使用展开运算符号来处理。

nst 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" }

6. 解构原始数据

有时候一个对象包含很多属性,而只需要其中的几个,这里可以使用解构方式来提取需要的属性。如一个用户对象内容如下:

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 }

7. 动态属性名

早期,如果属性名需要是动态的,首先必须声明一个对象,然后分配一个属性。这些日子已经过去了,有了es6特性,可以做到这一点。

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

8.字符串插值

在用例中,如果正在构建一个基于模板的helper组件,那么这一点就会非常突出,它使动态模板连接容易得多。

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.'

译者:前端小智

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

最新评论