Javascript数组研究05_手写实现_map_pop_push_reduce_reduceRight_reverse

最新推荐文章于 2024-11-05 22:07:06 发布
最新推荐文章于 2024-11-05 22:07:06 发布
阅读量811 收藏 9
点赞数 30
分类专栏： javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33546823/article/details/142702241
版权

20 Array.map()

20.1 基本介绍

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

array.map(callbackFn)
array.map(callbackFn, thisArg)

输入参数：

  • callbackFn(element, index, array)：生成新数组元素的函数。
  • thisArg（可选）：执行 callbackFn 时使用的 this 值。

输出：一个新的数组，每个元素是原数组元素调用 callbackFn 后的返回值。

注意事项：

  • map() 不会修改原数组，是一个复制方法。
  • 对于稀疏数组，map() 会跳过空槽，不会调用 callbackFn。
  • 如果 callbackFn 修改了数组，则修改可能会影响后续的遍历。
20.2 手写实现
MyArray.prototype.map = function(callbackFn, thisArg) {
    if (typeof callbackFn !== 'function') {
        throw new TypeError(callbackFn + ' is not a function');
    }

    let result = new MyArray();

    for (let i = 0; i < this.length; i++) {
        if (!(i in this)) continue; // 跳过空槽
        result[i] = callbackFn.call(thisArg, this[i], i, this);
    }

    result.length = this.length; // 保持长度一致

    return result;
};

// 测试用例
let arr = new MyArray(1, 2, 3);
let mappedArr = arr.map(x => x * 2);
console.log(mappedArr); // [2, 4, 6]

let arr2 = new MyArray().concat([1, ,3]);
let mappedArr2 = arr2.map((x, index) => index);
console.log(mappedArr2); // [0, , 2]

难点总结：

  • 处理稀疏数组：跳过空槽，不调用 callbackFn，在结果数组中保留空槽。
  • 返回新数组：需要返回与原数组同类型的新数组。
  • 保持索引一致：结果数组的长度和索引应与原数组保持一致。

21 Array.pop()

21.1 基本介绍

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

array.pop()

输入参数：无。

输出：被移除的元素。如果数组为空，则返回 undefined。

注意事项：

  • pop() 方法会修改原数组，是一个修改方法。
  • 当数组为空时，返回 undefined，数组长度仍为 0。
21.2 手写实现
MyArray.prototype.pop = function() {
    // 数组为空时直接返回undefined
    if (this.length === 0) {
        return undefined;
    }

    let lastIndex = this.length - 1;
    let lastElement = this[lastIndex];
    // 使用delete关键字删除对象上的属性
    delete this[lastIndex];
    // 记得更新length
    this.length = lastIndex;

    return lastElement;
};

// 测试用例
let arr_3 = new MyArray(1, 2, 3);
let poppedElement = arr_3.pop();
console.log(poppedElement); // 3
console.log(arr_3); // [1, 2]

let emptyArr = new MyArray();
let poppedFromEmpty = emptyArr.pop();
console.log(poppedFromEmpty); // undefined
console.log(emptyArr); // []

难点总结：

  • 更新 length 属性：需要手动更新数组的 length 属性。
  • 删除元素：使用 delete 操作符删除最后一个元素，数组的索引：值也可以看作是对象的属性进行删除。
  • 处理空数组：当数组为空时，返回 undefined。

22 Array.push()

22.1 基本介绍

push() 方法将一个或多个元素添加到数组的末尾，并返回新数组的长度。

array.push(element1)
array.push(element1, element2, ..., elementN)

输入参数：

  • elementN：要添加到数组末尾的元素。

输出：数组添加新元素后的长度。

注意事项：

  • push() 方法会修改原数组，是一个修改方法。
  • 可以同时添加多个元素。
