每日前端手写题--day7

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

第七天要刷的手写题如下：

1. 实现Array.prototype.push
2. 实现Array.prototype.pop
3. 实现Array.prototype.shift
4. 实现Array.prototype.unshift
5. 实现Array.prototype.slice
6. 实现Array.prototype.splice

下面是我自己写的答案：

1. 实现Array.prototype.push

• 原理：push() 方法用于将一个或多个元素添加到数组的末尾，并返回新数组的长度。
• 实现：可以巧妙地使用length属性完成这一功能
• 返回值：此方法的返回值为变化之后的数组的长度

function myPush (...eles) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _tmp = [...eles];
    for (let i = 0; i < _tmp.length; i++) {
        this[this.length] = _tmp[i]
    }
    return this.length;
}

2. 实现Array.prototype.pop

• 原理：pop() 方法从数组中删除并返回最后一个元素。
• 实现：可以巧妙地使用length属性完成这一功能，并且改变length的值之后，对应的索引属性自动消失
• 返回值：被删除的元素或者undefined

function myPop () {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    if(this.length===0) return undefined;
    const _tmp = this[this.length - 1];
    this.length--;
    return _tmp;
}

3. 实现Array.prototype.shift

• 原理：shift() 方法从数组中删除并返回第一个元素，同时将其他元素往前移动。
• 实现：由于删除的是数组的第一个元素，所以数组的其它元素都要发生位移，因此就需要遍历的移动每一个数组中的元素，这一点比起pop非常的不方便！
• 返回值：被删除的元素或者undefined

function myShift () {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _tmp = [...this];
    const len = this.length;
    if(len === 0) return undefined;
    this.length = 0;
    for (let i = 1; i < len; i++) {
        this[i-1] = _tmp[i];
    }
    return _tmp[0];
}

4. 实现Array.prototype.unshift

• 原理：unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。
• 实现：分别对原来数组和新增加的元素序列进行遍历，前者的作用是为了挪动元素的顺序，后者的作用是为了插入新数据
• 返回值：变化之后的数组的长度

function myUnshift (...eles) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    const _count = eles?.length ?? 0;
    const _len = this.length;
    if(_count == 0) return _len;
    for (let i = 0; i < _len; i++) {
        this[i+_count] = this[i];
    }
    for (let i = 0; i < _count; i++) {
        this[i] = eles[i];
    }
    return this.length;
}

5. 实现Array.prototype.slice

原理：slice() 方法返回原始数组的指定部分（浅拷贝），不修改原始数组。 实现：实现的难点在于对负号下标的处理上 返回值：返回切片元素组成的数组

function mySlice (start, end) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    let _start = start === undefined ? 0 : start;
    let _end = end === undefined ? this.length : end;
    if(typeof _start !== 'number' || Number.isNaN(_start)) throw new Error('start must be number');
    if(typeof _end !== 'number' || Number.isNaN(_end)) throw new Error('end must be number');
    
    const _result = [];

    if (_start > this.length) {
        return _result; // 起始位置超出数组长度时返回空数组
    }

    if (_start < 0) {
        _start = Math.max(this.length + _start, 0); // 将负数的起始位置转换为正数
    }

    if(_end < 0) {
        _end = Math.max(this.length + _end, 0); // 将负数的终止位置转换为正数
    }
    if (_end > this.length) {
        _end = this.length; // 结束位置超出数组长度时将其修正为数组长度
    }

    if (_start > _end) {
        return _result;
    }

    
    for (let i = _start; i < _end; i++>) {
        _result.push(this[i]);
    }

    return _result;
}

6. 实现Array.prototype.splice

原理：splice() 方法从数组中删除、替换或插入新的元素，并返回被删除的元素数组。 实现：使用一个临时变量保存原来数组中的元素，然后将其分成三个部分，然后按照要求拼接；需要注意的是：使用.length = 0来清除数组中的元素，而不要直接给数组赋值！ 返回值：返回被删除的元素组成的数组

function mySplice (start, deleteCount = 0, ...items) {
    if(!Array.isArray(this)) throw new Error('must be called by array');
    let _tmp = [...this];
    // 从0到start-1
    const fragment1 = _tmp.slice(0, start-1);
    // 从start到deleteCount-1
    const fragment2 = _tmp.slice(start, deleteCount-1);
    // 从deleteCount到末尾
    const fragment3 = _tmp.slice(deleteCount);
    _tmp = [...fragment1, ...items, ...fragment3];
    this.length = 0;
    for (let i = 0; i < _tmp.length; i++) {
        this[i] = _tmp[i];
    }
    return fragment2;
}