map/forEach/for/reduce/for~of/for~in/filter

特点 效率

for

let data = [{id:1},{id:2},{id:3}]
let len = data.length
for(let i=0;i<len;i+=1) {
  data[i].id = i
}
console.log(data)

最基础的，相比于其他支持break、continue

for~in

let data = [{id:1},{id:2},{id:3}]
for(let i in data) {
  data[i].id = i
}
console.log(data)

循环后id变成了字符串。(i是索引’0’ ‘1’ ‘2’)
多用于遍历对象

let obj = {a:1,b:2,c:3}
for(let i in obj) {
  obj[i] += 1
}
console.log(obj)

forEach

let hasSpaceInValue = false
const reg = /[\r\n]/g
if (response && response.records) {
  response.records.forEach(item => {
    if (reg.test(item.value) || String(item.value).length > 180) {
      hasSpaceInValue = true
    }
  })
}

不打算改变数据时使用。

let arr = [1, 2, 3, 4, 5];
arr.forEach((num, index) => {
    return arr[index] = num * 2;
});
console.log(arr)

可以改变原始数组。

map

let arr = [1, 2, 3, 4, 5];
let doubled = arr.map(num => {
    return num * 2;
});
console.log(arr)

创建新数组（分配内存空间存储新数组）

es6 for~of

代替for~in和forEach
遍历数组、字符串、映射（maps）、sets（集合）————iterable迭代器对象

let data = [{id:1},{id:2},{id:3}]
for(let i of data) {
  console.log(i)
  if(i.id === 1) {
    break;
  }
}

遍历的是元素值;可以响应break、continue、return
(考虑兼容问题)

filter

let target = data.list.filter(
  item => item.name && item.name.toLowerCase().indexOf(value.toLowerCase()) > -1
);

不改变原数组

reduce

var arr = [1,2,8,20];
var sum = arr.reduce(function (prev, cur) {
    console.log(prev,cur)
    return prev + cur;
},0);
console.log(sum)

可同时将前面数组项遍历产生的结果与当前遍历项进行运算

效率

for~in map

for for~of forEach