1.forEach和map的相同點vue
都是數組的方法ios
都是用來遍歷數組json
兩個函數都有4個參數：匿名函數中可傳3個參數item（當前項），index（當前項的索引），arr（原數組），還有一個可選參數thisaxios
匿名函數中的this默認是指向window的後端
對空數組不會調用回調函數數組
不會改變原數組（某些狀況下可改變）dom
2.forEach函數
（1）沒有返回值this
var a=[1,2,3,4,5]spa
var b=a.forEach((item)=>{
item=item*2
})
console.log(b)//undefined
（2）可改變原數組的狀況
var a=[1,2,3,4,5]
a.forEach(item)=>{
item=item*2
}
console.log(a)//[1,2,3,4,5]
這裏的原數組並無發生改變
var a=[1,'1',{num:1},true]
a.forEach((item,index,arr)=>{
item=2
})
console.log(a)//[1,'1',{num:1},true]
這裏修改item值，依然沒有修改原數組
var a=[1,'1',{num:1},true]
a.forEach((item,index,arr)=>{
item.num=2
item=2
})
console.log(a)//[1,'1',{num:2},true]
當修改數組中的對象的某個屬性時，發現屬性改變了。
爲何會這樣呢？
這裏就要引入棧(stack)內存和堆(heap)內存的概念了，對於JS中的基本數據類型，如String,Number,Boolean,Undefined,Null是存在於棧內存中的，在棧內存中儲存變量名及相應的值。而Object,Array,Function存在於堆內存中，在堆內存中儲存變量名及引用位置。
在第一個例子中，爲何直接修改item沒法修改原數組呢，由於item的值並非相應的原數組中的值，而是從新創建的一個新變量，值和原數組相同。
在第二個例子中，數組中的對象的值也沒有改變，是由於新建立的變量和原數組中的對象雖然指向同一個地址，但改變的是新變量的值，即新對象的值爲2，原數組中的對象仍是{num:1}。
在第三個例子中，因爲對象是引用類型，新對象和舊對象指向的都是同一個地址，因此新對象把num變成了2，原數組中的對象也改變了。
想要修改原數組
var
a = [1,2,3,4,5]
a.forEach((item, index, arr) => {
arr[index] = item * 2
})
console.log(a)
// [2,4,6,8,10]
在回調函數裏改變arr的值，原數組改變了。
這個例子和例三其實同理，參數中的arr也只是原數組的一個拷貝，若是修改數組中的某一項則原數組也改變由於指向同一引用地址，而若是給參數arr賦其餘值，則原數組不變。
其實想要知道參數中的item和arr是否是從新建立的變量，在回調函數中打印就知道了。
（3）vue中的應用
在處理數據中，由於數組的傳遞已json格式，常常會收到數組中包含許多對象的數據，然後端傳給個人數據有時候須要處理。例如把事件戳格式化爲正常事件，代碼以下：
//utils.js
const formatTime = date => {
var
newDate =
new
Date();
newDate.setTime(date * 1000);
const year = newDate.getFullYear()
const month = newDate.getMonth() + 1
const day = newDate.getDate()
const hour = newDate.getHours()
const minute = newDate.getMinutes()
const second = newDate.getSeconds()
return
[year, month, day].map(formatNumber).join(
'-'
) +
' '
+ [hour, minute, second].map(formatNumber).join(
':'
)
}
const formatNumber = n => {
n = n.toString()
return
n[1] ? n :
'0'
+ n
}
export {
formatTime
}
// 獲得的數據格式
[
{add_time: 1541495677, balance: 14, bn:
"300708"
, cprice:
"12.39"
}
]
// index.vue
import axios from
'axios'
import { formatTime } from
'@/lib/utils'
export
default
{
data() {
dataList: []
},
methods: {
getData() {
axios.get(
'/user?ID=12345'
)
.then(
function
(res) {
if
(res.code == 200) {
res.data.forEach((item) => {
item.add_time = formatTime(item.add_time)
}
this
.dataList = res.data
}
})
.
catch
(
function
(err) {
console.log(err);
});
}
}
}
export
default
{
data() {
moneyList: [1000,2000,5000,10000,20000,50000]
},
computed: {
moneyList_new() {
return
this
.moneyList.map((item) => {
const random = Math.random() > 0.5 ? 1 : -1;
return
Math.floor(Math.random()*100) * random + item;
})
}
}
}