22.2 手写实现
MyArray.prototype.push = function(...args) {
    let length = this.length >>> 0; // 确保 length 为非负整数\

    // 剩余参数是数组的形式，遍历剩余参数，依次加入原数组
    for (let i = 0; i < args.length; i++) {
        this[length + i] = args[i];
    }
    // 记得更新数组长度
    this.length = length + args.length;

    // 返回数组长度
    return this.length;
};

// 测试用例
let arr_4 = new MyArray(1, 2, 3);
let newLength = arr_4.push(4, 5);
console.log(newLength); // 5
console.log(arr_4); // [1, 2, 3, 4, 5]

难点总结：

  • 处理 length 属性：需要正确更新数组的 length 属性。
  • 支持多个参数：push() 可以接受多个参数，需要遍历 args。

23 Array.reduce()

23.1 基本介绍

reduce() 方法对数组中的每个元素执行一个 reducer 函数（升序执行），将其结果汇总为单个返回值。

array.reduce(callbackFn)
array.reduce(callbackFn, initialValue)

输入参数：

  • callbackFn(previousValue, currentValue, currentIndex, array)：一个函数，用于执行数组中的每个元素，包含四个参数。
  • initialValue（可选）：作为第一次调用 callbackFn 时的第一个参数的值。如果没有提供初始值，则使用数组中的第一个元素。

输出：累加器最终的结果值。

注意事项：

  • 如果没有提供 initialValue，且数组为空，会抛出 TypeError。
  • 如果没有提供 initialValue，则从索引 1 开始迭代，previousValue 为数组第一个元素。
  • 对于稀疏数组，跳过空槽，但索引会递增。
  • 不像其它方法，reduce方法不接受参数thisArg
23.2 手写实现
MyArray.prototype.reduce = function(callbackFn, initialValue) {
    if (typeof callbackFn !== 'function') {
        throw new TypeError(callbackFn + ' is not a function');
    }

    let length = this.length >>> 0;
    let k = 0;
    let accumulator;

    if (arguments.length > 1) {
        accumulator = initialValue;
    } else {
        // 找到第一个有效值作为初始值
        while (k < length && !(k in this)) {
            k++;
        }
        if (k >= length) {
            throw new TypeError('Reduce of empty array with no initial value');
        }
        accumulator = this[k++];
    }

    for (; k < length; k++) {
        if (k in this) {
            accumulator = callbackFn(accumulator, this[k], k, this);
        }
    }

    return accumulator;
};


// 测试用例
let arr_5 = new MyArray(1, 2, 3, 4);
let sum = arr_5.reduce((prev, curr) => prev + curr);
console.log(sum); // 10

let arr_6 = new MyArray().concat([1, , 3, 4]);
let sum2 = arr_6.reduce((prev, curr) => prev + curr, 0);
console.log(sum2); // 8

难点总结：

  • 处理初始值：需要正确处理是否提供了 initialValue。
  • 处理稀疏数组：跳过空槽，但索引和循环计数需要正确。
  • 错误处理：当数组为空且未提供 initialValue 时，需要抛出错误。

24 Array.reduceRight()

24.1 基本介绍

reduceRight() 方法对数组中的每个元素执行一个 reducer 函数（从右到左），将其结果汇总为单个返回值。

array.reduceRight(callbackFn)
array.reduceRight(callbackFn, initialValue)

输入参数：

  • callbackFn(previousValue, currentValue, currentIndex, array)：一个函数，用于执行数组中的每个元素，包含四个参数。
  • initialValue（可选）：作为第一次调用 callbackFn 时的第一个参数的值。如果没有提供初始值，则使用数组中的最后一个元素。

输出：累加器最终的结果值。

注意事项：

  • 如果没有提供 initialValue，且数组为空，会抛出 TypeError。
  • 如果没有提供 initialValue，则从索引 length - 2 开始迭代，previousValue 为数组最后一个元素。
  • 对于稀疏数组，跳过空槽，但索引会递减。
