js之各种实现

最新推荐文章于 2022-08-16 18:19:23 发布
最新推荐文章于 2022-08-16 18:19:23 发布
阅读量156 收藏
点赞数
文章标签： json
原文链接：https://juejin.im/post/5c696978f265da2dbc597c41
版权 
[1,2,3].map(parseInt) // 1, NaN, NaN
复制代码
// 实现连续的密集数组
Array.from({length: 100})
Array.apply(null, {length: 100})
[...Array(100)]
(function(){
    let i = 0
    let a = []
    let timer = setInterval(() => {
        if(i < 100){
            a.push(i)
            i++
        }else{
            clearInterval(timer)
            console.log(a)
        }
    })
})()
(function(){
    let i = 0
    let a = []
    function addItem(){
        if(i < 100){
            a.push(i)
            i++
            requestAnimationFrame(addItem)
        }else{
            console.log(a)
        }
    }
    
    requestAnimationFrame(addItem)
})()
复制代码
function Foo () {
    getName = function () { alert(1) }
    return this
}
Foo.getName = function () { alert(2) }

Foo.prototype.getName = function () { alert(3) }

var getName = function () { alert(4) }

function getName () { alert(5) }

//输入的值
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

// 答案 2 4 1 1 2 3 3

复制代码

数组扁平化

function flatDeep(arr){
    return Array.isArray(arr) ? arr.reduce((a, b) => [...a, ...flatDeep(b)], [])
}
function flatDeep(arr, origin){
    origin = origin || []
    return Array.isArray(arr) ? arr.map(item =>{flatDeep(item, origin)}) : origin.push(arr)
}
let a = []
flatDeep([1, [[2], [3, [4]], 5]], a)
复制代码
0.1 + 0.2 != 0.3
// 计算机内部十进制整数转二进制方法：除2取余；十进制小数转二进制方法：乘2除整
0.1 * 2 = 0.2 取整 0
0.2 * 2 = 0.4 取整 0
0.4 * 2 = 0.8 取整 0
0.8 * 2 = 1.6 取整 1
0.6 * 2 = 1.2 取整 1
0.2 * 2 = 0.4 取整 1
。。。
因此0.1 在计算机里理论上应该是无限循环的二进制数，
但是计算机不可能无限大，因此后面的位数会被舍掉
js是遵循IEEE754标准的语言，二进数由64位表示，
一位表示符号位，11位为指数位，后52位表示有效数字，存储小数
复制代码

call和apply方法实现

Function.prototype.call2 = function(context){
    context = context || window
    context.fn = this
    let args = [...arguments].slice(1)
    let result = context.fn(...args)
    delete context.fn
    return result
}
Function.prototype.apply2 = function(context){
    context = context || window
    context.fn = this
    var result
    if(arguments[1]){
        result = context.fn(...arguments[1])
    }else{
        result = context.fn()
    }
    delete context.fn
    return result
}
复制代码

bind方法实现

Function.prototype.bind2 = function(context){
    let self = this
    context = context || window
    let args = [].slice.call(arguments, 1)
    var fBound = function(){
        let bindArgs = [].slice.call(arguments)
        return self.apply(this instanceof fBound ? this : context, args.concat(bindArgs))
    }
    fBound.prototype = Object.create(self.prototype)
    return fBound
}
复制代码

new方法实现

function _new(){
    let context = {}
    let args = [].slice.call(arguments)
    let con = args.shift()
    context = Object.create(con.prototype)
    let ret = con.apply(context, args)
    return (typeof ret == 'object' && ret != null) ? ret : context
    
}
复制代码

js创建对象的方式

// 工厂模式
function createObj(name){
    let obj = {}
    obj.name = name
    obj.say = function(){
        return obj.name
    }
}
// 构造函数模式
function Person(name){
    this.name = name
    this.say = function(){
        return this.name
    }
}
var person = new Person('Mike')
// 原型模式
function Person(){}
Person.prototype.name = 'Mike'
Person.prototype.say = function(){
    return this.name
}
// 构造函数和原型组合模式
function Person(name){
    this.name = name
}
Person.prototype.say = function(){
    return this.name
}
var person = new Person('Mike')
// 动态原型模式
function Person(name){
    this.name = name
    if(typeof this.say !== 'function'){
        Person.prototype.say = function(){
            return this.name
        }
    }
}
// 寄生构造函数模式
function Person(name){
    let obj = {}
    obj.name = name
    obj.say = function(){
        return this.name
    }
    return obj
}
// 稳妥构造函数模式
function Person(name){
    let obj = {}
    obj.say = function(){
        return name
    }
    return obj
}
复制代码

