JavaScript 手写代码 第三期

这篇具有很好参考价值的文章主要介绍了JavaScript 手写代码 第三期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 为什么要手写代码?

我们在日常开发过程中,往往都是取出来直接用,从来不思考代码的底层实现逻辑,但当我开始研究一些底层的东西的时候,才开始理解了JavaScript每个方法和函数的底层实现思路,我认为这可以很好的提高我们的代码水平和逻辑思维。

2. 手写代码

2.1 函数柯里化

2.1.1 基本使用

函数柯里化指的是一种将多个参数的一个函数转换成一系列使用一个参数的函数的技术

            // 正常使用
            function sum(a, b, c) {
                return a + b + c;
            }
            console.log(sum(1, 2, 3));
            
            // 函数柯里化实现上面的操作
            function sum1(a) {
                return function (b) {
                    return function (c) {
                        return a + b + c;
                    };
                };
            }
            console.log(sum1(1)(2)(3));

函数柯里化其实就是利用了闭包,大家想了解闭包可以转到我的博文 闭包

2.1.2 手写实现

            function curry(fn, ...args) {
                let length = fn.length;
                args = args || [];
                return function () {
                    let subArgs = args.slice(0);
                    // 合并所有的参数
                    subArgs = [...subArgs, ...arguments];
                    // 判断参数的长度是否已经满足函数所需要的长度
                    if (subArgs.length >= length) {
                        return fn.apply(this, subArgs);
                    } else {
                        // 返回柯里化化函数,等待继续传递参数
                        return curry.call(this, fn, ...subArgs);
                    }
                };
            }

可以进行测试
传入方法sum

          function sum(a, b, c) {
                return a + b + c;
          }

发现可以正常打印出结果,成功实现 函数柯里化

            let add = curry(sum);
            console.log(add(1)(1, 2, 3)); // 6
            console.log(add(1)(2)(3)); // 6
            console.log(add(1, 2, 3));
            console.log(add()(1, 2, 3));

函数柯里化的简单实现方法
一行代码搞定

function curry1(fn, ...args) {
	return fn.length <= args.length ? fn(...args) : curry1.bind(null, fn, ...args);
}

主要利用了bind在改变this指向的同时,也可以传递参数
案例如下就可以理解了

            function fn(a, b, c) {
                console.log(a, b, c);
            }
            let fn1 = fn.bind(null, 1, 2);
            fn1(3); // 1,2,3

正常打印出了 1,2,3

2.2 sleep函数

2.2.1 简单使用

sleep是一种函数,作用是延时,程序暂停若干时间,在执行时要抛出一个中断异常,必须对其进行捕获并处理才可以使用这个函数。
js 中是没有这个函数的,需要我们手写实现使用

2.2.2 手写实现

方法一 利用了promise异步处理和定时器

            function sleep(delay) {
                return new Promise((resolve) => {
                    setTimeout(resolve, delay);
                });
            }
            sleep(1000).then(() => {
                console.log('111');
            });

一秒后打印出111
方法二 利用了定时器setTimeout和回调函数写法

            function sleep(delay, callback) {
                setTimeout(callback, delay);
            }
            sleep(1000, () => {
                console.log(1000);
            });

方法三 利用了Date函数时间戳写法。精确计算。

            function sleep(delay) {
                let startTime = new Date().getTime();
                while (new Date().getTime() - startTime < delay) {
                    // 只要还没有到特定事件,就一直在循环内,
                    // 到了规定延迟后,跳出循环,指向下面的方法
                    continue;
                }
            }
            console.log('1111');
            sleep(5000);
            console.log('2222');

2.3 Object.assign() 方法

2.3.1 基本使用

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign(target, …sources) 

第一个参数target: 即目标对象,目标对象的值会发生改变。
第二个参数souce:源对象(可多个)源对象不会发生改变

2.3.2 具体示例

            let obj = { name: 'zs' };
            let obj1 = { name: 'lisi' };
            let obj2 = { age: 20 };
            let newObj = Object.assign(obj, obj1, obj2);
            console.log(newObj); // {name: 'lisi', age: 20}
            console.log(obj);  // {name: 'lisi', age: 20}
            console.log(obj1); // {name: 'lisi'}
            console.log(obj2); // {age: 20}

细心的大家可以发现,目标对象里面的值被源对象里面的值覆盖了。

注意:如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性

2.3.3 具体思路

大家通过上面的示例不能发现 Objec.assign() 到底干了什么,通过 遍历 sources 里面的对象属性,依次添加到 目标对象上,遇到相同的属性,目标对象的属性值直接被覆盖,最后返回目标对象合并后的值,并且 目标对象的值 也会被改变。

2.3.4 具体实现

小知识: Object.assign()方法在Object 对象上,并不是在它的原型对象上,myAssign()加粗,表示是我们新增的方法,而 assign 是自带的方法
JavaScript 手写代码 第三期

            Object.myAssign = function (target, ...sources) {
                if (target == null) {
                    throw new TypeError('Cannot convert undefind or null to object');
                }
                sources.forEach((source) => {
                    if (source != null) {
                        // 遍历每一个对象里面的属性,会遍历到原型上面的属性
                        for (let key in source) {
                            // 判断该属性是不是对象自身的属性
                            if (source.hasOwnProperty(key)) {
                                target[key] = source[key];
                            }
                        }
                    }
                });
                // 将合并后的对象返回即可
                return target;
            };

