JavaScript数组常用的13个技巧

2019-11-0683次阅读javascriptES6

数组是Javascript最常见的概念之一,它为我们处理存储在其中的数据提供了很多可能性,在本文中,将向您展示一些您可能不知道的技巧,这些技巧可能对编写代码很有帮助。

 

从数组中删除重复项

这是一个非常流行的关于Javascript数组的面试问题,如何从Javascript数组中提取唯一的值,这里有一个简单快捷的解决方案,就是使用Set()结合.from()方法,或者是spread运算符(...)来实现。

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

 

替换数组中的特定值

有时在创建代码时需要替换数组中的特定值,我们可以使用.splice(start,value to remove,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"]

 

没有.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"]

 

清空数组

您是否有一个充满元素的数组,但出于任何目的都需要对其进行清理,并且不想一个一个地删除项目?只需一行代码即可完成。只需将数组的长度设置为0,仅此而已!

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

 

将数组转换为对象

碰巧我们有一个数组,但出于某种目的,我们需要一个包含此数据的对象,将数组转换为对象的最快方法是使用众所周知的扩展运算符(…)。

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

 

用数据填充数组

当我们创建一个数组时,有些情况下我们希望用一些数据填充它,或者我们需要一个具有相同值的数组,在这种情况下,fill()方法提供了一个简单明了的解决方案。您也可以参考给定一个数字快速的构造数组

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

 

合并数组

除了.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"]

 

找到两个数组的交集

这也是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]

 

从数组中删除假值

在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"]

 

从数组中获取随机值

有时我们需要从数组中随机选择一个值。为了以简单,快速和简短的方式创建它并保持我们的代码整洁,我们可以根据数组长度获取随机索引号。让我们看一下代码:

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

 

反转数组

当我们需要翻转数组时,不需要通过复杂的循环和函数来创建数组,有一种简单的数组方法可以为我们完成所有工作,并且只需一行代码,我们就可以将数组反转。

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

 

.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

 

对数组中的所有值求和

在Javascript工程师面试中经常遇到的另一个问题就是数组中的所有值求和,它可以用.reduce方法来实现。

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

 

上一篇: 移动端浏览器后退不刷新  下一篇: 零宽字符&摩斯电码  

JavaScript数组常用的13个技巧相关文章