# 一些你可能不了解的数组方法
数组是 Javascript 中最常见的概念之一，它给我们提供了处理存储在其中的数据的很多可能性。考虑到数组是我们开始学习编程就会了解到的最基本的主题之一，在本文中，将会向你展示一些你可能不知道但是很有用的数组的一些方法。
# 1. 数组去重
数组去重可以说是面试中最常见的一个问题了，这里有一个快速且简单的解决方案，我们可以使用 new Set() 来去重。下面为你展示两中使用 new Set() 去重的方法。
var num = [1, 1, 2, 2, 3, 4, 5, 3, 2] | |
// First method | |
console.log(Array.from(new Set(num))); // returns [1, 2, 3, 4, 5] | |
// Second method | |
console.log([...new Set(num)]); // returns [1, 2, 3, 4, 5] |
# 2. splice
有时候， 在创建代码时有必要替换数组中的特定值， splice() 方法可以很好的完成这种需求。 splice 接收三个参数：
- start：规定添加 / 删除元素的位置
- howmany：要删除的元素数量
- valueToAdd：向数组添加的新元素
var fruits = ['banana', 'apple', 'orange']; | |
fruits.splice(0, 2, 'potato', ''); // 该方法返回删除的元素，['banana', 'apple'] | |
console.log(fruits); // returns ['potato', '', 'orange'] |
# 3. 不实用 map 遍历数组
可能每个人数组的 map() 方法，但是可以使用另外一种解决方案来获得相似的效果以及干净的代码。
var friends = [ | |
{ name: 'John', age: 22 }, | |
{ name: 'Peter', age: 23 }, | |
{ name: 'Mark', age: 24 }, | |
{ name: 'Maria', age: 22 }, | |
{ name: 'Monica', age: 21 }, | |
{ name: 'Martha', age: 19 } | |
] | |
var friendsNames = Array.from(friends, ({name}) => name); | |
console.log(friendsNames); // returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"] |
# 4. 清空数组
你是否有一个充满元素的数组，但是处于某种原因你需要清空它，我们有另外一中清空数组的方法。
var num = [1, 2, 3, 4] | |
num.length = 0 | |
console.log(num) // [] |
# 5. 将数组转换为对象
将数组转换为对象最快的方法
var person = ['arrary', 'number', 'string'] | |
console.log({...person}) // {0: "arrary", 1: "number", 2: "string"} |
# 6. 填充数组
在某些情况下，当我们创建一个数组时，我们想用一些数据填充它，我们可以使用 fill() 。
var newArray = new Array(10).fill("1"); | |
console.log(newArray) // ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1"] |
# 7. 合并数组
你知道在不使用 concat() 方法将数组合并为一个数组嘛？有一种简单的方法可以将任意数量的数组合并。
var arr1 = [1,2,3,4] | |
var arr2 = [5,6,7,8] | |
var arr3 = [9,10] | |
console.log([...arr1, ...arr2, ...arr3]) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] |
# 8. 巧用 filter 函数
当 forEach 中含有 if 条件语句时，可以先 filter，然后在 forEach 代替。
// 不好的 | |
function emailClients(clients) { | |
clients.forEach((client) => { | |
const clientRecord = database.lookup(client); | |
if (clientRecord.isActive()) { | |
email(client); | |
} | |
}); | |
} | |
// 好的 | |
function emailClients(clients) { | |
clients | |
.filter(isClientRecord) | |
.forEach(email) | |
} | |
function isClientRecord(client) { | |
const clientRecord = database.lookup(client); | |
return clientRecord.isActive() | |
} |
上面不好的栗子一眼看过去是不是感觉一堆代码在那，一时半会甚至不想去看了。
好的栗子，是不是逻辑很清晰，易读。
- 巧用 filter 函数，把 filter 的回调单开一个函数进行条件处理，返回符合条件的数据
- 符合条件的数据再巧用 forEach，执行 email 函数
# 结束语
在本文中，展示了一些数组方法和技巧，它们可以帮组你进行编码并保持代码简洁。在 Javascript 中有许多很值得探索的技巧，不仅仅是数组，其他的数据类型也是。很希望你能将你常用的编码技巧分享给我，再见！
