花式玩转 JavaScript 数组，看完后我直接删了 lodash

作者简介：
李中凯老师，8年前端开发，前端负责人，擅长JavaScript/Vue。
公众号：1024译站
掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts
主要分享：Vue.js， JavaScript，CSS

数组是 JavaScript 里面最常见的概念，它为我们处理数据提供了各种可能性。考虑到数组是 JavaScript 中最基本的主题之一，可能在你学习编程之初就接触到了，这篇文章就给你介绍一些你可能不知道的技巧，在日常开发中非常有用！

1数组去重

这是面试当中经常出现的问题，如何把数组中重复的元素去掉？有一个非常简单快捷的方法，就是利用 Set() 对象。这里给你展示两种方式，一个用 .from() ，另一个用展开操作符(…)。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];// 方法一
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]
// 方法二
var uniqueFruits2 = […new Set(fruits)];
console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”]

很容易吧？

2替换数组中的某些元素

编码过程中有时候需要替换数组中某些值，这里有一个你可能不知道的简便方法，就是利用 .splice(start, 删除的元素个数, 添加的元素)，传入三个参数，指定修改的起始位置，以及要删除的元素个数和新的元素。

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];
fruits.splice(0, 2, “potato”, “tomato”);
console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]

3无需 .map() 也可映射数组

可能每个人都知道数组的 .map() 方法，但是还有一种方法可以达到类似的效果，代码也很简洁，那就是 .from()方法。

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清空数组

你有一个包含多个元素的数组，出于某种目的，你想清空它，但不想一个一个的删除，怎么办？一行代码搞定，只要把数组的长度设置为0，就行了！

var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];fruits.length = 0;
console.log(fruits); // returns []

5将数组转成对象

假设有一个数组，出于某种目的，我们想把这些数据转成对象。最快的方法就是利用著名的展开操作符 (…)。

var fruits = [“banana”, “apple”, “orange”, “watermelon”];
var fruitsObj = { …fruits };
console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

6用数据填充数组

在某些情况下，当我们创建一个数组时，我们想用一些数据填充它，或者我们需要一个具有相同值的数组，在这种情况下，.fill() 方法提供了一种简单而干净的解决方案。

var newArray = new Array(10).fill(“1”);
console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”]

7合并数组

你知道不使用 .concat()方法怎样合并多个数组吗？有一个简单的方法，只要一行代码就可以合并任意数量的数组。你可能知道了，展开操作符 (…) 在数组操作上非常有用，这里也是。

var fruits = [“apple”, “banana”, “orange”];
var meat = [“poultry”, “beef”, “fish”];
var vegetables = [“potato”, “tomato”, “cucumber”];
var food = […fruits, …meat, …vegetables];
console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”]

8查找两个数组的交集

这也是在 JavaScript 面试中最常见的问题之一，因为它展示了你对数组方法的熟悉程度和你的逻辑能力。为了找到两个数组的交集，我们将使用前面提到的方法之一，确保我们检查的数组中的值不重复，我们会用到 .filter 和.include方法。结果将得到两个数组中都包含的值的数组。请看代码:

var numOne = [0, 2, 4, 6, 8, 8];
var numTwo = [1, 2, 3, 4, 5, 6];
var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item));
console.log(duplicatedValues); // returns [2, 4, 6]

9从数组中删除假值

我们先定义什么是假值。在 JavaScript 中，假值是 false, 0， ""，null, NaN, undefined。然后我们就想办法从数组中删除这类值。为此，我们将使用 .filter()方法。

var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false];
var trueArr = mixedArr.filter(Boolean);
console.log(trueArr); // returns [“blue”, 9, true, “white”]

10从数组中随机取值

有时我们需要从数组中随机选择一个值。要以一种简单、快速、简短的方式创建它，并保持代码整洁，我们可以根据数组长度获得一个随机索引值。来看看代码:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var randomColor = colors[(Math.floor(Math.random() * (colors.length)))]

11数组倒序

当我们需要倒转数组时，没有必要通过复杂的循环和函数来创建，有一个简单的数组方法可以为我们做所有的事情，只需一行代码，我们就可以让数组颠倒顺序。来看代码:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];
var reversedColors = colors.reverse();
console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”]

12.lastIndexOf() 方法

在 JavaScript 中，有一个有趣的方法，它允许查找给定元素的最后一次出现的索引。例如，如果我们的数组有重复的值，我们可以找到它最后一次出现的位置。让我们看看代码示例:

