[技术翻译]您应该知道的13个有用的JavaScript数组技巧
本次预计翻译三篇文章如下:
我为什么要创建这个git仓库?通过翻译国外的web相关的技术文章来学习和跟进web发展的新思想和新技术。git仓库地址:
数组是javascript最常见的概念之一,它为我们提供了许多处理存储在其中的数据的可能性。考虑到数组是javascript语言中最基本的主题之一,您可以在编程开始时就了解它,在本文中,我想向您展示一些您可能不知道并且可能非常有用的技巧。来帮助你编码!让我们开始吧。
1.从数组中去除重复项
关于javascript数组,这是一个非常受欢迎的面试问题,如何从javascript数组中提取唯一值。这是解决此问题的快速简便的解决方案,您可以为此使用新的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, valuetoremove, valuetoadd)
并在其中传递所有这三个参数,这些参数指定了要在哪里开始修改,要更改多少个值以及增加新值。
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数组
也许每个人都知道数组的.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
方法和.includes
方法。结果,我们将获得两个数组中都存在的值的数组。检查代码:
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中使用许多值得探索的技巧,不仅涉及数组,而且涉及不同的数据类型。我希望您喜欢本文中提供的解决方案,并且将使用它们来改善您的开发过程。
一起有一个不错的编码吧!
原文链接: