• 注册
  • 前端博客 前端博客 关注:0 内容:404

    JS实现的小功能

  • 查看作者
  • 打赏作者
  • 当前位置: 职业司 > 前端开发 > 前端博客 > 正文
    • 前端博客
    • 一、如何实现数组的随机排序?

      1. 利用数组自带的sort方法
      function randomSort(arr) {
      return arr.sort(() => Math.random() - 0.5);
      }
      复制代码
      1. 随机抽取数组元素到新数组中【Math.floor():向下取整】
      function randomSort(arr) {
      let newArr = [];
      while (arr.length > 0) {
      let index = Math.floor(Math.random() * arr.length);
      newArr.push(arr[index]);
      arr.splice(index, 1);
      }
      return newArr;
      }
      复制代码
      1. 洗牌法:随机交换数组内的元素
      function randomSort(arr) {
      for (let i = 0, len = arr.length; i < len; i++) {
      let index = Math.floor(Math.random() * len);
      [arr[index], arr[i]] = [arr[i], arr[index]];
      }
      return arr;
      }
      复制代码

      二、如何实现JS数组去重?

      1. ES6 Set
        Set:类似于数组,成员的值均唯一
      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let unique = (arr) => [...new Set(arr)];
      let result = unique(arr);
      console.log(result);   //[ 1, 2, 3, 4, 6, 7 ]
      复制代码

      let arr = [1, 2, 3, 4, 4, 5, 5, 6, 7, 7, 8];
      let result = [...new Set(arr)];
      console.log(result);
      复制代码

      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let unique = (arr) => Array.from(new Set(arr));
      let result = unique(arr);
      console.log(result); //[ 1, 2, 3, 4, 6, 7 ]
      复制代码
      1. ES6 Map
        采用数组的filter()过滤,通过Map的has()方法判断Map中是否有重复的key值,若有,则返回false,过滤掉该值;若无,则会将该值作为Map的键,值设为1。
      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let unique = (arr) => {
      let seen = new Map();
      return arr.filter((item) => {
      return !seen.has(item) && seen.set(item, 1);
      })
      }
      let result = unique(arr);
      console.log(result);   //[ 1, 2, 3, 4, 6, 7 ]
      复制代码
      let arr = [1, 2, 3, 4, 4, 5, 5, 6, 7, 7, 8];
      let temp = new Map();
      let result = arr.filter((item) => {
      return !temp.has(item) && temp.set(item, 1);
      });
      console.log(result);
      复制代码
      1. for双层循环

      分别循环原数组和新创建数组,检查原数组的元素是否和新数组相同,若相同,则跳出循环,否则将原数组元素插入新数组中。

      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let result = [];
      for (var i = 0; i < arr.length; i++) {
      for (var j = 0; j < result.length; j++) {
      if (arr[i] === result[j]) {
      break;
      }
      }
      if (j == result.length) {
      result.push(arr[i]);
      }
      }
      console.log(result);   //[ 1, 2, 3, 4, 6, 7 ]
      /* 执行解析:
      首先,j=0,不小于result.length,所以首先把arr[0]插入result数组中,接着进入才可以第二层循环。
      */
      复制代码
      1. indexOf()
        方法可返回某个指定的元素在数组中首次出现的位置。如果没有就返回-1。
      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let unique = (arr) => {
      let result = [];
      for (var i = 0; i < arr.length; i++) {
      if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i]);
      }
      }
      return result;
      }
      var result = unique(arr);
      console.log(result);   //[ 1, 2, 3, 4, 6, 7 ]
      复制代码
      1. indexOf() + filter
      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let unique = (arr) => {
      return arr.filter((item, index) => {
      return arr.indexOf(item) === index;
      })
      }
      var result = unique(arr);
      console.log(result);     //[ 1, 2, 3, 4, 6, 7 ]
      复制代码
      1. Object 键值对去重;把数组的值存成 Object 的 key 值,比如 Object[value1] = true,在判断另一个值的时候,如果 Object[value2]存在的话,就说明该值是重复的。
      function unique(arr) {
      let hashTable = {};
      let newArr = [];
      for (let i = 0; i < arr.length; i++) {
      if (!hashTable[arr[i]]) {
      hashTable[arr[i]] = true;
      newArr.push(arr[i]);
      }
      }
      return newArr;
      }
      let arr = [1, 2, 3, 4, 3, 2, 3, 4, 6, 7, 6];
      let result = unique(arr);
      console.log(result);     //[ 1, 2, 3, 4, 6, 7 ]
      复制代码

      请登录之后再进行评论

      登录

      手机阅读天地(APP)

      • 微信公众号
      • 微信小程序
      • 安卓APP
      手机浏览,惊喜多多
      匿名树洞,说我想说!
      问答悬赏,VIP可见!
      密码可见,回复可见!
      即时聊天、群聊互动!
      宠物孵化,赠送礼物!
      动态像框,专属头衔!
      挑战/抽奖,金币送不停!
      赶紧体会下,不会让你失望!
    • 实时动态
    • 签到
    • 做任务
    • 发表内容
    • 偏好设置
    • 到底部
    • 帖子间隔 侧栏位置:
    • 还没有账号?点这里立即注册