温故而知新，8个有用的JS技巧「小知识点」

这些技巧可能大家大部分都用过了，如果用过就当作加深点映像，如果没有遇到过，就当作学会了几个技巧。
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"]

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

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

解构原始数据

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

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

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);

点此链接： 8年开发老码农福利赠送：网页制作，网站开发，web前端开发，从最零基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端小程序项目实战【视频＋工具＋电子书＋系统路线图】都有整理，送给每一位对编程感兴趣的小伙伴

温故而知新，8个有用的JS技巧「小知识点」相关推荐

「小目标」背后的“大意义”
如果第二次看到我的文章,欢迎文末扫码订阅我的公众号(跨界架构师)哟~ > 每周五11:45 按时送达.当然了,也会时不时加个餐- 本文长度为4673字,建议阅读11分钟. 坚持原创,每一篇都是 ...
《微SaaS创富周刊》第2期：写「小作文」工具估值130亿美元、微SaaS创富的三大成功法则
导读: 大家好!第2期<微SaaS创富周刊>面世啦,感谢大家的关注和阅读!本周刊面向独立开发者.早期创业团队,报道他们主要的产品形态--微SaaS如何变现的最新资讯和经验分享等.所谓微Sa ...
玩转微信应用号，「小程序」开发实操指南第一弹
摘要: 怎样将一个「服务号」改造成为「小程序」?全球首个微信应用号开发教程第一弹. 微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心 ...
「小算法」回文数与数值合法性检验
喵喵喵,小夕最近准备复习一下数学和基础算法,尽量每篇推送下面会附带点数学和基础算法的小文章.说不定哪天就用(考)到了呢(￣∇￣)注意哦,与头条位的文章推送不同,「小公式」和「小算法」里的小标题之间可能 ...
「小公式」平均数与级数
喵喵喵,小夕最近准备复习一下数学和基础算法,所以可能会推送或者附带推送点数学和基础算法的小文章.说不定哪天就用(考)到了呢(￣∇￣) 注意哦,与头条位的文章推送不同,「小公式」和「小算法」中的标题之间 ...
罗永浩：我今年四十八岁，还可以承受无数次的失败；iOS14 或将推出系统级「小程序」功能； PyCharm新版发布| 极客头条...
整理 | 屠敏头图 | CSDN 下载自视觉中国快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦, ...
罗永浩：还可以承受无数次的失败；iOS14 或将推出系统级「小程序」功能；华为加入 OIN 社区 | EA周报...
EA周报 2020年4月10日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 热点大事件罗永浩:我今年四十八岁,还可以承受无数次的失败罗永浩表示,"没太 ...
腾讯「小借条」引发的思考：区块链+的商业模式让各企业争先恐后的奥秘
区块链+又再一次被推到我们面前. 原文标题:<区块链+万物?腾讯"小借条"引发的思考>,作者陈丽姗 Key Takeaways: 腾讯区块链新品"小借条&qu ...
你身边有个这样的「小黄」么？
关注我读者有一段时间的肯定知道关于小黄的故事,但是不少人一直以为我是虚构的,然而小黄是真实存在的,今天我就来揭开小黄的庐山真面目. 小黄是我大学同学,其实他并不姓黄,他是三个字的名字,中间一个是黄,因 ...

温故而知新，8个有用的JS技巧「小知识点」

温故而知新，8个有用的JS技巧「小知识点」相关推荐

最新文章

热门文章