js继承

// 原型继承
function Parent(){
    this.name = 'Mike'
}
function Child(){}
Child.prototype = new Parent()
Child.prototype.constructor = Child
console.log(new Child().name) // Mike
// 构造函数继承
function Parent(name){
    this.name = name
}
function Child(name){
    Parent.call(this, name)
}
// 原型和构造函数组合模式
function Parent(name){
    this.name = name
}
Parent.prototype.say = function(){
    return this.name
}
function Child(name){
    Parent.call(this, name)
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
console.log(new Child('Mike').say())
// 原型式继承
function createObj(proto){
    function F(){}
    F.prototype = proto
    return new F()
    // 等价于
    return Object.create(proto)
}
// 寄生组合继承
function Parent(name){
    this.name = name
}
Parent.prototype.say = function(){
    return this.name
}
function Child(name){
    Parent.call(this, name)
    this.age = 8
    
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
let child = new Child('Mike')
console.log(child instanceof Child) // true
console.log(child instanceof Parent) // true
复制代码

js原型与原型链

原型与原型链

js类型判断

基本类型判断 typeof 但是typeof null === 'object' typeof (function a(){}) === 'function'

实例判断 instanceof new Person() instanceof Person

内置对象 toString 可以判断的类型有
var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]
Object.prototype.toString.call(Math); // [object Math]
Object.prototype.toString.call(JSON); // [object JSON]
Object.prototype.toString.call(arguments); // [object Arguments]
// 判断是否为plainObject--由Object创建的对象，或者原型为null的对象
function plainObject(obj){
    let class2type = {}
    hasOwn = class2type.hasOwnProperty
    if(typeof obj != 'object' || !obj) return false
    let proto = Object.getPropertyOf(obj)
    if(!proto){
        return true
    }
    let ctor = proto.constructor
    // 对于函数的toString方法判断，要找Function.property上的toString方法
    return typeof ctor === 'function' && hasOwn.toString.call(ctor) === hasOwn.toString.call(Object)
}
复制代码

js深浅拷贝

function shallow(src){
    if(typeof src === 'object'){
        let target = src instanceof Array ? [] : {}
        for(let key in src){
            if(src.hasOwnProperty(key){
               target[key] = src[key] 
            }
        }
        return target
    }
    return
}
function deep(src){
    if(typeof src === 'object'){
        let target = src instanceof Array ? [] : {}
        for(let key in src){
            if(src.hasOwnProperty(key)){
                target[key] = typeof src[key] == 'object' ? deep(src[key]) : src[key]
            }
        }
        return target
    }
    return
}
function deepObject(src){
    let copy = Object.create(Object.getPropertyOf(src)
    copyProperties(src, copy)
    return copy
    function copyProperties(src, copy){
        Object.getOwnPropertyNames(src).forEach(propKey => {
            Object.defineProperty(copy, propKey, Object.getPropertyDescriptor(src, propKey))
        })
    }
}
function deepObjectEs7(src){
    return Object.create(Object.getPropertyOf(src), Object.getOwnPropertyDescriptors(src))
}
复制代码

防抖

// 多用于鼠标事件，滚动事件，表示当事件停止一定时间后响应
function debounce(func, wait){
    var timer
    return function(){
        let args = arguments
        let context = this
        clearTimeout(timer)
        timer = setTimeout(() => {
            func.apply(context, args)
        }, wait)
    }
}
function debounce(func, wait, immediate){
    var timer
    return function(){
        let args = arguments
        let context = this
        if(timer) clearTimeout(timer)
        if(immediate){
            let callNow = !timer
            timer = setTimeout(() => {
                timer = null
            })
            if(callNow){
                func.apply(context, this)
            }
        }else{
            timer = setTimeout(() => {
                func.apply(context, this)
            }, wait)
        }
    }
}
复制代码

节流

// 多用于文本输入，表示在用户连续输入期间，一定时间间隔后响应，定期发生
// 时间戳实现方式 满足立即执行一次
function throttle(func, wait){
    let prev = 0
    return function(){
        let context = this
        let args = arguments
        let now = + new Date()
        if(now - prev > wait){
            func.apply(context, args)
            prev = now
        }
    }
}
// 定时器实现方式 满足离开后还会执行一次
function throttle(func, wait){
    let timer
    return function(){
        let context = this
        let args = arguments
        if(!timer) {
            timer = setTimeout(() => {
                func.apply(context, args)
                timer = null
            },wait)
        }
    }
}
// 第三版 
function throttle(func, wait){
    let timer
    let prev = 0
    let context 
    function later(){
        timer = null
        func.apply(context, args)
        prev = + new Date()
    }
    return function(){
        context = this
        let args = arguments
        let now = + new Date()
        let remain = wait - (now - prev)
        if(remain < 0 || remain > wait){
            if(timer){
                clearTimeout(timer)
                timer = null
            }
            func.apply(context, args)
        }else if(!timer){
            timer = setTimeout(later, remain)
        }
        
    }
}
// leading: 是否立即执行
// tailing: 最后一次是否执行
function throttle4(func, wait, options) {
    let prev = 0
    let timer
    let result
    if (!options) {
        options = {}
    }
    return function () {
        let context = this
        let args = arguments
        let now = + new Date()
        if (!prev && !options.leading) {
            pre = now
        }
        let remaining = wait - (now - prev)
        if (remaining < 0 || remaining > wait) {
            if (timer) {
                clearTimeout(timer)
                timer = null
                prev = now
            }
            result = func.apply(context, args)
        } else if (!timer && options.tailing) {
            this.timer = setTimeout(() => {
                func.apply(context, args)
                timer = null
                prev = options.leading == false ? 0 : new Date()
            }, remaining)
        }
        return result
    }
}
复制代码
weixin_34327223
关注
JS-Javascript实现
malechi的博客
04-18 346
一个完整的JavaScript的实现由三个部分组成： 核心：ECMAScript 文档对象模型：DOM 浏览器对象模型：BOM ECMAScriptES6新增功能letconstClassimport解构赋值 ECMAScript 什么是 ES ECMAScript（简称ES）是由ECMA-262定义的。 ES 与 JS ES可以理解为是JavaScript的一个标准。实际上，JavaScr...
基于js正则 匹配实现的物流地址智能识别【javascript】
最新发布
08-22
基于js正则匹配实现的物流地址智能识别 智能识别地址 例如:小埋13000000000广东省广州市天河区体育西路xx号 一键解析地址为： 收货人：小埋 电话：1300000000 省市区：广东省广州市天河区 地址：体育西路xx ...
js实现
weixin_34336526的博客
06-30 56
1，核心 ECMAScript 2，文档对象模型DOM 3，浏览器对象模型BOM
JS 实现
weixin_30622107的博客
08-20 143
JavaScript 使用 HTML 中的脚本必须位于<script> 与 </script>标签之间。 脚本可被放置在 HTML 页面的 <body>和 <head> 部分中。 <script> 标签 如需在 HTML 页面中插入 JavaScript，请使用 <script>标签。 <script&gt...
JS常见方法实现
a3513555的博客
08-20 839
1.new的实现 new Foo(...) new一个对象就是创建一个新对象，这个新对象既拥有Foo的constructor里的属性，又继承了Foo.prototype，并返回这个新对象。 步骤如下： 1、创建一个空对象; 2、让空对象的__proto__（IE没有该属性）成员指向了构造函数的prototype成员对象 3、使用apply调用构造器函数，属性和方法被添加到 this 引用的对象中 4、如果构造函数中没有返回其它对象，那么返回 this，即创建的这个的新对象，否则，返回构造函数中
JS功能实现
WJLSH123的博客
07-29 405
开发中遇到的一些有用的功能
automa.js:实现有限状态机的 JavaScript 库
07-13
实现有限状态机的 JavaScript 库 您可以轻松定义状态和事件，例如 STATE = { S1 : "State 1", S2 : "State 2" }; EVENT = { E1 : "Event 1", E2 : "Event 2" }; 然后通过声明初始状态（又名入口点）来实例化一...
jsdiff：JavaScript文字差异实现
02-27
JavaScript文字差异实现。 基于提出的算法。 安装 npm install diff --save 原料药 Diff.diffChars(oldStr, newStr[, options]) -比较两个文本块，逐个字符比较。 返回更改对象列表（请参见下文）。 选项 ...
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】.docx
01-13
JavaScript 实现写入文件到本地的方法【基于 FileSaver.js 插件】 JavaScript 实现写入文件到本地的方法是指在客户端使用 JavaScript 实现将文件保存到本地计算机的方法。由于 JavaScript 基于安全考虑，不允许直接...
使用JavaScript 实现各种跨域的方法
12-12
基于纯文本、被原生JS支持。 　格式：两种数据类型描述符：大括号{ }、方括号[ ]。分隔符逗号、映射符冒号、定义符双引好。 ④JSONP：一种跨域数据交互协议，非官方。 　1、Web页面调用js文件，可跨域。扩展：但凡有...
js实现倒计时
09-20
javascript实现倒计时
JavaScript的实现(ECMAScript，DOM，BOM)
baidu_38953088的博客
06-25 461
本文内容JavaScript的构成（ECMAScript、DOM、BOM）的学习与理解。
JS-简单实现1
xllfy123的博客
06-20 181
正在xiaoxi JS的小白偶然看到博客中一个关于jquery的小项目，于是拿来学习，然后自己用js初步实现了一下，可是小白毕竟还是小白…… 参考链接https://blog.csdn.net/dapyandxpy/article/details/73350506谢大佬 jquery实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
JS实现简单的“销魂”小游戏
小白小白从不日别的博客
10-23 3134
先看最终的成果吧！！！ 目录 思路： 难点： 解决如何利用一张“幽灵”图使其产生多张在水平方向随机的幽灵： 当点击“PLAY”按钮后，实现幽灵上浮效果 ： 如何在“幽灵”身上随机产生字母： 在键盘上按下对应的键，幽灵消失： 源码： 思路： 用一张背景图当做游戏界面，一张图片当做游戏按钮，当点击“PLAY”按钮后，背景音乐开始播放、“幽灵”开始随机出现 控制键盘的“keydown”事件，当“点击”了“幽灵”身上的对应的字母时，幽灵就被销毁 难点： 如何利用...
js常用功能的实现
weixin_44870969的博客
01-14 1982
js功能的实现1、列表的自动滚动 1、列表的自动滚动
js实现的心性
zhangjinlei00的专栏
12-06 407
Love                     var d = document;            canvas = d.body.appendChild( d.createElement( 'canvas' ) );              context = canvas.getContext( '2d' );             time = 0;
js常规方法实现
weixin_44680009的博客
08-16 270
js 常规方法实现
js-异步实现
xie__jin__cheng的博客
09-30 275
一、回调函数 需求 假定有两个函数f1和f2，后者等待前者的执行结果。 代码 f1(); f2(); //如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。 function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); ...
js--一些很多实现方法的总结
m0_58847961的博客
04-25 812
数据扁平化 数据扁平化是指将多维数组转化为一维数组。 实现： Array.prototype.flat直接实现数组扁平化arr.flat()括号里面传入你需要把几级中括号进行解析，如果不知道传入Infinity，会把所有的进行解析 toString方法 let result=[] //把其转化为字符串之后用，分割在把每一项转化为数字 result.push(arr.toString().split(',').map(item=>Number(item))) join＋正则表达式
JavaScript实现软键盘代码分享
"这篇文章主要介绍了如何使用JavaScript实现软键盘的功能，包括大键盘和小键盘的实现，适用于网页上的密码输入等场景，以提高安全性。作者提供了相关的源码下载链接，并展示了软键盘的效果图。" 在JavaScript中实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值