每日前端手写题--day8

以下题目来自掘金等其它博客,但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础,不妨和我一起参与到每日刷题的过程中来,如何?

第八天要刷的手写题如下:

  1. 实现Array.prototype.concat
  2. 实现Array.prototype.reverse
  3. 实现Array.prototype.sort

下面是我自己写的答案:

1. 实现Array.prototype.concat

  • 作用:Array.prototype.concat 方法用于合并两个或多个数组,返回一个新的数组。它不会修改原始数组,而是创建并返回一个新的数组,其中包含所有被合并的数组的元素。
  • 拆包:如果传入concat的是一个数组,则默认情况下会对其拆包([[[1]]]会被当作[[1]]添加进去
javascript 复制代码
Array.prototype.myConcat = function myConcat (...args) {
  const newArray = [...this]; // 创建新数组并复制原始数组的元素

  for (let i = 0; i < args.length; i++) {
    if (Array.isArray(args[i])) {
      newArray.push(...args[i]); // 将数组参数展开并追加到新数组中
    } else {
      newArray.push(args[i]); // 将非数组参数直接追加到新数组中
    }
  }

  return newArray;
};

2. 实现Array.prototype.reverse

  • 作用:将数组的元素逆序
javascript 复制代码
Array.prototype.myReverse = function myReverse () {
    if(!Array.isArray(this)) throw new Error('must be called by array');
     const _len = this.length;
    if(_len < 2) return this;

    const middle = _len >> 2;
    for (let i = 0; i < middle; i++) {
        [this[i], this[_len - i - 1]] = [this[_len -i - 1], this[i]];
    }
    return this;
}

3. 实现Array.prototype.sort

  • 原理:根据指定的排序方向对数组进行排序。
  • 实现:首先确定排序的方向;然后使用快速排序实现
  • 返回值:原数组
javascript 复制代码
Array.prototype.mySort = function (compareFn) {
  const array = [...this]; // 创建新数组并复制原始数组的元素
  if(array.length < 2) return this;
  // 定义比较函数
  const defaultCompare = (a, b) => {
    if (a === undefined || b === undefined) {
      return 0;
    }
    if (a < b) {
      return -1;
    }
    if (a > b) {
      return 1;
    }
    return 0;
  };

  // 使用传入的比较函数或默认比较函数
  const comparator = compareFn || defaultCompare;

  // 快速排序算法
  const quickSort = (arr) => {
    if (arr.length <= 1) {
      return arr;
    }

    const pivotIndex = arr.length >> 1;
    const pivot = arr.splice(pivotIndex, 1)[0];
    const left = [];
    const right = [];

    for (let i = 0; i < arr.length; i++) {
      const result = comparator(arr[i], pivot);
      if (result === -1) {
        left.push(arr[i]);
      } else {
        right.push(arr[i]);
      }
    }

    return [...quickSort(left), pivot, ...quickSort(right)];
  };

  const sortedArray = quickSort(array);

  // 更新原始数组的元素
  for (let i = 0; i < this.length; i++) {
    this[i] = sortedArray[i];
  }

  return this;
};
相关推荐
Domain-zhuo7 分钟前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花14 分钟前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ23 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六23 分钟前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
西凉河的葛三叔27 分钟前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
徐同保28 分钟前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~28 分钟前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
周三有雨34 分钟前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript
木古古181 小时前
使用chrome 访问虚拟机Apache2 的默认页面,出现了ERR_ADDRESS_UNREACHABLE这个鸟问题
前端·chrome·apache
爱米的前端小笔记1 小时前
前端八股自学笔记分享—页面布局(二)
前端·笔记·学习·面试·求职招聘