JSON is a widely used syntax for exchanging text information between the front and back ends. Because of this syntax, the data returned by the back-end interface is either array or object, so it is important to be familiar with arrays and objects.

A method that does not change the original array

(I) Detection method (very important)

It can be interpreted as traversing the array and terminating the traversal when the detection target value is reached. Find (), findIndex, and some; To check that all items meet the criteria, use every(). Each of these methods can have a callback of the form (item)=>{check item}. The following checks do not change the original array.

1, find() : returns the value of the first element in the array that satisfies the provided test function, otherwise undefined.

FindIndex () : Returns the index of the first element in the array that satisfies the provided test function. Returns -1 if no corresponding element is found.

3. Some () : Runs the given function on each item of the array, returning true if the function returns true for any item (there is an item).

4. Every () : Runs the given function on each item of the array, and returns true if the function returns true for each item.

(2) Iterative method (very important)

React projects, in particular, almost always use the array iteration method. The following iteration methods do not change the original array.

ForEach (): Runs the given function on each item of the array, with no return value.

2. Filter (): Returns an array of items that return true by running the given function on each item of the array.

3. Map (): Runs the given function on each item of the array and returns an array of the results of each call.

Some () and every() are also iterative methods and are no longer enumerated under detection methods. Filter arrays with filters, rearrange data with maps, and just manipulate values with forEach.

(3) Splicing and shearing method

Concat (“yellow”), which returns a new array and adds the received arguments to the end of the current array copy.

2. Colories. slice(1,3) returns a new array of items between the start and end positions but not the end position.

2. How to change arrays (very important)

React does not change the data in the state directly. It does not change the original array. While vUE can directly change the data of data, using the method of changing the original array is more convenient. The following methods change the array itself.

(I) Operation method

Colors.push (“yellow”) adds items to the front and back of the array and returns the new array length.

Colors.pop (), which removes the end of the array and returns it.

Shift () removes the first item of the array and returns that item.

4. Colors. Unshift (“yellow”) adds items to the front of the array and returns the new array length.

5. Colors.splice (starting position, number of deleted items, inserted items) : This method is very powerful and can delete, insert, or replace array elements.

(2) sorting method

Color.reverse (), which reverses the order of the array items.

Colors.sort (), which by default calls the toString() method for each element and compares the resulting string (character encoding) in ascending order. The comparison method is usually passed in.

3. Merge method reduce

This particular method, which is used less often in front-end rendering, iterates through the list of items and builds a newly returned value.

From: developer.mozilla.org/zh-CN/docs/…

Reduce executes a callback function for each element in the array, excluding elements that were deleted or never assigned, and takes four arguments:

  • An accumulator cumulative device

  • The current value currentValue

  • CurrentIndex indicates the currentIndex

  • Array an array

Accumulator and currentValue are two different values when the callback function is first executed: If initialValue is provided when reduce() is called, accumulator is initialValue and currentValue is the first value in the array. If no initialValue is provided, accumulator takes the first value in the array and currentValue takes the second value in the array.

Destruct assignment is used for array merging and copying (very important)

Arrays are merged and copied using deconstructed assignment without affecting the original array.

1. Array copy

The effect of copying is deep copy, which is to create a new array in the heap, not the same as the original array. A simple copy of this reference type is not the same.

2. Array merge