javascript - 如何通过for循环的索引绑定(bind)到数组元素？

Question

假设您有一个字符串数组，例如:

var fruit = ["apple","peach","pear","plum"];

和一个要填充对象的空数组，每个对象都有一个文本属性绑定(bind)到水果数组的特定索引:

var objlist = [];

for (var i=0;i<fruit.length;i++) {
    objlist.push({text: fruit[i]});
}

//objlist[0].text = "apple", objlist[1].text = "peach", etc.

有没有办法“绑定(bind)”第一个数组的元素，所以下面的语句:

fruit.shift()

会导致 objlist 中对象的文本属性更新到它们在 fruit 数组中的相应索引吗？

//objlist[0].text = "peach", objlist[1].text = "pear", etc.

我已经接受了这样一个事实，即 .text 可能必须是一个函数 .text() 但这对我来说没问题。

由于显而易见的原因，以下内容不起作用:

for (var i=0;i<fruit.length;i++) {
    objlist.push({text: function() { return fruit[i]; }});  //i is not bound
}

但是，这非常有效:

[0,1,2,3].forEach(function(i) {
    objlist.push({text: function() { return fruit[i]; }});  //i is bound
});

使用第二种方法我可以修改 fruit[] 并且 objlist 会相应地更新，但它并不优雅。

我的问题:是否有更好的方法来做到这一点？也许类似于使用指针？

Answer 1

没有必要创建额外的数组，因为您可以通过 for-in 构造进行绑定(bind)。像这样

for (var k in fruit) {
    objlist.push({text: function() { return fruit[k]; }});
}

所以，用你的测试用例

var fruit = ["apple","peach","pear","plum"];
var objlist = [];

for (var k in fruit) {
    objlist.push({text: function() { return fruit[k]; }});
}

console.log('---- init state -----')
for(k in objlist) {
    console.log(objlist[k].text());
}

fruit.shift();
console.log('---- shifted state -----')
for(k in objlist) {
    console.log(objlist[k].text());
}

代码获取

---- init state -----
apple
peach
pear
plum
---- shifted state -----
peach
pear
plum
undefined