How to create an array containing partial objects from another array in JavaScript?-JS Tutorial-php.cn

How to create an array containing partial objects from another array in JavaScript?

WBOY

Release： 2023-08-29 10:01:02

forward

860 people have browsed it

How to create an array containing partial objects from another array in JavaScript?

Arrays are one of the most commonly used data types in JavaScript. They are used to store data sets and allow efficient access and manipulation of data. Arrays can contain any type of data, including primitive values, objects, and even other arrays.

The technique of creating an array of partial objects from an array is a valuable technique when working with complex data sets. A partial object contains only a subset of the data in the original array, allowing us to focus on a specific set of data. This is particularly useful when working with large data sets, as it makes it easier to process only the necessary data.

You can use the map() method to create an array of partial objects from another array in JavaScript. The map() method allows you to iterate over an array and create a new array, the result of which is calling the provided function on each element in the original array.

grammar

The syntax for creating a partial object array from another array in JavaScript is as follows -

let originalArray = [
   { property1: value1, property2: value2, ... },
   { property1: value1, property2: value2, ... },
   ...
];

let partialObjects = originalArray.map(item => {
   return { partialProperty1: item.property1, partialProperty2: item.property2 };
});

Copy after login

In this syntax, originalArray is the name of the original array containing the objects from which the partial object is to be created. Call the map method on this array, passing a function as argument. This function is called on each element of the original array and is used to create a new array of partial objects.

The function passed to the map method takes one parameter, which is a single element of the original array. It is often called a project. In this function you can return an object containing only the properties you want to extract from the original object.

You can also use destructuring assignment to achieve the same result.

let partialObjects = originalArray.map(({property1, property2}) => 
({partialProperty1: property1, partialProperty2: property2}));

Copy after login

Please note that the map method does not modify the original array, but creates a new array containing partial objects.

Methods to create partial object arrays

Use map() method

In JavaScript, the map() function is a method that can be called on an array to create a new array, with the result that the provided function is called for each element in the original array. The new array will have the same number of elements as the original array, but each element will be transformed according to the function provided by the map() method.

Example

Here is an example of how to use the map() method to create an array of partial objects from another array -

<html>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019 },
         { id: 2, name: "PQR", model: 2022 },
         { id: 3, name: "XYZ", model: 2021 },
      ];   

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map((item) => {
         return { name: item.name, model: item.model };
      });

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
          
   </script>
</body>
</html>

Copy after login

In the above example, we have a primitive array containing objects with id, name and age properties. We use the map method to iterate over the array and create a new array partialObjects that contains only the id and name properties of each object in the original array.

Use Destructuring

In this method, we use destructuring assignment and remainder operator to extract properties. The destructuring assignment will extract the model and id properties from each object in the arrayItems array, while the rest operator will extract all remaining properties into a new object named rest.

Example

<html>
<head>
   <title>Creating an array of partial objects from another array using destructuring </title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];
      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      let partialArrayItems = arrayItems.map(({ model, id, ...rest }) => rest);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Copy after login

Use the reduce() method

The reduce() method is another method that allows you to iterate over an array and use the results to create a single value or object. This is useful if you need to create a single object with partial properties from multiple objects.

Example

<html>
<head>
   <title>Creating an array of partial objects from another array using reduce() method</title>
</head>
<body>
   <p id="result1"></p>
   <p id="result2"></p>
   <script>
      let arrayItems = [
         { id: 1, name: "ABC", model: 2019, category: "car" },
         { id: 2, name: "PQR", model: 2022, category: "bike" },
         { id: 3, name: "XYZ", model: 2021, category: "truck" },
      ];

      document.getElementById("result1").innerHTML = "Original Array: <br>" +
      JSON.stringify(arrayItems);
            
      const partialArrayItems = arrayItems.reduce((res, item) => {
         res.push({ id: item.id, model: item.model });
         return res;
      }, []);

      document.getElementById("result2").innerHTML = "Array of partial objects: <br>" + JSON.stringify(partialArrayItems);
   </script>
</body>
</html>

Copy after login

in conclusion

In summary, the map() method is a powerful tool for creating new arrays from existing arrays in JavaScript. It allows you to iterate over an array, perform some operation on each element, and create a new array with the result. It is useful when dealing with arrays of objects and you only need to extract certain properties from each object.

It should be noted that the map() method does not modify the original array, but creates a new array. So if you want to modify the original array, use the forEach() method.

The above is the detailed content of How to create an array containing partial objects from another array in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!