24.2 手写实现
MyArray.prototype.reduceRight = function(callbackFn, initialValue) {
    if (typeof callbackFn !== 'function') {
        throw new TypeError(callbackFn + ' is not a function');
    }

    let length = this.length >>> 0;
    let k = length - 1;
    let accumulator;

    if (arguments.length > 1) {
        accumulator = initialValue;
    } else {
        // 找到最后一个有效值作为初始值
        while (k >= 0 && !(k in this)) {
            k--;
        }
        if (k < 0) {
            throw new TypeError('Reduce of empty array with no initial value');
        }
        accumulator = this[k--];
    }

    for (; k >= 0; k--) {
        if (k in this) {
            accumulator = callbackFn(accumulator, this[k], k, this);
        }
    }

    return accumulator;
};

// 测试用例
let arr_7 = new MyArray(1, 2, 3, 4);
let result = arr_7.reduceRight((prev, curr) => prev - curr);
console.log(result); // -2 ((4 - 3) - 2) - 1

let arr_8 = new MyArray().concat([1, , 3, 4]);
let result2 = arr_8.reduceRight((prev, curr) => prev + curr, 0);
console.log(result2); // 8

难点总结：

  • 处理初始值：需要正确处理是否提供了 initialValue。
  • 处理稀疏数组：跳过空槽，但索引和循环计数需要正确。
  • 错误处理：当数组为空且未提供 initialValue 时，需要抛出错误。

25 Array.reverse()

25.1 基本介绍

reverse() 方法将数组中元素的位置颠倒，并返回该数组。第一个元素会成为最后一个，最后一个元素会成为第一个。

array.reverse()

输入参数：无。

输出：颠倒顺序后的数组，原数组已被修改。

注意事项：

  • reverse() 方法会修改原数组，是一个修改方法。
  • 对于稀疏数组，reverse() 会保留空槽的位置。
25.2 手写实现
MyArray.prototype.reverse = function() {
    let length = this.length >>> 0;
    let middle = Math.floor(length / 2);

    for (let i = 0; i < middle; i++) {
        // 判断存在性，为是否删除元素提供依据
        let lowerExists = i in this;
        let upperExists = (length - 1 - i) in this;

        // 根据存在性获取值
        let lowerValue = lowerExists ? this[i] : undefined;
        let upperValue = upperExists ? this[length - 1 - i] : undefined;

        // 进行交换流程
        if (lowerExists) {
            this[length - 1 - i] = lowerValue;
        } else {
            // 如果交换过来的值是空槽，删除对应的属性
            delete this[length - 1 - i];
        }

        if (upperExists) {
            this[i] = upperValue;
        } else {
            delete this[i];
        }
    }

    return this;
};

// 测试用例
let arr_9 = new MyArray(1, 2, 3, 4);
arr_9.reverse();
console.log(arr_9); // [4, 3, 2, 1]

let arr_10 = new MyArray().concat([1, , 3]);
arr_10.reverse();
console.log(arr_10); // [3, , 1]

难点总结：

  • 处理稀疏数组：需要正确处理空槽的位置，交换元素时如果元素不存在，那么使用delete操作符删除对应位置上的元素。
  • 原地修改：需要在原数组上进行修改，不能创建新数组，所以需要提前对元素的存在性和值进行判断。
  • 交换元素：需要注意元素的存在性，避免错误覆盖或删除。
