{"id":21295,"date":"2024-03-15T21:49:56","date_gmt":"2024-03-15T21:49:56","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/"},"modified":"2024-03-21T20:08:40","modified_gmt":"2024-03-21T20:08:40","slug":"what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/","title":{"rendered":"What are the different ways to remove duplicates from an ES6 array object?"},"content":{"rendered":"

In ES6, there are several methods to remove duplicates from an array object:<\/p>\n

    \n
  1. Using Set: Set is a new data structure introduced in ES6 which ensures that the elements in the collection are unique. You can use Set to remove duplicate items from an array and then convert the Set back to an array. Example code is as follows:<\/li>\n<\/ol>\n
    const<\/span> arr = [1<\/span>, 2<\/span>, 3<\/span>, 3<\/span>, 4<\/span>, 5<\/span>, 5<\/span>];\r\nconst<\/span> uniqueArr = [...new<\/span> Set<\/span>(arr)];\r\nconsole<\/span>.log<\/span>(uniqueArr); \/\/ [1, 2, 3, 4, 5]<\/span>\r\n<\/code><\/pre>\n
      \n
    1. Use Array.from() and Set: You can first convert an array to a Set using Array.from(), and then convert the Set back to an array. Example code is shown below:<\/li>\n<\/ol>\n
      const<\/span> arr = [1<\/span>, 2<\/span>, 3<\/span>, 3<\/span>, 4<\/span>, 5<\/span>, 5<\/span>];\r\nconst<\/span> uniqueArr = Array<\/span>.from<\/span>(new<\/span> Set<\/span>(arr));\r\nconsole<\/span>.log<\/span>(uniqueArr); \/\/ [1, 2, 3, 4, 5]<\/span>\r\n<\/code><\/pre>\n
        \n
      1. You can use the filter() method to iterate through an array, keeping only the first occurrence of an element and filtering out any duplicates that follow. Here is an example code snippet:<\/li>\n<\/ol>\n
        const<\/span> arr = [1<\/span>, 2<\/span>, 3<\/span>, 3<\/span>, 4<\/span>, 5<\/span>, 5<\/span>];\r\nconst<\/span> uniqueArr = arr.filter<\/span>((item, index<\/span>) =><\/span> arr.indexOf<\/span>(item) === index);\r\nconsole<\/span>.log<\/span>(uniqueArr); \/\/ [1, 2, 3, 4, 5]<\/span>\r\n<\/code><\/pre>\n
          \n
        1. With the use of the reduce() method, you can iterate through an array, add each element to a result array, but only add the element the first time it appears and filter out any subsequent duplicate occurrences. See the example code below:<\/li>\n<\/ol>\n
          const<\/span> arr = [1<\/span>, 2<\/span>, 3<\/span>, 3<\/span>, 4<\/span>, 5<\/span>, 5<\/span>];\r\nconst<\/span> uniqueArr = arr.reduce<\/span>((result, item<\/span>) =><\/span> {\r\n  if<\/span> (!result.includes<\/span>(item)) {\r\n    result.push<\/span>(item);\r\n  }\r\n  return<\/span> result;\r\n}, []);\r\nconsole<\/span>.log<\/span>(uniqueArr); \/\/ [1, 2, 3, 4, 5]<\/span>\r\n<\/code><\/pre>\n
          These methods are all effective ways to deduplicate array objects.<\/p>\n","protected":false},"excerpt":{"rendered":"
          In ES6, there are several methods to remove duplicates from an array object: Using Set: Set is a new data structure introduced in ES6 which ensures that the elements in the collection are unique. You can use Set to remove duplicate items from an array and then convert the Set back to an array. Example […]<\/p>\n","protected":false},"author":12,"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-21295","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nWhat are the different ways to remove duplicates from an ES6 array object? - 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\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are the different ways to remove duplicates from an ES6 array object?\" \/>\n<meta property=\"og:description\" content=\"In ES6, there are several methods to remove duplicates from an array object: Using Set: Set is a new data structure introduced in ES6 which ensures that the elements in the collection are unique. You can use Set to remove duplicate items from an array and then convert the Set back to an array. Example […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\" \/>\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:49:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T20:08:40+00:00\" \/>\n<meta name=\"author\" content=\"Liam\" \/>\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=\"Liam\" \/>\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\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\"},\"author\":{\"name\":\"Liam\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671\"},\"headline\":\"What are the different ways to remove duplicates from an ES6 array object?\",\"datePublished\":\"2024-03-15T21:49:56+00:00\",\"dateModified\":\"2024-03-21T20:08:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\"},\"wordCount\":187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\",\"name\":\"What are the different ways to remove duplicates from an ES6 array object? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T21:49:56+00:00\",\"dateModified\":\"2024-03-21T20:08:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are the different ways to remove duplicates from an ES6 array object?\"}]},{\"@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\/23786905eb7b377f45ddb01c17da7671\",\"name\":\"Liam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g\",\"caption\":\"Liam\"},\"sameAs\":[\"http:\/\/Wilson\"],\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What are the different ways to remove duplicates from an ES6 array object? - 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\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/","og_locale":"en_US","og_type":"article","og_title":"What are the different ways to remove duplicates from an ES6 array object?","og_description":"In ES6, there are several methods to remove duplicates from an array object: Using Set: Set is a new data structure introduced in ES6 which ensures that the elements in the collection are unique. You can use Set to remove duplicate items from an array and then convert the Set back to an array. Example […]","og_url":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T21:49:56+00:00","article_modified_time":"2024-03-21T20:08:40+00:00","author":"Liam","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Liam","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/"},"author":{"name":"Liam","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/23786905eb7b377f45ddb01c17da7671"},"headline":"What are the different ways to remove duplicates from an ES6 array object?","datePublished":"2024-03-15T21:49:56+00:00","dateModified":"2024-03-21T20:08:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/"},"wordCount":187,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/","url":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/","name":"What are the different ways to remove duplicates from an ES6 array object? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T21:49:56+00:00","dateModified":"2024-03-21T20:08:40+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-are-the-different-ways-to-remove-duplicates-from-an-es6-array-object\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What are the different ways to remove duplicates from an ES6 array object?"}]},{"@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\/23786905eb7b377f45ddb01c17da7671","name":"Liam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8d37ed3e7f770dde8bf069ba0b4298688028c3abaacf1131742fc1352d174ebd?s=96&d=mm&r=g","caption":"Liam"},"sameAs":["http:\/\/Wilson"],"url":"https:\/\/www.silicloud.com\/blog\/author\/liamwilson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21295","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=21295"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21295\/revisions"}],"predecessor-version":[{"id":55149,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21295\/revisions\/55149"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}