Array is one of the most common concepts in Javascript. It provides us with many possibilities to process data. It is necessary to be familiar with some common operations of array.

1. Array de duplication

1. from() superimposes the new Set() method

The from method can be directly used for the de duplication of string or numeric array.

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var uniquePlants = Array.from(new Set(plants)); 
console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]

2. spread operator (...)

The extension operator is a major innovation of ES6 and has many powerful functions.

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var uniquePlants = [...new Set(plants)]; 
console.log(uniquePlants); // [ 'Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Mars', 'Jupiter' ]

2. Replace a specific value in the array

The splice() method adds / removes items to / from the array, and then returns the deleted items. This method changes the original array. Special attention should be paid to the position of the inserted value!

// arrayObject.splice(index,howmany,item1,.....,itemX)

var plants = ['Saturn', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var result = plants.splice(2, 1, 'www.abc.com')
console.log(plants); // ['Saturn','Uranus','www.abc.com','Mercury','Venus','Earth','Mars','Jupiter']
console.log(result); // ['Mercury']

3. There is no mapping array for map()

Let's first introduce the map method. The map() method returns a new array. The elements in the array are the values processed by the calling function of the original array elements. It will process the elements in the order of the original array elements. Note: map() does not change the original array, nor does it detect empty arrays. Let's implement an array mapping without a map:

// array.map(function(currentValue,index,arr), thisValue)

var plants = [
    { name: "Saturn" },
    { name: "Uranus" },
    { name: "Mercury" },
    { name: "Venus" },
]
var plantsName = Array.from(plants, ({ name }) => name);
console.log(plantsName); // [ 'Saturn', 'Uranus', 'Mercury', 'Venus' ]

4. Empty array

If you want to empty an array, set the length of the array to 0. Well, this is a little simple.

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
plants.length = 0;
console.log(plants); // []

5. Convert array to object

The fastest way to convert an array to an object is the spread operator (...).

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'abc'];
var plantsObj = {...plants }
console.log(plantsObj); 
// {'0':'Saturn','1':'Earth','2':'Uranus','3':'Mercury','4':'Venus','5':'Earth','6':'Mars','7':'abc'}

6. Fill array with data

If we need to fill the array with some data, or if we need a data with the same value, we can use the fill() method.

var plants = new Array(8).fill('8');
console.log(plants); // ['8', '8', '8','8', '8', '8','8', '8']

7. Merge array

Of course you'll think of the concat() method, but oh, the spread operator (...) It's also very fragrant. This is another application of extension operator.

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury'];
var plants2 = ['Venus', 'Earth', 'Mars', 'Jupiter'];
console.log([...plants1, ...plants2]); 
// ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']

8. Intersection of two arrays

The intersection of two arrays is required. First ensure that the array is not repeated, and then use the filter() method and the includes() method.

var plants1 = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
var plants2 = ['Saturn', 'Earth', 'Uranus'];
var alonePlants = [...new Set(plants1)].filter(item => plants2.includes(item));
console.log(alonePlants); // [ 'Saturn', 'Earth', 'Uranus' ]

9. Delete false values from the array

We often need to remove false values when we need to process data. In Javascript, false values are false, 0, "", null, NaN, undefined.

var plants = ['Saturn', 'Earth', null, undefined, false, "", NaN, 'Uranus', 'Mercury', 'Venus'
, 'Earth', 'Mars', 'Jupiter'];
var trueArr = plants.filter(Boolean);
console.log(trueArr); // ['Saturn', 'Earth','Uranus', 'Mercury','Venus', 'Earth','Mars', 'Jupiter']

10. Gets the random value in the array

We can get a random index number based on the length of the array.

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
console.log(plants[Math.floor(Math.random() * (plants.length + 1))])

11. lastIndexOf() method

lastIndexOf() can help us find the index of the last occurrence of the element.

var plants = ['Saturn', 'Earth', 'Uranus', 'Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter'];
console.log(plants.lastIndexOf('Earth')) // 5

12. Adds all the values in the array

The reduce() method receives a function as an accumulator. Each value in the array (from left to right) is reduced and finally calculated as a value.

// array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

var nums = [1, 2, 3, 4, 5];
var sum = nums.reduce((x, y) => x + y);
console.log(sum); // 15