Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use map and reduce of ES6 in Javascript

2025-01-17 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

In this article Xiaobian for you to introduce in detail "how to use ES6 map and reduce in Javascript", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use ES6's map and reduce in Javascript" can help you solve your doubts.

Description

In ES6, map and reduce methods have been added to the array.

1.map ()

Map (): takes a function, processes all the elements in the original array with this function, and puts it back into the new array.

Code example:

There is an array of strings that we want to convert to the int array

Let arr = ['1mm,' 20mm,'- 5mm,'3']; console.log (arr) / / traditional writing let newArr = arr.map (function (s) {return parseInt (s);}); console.log (newArr); / / output [1L20 Lindsay 5 parseInt 3] / / Arrowhead function let newArr2 = arr.map (s = > parseInt (s)); console.log (newArr2) / / output [1Min 20LV (s)]

2.reduce ()

Reduce (): receives a function (required) and an initial value (optional), which takes two parameters. Let's take a look at it in detail:

Function prototype:

Reduce (callback, initialValue)

Function parameters:

Callback is the result of the last reduce processing:

The four parameters of callback are: last result value, current element, current index, and original array.

InitialValue is the next element to be processed in the array

Function action mechanism:

Reduce () processes the elements in the array with reduce from left to right, and takes the result as the first parameter of the next reduce. If this is the first time, the first two elements will be used as the calculation parameter, or the initial value specified by the user will be taken as the starting parameter.

Code example: let arr = ['1','20','- 5','3'] arr = arr.map (item = > item*2); console.log (arr); let result = arr.reduce ((a, b) = > {console.log ('Last calculated value:' + a); console.log ('current value:' + b); console.log ('current return value (axib):' + (aplb)); return astatb Console.log (result)

Synthesize the new features of case ES6 learn-(9)-the extension operator / / ES6 adds map and reduce methods to the array. / / 1.map (): takes a function, processes all the elements in the original array with this function, and puts it back into the new array. / / for example: there is a string array that we want to convert to the int array let arr = ['1values,' 20strings,'- 5strings,'3'] Console.log (arr) / / traditional writing let newArr = arr.map (function (s) {return parseInt (s);}); console.log (newArr) / / output [1, let newArr2 20, parseInt 5, 3] / / Arrowhead function (s = > parseInt (s)) Console.log (newArr2) / / output [1Magne 20memlory 5je 3] / / 2.reduce (): receive a function (required) and an initial value (optional) This function takes two arguments: const arr = [1, 20,-5, 3] / / at this point, axiom 1 ~ (1) ~ () ~ (20) starts to loop let result1 = arr.reduce ((a, b) = > {return a + b) from left to right. }); console.log (result1); / / output 19 / / when an initial value is passed in, axiom 1dBJ1 begins to loop let result2 = arr.reduce ((a, b) = > {return a + b) from left to right. 1) console.log (result2) / / output 20 read here, this article "how to use map and reduce of ES6 in Javascript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report