数组某项抽离 + 数组去重

简介: 该文段讲述了如何处理两个数组`oldArr`和`newArr`。首先,从`oldArr`中提取`color`键的值到`newArr`,并实现去重:遍历`newArr`,用嵌套的for循环比较元素,若发现重复则用`splice`删除。最后,这些操作被封装成一个名为`unlink`的方法,用于去除数组中的重复值。

已知一个oldArr与一个newArr,现要求如下:

  • 将一个数组中的某一key下的value全部放到一个新数组中,然后使用去重将该新数组打印出来

      oldArr = [
          {
         
         color:"red"},
          {
         
         color:"red"},
          {
         
         color:"blue"}
      ]
    
  • 将 oldArr 数组中的某一key下的value全部放到一个新数组 newArr 中

      const newArr = ref();
      const oldArr = [
          {
         
         color:"red"},
          {
         
         color:"red"},
          {
         
         color:"blue"}
      ];
      oldArr.forEach((ele)=>{
         
         
          newArr.value.push(ele.color)
      })//['red','red','blue']
    
  • 数组去重—— 利用for嵌套for,然后splice去重

      const newArr = ref();
      const oldArr = [
          {
         
         color:"red"},
          {
         
         color:"red"},
          {
         
         color:"blue"}
      ];
      oldArr.forEach((ele)=>{
         
         
          newArr.value.push(ele.color)
      })//['red','red','blue']
      // 去重
      for(let i = 0; i<newArr.value.length; i++){
         
         
          for(let j = i+1; j<newArr.value.length; j++){
         
         
              if(newArr.value[i] == newArr.value[j]){
         
         
                  newArr.value.spice(j,1);
                  j--
              }
          }
      }
    
  • 封装成一个方法unlink
      function unlink(arr) {
         
         
          for (var i = 0; i < arr.length; i++) {
         
             // 首次遍历数组
              for (var j = i + 1; j < arr.length; j++) {
         
            // 再次遍历数组
                  if (arr[i] == arr[j]) {
         
                   // 判断连个值是否相等
                      arr.splice(j, 1);           // 相等删除后者
                      j--;
                  }
              }
          }
          return arr
      }
    

在这里插入图片描述

相关文章
|
7月前
|
存储 JavaScript 前端开发
手撕前端面试题【javascript~ 列表动态渲染、无重复数组、数组排序、新数组、创建数组、深浅拷贝、内存泄露等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
41 0
|
6天前
对数组中的对象进行排序 简洁易懂
对数组中的对象进行排序 简洁易懂
|
9月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法
JavaScript 手写代码 第五期(重写数组方法一)-可以改变原数组的方法
51 0
|
9月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法
JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法
44 0
|
9月前
|
JavaScript 前端开发 索引
JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法
JavaScript 手写代码 第七期(重写数组方法三) 用于遍历的方法
40 0
|
10月前
|
JavaScript 前端开发
javascript计算对象数组某项求和的封装函数
javascript计算对象数组某项求和的封装函数
75 0
|
11月前
|
Python
巧用for循环嵌套结构
巧用for循环嵌套结构
74 0
JavaScirpt基础for循环
JavaScirpt基础for循环
67 0
|
前端开发
前端学习案例9-数组遍历方法1-数组方法回顾
前端学习案例9-数组遍历方法1-数组方法回顾
52 0
前端学习案例9-数组遍历方法1-数组方法回顾
|
前端开发
前端学习案例4-数组的删改方法2splice
前端学习案例4-数组的删改方法2splice
41 0
前端学习案例4-数组的删改方法2splice