Abstract: This article, to show you in the daily development, the array has what tips are worth learning and learning.

In the second stage of Web front-end development in Javascript, array is an important and common knowledge point, we often store data in array, traversing array or replacing array elements will be used in daily development. Learning web front-end development, array is often used. In this article, we show you in the daily development of arrays, which tips are worth learning, let’s start!

1. Add array elements

1) Push () adds one or more array elements to the end of our array

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

(1) Push is used to append new elements to an array

(2) The push() argument can be written directly to the array element

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

(4) The original array will also change

2). Unshift adds one or more array elements to the beginning of our array

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

(1) Unshift appends new elements to the front of an array

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

(3) Unshift completes, returns the length of the new array

(4) changes the original array it |

2. Delete array elements

Pop () removes the last element of the array

console .log(arr. pop());
console.log(arr);
Copy the code

  1. Pop is the last element of the array that you can delete remember you can only delete one element at a time

  2. Pop () takes no arguments

  3. After the pop, the deleted element is returned

  4. The original array will also change

Shift () removes the first element of the array

console.1og(arr .shift());
console.1og(arr);
Copy the code

(1) Shift deletes the first element of an array remember that only one element can be deleted at a time

(2) Shift () has no argument

(3) After the shift is complete, the result is the deleted element

(4) The original array will also change

3. Array deduplication

There is a very quick and easy way to deduplicate a JS Array: use **new Set() and array.from ()** or expand the operator (…).

Var fruits = [" banana ", "apple", "orange", "watermelon", "orange", "grape", "apple"]; Var uniqueFruits = array. from(new Set(fruits)); console.log(uniqueFruits); Var uniqueFruits2 = [...new Set(fruits)]; console.log(uniqueFruits2); / / results back [" banana ", "apple", "orange", "watermelon", "grape"]Copy the code

4. Replace the array

The array.prototype.splice method is used when you need to replace or delete specified data. The first parameter is the index to start with, the second parameter is the number to delete, and all that remains is the value to add (which can be one or more).

Var fruits = [" banana ", "apple", "orange", "watermelon", "orange", "grape", "apple"];Copy the code
Fruits. Splice (0, 2, "potato", "tomato");Copy the code
console.log(fruits); / / results back [" potato ", "tomato", "orange", "watermelon", "apple", "orange", "grape", "apple"]Copy the code

5. Go through the numbers

It is recommended to use a for() loop or for of in traversal groups;

//for a list of numbersCopy the code
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++) { }Copy the code

6. Empty the array

Sometimes we need to empty an array, such as when the user clicks to empty the shopping cart. It can be deleted one by one, but few programmers are as lovely as me, HHHHH. In fact, a line of code can be done, that is, directly set length to 0 ok!

Var fruits = [" banana ", "apple", "orange", "watermelon", "orange", "grape", "apple"]; fruits.length = 0; console.log(fruits); // return null []Copy the code

7. Arrays are converted to objects

Sometimes you need to convert an array to an object. Using iterative methods like **.map() can do this, but there is a faster way, if you 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); / / results back {0, "banana", 1: "apple", 2: "orange", 3: "watermelon", 4: "apple", 5: "orange", 6: "grape", 7: "apple"}Copy the code

8. Populate the array

When creating an array, have you ever encountered a situation where you need to fill in the default values, the first thing you’ll think of is looping through the array. We can use.fill

Var newArray = newArray (10).fill(" 1 "); console.log(newArray); 1 [/ / the result returned is "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]Copy the code

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); / / results back [" apple ", "banana", "orange", "poultry", "beef", "fish", "potato", "tomato", "cucumber"]Copy the code

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

There are many answers to find the intersection of two arrays. The following is a common writing method, directly using filter, concat to calculate

Var a = [1,2,3,4,5] var b = [2,4,6,8,10] var c = a.filter(function(v){return b.indexof (v) > -1} Var e = a.feather (function(v){return b.idexof (v) == -1}) var e = a.feather (function(v){return! (b.indexOf(v) > -1) }) .concat(b.filter(function(v){ return ! Var f = a.comcat (function(v){return! (a.indexOf(v) > -1)})); Console. log(" array a: ", a); Console. log(" array b: ", b); Console. log(" intersection of A and B: ", c); Console. log(" difference between a and B: ", d); Console. log("a complement to b: ", e); Console. log(" union of a and B: ", f);Copy the code

summary

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

This article is shared from huawei cloud community “Web front-end Development JavaScript: Array skills how to know”, the original author: Lucky boy.

Click to follow, the first time to learn about Huawei cloud fresh technology ~