0
点赞
收藏
分享

微信扫一扫

「DAY2」判断版本、无重复数组、数组排序、新数组、计数器

玩物励志老乐 2022-02-25 阅读 130
safari前端

01-判断版本

 题目描述:
 请补全JavaScript代码,该函数接收两个参数分别为旧版本、新版本,当新版本高于旧版本时表明需要更新,返回true,否则返回false
 注意:
 1.版本号格式均为"X.X.X"
 2.X∈[0,9]
 3.当两个版本号相同时,不需要更新

 本题考点:
 split() 切割字符串
 join() 连接成字符串

 核心步骤:
 因为版本中的每个数字都是个位数,所以只需要判断这几个数字组合在一起的三位数的大小即可。
 1、用 . 把字符串分割成数组
 2、将这个数组使用 join("") 拼接成字符串,然后转换为数字
 3、比较数字的大小

 参考答案:

const _shouldUpdate = (oldVersion, newVersion) => {
  const oldVersionNumber = Number(oldVersion.split(".").join(""));
  const newVersionNumber = Number(newVersion.split(".").join(""));

  return newVersionNumber > oldVersionNumber;
};

 如果每个数字不一定都是个位数的话,可以用下面这种方法:

const _shouldUpdate = (oldVersion, newVersion) => {

  const oldVersionArray = oldVersion.split(".");
  const newVersionArray = newVersion.split(".");

  for (let i = 0; i < 3; i++) {
  	// 使用两个if的地方,我感觉还有优化的空间。暂时没想出怎么优化。
    if (oldVersionArray[i] === newVersionArray[i]) {
      if (i === 2) {
        return false;
      }
      continue;
    }
    return oldVersionArray[i] < newVersionArray[i];
  }
};

02-无重复数组

 题目描述:
 实现一个函数,要求如下:
 1. 根据输入的数字范围 [start,end] 和随机数个数 “n” 生成随机数
 2. 生成的随机数存储到数组中,返回该数组
 3. 返回的数组不能有相同元素
 注意: 不需要考虑"n"大于数字范围的情况

 本题考点:
 Math.random() 返回[0,1)的随机浮点数

 核心步骤:
 1、创建一个数组,用来存储随机数
 2、当数组的长度还未达到 n 时,就生成随机数,如果该随机数,数组中还没有,就放入数组中。

 参考答案:

//生成两数之间的随机数
const _getRandomNumber = (start, end) => {
  return Math.floor(Math.random() * (end - start + 1) + start);
};

/* 缺点:这种写法会有很多无效的循环,性能较差 */
const _getUniqueNums_v1 = (start, end, n) => {
  let arr = [];
  
  while (arr.length < n) {
    // 生成随机数
    let randomNumber = _getRandomNumber(start, end);
    // 判断数组中是否有这个随机数
    if (arr.indexOf(randomNumber) === -1) {
      arr.push(randomNumber);
    }
  }
  return arr;
};

 以上方法的性能不好,可能会有很多次无效的循环,特别是当 end - start 接近 n 的时候。
 我在题解中看到了一种性能更好的思路:
 1、创建一个数组,用于存储随机数,此处称它为 randomArr
 2、生成一个包含 [start, end] 中所有元素的数组,此处称它为 arr
 3、当随机数数组的长度不足 n 时,就生成 arr 的随机下标,将 arr 该下标的元素添加到 randomArr 中。然后删除 randomArr 中的该元素。

const _getUniqueNums_v2 = (start, end, n) => {
  let arr = [];
  let randomArr = [];

  // 生成包含 [start, end] 中所有元素的数组
  for (let i = start; i <= end; i++) {
    arr.push(i);
  }

  while (randomArr.length < n) {
    // 随机生成arr的下标
    const randomIndex = Math.floor(Math.random() * arr.length);
    // 将该下标内的元素放入 randomArr 中
    randomArr.push(arr[randomIndex]);
    // 删除该下标对应的元素
    arr.splice(randomIndex, 1);
  }

  return randomArr;
};

