首页 > 其他分享 >【面试题】JS实现数组扁平化处理,妙不可言啊!

【面试题】JS实现数组扁平化处理,妙不可言啊!

时间:2022-09-07 10:14:42浏览次数:95  
标签:面试题 return 扁平化 arr JS item 数组

JS实现数组扁平化处理

点击打开视频讲解更加详细

期望结果: 
      将数组扁平化并去重
      最终得到一个升序且不重复的数组 
步骤: 
      1、数组扁平化 
      2、去重 
      3、排序
<template>
  <div id="home">
    JS实现数组扁平化处理,妙不可言啊!
    <!-- 期望结果: 
      将数组扁平化并去重
      最终得到一个升序且不重复的数组 
    步骤: 
      1、数组扁平化 
      2、去重 
      3、排序 -->
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      arr: [
        [1, 2, 3],
        [3, 4, 5, 5],
        [6, 7, 8, 9],
        [11, 12, [12, 12, [13]]],
        10,
      ],
    };
  },
  mounted() {
    // 方法 1
    // let list = this.flat(this.arr);
    // console.log(list);
    // 方法 2
    let list2 = this.flat2(this.arr);
    console.log(list2);
  },
  components: {},
  methods: {
    //1、方法1 使用递归;数组扁平化处理
    flat(arr) {
      let result = arr.map((item) => {
        if (Array.isArray(item)) {
          return this.flat(item);
        }
        return [item];
      });
      return this.removal([].concat(...result));
    },

    //方法2 使用while循环;处理数组扁平化
    flat2(arr) {
      while (arr.some((item) => Array.isArray(item))) {
        arr = [].concat(...arr);
      }
      return this.removal(arr);
    },

    // 2、去重
    removal(arr) {
      // return Array.from(new Set(arr));
      return this.sort(Array.from(new Set(arr)));
    },
    //3、排序
    /**
     * 正数 a > b 降序(倒序)
     * 0    a = b
     * 负数 a < b 升序
     */
    sort(arr) {
      return arr.sort((a, b) => a - b);
    },
  },
};
</script>

<style scoped>
</style>

效果图:

在这里插入图片描述
若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!

标签:面试题,return,扁平化,arr,JS,item,数组
From: https://www.cnblogs.com/mochenxiya/p/16664285.html

相关文章

  • 2022-09-07 wx.getLocation暂未配置在app.json且没有权限
    前言:昨晚提交了小程序审核,当即就被驳回了,原因是:wx.getLocation接口无权限,且没有在app.json中配置注:我的是wepy小程序解决方案:找到app.wpy,在里面添加代码如下:required......
  • feign 发送form mata数据类型 调用不通问题,JSON parse error Illegal character ((C
    调用方式@FeignClient(name="remoteUserManagerService",url="${base.url}")publicinterfaceRemoteUserManagerService{/***验证token是否正确......
  • js桶排序
    **桶排序**核心思想:对数据进行分桶(分组),分桶后对桶中数据进行排序(可以使用自己喜欢的方式),然后再将所有桶合并(数组合并)。公式:划分桶的数量(数组中最大值-最小......
  • 阿里前端一面必会面试题(附答案)
    浏览器的主要组成部分⽤户界⾯包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝显示的您请求的⻚⾯外,其他显示的各个部分都属于⽤户界⾯。浏览器引擎在⽤户......
  • qt中json字符串的读写
    1、json字符串: 2、写json:  3读json:  ......
  • 前端面试题
    js面试题undefinednullundefined假如变量没有被赋值,那么这个变量就是undefinedundefined表示变量未定义,typeof值为undefined。可以被重写(现代js标准已经规定......
  • React 中的数据可视化与 D3.js
    React中的数据可视化与D3.js当我想在Web应用程序上可视化数据时,我首选的环境是在React应用程序中使用d3.js。但这两种技术很难结合起来。原因是他们都想处理DOM......
  • 京东前端面试题
    代码输出结果f=function(){returntrue;};g=function(){returnfalse;};(function(){if(g()&&[]==![]){f=functionf(){return......
  • 使用 JSX 和 React 渲染的教程
    使用JSX和React渲染的教程如果你是React新手,你可能听说过JSX或JavaScriptXML—它是元素和组件的类似XML的代码。在本文中,我们将看看JSX是什么以及为什么......
  • ReactJS 安装和设置教程
    ReactJS安装和设置教程React是目前最流行的用于构建UI的JavaScript库之一——在可预见的未来,这种趋势似乎将持续下去。在本文中,我们将专注于快速、轻松地设置Reac......