map与forEach的小结

tomato 发布于2019-08-23 18:34 / 2695人阅读

摘要：方法功能创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。。方法功能遍历，对数组中的元素依次处理。

Array.map()方法
功能 : 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。。
参数 : （currentValue，index，arrOrigin）(当前元素的值，当前元素的索引，当前元素的数组对象)
使用 :

 var arr = [1,2,3];
 
 arr.map((currentVaLue,index,arrOrigin)=>{},this)

特别注意：

    1.map()不会对空数组进行检测，所以最好在使用map()之前进行检测是否为数组
    2.map()正常情况下不会改变原始数组,但是可以通过arrOrigin来修改
    3.map()可以有返回值，需要return
    4.map()中传入Math等数学元素,返回的数组中会被处理成想要的样子.如:xxx.map(Math.sqrt)  ===>可以将数组中的内容开平方.
    5.map()中传入Number等转换格式的方法,返回的数组也会被转换.如:xxx.map(Number)  ===>里面的元素都会被转化为数字类型

举个好的栗子：

let arrMap1=[1,2,3];
// let arrMap1=""; //用于检验
let arrMap2=Array.isArray(arrMap1)?arrMap1:[] 
let newArrMap=arrMap2.map((item,index,arrOrigin) => {
    return item*2;
})
// console.log(arrMap1)//没有改变。。。
// console.log(arrMap2)//没有改变。。。
// console.log(newArrMap)

Array.forEach()方法
功能 : 遍历，对数组中的元素依次处理。
参数 : （currentValue，index，arrOrigin）(当前元素的值，当前元素的索引，当前元素的数组对象)
官方使用

 var arr = [1,2,3];
 arr.forEach((currentVaLue,index,arr)=>{},this)

特别注意：

    1.forEach()不会对空数组进行检测，所以最好在使用forEach()之前进行检测是否为数组

    2.forEach()正常情况下不会直接改变原始数组,但是可以通过arrOrigin来修改

举个好的栗子

let arrForEach1=[1,2,3];
// let arrForEach1=""; //用于检验
let arrForEach2=Array.isArray(arrForEach1)?arrForEach1:[] 
arrForEach2.forEach((item,index,arrOrigin) => {
    arrOrigin[index]=item*2;
})

//写一个用forEach来累加参数的累加方法
function Counter(arr){
    this.sum=0;
    this.count=0;
}
Counter.prototype.add=function(arr){
    if (!Array.isArray(arr)){
        console.warn("请传入数组")
        return
    } 
    arr.forEach(function (element){
        // console.log(this)
        this.sum+=element;
        ++this.count;
    },this)
}
let obj=new Counter();
obj.add([1,2,3])
// let ADD=obj.add; //检验this
// ADD([1,2,3]);
// console.log(obj);
// console.log(obj.sum);

//换一个优雅的写法
class calssCounter{
    constructor(){
        this.sum=0;
        this.count=0;
    }
    add(arr){
        if(!Array.isArray(arr)){
            console.warn("请输入数组");
            return
        }
        arr.forEach(function(ele){
            this.sum+=ele;
            ++this.count;
        },this)
    }
}
let objClass = new calssCounter();
objClass.add([1,2,3,4,5]);
console.log(objClass.sum)

注：文中部分例子来源于：https://developer.mozilla.org...

超融合服务器专线服务 map集合的使用 java的map合并 java的map结构 Js map的存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105459.html

JavaScript 中遍历方法小结

摘要：遍历方法小结常用的遍历方法遍历对数组的每个元素执行一次提供的函数创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果遍历大家都熟悉，所以重点讲一下与的区别相同点回调函数参数相同，都自带三个属性均不会修改原数组第二参数的遍历方法小结常用的遍历方法 for 遍历 forEach（对数组的每个元素执行一次提供的函数） map（创建一个新数组，其结果是该数组中的每个...

flyer_dev 2019-08-23 16:06 评论0 收藏0
从非数组对象转数组方法小结

摘要：该方法可以将类数组对象转换为数组，所谓类数组对象，就是含和索引属性的对象返回的数组长度取决于对象属性的值，且非索引属性的值，或索引大于的值都不会被返回到数组中实锤如下简洁写法该方法可以将类数组对象和可迭代对象转换为数组类数组对象上文已提及， Array.prototype.slice.call(obj) 该方法可以将类数组对象转换为数组，所谓类数组对象，就是含 length 和索引属性...

silvertheo 2019-08-22 15:09 评论0 收藏0
Javascript函数式编程小结

摘要：源起函数式编程近几年非常流行经常可以在网上看到别人讨论相关话题我机缘巧合之下在上看到有人提到一个讲函数式编程的视频看过之后突然茅塞顿开瞬间把之前零碎的关于函数式编程的知识一下子都联系了起来于是自己希望趁有空把这些知识总结一下这样既可以回顾下源起函数式编程近几年非常流行,经常可以在网上看到别人讨论相关话题. 我机缘巧合之下在github上看到有人提到一个讲js函数式编程的视频,看过之...

zengdongbao 2019-08-21 10:54 评论0 收藏0
js数组操作方法小结

摘要：操作方法创建数组类数组将类数组转换真正的数组修改数组合并数组，返回新数组，原数组不变数组转化为字符串以默认为逗号拼接为字符串。 Array操作方法创建数组 var arr=[] var arr = new Array() var arr1 = [1, 2, 3] var arr2 = [a, b, c] var arrLike = [{ name: 123, age:...

April 2019-08-23 14:26 评论0 收藏0
es6-Set与Map

摘要：由于和不会被转换为字符串，所以在内部是不同的项，如果他们被转化为字符串，那么都会等于，如果多次调用并传入相同的值作为参数。第二次重复传入并不会被添加到集合中，那么的属性值还是为。的方法和共享了几个方法。小结正式将与引入。 se5中的set与map 在est5中开发者使用对象属性来模拟。set多用于检查键的存在，map多用于提取数据。 { let set = Object.cre...

big_cat 2019-08-22 17:36 评论0 收藏0