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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
javaScript中"=="和"==="的区别详解
Mar 16 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue的三种图片引入方式代码实例
Nov 19 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
python属于软件吗
2020/06/18 Python
Python logging模块handlers用法详解
2020/08/14 Python
python 实现控制鼠标键盘
2020/11/27 Python
高职助产应届生自荐信
2013/09/24 职场文书
运动会的口号
2014/06/09 职场文书
验房委托书
2014/08/30 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript