如何使用forEach()
方法编写这些(工作)函数:
function loadAudioMeterHistory(cell) {
var peaks = new Array(4);
for (var i = 0; i < peaks.length; i++) {
var peak,
age;
peak = cell.getAttribute("data-peak-" + i);
age = cell.getAttribute("data-age-" + i);
peaks[i] = new Peak(peak, age);
}
return peaks;
}
function setAudioMeterHistory(cell, peaks) {
for (var i = 0; i < peaks.length; i++) {
cell.setAttribute("data-peak-" + i, peaks[i].peak);
cell.setAttribute("data-age-" + i, peaks[i].age);
}
}
我的尝试如下:
function loadAudioMeterHistory(cell) {
"use strict";
var peaks = new Array(4);
peaks.forEach(function(item, index) {
var p = cell.getAttribute("data-peak-" + index);
var a = cell.getAttribute("data-age-" + index);
item = new Peak(p, a);
});
return peaks;
}
function setAudioMeterHistory(cell, peaks) {
"use strict";
peaks.forEach(function(item, index) {
cell.setAttribute("data-peak-" + index, item.peak);
cell.setAttribute("data-age-" + index, item.age);
});
}
其行为有所不同,因为peaks
从未正确创建过。精明的javascripter无疑会认识到我正在尝试jslint.com我的代码。
Peak()
方法(为简洁起见)简单地说:
function Peak(peak, age) {
this.peak = peak;
this.age = age;
}
是什么赋予了?
forEach
只是迭代一个列表但不返回任何内容。因此,请改用map
并返回新创建的对象。
function loadAudioMeterHistory(cell) {
"use strict";
var peaks = [0, 1, 2, 3].map(function(item, index) {
var p = cell.getAttribute("data-peak-" + index);
var a = cell.getAttribute("data-age-" + index);
return new Peak(p, a);
});
}
还有一个问题是peaks
不在loadAudioMeterHistory
的范围之外。所以有函数return可以传递给下一个函数调用。
function loadAudioMeterHistory(cell) {
"use strict";
return [0, 1, 2, 3].map(function(item, index) {
var p = cell.getAttribute("data-peak-" + index);
var a = cell.getAttribute("data-age-" + index);
return new Peak(p, a);
});
}
function setAudioMeterHistory(cell) {
"use strict";
var peaks = loadAudioMeterHistory(cell);
peaks.forEach(function(item, index) {
cell.setAttribute("data-peak-" + index, item.peak);
cell.setAttribute("data-age-" + index, item.age);
});
}
您可以使用Array.from(),其第二个参数是填充数组的函数:
function loadAudioMeterHistory(cell) {
return Array.from({ length: 4 }, (_, i) => {
const peak = cell.getAttribute('data-peak-' + i);
const age = cell.getAttribute('data-age-' + i);
return new Peak(peak, age);
});
}
对于第二个函数,使用forEach(),如下所示:
function setAudioMeterHistory(cell, peaks) {
peaks.forEach(({ peak, age }) => {
cell.setAttribute('date-peak-' + i, peak);
cell.setAttribute('data-age-' + i, age);
});
}