Shulou(Shulou.com)06/03 Report--

What are the JavaScript data methods in the Web front-end project? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

In JavaScript, an array is a special variable that stores different elements. It has some built-in properties and methods that can be used to add, delete, iterate or operands as needed. And understanding the JavaScript array method can improve your development skills.

With regard to the array methods of JavaScript, these methods can help you deal with data correctly.

§1.some ()

§2. Reduce ()

§3. Every ()

§4. Map ()

§5. Flat ()

§6. Filter ()

§7. ForEach ()

§8. FindIndex ()

§9. Find ()

§10. Sort ()

§11. Concat ()

§12. Fill ()

§13. Includes ()

§14. Reverse ()

§15. FlatMap ()

Note that in most cases, we will simplify the function passed as an argument.

/ / Instead of using this waymyAwesomeArray.some (test = > {if (test = "d") {return test}}) / / We'll use the shorter onemyAwesomeArray.some (test = > test = = "d")

1. Some ()

This method tests the array for the function passed by the parameter. If one element matches the test element, true is returned, otherwise false is returned. Translator's note: some () does not detect an empty array; some () does not change the original array.

Const myAwesomeArray = ["a", "b", "c", "d", "e"]

MyAwesomeArray.some (test = > test = "d")

/ /-> Output: true

2. Reduce ()

This method receives a function as an accumulator. It executes callback functions for each element in the array in turn, excluding elements that have been deleted or never assigned to the array. Function is applied to the accumulator, and each value in the array ends up returning only one value. Translator's note: the reduce () method accepts four parameters: the initial value (the return value of the last callback), the current element value, the current index, and the original array.

Const myAwesomeArray = [1,2,3,4,5]

MyAwesomeArray.reduce ((total, value) = > total * value)

/ / 1 * 2 * 3 * 4 * 5

/ /-> Output = 120

3. Every ()

This method runs the given function on each item in the array and returns true if each element of the array matches the test and false otherwise.

Const myAwesomeArray = ["a", "b", "c", "d", "e"]

MyAwesomeArray.every (test = > test = "d")

/ /-> Output: falseconst myAwesomeArray2 = ["a", "a"]

MyAwesomeArray2.every (test = > test = = "a")

/ /-> Output: true

4. Map ()

This method returns a new array whose elements are the values of the original array element after calling the function. It processes the elements in turn in the order of the original array elements. Translator's note: map () does not detect an empty array; map () does not change the original array.

Const myAwesomeArray = [5,4,3,2,1] myAwesomeArray.map (x = > x * x)

/ /-> Output: 25

/ / 16

/ / 9

/ / 4

/ / 1

5. Flat ()

This method creates a new array that contains the holden elements on the subarray and flattens it into the new array. Note that this method can only carry out one level of depth.

Const myAwesomeArray = [[1,2], [3,4], 5]

MyAwesomeArray.flat ()

/ /-> Output: [1,2,3,4,5]

6. Filter ()

This method takes a function as an argument. And returns a new array that contains all the elements of the array and returns true to it as a filter function passed as an argument. Translator's note: the filter () method filters the elements in the data, that is, it cannot modify the data in the original array, but can only read the data in the original array, and callback needs to return a Boolean value; if it is true, the corresponding element will be left; when it is false, the corresponding element will be filtered out.

Const myAwesomeArray = [{id: 1, name: "john"}

{id: 2, name: "Ali"}, {id: 3, name: "Mass"}

{id: 4, name: "Mass"},]

MyAwesomeArray.filter (element = > element.name = "Mass")

/ /-> Output: 0: {id: 3, name: "Mass"}

/ / 1: {id: 4, name: "Mass"}

7. ForEach ()

This method is used to call each element of the array. And pass the element to the callback function. Translator's note: forEach () does not execute a callback function for an empty array.

Const myAwesomeArray = [{id: 1, name: "john"}

{id: 2, name: "Ali"}, {id: 3, name: "Mass"},]

MyAwesomeArray.forEach (element = > console.log (element.name))

/ /-> Output: john

/ / Ali

/ / Mass

