我將如何簡化此ArrayFilter方法？

我正在嘗試在頁面上選擇一組單選按鈕。每個輸入具有以下內容：

<input type="radio" class="wc-pao-addon-field wc-pao-addon-radio" name="addon-761-soapbar-covers-0[]" data-raw-price="32" data-price="32" data-price-type="quantity_based" value="gold-soapbar-set" data-label="Gold Soapbar (Set)">

我無法通過資料屬性進行選擇，因為它們與我不想禁用的其他輸入共享。到目前為止，我只能抓住value值從goldtoraw-nickel到polished-nickeltochrome等變化。

我所擁有的是以下內容：

//Initialize empty array
   this.metalCovers = [];

//Grab all inputs
    this.covers = Array.from(this.soapbarCovers.querySelectorAll("input"));

//Then filter them by their values and store in new variable
    this.chromeCovers = this.covers.filter((cover) => cover.value.indexOf("chrome") !== -1);
    this.blackCovers = this.covers.filter((cover) => cover.value.indexOf("matte") !== -1);
    this.goldCovers = this.covers.filter((cover) => cover.value.indexOf("gold") !== -1);
    this.nickelCovers = this.covers.filter((cover) => cover.value.indexOf("nickel") !== -1);

//Create new array from filtered inputs
    this.metalCovers = [this.chromeCovers, this.blackCovers, this.goldCovers, this.nickelCovers];

//flatten the new array
    this.metalCovers = [].concat.apply([], this.metalCovers);

所以，這行得通，但我試圖找到一種更簡潔的方法來處理這段代碼。我想如果我可以通過多個值來清理它Array.filter()，但在我的研究中沒有任何結果。

有什么讓你印象深刻的嗎？

uj5u.com熱心網友回復：

我會做類似的事情

// Define the keywords we're looking for in the value
const keywords = ["chrome", "matte", "gold", "nickel"];
// Grab all inputs
const inputs = Array.from(this.soapbarCovers.querySelectorAll("input"));
// Filter them...
this.metalCovers = inputs.filter((cover) => 
  // If any of the keywords appears in the value, 
  // this is an input we care about
  keywords.some((kw) => cover.value.includes(kw))
);

或者，如果您想真正高效并讓瀏覽器 CSS 引擎完成所有作業，

this.metalCovers = Array.from(this.soapbarCovers.querySelectorAll("input[value*=chrome],input[value*=matte],input[value*=gold],input[value*=nickel]"));

當然可以通過

const keywords = ["chrome", "matte", "gold", "nickel"];
this.metalCovers = Array.from(this.soapbarCovers.querySelectorAll(keywords.map(k => `input[value*=${k}`]).join(','));

uj5u.com熱心網友回復：

//Initialize empty array
this.metalCovers = [];

//Grab all inputs
this.covers = Array.from(this.soapbarCovers.querySelectorAll("input"));

//Then filter them by their values and store in new variable
this.chromeCovers = [];
this.blackCovers = [];
this.goldCovers = [];
this.nickelCovers = [];
this.covers.forEach( cover => {
    switch (cover.value) {
        case "chrome": this.chromeCovers.push(cover); break;
        case "matte": this.blackCovers.push(cover); break;
        case "gold": this.goldCovers.push(cover); break;
        case "raw-nickel":
        case "polished-nickel":
            this.nickelCovers.push(cover);
        break;
        default: console.error(`Invalid cover "${cover.value}"!`);
    }
});

//Create new array from filtered inputs
this.metalCovers = [this.chromeCovers, this.blackCovers, this.goldCovers, this.nickelCovers];

//flatten the new array
this.metalCovers = [].concat.apply([], this.metalCovers);

uj5u.com熱心網友回復：

遇到這個：

const filtered = Array.from(this.soapbarCovers.querySelectorAll("input"))
    .filter(input => ['chrome', 'matte', 'gold', 'nickel'].includes(input.value));

只需一行就可以滿足您的需求。

例子：

const metalCovers = [
    { attr: 'a1', value: 'chrome'},
    { attr: 'a2', value: 'matte'},
    { attr: 'a3', value: 'gold'},
    { attr: 'a4', value: 'nickel'},
    { attr: 'a5', value: 'chrome'},
    { attr: 'a6', value: 'silver'}, // should be left out
    { attr: 'a7', value: 'copper'}, // should be left out
    { attr: 'a8', value: 'gold'},
    { attr: 'a9', value: 'chrome'},
    { attr: 'a10', value: 'matte'},
    { attr: 'a11', value: 'nickel'},
];

const filtered = metalCovers.filter(input => ['chrome', 'matte', 'gold', 'nickel'].includes(input.value));

console.log(filtered);

將輸出：

[
  { attr: 'a1', value: 'chrome' },
  { attr: 'a2', value: 'matte' },
  { attr: 'a3', value: 'gold' },
  { attr: 'a4', value: 'nickel' },
  { attr: 'a5', value: 'chrome' },
  { attr: 'a8', value: 'gold' },
  { attr: 'a9', value: 'chrome' },
  { attr: 'a10', value: 'matte' },
  { attr: 'a11', value: 'nickel' }
]

標籤：

上一篇：在對陣列的切片進行排序時使用sort()與sorted()-為什么sort()不起作用？

下一篇：foreach帶有函式的陳述句