03-数组排序

 题目描述:
 根据预设代码中的数组,实现以下功能:
 1.列表只展示数组中的name属性
 2.实现点击"销量升序"按钮,列表内容按照销量升序重新渲染
 3.实现点击"销量降序"按钮,列表内容按照销量降序重新渲染
 注意: 必须使用DOM0级标准事件(onclick)

 本题考点:
 sort() 排序
 模板字符串

 核心步骤:
 1、创建重新渲染函数。该函数接收一个数组作为参数,函数内创建一个空字符串用于保存HTML模板,遍历数组项,创建HTML模板并且拼接在空字符串之后,最后将ul的innerTHML赋值为该字符串。
 2、给 ”销量升序“ 和 ”销量降序“ 绑定点击事件,分别按照"升序"、"降序"排列数组再调用重渲染函数。

 参考答案:

<button class="up">销量升序</button>
<button class="down">销量降序</button>
<ul></ul>


<script>
  var cups = [
    {
      type: 1,
      price: 100,
      color: "black",
      sales: 3000,
      name: "牛客logo马克杯",
    },
    { type: 2, price: 40, color: "blue", sales: 1000, name: "无盖星空杯" },
    { type: 4, price: 60, color: "green", sales: 200, name: "老式茶杯" },
    { type: 3, price: 50, color: "green", sales: 600, name: "欧式印花杯" },
  ];
  var ul = document.querySelector("ul");
  var upbtn = document.querySelector(".up");
  var downbtn = document.querySelector(".down");
  // 补全代码
  /* 重新渲染函数 */
  const _listRendering = (arr) => {
    let str = "";
    arr.forEach((item) => {
      str += `<li>${item.name}</li>`;
    });
    ul.innerHTML = str;
  };

  upbtn.onclick = () => {
    /* 排序 */
    cups.sort((a, b) => a.sales - b.sales);
    /* 重新渲染 */
    _listRendering(cups);
  };

  downbtn.onclick = () => {
    /* 排序 */
    cups.sort((a, b) => b.sales - a.sales);
    /* 重新渲染 */
    _listRendering(cups);
  };
</script>

04-新数组

 题目描述:
 请补全JavaScript代码,该函数接受两个参数分别为数组、索引值,要求在不改变原数组的情况下返回删除了索引项的新数组。

 本题考点:
 splice()
 JSON.parse(JSON.stringify()) 深拷贝

 核心步骤:
 因为 splice() 会改变原数组,所以我们需要复制一个新的数组,再对其进行删除操作。

 参考答案:

const _delete = (array, index) => {
  const newArray = JSON.parse(JSON.stringify(array));
  newArray.splice(index, 1);
  return newArray;
};

 也可以不使用数组提供的删除方法来实现:
 遍历传入的数组,如果当前下标与传入的下标相同就跳过此次循环,否则就将当前下标的元素放入新数组。

const _delete = (array, index) => {
  const length = array.length;
  if (index + 1 > length) {
    return;
  }
  const newArr = [];
  for (let i = 0; i < length; i++) {
    if (i === index) {
      continue;
    }
    newArr.push(array[i]);
  }
  return newArr;
};

05-计数器

 题目描述:
 请补全JavaScript代码,要求每次调用函数"closure"时会返回一个新计数器。每当调用某个计数器时会返回一个数字且该数字会累加1。
 注意:
 1.初次调用返回值为1
 2.每个计数器所统计的数字是独立的

 本题考点:闭包

 核心步骤:
 1、定义一个变量,初始值为0
 2、返回一个匿名函数,在该函数中使用该变量,令其加1,返回该变量。

 参考答案:

const closure = () => {
  let count = 0;
  return function () {
    count++;
    return count;
  };
};

知识点总结(TODO)

(1)Math.random()

(2)关于深拷贝

(3)sort()

(4)闭包

举报

相关推荐

0 条评论