8. FindIndex ()

This method returns the position of the first element of the array in which a test condition (function) is passed. It calls the function once for each element in the array, and when the element in the array returns true when the condition is tested, findIndex () returns the index position of the element that meets the condition, and the subsequent value does not call the execution function. If no qualified element returns-1 translator's note: findIndex () for an empty array, the function is not executed, findIndex () does not change the original value of the array.

Const myAwesomeArray = [{id: 1, name: "john"}

{id: 2, name: "Ali"}, {id: 3, name: "Mass"},] myAwesomeArray.findIndex (element = > element.id = 3)

/ /-> Output: 2myAwesomeArray.findIndex (element = > element.id = 7)

/ /-> Output:-1

9. Find ()

This method returns the value of the first element of the array that passed the test (judged within the function). The find () method calls the function execution once for each element in the array: when the element in the array returns true during the test condition, find () returns the element that meets the condition, and the subsequent value does not call the execution function. Returns undefined if there are no eligible elements. Translator's note: find () does not execute functions for empty arrays; find () does not change the original value of the array.

Const myAwesomeArray = [{id: 1, name: "john"}

{id: 2, name: "Ali"}, {id: 3, name: "Mass"},] myAwesomeArray.find (element = > element.id = 3)

/ /-> Output: {id: 3, name: "Mass"}

MyAwesomeArray.find (element = > element.id = 7)

/ /-> Output: undefined

10. Sort ()

This method takes a function as an argument. It sorts the elements of the array and returns it. You can also sort using the sort () method with parameters.

Const myAwesomeArray = [5,4,3,2,1]

/ / Sort from smallest to largestmyAwesomeArray.sort ((a, b) = > a-b)

/ /-> Output: [1,2,3,4,5]

/ / Sort from largest to smallestmyAwesomeArray.sort ((a, b) = > b-a)

/ /-> Output: [5,4,3,2,1]

11. Concat ()

This method is used to join two or more arrays / values, and it does not change the existing array. Only a new array of joined arrays is returned.

Const myAwesomeArray = [1,2,3,4,5] const

MyAwesomeArray2 = [10, 20, 30, 40, 50]

MyAwesomeArray.concat (myAwesomeArray2)

/ /-> Output: [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

12. Fill ()

The purpose of this method is to replace the elements in the array with a fixed value. The fixed value can be letters, numbers, strings, arrays, and so on. It also has two optional parameters that indicate the filled start position (default is 0) and end position (default is array.length). Translator's note: the fill () method is used to replace the elements of an array with a fixed value.

Const myAwesomeArray = [1,2,3,4,5]

/ / The first argument (0) is the value

/ / The second argument (1) is the starting index

/ / The third argument (3) is the ending indexmyAwesomeArray.fill (0,1,3)

/ /-> Output: [1,0,0,4,5]

13. Includes ()

This method is used to determine whether the string contains the specified substring. Returns true if a matching string is found, false otherwise. Http://www.jzspfk.com/ of Ningbo Men's Hospital

Translator's note: the includes () method is case sensitive.

Const myAwesomeArray = [1,2,3,4,5] myAwesomeArray.includes (3)

/ /-> Output: truemyAwesomeArray.includes (8)

/ /-> Output: false

14. Reverse ()

This method is used to reverse the order of elements in an array. The first element will be the last, and the last element will be the first.

Const myAwesomeArray = ["e", "d", "c", "b", "a"]

MyAwesomeArray.reverse ()

/ /-> Output: ['await,' baked, 'clocked,' dumped,'e']

15. FlatMap ()

This method applies the function to each element of the array and then compresses the result into a new array. It combines flat () and map () in a function.

Const myAwesomeArray = [[1], [2], [3], [4], [5]]

MyAwesomeArray.flatMap (arr = > arr * 10)

/ /-> Output: [10, 20, 30, 40, 50]

/ / With .flat () and .map () myAwesomeArray.flat () .map (arr = > arr * 10)

/ /-> Output: [10, 20, 30, 40, 50]

After reading the above, have you mastered the methods of JavaScript data methods in the Web front-end project? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.