javascript面试题数组去重

羅小子
羅小子
羅小子
12
文章
3
评论
一月 2, 202107:05:47 评论

前端对于数组去重有很多种方法,面试时能说出3-4种基本就可以了 。

javascript面试题数组去重

// 全局变量
const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}];

双重循环加splice()

这种方法是通过双重循环判断值是否相等如果相等就使用splice方法删除第i(下标索引)个下面的数据。

const unique1 = arr => {
  let len = arr.length;
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        // 每删除一个树,j--保证j的值经过自加后不变。同时,len--,减少循环次数提升性能
        len--;
        j--;
      }
    }
  }
  return arr;
}

利用Set

Set是ES6提供的新API,相比上面的双重循环减少了很多代码量;

const res1 = Array.from(new Set(arr));

利用indexOf

indexOf():如果要检索的字符串值没有出现,则该方法返回 -1.

const unique2 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
  }
  return res;
}

利用include

include():方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

const unique3 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}

利用filter

filer():方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。但是它不会检测空数组和不会改变原始数组

const unique4 = arr => {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}

利用Map

map():方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。但是它不会检测空数组和不会改变原始数组。

const unique5 = arr => {
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}

在实际开发中根据需求来选择使用哪一种方法,但是在面试的过程中最少你要给出3种以上的解决方案。

继续阅读
羅小子
javascript面试题继承实现的几种方式。 前端

javascript面试题继承实现的几种方式。

在面试中经常会被问到怎么实现一个继承?实现继承有那几种方式?问这个是要考面试者对于js的基础掌握程度。 如果要实现继承,肯定需要一个父类,先定义一个父类: // 定义一个人 function Peop...
javascript面试题防抖节流 前端

javascript面试题防抖节流

在前端开发中经常会处理input事件和滚动条监听事件,为了更好提升性能开发者可以使用防抖和节流。 防抖(debounce):触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算...
整理vue面试题(二) 前端

整理vue面试题(二)

vue常见面试题整理第二章: 1.vue优点? 轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 2.vue父组件向子组件传递数据? 通过属性方式传递数据,子组件...
整理vue面试题(一) 前端

整理vue面试题(一)

Vue.js是前端三大框架之一,很多公司都在使用。相比于其它两个框架,vue的学习成本是最低,也是最容易上手的。深受后端程序猿的喜爱。 一,生命周期面试题 1.什么是vue的生命周期? vue生命周期...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: