forEach()和map()区别及$set()项目中的用法

一、两者相同点

1、都是循环遍历数组的每一项；

2、两者方法中的匿名函数都支持3个参数，item(每一项)、index(索引)、arr(数组本身)；

3、匿名函数中的this指向是window；

4、都只能遍历数组。

二、forEach()方法（不改变原数组）

用法：forEach()方法用于调用数组的每个元素，将元素传给回掉函数

注意：forEach()对于空数组不会执行回调函数
常用用法：

var sum = 0;
var str = arr.forEach((item,index,arr) => {
    sum += item;
    console.log("sum的值为：",sum); //0 2 6 12 20 
})

实战项目中使用(遍历数组，给每一项增加字段)：

let arr= [{type:'西瓜'},{type:'芒果'},{type:'榴莲'}];
arr.forEach((item,index,arr) => {
   item['value'] = index + 1
})
console.log(arr) // [{type:'西瓜',value:1},{type:'芒果',value:2},{type:'榴莲',value:3}]

二、map()方法（改变原数组）

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
我的理解就是：原数组进行处理之后对应的一个新的数组。
map()方法按照原始数组元素顺序依次处理元素。
注意：map()方法不会对空数组进行检测。
常用用法：

var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
    console.log(this);
    console.log("原数组arr：",arr); //注意这里执行5次
    return item / 2;
},this);
console.log(str);

实战项目中使用(遍历数组，重新构造原数组)：

let imgArry = ['static/img/1.png', 'static/img/2.png', 'static/img/3.png']
 let newImgArry = imgArry .map((item,index,arr)=> {
    return {
       "imgSrc": item,
       "value":  -1
    }
});
console.log(newImgArry)// [{imgSrc: "static/img/1.png", value: -1},{imgSrc: "static/img/2.png", value: -1},{imgSrc: "static/img/3.png", value: -1}]

四、$set()用法

for(let i in this.keywordsArry){
   let temp = null
   if(type){
        temp = this.keywordsArry[i].id == value
   } else{
       temp = this.keywordsArry[i].name == value
   }
   if(temp){
     this.$set(this.keywordsArry,i,{
       id: this.keywordsArry[i].id,
       name: this.keywordsArry[i].name,
       disabled: false
     })
   }
}

五、字符串中截取img中src属性值

let imgSrc = '<figure><noscript><img data-rawwidth="1536" data-rawheight="2076" src="https://pic3.zhimg.com/dec3739988c455284aefe2e37f9d977a_b.jpg" class="origin_image zh-lightbox-thumb" width="1536" data-original="https://pic3.zhimg.com/dec3739988c455284aefe2e37f9d977a_r.jpg"></noscript><img data-rawwidth="1536" data-rawheight="2076" src="data:image/svg+xml;utf8,&lt;svg%20xmlns='
let first = imgSrc.indexOf('src="')
let end = imgSrc.indexOf('"',first + 5)
console.log(imgSrc.substring(first + 5,end))  //  https://pic3.zhimg.com/dec3739988c455284aefe2e37f9d977a_b.jpg

小结：

项目中若对一个数组如 ['static/img/1.png', 'static/img/2.png', 'static/img/3.png'] 加入一个字段，选择map()方法将数组构造成要用的形式；
若数组本身就是 [{type:'西瓜'},{type:'芒果'},{type:'榴莲'}] 的形式，则可以选择forEach()方法的item['value'] = value的形式。