测试上面实现的代码

            let newObj = Object.myAssign(obj, obj1, obj2);
            console.log(newObj); // {name: 'lisi', age: 20}
            console.log(obj); // {name: 'lisi', age: 20}
            console.log(obj1); // {name: 'lisi'}
            console.log(obj2); // {age: 20}

打印输出结果完成,成功实现。文章来源地址https://www.toymoban.com/news/detail-498347.html

欢迎大家在讨论学习,感谢大家支持

到了这里,关于JavaScript 手写代码 第三期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 低代码是什么意思?企业为什么要用低代码平台?

    低代码是什么意思?企业为什么要用低代码平台? 这两个问题似乎困扰了很多人,总有粉丝跟小简抱怨, 一天到晚念叨低代码,倒是来个人解释清楚啊! 来了,这次一文让你全明白。 在此之前,先了解什么是云计算。 “云” :指的就是互联网,因为之前互联网(Internet)

    2024年02月07日
    浏览(43)
  • 华为云低代码问答——低代码为什么这么“香”

    在数字化转型的大潮中,快速实现业务需求并迅速推出应用程序是企业成功的关键。而低代码平台,则成为了开发者的好帮手,为他们提供了高效、可扩展且可靠的开发解决方案。本期【云享问答】通过这11个问题,带你熟悉低代码开发,认识华为云低代码平台Astro,实现应用

    2024年02月21日
    浏览(32)
  • 为什么 Python 代码在函数中运行得更快?

    哈喽大家好,我是咸鱼 当谈到编程效率和性能优化时,Python 常常被调侃为“慢如蜗牛” 有趣的是,Python 代码在函数中运行往往比在全局范围内运行要快得多 小伙伴们可能会有这个疑问:为什么在函数中运行的 Python 代码速度更快? 今天这篇文章将会解答大家心中的疑惑 原

    2024年02月08日
    浏览(49)
  • 屎山代码为什么不去重构的探讨

    现在公司的产品,从出生到现在已经有十多年了,现在仍然在持续的功能构建中。当然我来这里,看代码才几天的时间,那是憋得是相当难受,看一下,其中的一段比较核心的逻辑的代码,一张图截不了,是的,你没看错,上千行的一个函数挺多,里面大量的if else,上面还有

    2024年01月18日
    浏览(37)
  • 为什么说低代码的出现是时代的选择?

    前言:作为一种软件开发工具,低代码平台一定程度上提升了企业的软件开发效率,适应了整体的数字化发展趋势,故可以看到,低代码近几年的热度不可小觑。 随着企业对应用程序的开发和升级需求不断激增,许多低代码工具越来越受欢迎,国内有各类SaaS、云服务等厂商

    2024年02月03日
    浏览(32)
  • 为什么越来越多公司开始用低代码开发?

    时代洪流的走向,我们无法左右,能够把握的,只有做好自己。如何在寒冬来之不易的机会中,生存并且壮大。 不知道大家有没有发现,今年的低代码赛道异常火热,但火热的背后才值得思考,市场需求持续被挖掘,是什么造就了目前诸多低代码平台的井喷? 在低代码应用

    2024年02月04日
    浏览(52)
  • 从CPU的视角看 多线程代码为什么那么难写!

      当我们提到多线程、并发的时候,我们就会回想起各种诡异的bug,比如各种线程安全问题甚至是应用崩溃,而且这些诡异的bug还很难复现。我们不禁发出了灵魂拷问 “为什么代码测试环境运行好好的,一上线就不行了?”。 为了解决线程安全的问题,我们的先辈们在编

    2024年02月02日
    浏览(56)
  • 代码的坏味道(二)——为什么建议使用模型来替换枚举?

    在设计模型时,我们经常会使用枚举来定义类型,比如说,一个员工类 Employee,他有职级,比如P6/P7。顺着这个思路,设计一个 Level 类型的枚举: 假设哪天悲催的打工人毕业了,需要计算赔偿金,简单算法赔偿金=工资*工龄 后来,随着这块业务逻辑的演进,其实公司是家具备

    2024年02月08日
    浏览(38)
  • 一行代码就能完成的事情,为什么要写两行?

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 三元运算符 用三元运算符代替简单的 if else 改用三元运算符,一行就能搞定 复杂的判断三元运算符就有点不简单易懂了 判断 当需要判断的情况不止一个时,第一个

    2023年04月16日
    浏览(30)
  • stm32下载代码到单片机上需要调节BOOT为什么模式

    一、BOOT模式选择图解   二、BOOT模式介绍 所谓启动,一般来说就是指下好程序后,重启芯片时,SYSCLK的第4个上升沿,BOOT引脚的值将被锁存。用户可以通过设置BOOT1和BOOT0引脚的状态,来选择在复位后的启动模式。 A.   Main Flash memory 是STM32内置的Flash,一般我们使用JTAG或者S

    2023年04月15日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包