Hướng dẫn javascript aggregate array of objects - mảng tổng hợp javascript của các đối tượng

Mặc dù bạn có thể chuyển cái này vào một cuộc gọi reduce (vì bất kỳ hoạt động mảng nào cũng có thể được đưa vào reduce), nhưng không có lợi cho việc làm như vậy. Chỉ cần sử dụng một vòng lặp:

const result = {x: null, y: 0};
for (const entry of array) {
    if (result.x === null) {
        result.x = entry.x;
    } else if (result.x !== entry.x) {
        result.x = undefined;
    }
    result.y += entry.y;
}

Ví dụ trực tiếp:

Nhưng một lần nữa, bạn có thể chuyển nó vào reduce nếu bạn muốn bằng cách luôn trả về cùng một đối tượng:

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

Ví dụ trực tiếp:

Nhưng một lần nữa, bạn có thể chuyển nó vào reduce nếu bạn muốn bằng cách luôn trả về cùng một đối tượng:, if you want a reduce solution and you don't mind creating a bunch of temporary throw-away objects, check out Adassko's answer. Simple and straight-forward, and 99.9% of the time, you don't care about the temporary object creation.

Thường thì chúng tôi sử dụng

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

Chúng ta sẽ thấy ví dụ cơ bản của

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

Làm thế nào giảm công việc

Nói một cách đơn giản, nó làm giảm mảng thành giá trị đơn. Giá trị đơn có thể là số, chuỗi, đối tượng hoặc mảng khác.

Hãy xem một ví dụ thông thường về giảm mảng,

// Person array with name and Age
const person = [
  {
    name: 'Jim',
    color: 'blue',
    age: 22,
  },
  {
    name: 'Sam',
    color: 'blue',
    age: 33,
  },
  {
    name: 'Eddie',
    color: 'green',
    age: 77,
  },
];

// Add their sum of ages
const sumOfAges = person.reduce((sum, currentValue) => {
  return sum + currentValue.age;
}, 0);

console.log(sumOfAges); // 132

• reduce Chấp nhận giá trị ban đầu, ở đây trong tổng của chúng tôi, chúng tôi vượt qua

  const result = array.reduce((obj, entry) => {
      if (obj.x === null) {
          obj.x = entry.x;
      } else if (obj.x !== entry.x) {
          obj.x = undefined;
      }
      obj.y += entry.y;
      return obj;
  }, {x: null, y: 0});
  

  7 là giá trị ban đầu
• reduce Lặp lại trên mỗi giá trị và thêm tổng mỗi lần với giá trị tổng trước đó của chúng. Do đó, chúng tôi trả lại tổng ở mỗi bước và số tiền đó được thêm vào với giá trị tuổi tiếp theo.
• Giá trị tổng cuối cùng sẽ được trả về ở cuối lần lặp.

Cách nhóm sử dụng giảm trong JavaScript

Đối với mảng người, hãy nhóm các đối tượng bằng cách sử dụng giá trị màu. Trong đối tượng của chúng tôi, có hai đối tượng màu xanh và một đối tượng màu xanh lá cây.

// Accepts the array and key
const groupBy = (array, key) => {
  // Return the end result
  return array.reduce((result, currentValue) => {
    // If an array already present for key, push it to the array. Else create an array and push the object
    (result[currentValue[key]] = result[currentValue[key]] || []).push(
      currentValue
    );
    // Return the current iteration `result` value, this will be taken as next iteration `result` value and accumulate
    return result;
  }, {}); // empty object is the initial value for result object
};

// Group by color as key to the person array
const personGroupedByColor = groupBy(person, 'color');

Các bước để tạo chức năng

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

• Tạo một đối tượng làm giá trị ban đầu cho đối tượng kết quả của chúng tôi
• Bên trong mảng giảm, tạo một mảng cho từng giá trị khóa riêng biệt và đẩy ravalue hiện tại nếu giá trị khóa có mặt trong currentValue

// this step of code can be restructured to multiple lines, see below for the multi line code
(result[currentValue[key]] = result[currentValue[key]] || []).push(
  currentValue
);

// This is how the above code in multiple line
if (!result[currentValue[key]]) {
  result[currentValue[key]] = [];
}
result[currentValue[key]].push(currentValue);

Kết quả cuối cùng sau khi nhóm sẽ trông như thế này,

{
  "blue": [
    {
      "name": "Jim",
      "color": "blue",
      "age": 22
    },
    {
      "name": "Sam",
      "color": "blue",
      "age": 33
    }
  ],
  "green": [
    {
      "name": "Eddie",
      "color": "green",
      "age": 77
    }
  ]
}

Bạn có thể kiểm tra ví dụ ở đây,

// Person array with name and Age
const person = [
  {
    name: 'Jim',
    color: 'blue',
    age: 22,
  },
  {
    name: 'Sam',
    color: 'blue',
    age: 33,
  },
  {
    name: 'Eddie',
    color: 'green',
    age: 77,
  },
];

// Add their sum of ages
const sumOfAges = person.reduce((sum, currentValue) => {
  return sum + currentValue.age;
}, 0);

console.log(sumOfAges); // 132

Đây là cách đối tượng được tạo tại mỗi lần lặp

// Initial value for `result`
{}
// After first iteration
{ blue: [ { name: 'Jim', color: 'blue', age: 22 } ] }
// After second iteration
{ blue:
   [ { name: 'Jim', color: 'blue', age: 22 },
     { name: 'Sam', color: 'blue', age: 33 } ] }
// After final iteration
{ blue:
   [ { name: 'Jim', color: 'blue', age: 22 },
     { name: 'Sam', color: 'blue', age: 33 } ],
  green: [ { name: 'Eddie', color: 'green', age: 77 } ]}

Hy vọng bạn đã học được một mẹo về cách sử dụng Array giảm và cũng cách tạo chức năng

const result = array.reduce((obj, entry) => {
    if (obj.x === null) {
        obj.x = entry.x;
    } else if (obj.x !== entry.x) {
        obj.x = undefined;
    }
    obj.y += entry.y;
    return obj;
}, {x: null, y: 0});

Làm cách nào để nhóm một mảng các đối tượng trong JavaScript?

Làm thế nào để bạn sử dụng giảm trên mảng các đối tượng trong JavaScript?

Có làm giảm mảng đột biến?

Hàm tổng hợp JavaScript là gì?