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


Posted in Javascript onJuly 03, 2019

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

想阅读更多优质文章请猛戳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

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

Javascript 相关文章推荐
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
理解Javascript的call、apply
Dec 16 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Angular2数据绑定详解
Apr 18 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
redux处理异步action解决方案
Mar 22 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 #Javascript
20个必会的JavaScript面试题(小结)
Jul 02 #Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 #Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 #Javascript
js实现for循环跳过undefined值示例
Jul 02 #Javascript
Vue的路由及路由钩子函数的实现
Jul 02 #Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 #Javascript
You might like
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
JavaScript如何禁止Backspace键
2015/12/02 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python输出各行命令详解
2018/02/01 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python实现图片素描效果
2020/09/26 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
python元组拆包实现方法
2021/02/28 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
十佳标兵事迹材料
2014/08/18 职场文书
社会发展项目建议书
2014/08/25 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
导游词范文
2015/02/13 职场文书