It'sMyGo
关注
专栏目录
手写js数组map方法
m0_45421315的博客
06-16 640
手动实现js的map方法
JavaScript手写一个map方法
weixin_71893790的博客
12-10 254
手写map方法的实现
数组 | Array_API（含手写原理）
weixin_49179577的博客
07-08 518
总结JavaScript中数组相关API包含手写原理，一起学习吧
javascript面试题大全_Js基础面试题（附答案）
m0_64460287的博客
02-21 2302
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
_improve-1
loveX001的博客
02-26 621
1. JS内置类型JavaScript 的数据类型有下图所示JavaScript 中的数据是如何存储在内存中的？在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是、、。其中的代码空间主要是存储可执行代码的，原始类型()的数据值都是直接保存在“栈”中的，引用类型(Object)的值是存放在“堆”中的。因此在栈空间中(执行上下文)，原始类型存储的是变量的值，而引用类型存储的是其在"堆空间"中的地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，相当于多了一道
_hand-2
beifeng11996的博客
02-26 154
入口 实现Dep 实现watcher 实现compiler 实现Observer 使用 ----------@---------- ----------@---------- ----------@----------基础的代码： 简单实现： 封装成一个class: ----------@----------简单实现 2. 迷你版 ----------@---------- ----------@---------- ----------@---------- ----------@----------
JavaScript - 数组及手写数组方法
车车的博客
06-18 956
JS - 数组声明一个数组1.构造函数2.直接量的形式3.ES6 新增API Array.of(...args)4.ES6 新增API Array.from(args):通过给定的类数组 或 可迭代对象 创建一个新的数组数组的方法1.基本方法改变原数组不改变原数组2.扩展方法及实现 声明一个数组 1.构造函数 let arr = new Array(); //空数组 let arr = new Array(5); //长度为5的空数组 (若只有一个数字，表示的是数组长度) 2.直接量的形式
JavaScript 数组
baipenggui_bo
11-04 457
如何定义数组？遍历、访问数组；向数组添加元素；判断是否是数组；向数组追加元素；删除数组；合并数组；在数组的指定位置删除、添加元素；把数组转换为字符串；将新元素添加到数组的开头；按字母顺序对数组进行升序排序；传入比较函数对数值进行排序；取数组中最大的数；按数字属性给对象进行排序；Array.forEach()；Array.map()；Array.filter()；Array.every()；Array.some()；Array.reduce()；Array.indexOf()；Array.find()；
js手写数组api
wo_wudi的博客
05-17 636
js手写数组api本文涉及数组的api有
JS中防抖函数介绍与实现（秒懂如何手写防抖）
百赢出品，必属精品
04-01 1888
函数防抖是一种用于限制函数执行频率的技术。在JavaScript中，函数防抖常用于处理频繁触发的事件，如浏览器窗口的resize事件、滚动事件、输入框的输入事件等。它通过延迟函数的执行来确保在一定时间内只执行一次。可以避免频繁触发事件造成不必要的资源消耗或执行结果混乱的情况，而只关注最后一次触发事件的结果。1.当事件被触发时，不立即执行事件处理函数，而是等待一段时间（延迟时间）。2.如果在这段时间内事件再次被触发，则重新计时，延迟时间重新开始计算。3.直到延迟时间内没有再次触发事件，才执行事件处理函数。
JS中节流函数介绍与实现（秒懂如何手写节流）
百赢出品，必属精品
04-03 2131
它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。节流函数在实际开发中经常被用来优化高频触发的事件处理，例如在页面滚动、输入框输入等场景下，通过节流来控制函数的执行频率，从而提升页面性能和用户体验。节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。基本实现手写防抖函数。
前端面试-JavaScript
wanglu458512的博客
09-19 506
一、数据类型 JavaScript有哪些数据类型，它们的区别？ 7种原始数据类型：undefined\boolean\number\string\bigInt\symbol\null，前6种使用typeof运算符检查，特殊的null使用其检测结果为object； 3种引用数据类型：对象、数组、函数 区别： 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影
「2021」高频前端面试题汇总之JavaScript篇（上）
CSDN_KONGlX的博客
07-07 571
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
JavaScript 生成二维码
qq_30049249的博客
11-02 219
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 311
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 94
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 73
创建Vue实例 Vue指令
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
最新发布
cx18333的博客
11-05 378
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
手写JavaScript数组常用函数详解与实现
本文主要介绍了如何在JavaScript中手写常用的数组函数，包括forEach、filter、find、findIndex、map、some、every、reduce和reduceRight。这些函数在开发过程中是极其常见的，它们提供了对数组进行遍历、筛选、查找...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

It'sMyGo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值