{"id":21298,"date":"2024-03-15T21:50:11","date_gmt":"2024-03-15T21:50:11","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/"},"modified":"2024-03-21T20:09:05","modified_gmt":"2024-03-21T20:09:05","slug":"how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/","title":{"rendered":"How to remove duplicates in an ES6 array object based on property values?"},"content":{"rendered":"

By using the Set data structure and the Array.from() method, it is convenient to eliminate duplicates from ES6 arrays based on property values.<\/p>\n

Assume there is an ES6 array object with elements that are objects, each containing a unique property that can be used for deduplication. The following steps can be followed:<\/p>\n

    \n
  1. Create a new array using the Array.map() method that only contains the unique property values that need to be deduplicated.<\/li>\n
  2. Use the Set data structure to remove duplicates, as Sets automatically eliminate duplicate values.<\/li>\n
  3. You can convert a Set into a new array using the Array.from() method.<\/li>\n<\/ol>\n

    Here is an example code:<\/p>\n

    const<\/span> arr = [\r\n  { id<\/span>: 1<\/span>, name<\/span>: 'Alice'<\/span> },\r\n  { id<\/span>: 2<\/span>, name<\/span>: 'Bob'<\/span> },\r\n  { id<\/span>: 3<\/span>, name<\/span>: 'Alice'<\/span> },\r\n  { id<\/span>: 4<\/span>, name<\/span>: 'David'<\/span> },\r\n  { id<\/span>: 5<\/span>, name<\/span>: 'Bob'<\/span> }\r\n];\r\n\r\nconst<\/span> uniqueArr = Array<\/span>.from<\/span>(new<\/span> Set<\/span>(arr.map<\/span>(item<\/span> =><\/span> item.name<\/span>)));\r\n\r\nconsole<\/span>.log<\/span>(uniqueArr);\r\n<\/code><\/pre>\n
    Running the above code will output: [‘Alice’, ‘Bob’, ‘David’]. This new array contains only unique property values.<\/p>\n","protected":false},"excerpt":{"rendered":"
    By using the Set data structure and the Array.from() method, it is convenient to eliminate duplicates from ES6 arrays based on property values. Assume there is an ES6 array object with elements that are objects, each containing a unique property that can be used for deduplication. The following steps can be followed: Create a new […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-21298","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to remove duplicates in an ES6 array object based on property values? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to remove duplicates in an ES6 array object based on property values?\" \/>\n<meta property=\"og:description\" content=\"By using the Set data structure and the Array.from() method, it is convenient to eliminate duplicates from ES6 arrays based on property values. Assume there is an ES6 array object with elements that are objects, each containing a unique property that can be used for deduplication. The following steps can be followed: Create a new […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T21:50:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T20:09:05+00:00\" \/>\n<meta name=\"author\" content=\"Jackson Davis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jackson Davis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"How to remove duplicates in an ES6 array object based on property values?\",\"datePublished\":\"2024-03-15T21:50:11+00:00\",\"dateModified\":\"2024-03-21T20:09:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\"},\"wordCount\":137,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\",\"name\":\"How to remove duplicates in an ES6 array object based on property values? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T21:50:11+00:00\",\"dateModified\":\"2024-03-21T20:09:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to remove duplicates in an ES6 array object based on property values?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\",\"name\":\"Jackson Davis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"caption\":\"Jackson Davis\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to remove duplicates in an ES6 array object based on property values? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/","og_locale":"en_US","og_type":"article","og_title":"How to remove duplicates in an ES6 array object based on property values?","og_description":"By using the Set data structure and the Array.from() method, it is convenient to eliminate duplicates from ES6 arrays based on property values. Assume there is an ES6 array object with elements that are objects, each containing a unique property that can be used for deduplication. The following steps can be followed: Create a new […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T21:50:11+00:00","article_modified_time":"2024-03-21T20:09:05+00:00","author":"Jackson Davis","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Jackson Davis","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"How to remove duplicates in an ES6 array object based on property values?","datePublished":"2024-03-15T21:50:11+00:00","dateModified":"2024-03-21T20:09:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/"},"wordCount":137,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/","name":"How to remove duplicates in an ES6 array object based on property values? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T21:50:11+00:00","dateModified":"2024-03-21T20:09:05+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-remove-duplicates-in-an-es6-array-object-based-on-property-values\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to remove duplicates in an ES6 array object based on property values?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350","name":"Jackson Davis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","caption":"Jackson Davis"},"url":"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=21298"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21298\/revisions"}],"predecessor-version":[{"id":55152,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21298\/revisions\/55152"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}