Category: Javascript

  • JS中call,apply,bind方法实现

    js中改变this指向一般有三种方式 显示转化主要是通过call,apply,bind方式来实现。下面介绍这三个方法实现的基本原理。 Call实现 Apply实现 Bind实现 bind返回的是一个函数。

  • JS中new实现

    js中通过new关键字去创建对象实例,原理如下:

  • JS获取页面FPS值

    FPS是指每秒钟页面的刷新率,可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为 FPS 值。它接收一个回调函数,该回调函数会在浏览器下一次重绘之前执行。所以只要我们循环调用并记录单位时间内的调用次数就能计算当前页面的帧率了。

  • JavaScript的隐式类型转换详解

    JavaScript中的数据类型 什么是隐式转换 当运算符在运算时,若两端的数据类型不统一,编译器会帮我们自动转换成相同类型的数据,这就是隐式转换。 隐式转换规则 隐式转换是一步一步完成的,如果比较或运算的过程中数据类型仍不一致,最终会将两边数据都转成Number类型再进行运算。 Object => String => Number Boolean => Number null/undefined => Number 什么情况下会发生隐式转换 当运算符两端的数据类型不一致,会触发隐式转换 +可以拼接字符串,也是运算符 Number只有当与Number、Boolean、null、undefined +时才是算术运算符 拼接字符串 非字符串数据先调用String()转化为字符串再进行拼接 对象类型则toString()后拼接 两个非String数据拼接 均变为String 再进行拼接 算术运算符 非Number数据先调用Number()转化为数字,再进行运算 2. -运算符 -运算符只会视为计算,故与引用类型-时,只会返回NaN 3.==运算符 ==只判断值是否相等 ==两边均为引用数据类型时 返回false,因为引用数据类型比较的是地址 引用类型比较 只有长度小于1的数组才有可能转为Number,长度0(空数组) => “” => 0,[1] => “1” => 1 而Function与Object最终不会转成纯Number只能为NaN 根据隐式转换规则 Object => String => Number Boolean =>…

  • Javascript中的高阶函数

    什么是高阶函数 高阶函数是一个接受其他函数作为参数,或返回一个新函数的函数。Javascript中的函数可以作为值来传递和使用,因此高阶函数是JS中的一种常见模式。 使用场景 高阶函数在JavaScript中使用广泛,特别是在函数式编程中。它们可以帮助我们编写更灵活,可重用和可维护的代码。 以下是一些常见的使用场景:

  • js中数组flat方法的使用和实现

    定义 flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 语法 var newArray = arr.flat([depth]) 参数 depth:可选参数,指定提取的嵌套数组的深度,默认值为1 返回值 一个包含将数组与子数组中所有元素的新数组。(就是扁平化后的每一项重新组成的数组,所以不会改变原数组。) 示例 方法实现 通过reduce实现 forEach + 递归实现

  • XMLHttpRequest与Fetch API

    XMLHttpRequest 目前常见的主流浏览器度支持XMLHttpRequest,下面列举一个常见的请求示例: onreadystatechange 回调函数在请求的生命周期中运行好几次;XMLHttpRequest 对象的 readyState 属性则返回当前状态: onreadystatechange 当readyState属性发生变化时,会调用 onreadystatechange函数 status 返回的状态码 statusText 返回的状态 response 响应内容,数据类型通过responseType定义 responseType 值 描述 为空时,默认和text相同 arraybuffer response是一个 ArrayBuffer 对象 blob response是一个 Blob 对象 document response是一个HTML Document 或者 XML Document json response是一个js对象 text response是一个DOMString`对象 timeout 设置请求超时时间,当超时发生后,请求的readyState会变为4(DONE), status由已接受到的200变为0,respose置为空。触发timeout事件。 withCredentials 默认值是false,在跨域请求时,不携带cookie,且响应的Set-Cookie不生效。设置为true时,跨域请求会带上cookie,且响应的Set-Cookie会生效。对同源请求,该属性不生效。 注意: setRequestHeader 设置HTTP请求头,需要在open()函数调用和send()函数调用之间调用。 考虑到安全问题,浏览器会禁止用户设置某些请求头。被禁止的请求头包括 getResponseHeader 获取HTTP响应头 Fetch Fetch是一个全局函数,用来从网络上获取资源,具有两个参数resource,init。返回结果是Promise,请求结束时,返回Response对象。 Fetch 是一个现代基于 promise 的 Ajax 请求…

  • async和defer的区别

    async和defer是Javascript脚本加载的两种特性,主要区别是加载和执行时机不同: async和defer相同点 两者都是异步加载script,加载过程不会阻塞html的解析 async和defer不同点 总结