Front end in-depth js chapter Array array operation from introduction to Chengshen up up, updating continuously

Written in front

With the in-depth study of the front-end, I found that the data structure of array has a considerable sense of existence in the front-end. Since I didn't learn array systematically when I started to learn the front-end, I will learn array with you through this article. I hope we can step forward together and learn to operate array skillfully.

Array basic operation

Create array

var arr1 = [];  //Create an empty array without elements in literal form
var arr2 = new Array(); //Create an empty array by constructor
var arr3 = new Array(5); //Create an array with five elements. At this time, each array element is undefined
var arr4 = [1,2,3,4,5]; //Create an array of five values
var arr5 = [{id:1,name:'It's not lemon'},{id:2,name:'no lemon'}]; //Create an array of objects with values

There are two ways to create an array, namely, [] literal way and new Array() constructor way. In essence, the way to create an array is the same. The way to use literal way is much simpler than the way to use a constructor. It's recommended for kids to use it.

Array addition and deletion

push(), pop(), unshift(), and shift()
var arr = [];  //Create an empty array without elements in literal form
arr[1] = 'It's not lemon'; //Write the first element ['is not lemonade']
arr.push('22 year'); //Add an element at the end of the array ['not lemonade', '22 years old']
arr.pop(); //Delete element at the end of array ['is not a lemonade']
arr.unshift('22 year'); //Add element to array header ['22 years old', 'not lemon acid']
arr.shift(); //Delete element of array header ['is not lemonade']

This article mainly introduces two basic ways to add and delete elements: push() at the end of the array, pop() at the end of the array, unshift() at the head of the array, and shift() at the head of the array. These are the four most commonly used methods to add and delete elements in the array. You must keep them in mind.

var arr = [0,1,2,3,4,5,6,7];
arr.splice(4); // From the element with subscript 4 to the end, where arr is [0, 1, 2, 3]
arr.splice(1,2); // Remove two elements backward starting from the element with subscript 1, where arr is [0, 3]
arr.splice(1,0,[1,2]); // Remove 0 elements backward from the element with subscript 1, and insert element '1,2'. At this time, arr is [0, 1, 2, 3]

splice() is an important method in array operation. You can use splice() to add and delete arrays more freely. You can also easily implement four methods: push(), pop(), unshift(), and shift(). You can try it yourself to enhance your understanding of splice() method.

delete and arr.length()
var skill = ['Vue','React','ES6'];
delete skill[0]; //Set the first element to null without changing the array length [empty,'React','angular']
skill.length = 5; //Set the array length to 5 [empty,'React','angular',empty,empty]
skill.length = 0; //Set the array length to 0, and the array is set to null []

Here, we should pay attention to the difference between delete and length. After using the delete operation, the array elements will be set to empty and the original array length will not be changed. After using the length operation, if the set length is greater than the original array length, the newly added element is set to empty; if the set length is less than the original array length, the redundant element is deleted and the array length is changed; if the set length is 0, the array is cleared and the array length is changed to zero.

Array method

var skill = ['Vue','React','angular'];
skill.join(); //"Vue,React,angular"
skill.join('----'); //"Vue----React----angular"

Through arr.join(), array elements can be spliced into strings and specified characters can be added in each element. If not set, comma will be added by default.

var arr = [1,2,3,4,5];
arr.reverse(); //[5,4,3,2,1]

Through arr.reverse(), you can arrange every element in the array in order.

var arr = [5,4,3,2,1];
arr.sort(); //[1,2,3,4,5]
var arr1 = ['a','c','e','d','b']
arr1.sort(); ['a','b','c','d','e']

Through arr.sort(), array elements can be arranged in order, such as numerical order or alphabetical order. However, it is not ordered by number size. In order to make array elements sorted by number size, it should be implemented in the following way.

var arr = [55555,44,3333,222,11111];
arr.sort(); //[11111, 222, 3333, 44, 55555] in numerical order, no comparison of size
    return a-b;  //Arrange numbers from small to large [44, 222, 3333, 11111, 55555]
    return b-a;  //Numbers are arranged from large to small [555511111 3333 222 44]
var arr = [1,2,3];
arr.concat(4,5); // [1, 2, 3, 4, 5]
arr.concat([4,5]); // [1, 2, 3, 4, 5]
arr.concat([4,5],[6,7]); // [1, 2, 3, 4, 5, 6, 7]
arr.concat(4,[5,[6,7]]); // [1, 2, 3, 4, 5, [6, 7]]

You can add characters to array elements or other arrays to the current array through arr.concat(), but if it is a nested array, concat() will not flatten it by default.

var arr = [1,2,3,4,5];
arr.slice(0,3); //[1, 2, 3] three elements starting from the element with subscript 0
arr.slice(3); //[4, 5] elements starting with subscript 3 and ending with subscript 3

Array can be queried through arr.slice(). If two parameters (x,y) are passed in, it means starting from subscript x and counting back y elements; if one parameter (x) is passed in, it means all elements from subscript x to the end.

filter(), every(), and some()
var arr = [1,2,3,4,5];
var resarr1 = arr.filter((x)=>{
    return x>3;
}); //[4, 5] filter results with array elements greater than 3
var resarr2 = arr.filter((x)=>{
    return x%2==0;
}); //Filter even numbers in array elements

You can filter the array with conditions through arr.filter(). Write the corresponding conditions in filter(). Note that executing arr.filter() will return an array. We need to define a new array to receive it.

var arr = [1,2,3,4,5];
    return x>3;
}); //False arr not every item in the array is greater than 3, return false
    return x>0;
}); //False arr array, each item is greater than 0, return true
    return x>3;
}); //False there is an item greater than 3 in the ARR array, return true

This set of methods is used to determine whether there is a corresponding value in the array. All the values judged by arr.every() must meet the conditions to return true, while the values judged by arr.some() only need one item to meet the conditions to return true.

var arr = [1,2,3,4,5];
var sum = arr.reduce((x,y)=>{
    return x+y   //0+1+2+3+4+5 => 15
var product = arr.reduce((x,y)=>{
    return x*y  //1*2*3*4*5 => 120
var max = arr.reduce((x,y)=>{
    return (x>y)?x:y  //5

The arr.reduce() method will combine the passed array elements, such as X and Y in the example. The return value in each method will be injected into x, and then continue to operate with the next y value. After all operations are completed, the final result will be returned. This method has a second parameter to set the default value to x, but the default value is not required.

In order to facilitate the understanding of small partners, I use sum in the code as an example to disassemble

  • (x=0,y=1) => 0+1=1
  • (x=1,y=2) => 1+2=3
  • (x=3,y=3) => 3+3=6
  • (x=6,y=4) => 6+4=10
  • (x=10,y=5) => 10+5=15
  • At this time, all array elements are convenient, and the return value is 15


Today, we have learned the common methods of array operation. There are many knowledge points, and there is not much consistency. However, these methods are often used in our daily work. I hope you can practice more and understand these methods in depth, and your front-end level will be higher.

There are many operation methods about array that haven't been written. This article will be updated continuously. If you need, you can like it and collect it. After I update it, you can read and learn it in time!


The above is the whole content of this article. If there is something wrong, please correct it.

Thank you for reading. If you feel useful, please like / forward.

The front-end in-depth series is a stepping hole series, which is an exploration and summary of my own problems and stepping holes in work and study. It is recorded and shared here, and it is also a reflection and questioning of my own skills.

The front end is full of road, and there are many steps.

The front end in-depth series is continuously updated

Above 2019-11-04.

Tags: Front-end React angular Vue less

Posted on Sun, 03 Nov 2019 22:25:00 -0800 by Ryan0r