13 ultra-practical JavaScript array operating tips

The article comes from the public number: byte front end, author sub-fish

Arrays are one of the most common concepts of JS, and they give us many possibilities for processing stored data. G iven that arrays are one of the most basic concepts in the JavaScript language, you may have learned this at the beginning of programming, and in this article I'll show you some techniques that you might not know and might be useful. T hese tips are very helpful for coding us! Let's get started.

1. Array de-heavy

There are only two feasible methods shown here, one is a practical .from() method and the other is a utility extension operator ...

let  fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"]
// 第一种方法
let uniqueFruits = Array.from(new Set(fruits))
//第二种方法
let uniqueFruits2 = [...new Set(fruits)]

2. Replace the specific values in the array

We can use .splice(start, value to remove, valueToAdd) and pass three parameters that specify where to start the modification, how many values to change, and the newly added value.

let  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. Do not use the .map() mapping array

Perhaps everyone knows the .map() method, but there is another scenario that can be used to get similar results, and the code is very concise. Here we can use .from() method.

let 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 },
]


let friendsNames = Array.from(friends, ({name}) => name)


console.log(friendsNames) //returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]

4. Empty the array

Do you have an array of all elements, but need to clean them up for any purpose and don't want to delete elements one by one? I t takes only one line of code to complete. To empty an array, you need to set the length of the array to 0, that's all!

let fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];


fruits.length = 0;
console.log(fruits); // returns []

5. Array to object

As it happens, we have an array, but for some purpose we need an object with this data, and the quickest way to convert an array to an object is to use the well-known extension operator ... .

let fruits = ["banana", "apple", "orange", "watermelon"];


let fruitsObj = {...fruits};


console.log(fruitsObj) // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

6. Fill the array with data

In some cases, when we create an array, we want to fill it with some data, or we need an array with the same value, in which case .fill() method provides a simple and clean solution.

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

7. Merge arrays

In addition to using .concat() method, we can also use the extension operator ... .

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. Find the intersection of the array

This is also one of the most common challenges you face in any JavaScript interview because it shows whether you can use array methods and what your logic is.

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. Remove the virtual value from the array

First, let's define the virtual value. I n JavaScript, the virtual values are false, 0, „”, null, NaN, undefined N ow we can find out how to remove such values from the array. To do this, we'll use the .filter() method.

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

10. Get random values from the array

Sometimes we need to randomly select a value from an array. T o create it in a simple, quick and short way and keep our code clean, we can get random index numbers based on array length. Let's look at the code:

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];


var randomColor = colors[(Math.floor(Math.random() * (color.length)))]

11. Reverse the array

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() method

In JavaScript, there is an interesting way to find the index that last appeared for a given element. F or example, if our array has duplicate values, we can find where it last appeared. Let's look at the code sample:

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. Sum all the values in the array

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

conclusion

In this article, I've introduced you to 13 tips and tricks that can help you write concise code. A lso, keep in mind that you can use a number of techniques worth exploring in Javascript, not only with arrays, but also with different data types. I hope you like the solutions provided in this article and will use them to improve your development process.

Here's a look at W3Cschool编程狮 introduction to 13 ultra-practical JavaScript array operating techniques.