Tips collection | 10 common array operation methods of JavaScript

Abstract: This article shows you the tips of array in daily development, which are worthy of reference and learning.

In Javascript in the second stage of Web front-end development, array is an important and common knowledge point. We often store data in arrays. We will use it to traverse arrays or replace array elements in daily development. Learning web front-end development, array is also often used. This article shows you the tips of array in daily development. Let's start!

1. Add array elements

1) push() adds one or more array elements to the end of our array. Push also means push in English

var arr = [1, 2, 3];
// arr. push(4,pink' );
console.1og(arr .push(4, ' pink'));
console.1og(arr);

(1)push is a new element that can be added to the array

(2) Just write the array element directly with the push () parameter

(3) After the push is completed, the returned result is the length of the new array

(4) The original array will also change

2). unshift adds one or more array elements at the beginning of our array

console.1og(arr .unshift('red', ' purple'));
console.1og(arr);

(1) unshift is a new element that can be appended to the front of the array

(2) The unshift () parameter can be written directly to the array element

(3) After unshift, the returned result is the length of the new array

(4) The original array will also change|

2. Delete array elements

pop() which deletes the last element of the array

console .log(arr. pop());
console.log(arr);

1) pop is the last element of the array that can be deleted. Remember that only one element can be deleted at a time

2) pop() has no parameters

3) After pop, the returned result is the deleted element

4) The original array will also change

shift() which deletes the first element of the array

console.1og(arr .shift());
console.1og(arr);

(1) shift is the first element of the array that can be deleted. Remember that only one element can be deleted at a time

(2) shift() has no parameters

(3) After the shift is completed, the returned result is the deleted element

(4) The original array will also change

3. Array de duplication

There is a very fast and simple way to de duplicate the JS array. Use new Set() and array From () or expand operator (...)

var fruits = ["banana", "apple", "orange", "watermelon", "apple", "orange", "grape", "apple"];
// Method 1
var uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // Result return ["banana", "apple", "orange", "watermelon", "grape"]
// Method 2
var uniqueFruits2 = [...new Set(fruits)];
console.log(uniqueFruits2); // Result return["banana", "apple", "orange", "watermelon", "grape"]

4. Replace array

In daily development, we often need to replace or delete some specified data. When encountering this scenario, we must think of array protoType. Splice this method. The parameter transfer is a little more complicated. The first parameter is the starting index, the second parameter is the quantity to be deleted, and the rest is the value to be added (which can be one or more).

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

 

fruits.splice(0, 2, "potato", "tomato");

 

console.log(fruits); // Result return["potato", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]

5. Traverse the array

When traversing an array, it is recommended to use a for() loop or for of;

//for of Traversal array

 

var arr=[1,2,3,4];
for(var value of arr){
console.log(value);

var arr=[1,2,3,4];
for(arr = 0; arr < arr.length; j++) {
}

6. Empty the array

Sometimes we need to empty an array. For example, the user clicks to empty the shopping cart. It can be deleted one by one, but there are few programmers like me, hhhhh. In fact, one line of code can be done, that is, set the length to 0 directly!

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

7. Convert array to object

Sometimes it is necessary to convert the array into the form of an object Iterative methods such as map() can achieve the goal. There is a faster method here. The premise is that you just want the key of the object to be the index of the array.

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

8. Fill array

When creating an array, have you ever encountered a scene where you need to fill in the default value? You must first think of looping the array. It works Fill this method

var newArray = new Array(10).fill("1");
console.log(newArray); 
// The results are all 1 ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]

9. Merge arrays

Do you know how to merge arrays? The answer is concat().

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

10. Intersection, difference, complement and union of two arrays

There are many answers to find the intersection of two arrays. The following shows the common writing methods, which can be calculated directly by using {filter and concat}

var a = [1,2,3,4,5]
var b = [2,4,6,8,10]
//intersection
var c = a.filter(function(v){ return b.indexOf(v) > -1 })
//Difference set
var d = a.filter(function(v){ return b.indexOf(v) == -1 })
//Complement
var e = a.filter(function(v){ return !(b.indexOf(v) > -1) })
 .concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))
//Union
var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));
console.log("array a: ", a);
console.log("array b: ", b);
console.log("a And b Intersection of:", c);
console.log("a And b Difference set of:", d);
console.log("a And b Complement of:", e);
console.log("a And b Union of:", f);

Summary

This article shows you ten tips on how to operate arrays in JS. In fact, in daily development, you may encounter more complex businesses. I hope you can dissect them into small problems one by one, think from another angle, and finally find a place to start to solve the problem.

This article is shared from Huawei cloud community "JavaScript for web front-end development: how much do you know about array skills", original author: lucky boy.

 

Click follow to learn about Huawei's new cloud technology for the first time~

Tags: Javascript Front-end array

Posted by Mikester on Wed, 04 May 2022 00:38:05 +0300