每种编程语言都有自己暗藏的窍门。其中大多窍门都是开发人员熟知的,但也有一些技巧相当生僻而不为人知。本文将展示一些我认为有用的技巧。其中一些技巧我在实践中经常使用,而另一些则是解决老问题的新方法。
1. 确保数组有值
您曾经在 grid 表格中遇到过这样的情况吗?需要重新创建原始数据,但修改之后每一行的列宽可能不匹配?嗯,我经常遇到这种情形。为了确保行与行之间列宽对齐,可以使用 Array.fill 方法进行填充。
let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]
2. 获取数组唯一值
从数组中提取唯一值,ES6 版本提供了两种非常简洁的方法。稍有遗憾的是,这两种方法都不能很好地处理包含非原始类型数据的数组。可以查看文章”在数组中找出重复数据的窍门“(详见下方链接) 了解更多非原始类型的处理方法。在本文中,我们将关注点放在原始数据类型上,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"]
相关链接:
在数组中找出重复数据的窍门:
https://devinduct.com/blogpost/17/handling-array-duplicates-can-be-tricky
3. 使用扩展运算符合并对象和对象数组
对象合并并不鲜见,可能您之前已经遇到过,并且未来也可能会遇到这样的任务。而不同之处在于,过去您大部分工作多半都是手动完成的,但是从现在起直至将来,您可以享用 ES6 新特性中扩展运算符带来的便捷,请看下面例子。
// merging objects
const product = { name: 'Milk', packaging: 'Plastic', price: '5