有个需求,将本页面所有消息批量设置为已读,由于使用vue.js,则直接修改数据,将数组中每个对象的状态设置为已读,但是没有找到一个简便的方法,查询以后发现JS Array有个map()方法,官方定义为:

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。不修改数组本身

语法:

let new_array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])


callback
生成新数组元素的函数,使用三个参数:
    currentValue
    callback 的第一个参数,数组中正在处理的当前元素。
    index
    callback 的第二个参数,数组中正在处理的当前元素的索引。
    array
    callback 的第三个参数,map 方法被调用的数组。
thisArg
可选的。执行 callback 函数时 使用的this 值。
返回值
一个新数组,每个元素都是回调函数的结果。

根据需求,批量修改数组中每个对象的属性值
eg:

var arr = [{
    name: "张三",
    age: 10
}, {
    name: "王五",
    age: 20
}, {
    name: "王尼玛",
    age: 30
}];

arr = arr.map(function(item, index, arr) {
    item.age = 1;
    return item;
})
console.log(JSON.stringify(arr));// [{"name":"张三","age":1},{"name":"王五","age":1},{"name":"王尼玛","age":1}]

这种写法还是比较简单的,与foreach

源码:

// 实现 ECMA-262, Edition 5, 15.4.4.19  
// 参考: http://es5.github.com/#x15.4.4.19  
if (!Array.prototype.map) {  
  Array.prototype.map = function(callback, thisArg) {  
    var T, A, k;  
    if (this == null) {  
      throw new TypeError(" this is null or not defined");  
    }  
    // 1. 将O赋值为调用map方法的数组.  
    var O = Object(this);  
    // 2.将len赋值为数组O的长度.  
    var len = O.length >>> 0;  
    // 3.如果callback不是函数,则抛出TypeError异常.  
    if (Object.prototype.toString.call(callback) != "[object Function]") {  
      throw new TypeError(callback + " is not a function");  
    }  
    // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.  
    if (thisArg) {  
      T = thisArg;  
    }  
    // 5. 创建新数组A,长度为原数组O长度len  
    A = new Array(len);  
    // 6. 将k赋值为0  
    k = 0;  
    // 7. 当 k < len 时,执行循环.  
    while(k < len) {  
      var kValue, mappedValue;  
      //遍历O,k为原数组索引  
      if (k in O) {  
        //kValue为索引k对应的值.  
        kValue = O[ k ];  
        // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.  
        mappedValue = callback.call(T, kValue, k, O);  
        // 返回值添加到新数组A中.  
        A[ k ] = mappedValue;  
      }  
      // k自增1  
      k++;  
    }  
    // 8. 返回新数组A  
    return A;  
  };        
}  
Logo

前往低代码交流专区

更多推荐