var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7];
var lastIndex = nums.lastIndexOf(5);
console.log(lastIndex); // returns 9

13数组求和

在 JavaScript 面试中经常出现的又一个问题。也没什么难的，可以在一行代码中使用.reduce方法来解决。来看代码:

var nums = [1, 5, 2, 6];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // returns 14

总结

本文介绍了关于数组的13个技巧，它们是保持代码简洁的得力助手。另外要告诉你的是，JavaScript 还有很多值得研究的技巧，不仅是关于数组的，还包括不同的数据类型。希望本文提供的解决方案能帮你有效提升开发效率。之前 JavaScript 数组的原生方法还没有这么多，有时候我们不得不依赖 lodash 这样的库完成比较复杂的数组操作。随着 ES6 的普及，大部分操作都可以用原生方法了，效率会高很多。你甚至可以删掉 lodash 了。

本文已经获得李中凯老师授权转发，其他人若有兴趣转载，请直接联系作者授权。

花式玩转 JavaScript 数组，看完后我直接删了 lodash相关推荐

看完后，别再说自己不懂用户画像了
用户画像是一个挺新颖的词,最初它是大数据行业言必及之的时髦概念.现在我们运营谈及用户画像,它也是和精准营销.精细化运营直接钩挂的.这篇文章主要讲产品和运营角度的用户画像. 希望看完后,解决你一切关于用 ...
自动化测试面试题及答案，看完后吊打面试官！
自动化测试是什么?自动化测试学什么?自动化测试面试题及答案?–看完后吊打面试官! 一.前言最近有童鞋和我抱怨,说网上很难搜到那些全面又合适的自动化测试面试题,这里根据我个人的经验以及收集整理的: 你 ...
搞笑而富有哲理，看完后一个字——————“爽”
搞笑而富有哲理,看完后一个字------"爽" 1.千万别考北邮,就是考--也要先早恋!!!(北邮人) 2.东*突又开始筹集军费了--返校回来的公交车上,书包再次被维族小偷光顾!( ...
Python学习必备：10个奇妙的Python库，看完后我惊呆了
前言 10个奇妙的Python库,看完后我惊呆了! 让我们愉快地开始吧~编程学习资料点击免费领取开发工具 Python版本: 3.6.4 相关模块: socket模块: textblob模块: py ...
看完后绝对成为电脑高手
看完后绝对成为电脑高手看完这些,你就是电脑高手了!收藏吧同志们!强~~ 死机.病毒.快捷方式.装卸.运行速度.个性装扮--你是否一直在为电脑各种层出不穷的小问题而困惑?时不时地麻烦别人,不仅不能 ...
名为 cursor_jinserted 的游标不存在_你还在买丑橘吗？知道的人不多，看完后记得告诉身边人...
"丑八怪能否别把灯打开, 我要的爱出没在漆黑一片的舞台, 丑八怪在这暧昧的时代, 我的存在不意外" // // 提到丑八怪你一定会想到一种水果丑橘,又叫丑柑,同其它柑类水果不 ...
清华学霸讲计算机,清华学霸的霸气演讲！看完后才明白人与人的差距就是这样拉开的！...
原标题:清华学霸的霸气演讲!看完后才明白人与人的差距就是这样拉开的! 大家都知道清华和北大是我们中国最好最顶尖的两所大学!多少学子都曾经向往能够到中国最顶尖的学府学习,想必大家都曾经做过自己的清华北大 ...
操盘手与散户老妈的对话看完后所有人都沉默了
俺妈让俺替她看看她买的A股,俺一看吓了一跳--赚钱的那几只股票每只都只赚了几百块,而赔钱的股票中有好几只都赔了上千块,还有一只赔了五千多! 俺问:"妈,中国股市那么火,您怎么还赔钱呢?&qu ...
android广告平台哪个好用,安卓手机里谁家系统广告最少？看完后想说：真怕小米MIUI垫底！...
原标题: 安卓手机里谁家系统广告最少?看完后想说:真怕小米MIUI垫底! 前天一篇文章评论中,有粉丝这样说: 可以看出这位粉丝真的十足小米粉!大师姐并非说小米不好哦,只是客观来说,小米家系统广告略微多 ...

花式玩转 JavaScript 数组，看完后我直接删了 lodash

总结

花式玩转 JavaScript 数组，看完后我直接删了 lodash相关推荐

最新文章

热门文章