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

This article introduces the relevant knowledge of "introduction and usage of parameters of forEach, map, filter and reduce in Array array objects". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Preface

Someone asked me a question just now. How map traverses, I just write with a brush. Go through it, forEach? it's all right.

Var map = new Map (); map.set ('item1',' value1') map.set ('item2',' value2') map.forEach (function (value, key, map) {console.log ("Key:% s, Value:% s", key, value);})

Well, after I finished, he sent me a message. How do I change [] .forEach () to [] .map ()?

What? I have a bad temper. Of course, I'm going to talk about the regular traversal methods and scenarios of Array in detail.

Array.filter

Grammar

Var new_arr = arr.filter (callback (element, index, array) {}, this)

Parameters.

Callback callback

Element's current value

The current index value of index

Array arr this array object

The this point of the this callback

Return value

Array Typ

/ / an array of values that meet the criteria

Usage

/ / if the returned value is true, the condition is met. / / filter does not change the original array, it returns the filtered new array. / / return the even numbers in the array [10, 10, 11, 12, 13] .filter ((v) = > v% 2 = = 0) / / as long as it is approved. Of course, under normal circumstances, the object is a little more complicated than this. [{state:1}, {state:0}, {state:0}, {state:0}] .filter ((v) = > v.state = = 1) / / as long as adults, the record is valid [{age:18,state:1}, {age:16,state:0}, {age:21,state:0}] .filter ((v) = > v.state = = 1 & & v.age > 17)

Scene

The scene is filtering, putting the qualified ones together, and the common thing is to show the approved data, showing only the people who follow me and only the girls, right? the rough guys don't filter it.

Array.forEach

Grammar

Arr.forEach (callback (element, index, array) {}, this)

Parameters.

Callback callback

Element's current value

The current index value of index

Array arr this array object

The this point of the this callback

Return value

Undefined

/ / this thing does not return a value.

Usage

/ / traverses the array. Print to the console [10, 11, 12, 13] .forEach ((v) = > {console.log (v)}) / / successfully collect it into success, and erroneous collection into error. Var success = [], error = [] [{state:1}, {state:0}, {state:0}, {state:0}] .forEach ((v) = > {if (v.state = = 1) {success.push (v)} else {error.push (v)}) / / say hello to the 20-year-old sister [{state:1,age: 1}, {state:0,age: 20}, {state:0,age: 19}, {state:0 Age: 31}] .forEach ((v) = > {if (v.age = = 20) {console.log ('Hello) I happen to be 80')} this year.

Scene

For example, bind events, such as judging values, and then push to different places

Array.map

Grammar

Arr.map (callback (element, index, array) {}, this)

Parameters.

Callback callback

Element's current value

The current index value of index

Array arr this array object

The this point of the this callback

Return value

Array array

/ / A new array of return values from each callback

Usage

/ / format the value, keeping two decimal places [10.055, 11.054, 12.056, 13.789] .map ((v) = > + v.toFixed (2))

Scene

This is usually used when I need a set of values, but this value is wrong, and I need to calculate the original array to generate it.

Array.reduce

Grammar

Arr.reduce (callback (accumulator, element, index, array) {}, initialValue)

Parameters.

Callback callback

The return value of the sum accumulator, that is, the return value of the last callback

Element's current value

The current index value of index

Array arr this array object

The value initially passed in by initialValue. If the callback is not passed, it starts with subscript 1, and subscript 0 is the initial value.

Return value

/ / returns the value of the last callback

Usage

/ / accumulate [10, 11, 12, 13, 13]. Reduce ((smeme v) = > scurvy, 0)

Scene

This calculates the entire array to get a value.

Contrast

ForEach does not return a value. The key point is the processing logic in function.

Map has return values. The key point is that function returns values to form a new array.

Filter returns values. The key point is function return values, which are filtered to form a new array.

Reduce has a return value, which focuses on calculating the array and returning a value

I was in a hurry to run after work last night, but I still need some examples to sort out. I'll make it up today.

Examples

You can try to write, there are good examples to better illustrate the role of the function can also be put forward in the comments section, there are good solutions can also be written.

A set of user information is sorted by mobile phone number in descending order, and the user name is output, separated by commas.

[{name: 'L1Qing, phone:' 1507539'}, {name: 'L2mom, phone:' 1507540'}, {name: 'L3shipping, phone:' 1507541'}, {name: 'l4mom, phone:' 1507538'}] .sort ((nMagnem) = > n.phonem.name) .join (',')

Bind an event to an element

[] .slice.call (document.querySelectorAll ('div')) .forEach (v = > v.addEventListener (' click',e= > console.log (e.target.className)

Get the class of all elements and filter the empty string

[] .slice.call (document.querySelectorAll ('*')) .map (v = > v.className) .filter (v = > v) "introduction and usage of parameters of forEach, map, filter and reduce in Array array objects". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.