map
map()
方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
例如可以返回原始数组中每个元素的平方:
let arr = [4, 9, 16, 25] let arr2 = arr.map( (item) => //唯一的参数是数组中的每个值 Math.pow(item,2) //调用求平方方法 ) console.log(arr2) //[16, 81, 256, 625] 复制代码
也可返回一个数组的平方根:
let arr = [4, 9, 16, 25] let arr2 = arr.map( (item) => Math.sqrt(item) //调用求平方根方法 ) console.log(arr2) // [2, 3, 4, 5] 复制代码
注意:** map() 不会改变原始数组。
filter
filter()
方法创建一个新数组, 新数组中的元素是通过检查指定数组中符合条件的所有元素。
过滤掉太短的字符串:
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6 //过滤掉小于6个字母的 ); console.log(result); // ["exuberant", "destruction", "present"] 复制代码
过滤掉成绩不及格的分数:
let scores = [95,91,59,55,42,82,72,85,67,66,55,91] let scores2 = scores.filter( item => item >60 ) console.log(scores2) //[95, 91, 82, 72, 85, 67, 66, 91] 复制代码
注意:** filter() 也不会改变原始数组。
reduce
reduce()
方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
语法:
array.reduce( ( 初始值,当前元素, 当前元素的索引, 当前元素所属的数组对象) =>{ //代码 }, 传递给函数的初始值) 必需。初始值, 或者计算结束后的返回值。 ******* 必需。当前元素 ********** 可选。当前元素的索引 可选。当前元素所属的数组对象 可选。传递给函数的初始值 ********** 复制代码
算出所有奇数之和:
let scores = [95,91,59,55,42,82,72,85,67,66,55,91] let sum = scores.reduce((sum, item)=>{ //sum是每轮相加后的保存者 item是当前元素 if(item % 2){ return sum += item //如果是奇数,返回相加之和 } return sum },0) //此0是规定sum的初始值 console.log(sum) 复制代码
注意:就算不是奇数,我们也要返回sum本身,不能返回0,因为他每次接收到的值就是下一轮开始的值, 如果我们返回0,相当于把之前累加的都清空掉了
计算元素四舍五入后的和:
let arr = [15.5, 2.3, 1.1, 4.7] let sum = arr.reduce((sum, item) => { //首先还是sum,item。sum初始值在最后的0。 return sum += Math.round(item) }, 0) console.log(sum) 复制代码
reduce是可以替代map与filter的。
替代map: (计算数组中每个元素的平方,并返回新的函数)
let arr1 = [4, 9, 16, 25] let arr2 = arr1.reduce((arr2,item) => {//传入arr2数组,与arr1的每个元素 return arr2.concat(Math.pow(item,2)) },[]) //这里我们将arr2的初始值定位空数组 console.log(arr2) //[16, 81, 256, 625] 复制代码
注意://由于要返回数组,我们要arr2用concat这个方法连接arr1中的item元素,并返回 代替filter: (过滤掉太短的字符串)
let scores = [95,91,59,55,42,82,72,85,67,66,55,91] let scores2 = scores.reduce((scores2,item)=>{ return scores2.concat(item>60?item:[]) 个空数组,不能连接null,null会占位置 },[]) console.log(scores2) //[95, 91, 82, 72, 85, 67, 66, 91] 复制代码
注意:如果大于60就连接到数组里,不然就连个空数组,不能连接null或undefined,null和undefined会占位置,变成['1',null,'2','3',null,'4']
这个样子
总结
js中没有真正的数组,它的数组不是典型的数组
reduce在刚刚上手会比较难,多用几次就好了。
数组中最强大的就是splice和reduce,一定要用好这两个。
map()是n变n,即map里有多少元素,返回的数组就是多少元素,是对里面每个元素进行加功
filter()是n变少,过滤掉一些元素
reduce()是n变一,将所有元素进行累加