Ánh xạ và lọc một mảng cùng một lúc

Tôi có một mảng các đối tượng mà tôi muốn lặp đi lặp lại để tạo ra một mảng được lọc mới. Nhưng ngoài ra, tôi cần lọc ra một số đối tượng từ mảng mới tùy thuộc vào một tham số. Tôi đang thử cái này:

function renderOptions(options) {
    return options.map(function (option) {
        if (!option.assigned) {
            return (someNewObject);
        }
    });   
}

Đó có phải là một cách tiếp cận tốt? Có một phương pháp tốt hơn? Tôi đang mở để sử dụng bất kỳ thư viện như lodash.

Bạn nên sử dụng Array.reducecho việc này.

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = options.reduce(function(filtered, option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     filtered.push(someNewValue);
  }
  return filtered;
}, []);

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

Ngoài ra, bộ giảm tốc có thể là một chức năng thuần túy, như thế này

var reduced = options.reduce(function(result, option) {
  if (option.assigned) {
    return result.concat({
      name: option.name,
      newProperty: 'Foo'
    });
  }
  return result;
}, []);

Sử dụng giảm, Luke!

function renderOptions(options) {
    return options.reduce(function (res, option) {
        if (!option.assigned) {
            res.push(someNewObject);
        }
        return res;
    }, []);   
}

Kể từ năm 2019, Array.prototype.flatMap là lựa chọn tốt.

options.flatMap(o => o.assigned ? [o.name] : []);

Từ trang MDN được liên kết ở trên:

flatMapcó thể được sử dụng như một cách để thêm và xóa các mục (sửa đổi số lượng mục) trong bản đồ. Nói cách khác, nó cho phép bạn ánh xạ nhiều mục thành nhiều mục (bằng cách xử lý riêng từng mục đầu vào), thay vì luôn luôn một đối một. Theo nghĩa này, nó hoạt động giống như đối diện của bộ lọc. Chỉ cần trả về mảng 1 phần tử để giữ mục, mảng nhiều phần tử để thêm mục hoặc mảng 0 phần tử để xóa mục.

Với ES6 bạn có thể làm điều đó rất ngắn:

options.filter(opt => !opt.assigned).map(opt => someNewObject)

Một dòng reducevới cú pháp lây lan ưa thích ES6 ở đây!

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, {name, assigned}) => [...result, ...assigned ? [name] : []], []);

console.log(filtered);

Tôi sẽ bình luận, nhưng tôi không có danh tiếng cần thiết. Một cải tiến nhỏ cho câu trả lời rất hay của Maxim Kuzmin để làm cho nó hiệu quả hơn:

const options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

const filtered = options
  .reduce((result, { name, assigned }) => assigned ? result.concat(name) : result, []);

console.log(filtered);

Giải trình

Thay vì trải rộng toàn bộ kết quả nhiều lần cho mỗi lần lặp, chúng tôi chỉ nối vào mảng và chỉ khi thực sự có giá trị để chèn.

Sử dụng Array.prototy.filter bản thân

function renderOptions(options) {
    return options.filter(function(option){
        return !option.assigned;
    }).map(function (option) {
        return (someNewObject);
    });   
}

Tại một số điểm, không dễ dàng hơn (hoặc dễ dàng như vậy) để sử dụng một forEach

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];

var reduced = []
options.forEach(function(option) {
  if (option.assigned) {
     var someNewValue = { name: option.name, newProperty: 'Foo' }
     reduced.push(someNewValue);
  }
});

document.getElementById('output').innerHTML = JSON.stringify(reduced);

<h1>Only assigned options</h1>
<pre id="output"> </pre>

Tuy nhiên, sẽ rất tuyệt nếu có một malter()hoặc fap()chức năng kết hợp giữa các chức năng mapvà filter. Nó sẽ hoạt động như một bộ lọc, ngoại trừ thay vì trả về true hoặc false, nó sẽ trả về bất kỳ đối tượng nào hoặc null / không xác định.

Tôi đã tối ưu hóa các câu trả lời với các điểm sau:

1. Viết lại if (cond) { stmt; }nhưcond && stmt;
2. Sử dụng các hàm mũi tên ES6

Tôi sẽ giới thiệu hai giải pháp, một sử dụng foreach , người kia sử dụng giảm :

Giải pháp 1: Sử dụng forEach

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];
var reduced = []
options.forEach(o => {
  o.assigned && reduced.push( { name: o.name, newProperty: 'Foo' } );
} );
console.log(reduced);

Giải pháp 2: Sử dụng giảm

var options = [
  { name: 'One', assigned: true }, 
  { name: 'Two', assigned: false }, 
  { name: 'Three', assigned: true }, 
];
var reduced = options.reduce((a, o) => {
  o.assigned && a.push( { name: o.name, newProperty: 'Foo' } );
  return a;
}, [ ] );
console.log(reduced);

Tôi để nó cho bạn quyết định giải pháp nào để đi.

Sử dụng less, bạn có thể thực hiện điều này trong một hàm Array.prototype. Điều này sẽ lấy tất cả các số chẵn từ một mảng.

var arr = [1,2,3,4,5,6,7,8];

var brr = arr.reduce((c, n) => {
  if (n % 2 !== 0) {
    return c;
  }
  c.push(n);
  return c;
}, []);

document.getElementById('mypre').innerHTML = brr.toString();

<h1>Get all even numbers</h1>
<pre id="mypre"> </pre>

Bạn có thể sử dụng cùng một phương thức và khái quát nó cho các đối tượng của bạn, như thế này.

var arr = options.reduce(function(c,n){
  if(somecondition) {return c;}
  c.push(n);
  return c;
}, []);

arr bây giờ sẽ chứa các đối tượng được lọc.

Việc sử dụng trực tiếp .reducecó thể khó đọc, vì vậy tôi khuyên bạn nên tạo một hàm tạo bộ giảm tốc cho bạn:

function mapfilter(mapper) {
  return (acc, val) => {
    const mapped = mapper(val);
    if (mapped !== false)
      acc.push(mapped);
    return acc;
  };
}

Sử dụng nó như vậy:

const words = "Map and filter an array #javascript #arrays";
const tags = words.split(' ')
  .reduce(mapfilter(word => word.startsWith('#') && word.slice(1)), []);
console.log(tags);  // ['javascript', 'arrays'];