Question

假设我有一个选项卡列表，并希望根据某些函数调用的结果动态设置每个选项卡标题。想象一下以下数组：

const tabs = [{
    active: true,
    canShow: true,
    disabled: false,
    title: this._assignTitle(...)
}, {
    active: false,
    canShow: false,
    disabled: true,
    title: this._assignTitle(...)
}, {
    active: false,
    canShow: true,
    disabled: false,
    title: this._assignTitle(...)
}];

让我们说标题取决于当前的索引属性(active, canShow, disabled)。有没有办法将数组中的当前对象发送到我调用的函数？

也许_assignTitle(...)函数可以使用currentTab之类的参数。

因此，如果要调用第一个_assignTitle(currentTab)，我希望currentTab成为包含以下内容的对象：

{
    active: true,
    canShow: true,
    disabled: false,
    title: this (?)
}

思考？谢谢！

Answer 1

由于用户互动，您似乎希望根据属性的更改重新计算标签标题。即使一旦关闭，这仍然有效。

您可以使用map根据初始或当前状态创建新阵列。

没有必要使用'this'，但是如果您觉得有必要，可以修改这个示例（如果标签有更多功能，您希望封装在类/原型中）

function getTitle(tab) {
  // calculate the title based on properties
  return tab.canShow ? 'show' : 'no show'
}

function addTitle(tab) {
  // take the existing tab, returning new tab with computed title
  return Object.assign({}, tab, { title: getTitle(tab) })
}

const tabs = [{
    active: true,
    canShow: true,
    disabled: false,
}, {
    active: false,
    canShow: false,
    disabled: true,
}, {
    active: false,
    canShow: true,
    disabled: false,
}].map(addTitle)

console.log(tabs)

Answer 2

接近它的另一种方法是预处理数组：

const setup = tabs => {
  tabs.forEach(t => {
    // Calculate your result here
    t.title = '';
  });
  return tabs;
};

const tabs = setup([{
    active: true,
    canShow: true,
    disabled: false
}, {
    active: false,
    canShow: false,
    disabled: true
}, {
    active: false,
    canShow: true,
    disabled: false
}]);

Answer 3

您的tabs数组是一个对象数组。在每个对象中，您将属性标题设置为不存在的函数。使用this._assignTitle只有在每个对象中存在一个名为assignTitle的函数时才会起作用，但它仍然有点尴尬。最好在数组之外定义函数，然后将title设置为该函数的结果。

    var assignTitle = function(currentTab){
    return "title";
    }
const tabs = [{
    active: true,
    canShow: true,
    disabled: false,
    title: assignTitle(true,true,false)
}, {
    active: false,
    canShow: false,
    disabled: true,
    title: assignTitle(false,false,true)
}, {
    active: false,
    canShow: true,
    disabled: false,
    title: assignTitle(false,true,false)
}];

console.log(tabs);

将当前对象数组索引上下文发送到函数

3 个答案: