JavaScript 数组批量设置对象的属性
2018-01-15 15:15
2316 查看
有个需求,将本页面所有消息批量设置为已读,由于使用vue.js,则直接修改数据,将数组中每个对象的状态设置为已读,但是没有找到一个简便的方法,查询以后发现JS Array有个map()方法,官方定义为:
map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。不修改数组本身
语法:
根据需求,批量修改数组中每个对象的属性值
eg:
这种写法还是比较简单的,与foreach
源码:
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; }; }
相关文章推荐
- JavaScript中通过数组索引方式访问和属性名方式访问对象属性的一个小小误区
- Javascript数组对象的方法和属性
- Javascript设置对象的ReadOnly属性(示例代码)
- Javascript设置对象的ReadOnly属性
- JavaScript数组对象操作方法属性全集合
- JavaScript遍历数组与遍历对象的属性
- Javascript设置对象的ReadOnly属性(示例代码)
- JavaScript 根据数组中对象的属性排序
- 【JavaScript】对象结构的简化--删除Json中的空属性、空数组
- JavaScript获取对象属性和设置对象属性总计
- Javascript设置对象属性为"只读"
- Javascript的数组与字典用法与遍历对象的属性技巧
- javascript 对象数组不确定对象属性名遍历问题
- 认识JavaScript数组对象的length属性
- 对JavaScript对象数组按指定属性和排序方向进行排序
- JavaScript 对象数组,根据某个对象属性进行排序
- JavaScript数组对象操作方法属性全集合
- JavaScript 数组对象获得input输入框的值,并设置
- JavaScript对象数组根据某属性sort升降序排序
- IE、Firefox兼容form target当前页iframe,javascript动态创建表单对象form设置name属性