Deep understanding of Array types

Posted by skyriders on Sat, 05 Feb 2022 10:28:48 +0100

Array plays an important role in front-end development. The following is an analysis of array types.
The following main references: In depth understanding of Array in javascript
1, Basic definition

Array Object is used to hold multiple values in a single variable.
let array = [true, 12, 'is true']
here array Is an array. The values in the array can be different types of values. The length and size of the array are variable.

2, Creation method
(1) , Array constructor
The first way is through the Array constructor.

let newArr = new Array(5)
Here is 5, which means that the length of the created array is 5,And the array is empty.

(2) , array literal
The second method can be realized by array literal.

let newArr = []  //Create a new array
let newArr = [1,2,3,4,5]   //Create an array of existing values.
This eliminates the need to call Array Constructor.

3, length attribute
The length attribute here is readable and writable. We can not only get the length of the array by reading the length attribute of the array, but also modify the value of the array by modifying the length attribute of the array.

let newArr = [1, 2, 3, 4, 5, 6]
console.log(newArr) //[1,2,3,4,5,6]
newArr.length = 3
console.log(newArr) //[1,2,3]
newArr.length = 5
console.log(newArr) //[1,2,3, <2 empty items>]

4, Array detection
We can use instanceof and Array Isarray to judge. First, let's talk about instanceof. If there are multiple frames in a web page, instanceof will no longer be used. Because there are multiple frames, there will be multiple different Array constructors. In this case, instanceof cannot be used to judge.

let newArr = [1,2,3,4]
console.log(newArr instanceof Array)    //true

The second method is to use array isArray

let newArr = [1,2,3,4,5]
console.log(Array.isArray(newArr))  //true

5, Array conversion
We can convert the array into a string. We can use the toString() method, which calls the toString() method for each item.

let newArr = [1,2,3,4,5]
console.log(newArr.toString())   //1,2,3,4,5

We can also convert the array into a string and use the toLocalString() method, which internally calls the toLocaleString() method for each item.

let newArr = [1,2,3,4,5]
console.log(newArr.toLocaleString())  //1,2,3,4,5

You can use the join method to convert the array.

let newArr = [1,2,3,4,5]
console.log(newArr.join())  //1,2,3,4,5

6, Stack method
We can use the array to realize the data structure of the stack. The stack structure is last in first out. In this way, we can use the push method to put elements in and pop elements out.

let newArr = [1,2,3,4,5]
let res = newArr.push(6)
console.log(res)     //6
let item = newArr.pop()
console.log(item)   //6
console.log(newArr)  //[1,2,3,4,5]

7, Queue method
We can use the array to implement the queue method. The queue is first in first out. In js, we can use push to simulate entering the queue and shift() to simulate deleting from the head of the queue.

let newArr = [1,2,3,4,5]
newArr.shift()   //1
newArr.push(6)   //[2,3,4,5,6]

8, Sorting method
There are two ways to sort arrays. One is to use sort and the other is to use reverse.
1. sort method

let nums = [1, 5, 10, 15, 20]
nums.sort()
console.log(nums)  //[1,10,15,20,5]
Why is this sort displayed here because sort Method is called on each element in the array
toString()Method, and then ascill Code, and the data of numeric type will also be changed to string
 Type of data.
let nums = [1, 5, 10, 15, 20]
nums.sort((a, b) => a - b)
console.log(nums) //[1,5,10,15,20]

2. reverse() method
The reverse method can flip the array.

let newArr = [1, 2, 3, 4, 5, 12, 11]
console.log(newArr.reverse())    //11,12,5,4,3,2,1

9, Operation method
1. concat() method
The parameters of concat method can be a single element or an array to realize the splicing between arrays and return a new array.

let newArr = ["yellow", "green", "red"]
let arr2 = newArr.concat("black", ["orange"])
console.log(arr2)    //[ 'yellow', 'green', 'red', 'black', 'orange' ]
console.log(newArr)  //[ 'yellow', 'green', 'red' ]

2. slice() method
The slice() method of the array can realize the function of obtaining the sub array of the array, and what is returned is a new array.
If it is a parameter, it means to return from the current value to the end.
If it is two parameters and the first parameter is less than the second parameter, it will be returned by intercepting the array between them. Note that the value corresponding to the subscript of the second parameter is not included.
If there are two parameters, and the first parameter is greater than or equal to the second parameter, an empty array is intercepted.
If there is a negative number, the subscript of the representation should be added to the length of the array.

(1)
let newArr = ["yellow", "green", "red"]
let arr = newArr.slice(1,2)
console.log(arr)   //"green"
(2)
let newArr = ["yellow", "green", "red", "black"]
let arr = newArr.slice(-2, -1)
console.log(arr)     //["red"]

(3) , splice() method
The splice() method has three functions: insert, delete and replace.
splice() can have any parameter. The splice method is changed on the original array.

(1),delete
let newArr = ["yellow", "green", "red", "black"]
let arr = newArr.splice(1,2)
console.log(arr)    //["green","red"]
console.log(newArr) //["yellow", "black"] 
(2),replace
let newArr = ["yellow", "green", "red", "black"]
let arr = newArr.splice(1,2,"pink")
console.log(newArr)   //["yellow", "pink","black"]
console.log(arr)      //["green", "red"]
(3),insert
let newArr = ["yellow", "green", "red", "black"]
let arr = newArr.splice(1, 0, "pink")
console.log(newArr) //["yellow", "pink","green","red","black"]
console.log(arr) // []

10, Location method
There are two methods, indexof and indexof. The two methods will be analyzed separately below.

This means that a parameter is passed in, indexOf By default, the search starts from the head, lastIndexOf The default is from the tail
 Start search

let newArr = ["yellow", "green", "red", "green", "black"]
let index = newArr.indexOf("green")
console.log(index) //1
let lastIndex = newArr.lastIndexOf("green")
console.log(lastIndex) //3
The second parameter passed in indicates where to start the search.

let newArr = ["yellow", "green", "red", "green", "black"]
let index = newArr.indexOf("green", 2)
console.log(index) //3
let lastIndex = newArr.lastIndexOf("green", 2)
console.log(lastIndex) //1     

11, Iterative method of array
(1),every()

Traverse each array. If each array meets a certain condition, return true,If there is one unsatisfied, return false. 

let newArr = [1,2,3,4,5,6,7,8]
let result = newArr.every(function(item, index, array) {
  return item < 10
})
console.log(result)  //true

(2),some()

some The function traverses each element. If there is one element that meets the conditions, it returns true,Otherwise return
false. 

let newArr = [1,2,3,4,5,6,7,8]
let result = newArr.some(function(item, index, array) {
  return item > 10
})Ar
}, 0)

console.log(result)   //36

Topics: Javascript Front-end array