一些手写JavaScript常用的函数汇总

在JavaScript中,几乎每次编写一段代码时,通常都会写入一个函数。我们的大部分代码执行都是函数调用的结果。所以本文主要给大家介绍了一些JavaScript常用的函数,下面话不多说了,来一起看看详细的介绍吧

JavaScript常用的函数

一、bind、call、apply函数的实现改变函数的执行上下文中的this指向,但不执行该函数(位于Function构造函数的原型对象上的方法)

Function.prototype.myBind = function (target) { if (typeof this !== 'function') { throw Error('myBind is not a function') } var that = this var args1 = [...arguments].slice(1) var func = function () { var args2 = [..arguments].slice(1) return that.apply(target || window, args1.concat(args2)) } return func } Function.prototype.myCall = function (context=window) { if (typeof this !== 'function') { throw Error('myBind is not a function') } context.fn = this var args = [...arguments].slice(1) var result = context.fn(..args) delete context.fn return result } Function.prototype.myApply = function (context=window) { if (typeof this !== 'function') { throw Error('myApply is not a function') } context.fn = this var result if (argument[1]) { result = context.fn(...arguments[1]) } else { result = context.fn() } delete context.fn return result }

二、引用数据类型的深拷贝方法的实现

function cloneDeep (target) { function checkType(target) { return Object.prototype.toString.call(target).slice(8, -1) } var result, checkedType = checkType(target) if (checkedType === 'Array') { result = [] } else if (checkedType === 'Object') { result = {} } else { return target } //递归遍历对象或数组中的属性值或元素为原始值为止 for (var key in target) { if ( checkType(target[key]) === 'Array' || checkType(target[key]) === 'Object') { result[key] = cloneDeep(target[key]) } else { result[key] = target[key] } } return result }

思路:

输入需要深拷贝的目标target,输出深拷贝后的结果

通过Object.prototype.toString准确判断传入的目标target的数据类型,当target的数据类型为对象或者数组时,会对target进行递归遍历直至当遍历的数组或者对象中的数据全部为基本数据类型为止

三、数组flat函数的实现

Array.prototype.flat

四、实现n的阶乘

分析:首先找规律,举例如3的阶乘等于3*2*1,也就是等于n*n-1*n-2的阶乘,也就是等于3*2*1的阶乘,计算到1的阶乘之后,整个计算过程才结束。分析到很容易想到通过递归来实现这个数的阶乘,因为第一,这个计算过程有规律可循,第二它有最终停止计算的出口,也就是当计算到1的时候就停止运算,以下通过递归来实现

function factorial (num) { if (num < 0) { throw new Error('负数没有阶乘') } if (num === 1 || num === 0) { return 1 } return num * factorial(num-1) } factorial(3) //6

五、实现斐波拉契数列

分析:按照上述阶乘的分析过程分析,这里不赘述

function fibonacci (n) { //此方法应使用尾递归法进行优化,这里不作优化,简单实现 if ( n <= 1 ) {return 1}; return fibonacci(n - 1) + fibonacci(n - 2);}

六、实现一个计算字符串字节长度的函数

分析:首先我们要知道英文的字节长度是1,而中文的字节长度是2,但是如何判断当前字符位是汉字还是英文呢,通过charCodeAt来判断当前字符位的unicode编码是否大于255,如何大于255则是汉字,那就给字符串的字节长度加2,如果小于255则是英文,就给字符串的字节长度加1,以下按照这个思路实现

function countBytesLength(str){ var length = 0 //首先遍历传入的字符串 for(var i = 0; i < str.length; i++) { if (str[i].charCodeAt(i) > 255) { length += 2 } else { length++ } } return length } var str = 'DBCDouble陈' countBytesLength(str) //11

七、实现isNaN函数

分析:要判断传入的值是否是"is not a number"(isNaN全拼),首先进行一个数字的隐式类型转换,通过Number包装类来实现Number(x),再判断Numberz(x)的返回值是否是NaN,如果是的话再与NaN进行比对,但是由于NaN虽然是number类型的,但是是不能进行比较的,所以我们先将Number(x)返回的结果变成字符串形式,再去判断,实现如下

function isNaN(num) { var ret = Number(num) ret += '' if (ret === 'NaN') { return true } return false } isNaN('123abc') // true

八、实现数组的push函数

分析:首先push函数是位于Array构造函数的原型对象上的方法,所以要在Array.prototype上去定义,然后再分析push函数的作用是往数组的末尾添加元素,可以添加任意个数的元素,并且最终返回数组的长度,实现代码如下

Array.prototype.push = function () { for (var i = 0; i< arguments.length; i++) { this[this.length] = arguments[i] } return this.length }

七、实现能够识别所有数据类型的typeof分

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/2d462f58a0c14fa1a450950aa1b077cc.html