JavaScript 知识总结下篇(更新版)

91.实现一个 promise

参考链接:实现一个完美符合Promise/A+规范的Promise · Issue #4 · forthealllight/blog · GitHub

function myPromise(constructor) {
    let self = this;
    self.status = "pending" // 定义状态改变前的初始状态
    self.value = undefined;// 定义状态为resolved的时候的状态
    self.reason = undefined;// 定义状态为rejected的时候的状态
    function resolve(value) {
        // 两个 === "pending",保证了状态的改变是不可逆的
       if(self.status === "pending") {
          self.value = value;
          self.status = "resolved";
       }
    }
    function reject(reason) {
        // 两个 === "pending",保证了状态的改变是不可逆的
       if(self.status === "pending") {
          self.reason = reason;
          self.status = "rejected";
       }
    }
    // 捕获构造异常
    try {
       constructor(resolve, reject);
    }
    catch(e) {
       reject(e);
    }
}
// 在myPromise的原型上定义链式调用的then方法
myPromise.prototype.then = function(onFullfilled, onRejected) {
   let self = this;
   switch(self.status) {
      case "resolved":
        onFullfilled(self.value);
        break;
      case "rejected":
        onRejected(self.reason);
        break;
      default:       
   }
}

 92.Function.proto(getPrototypeOf)

获取一个对象的原型,在 chrome 中可以通过proto的形式,或者在 ES6 中可以通过 Object.getPrototypeOf 的形式。

Function.proto 说明 Function 由什么对象继承而来:

Function.__proto__ == Object.prototype;   // false
Function.__proto__ == Function.prototype; // true

说明 Function 的原型也是 Function

93.数组常用方法

push() 和 unshift():向数组的 尾部/头部 添加若干元素,并返回 数组的 新长度;

var arr = [1, 2];
// 向末尾追加元素
arr.push(3, 4);         // arr = [1,2,3,4];
// 向开头追加元素
arr.unshift(6, 7);    // arr = [6,7,1,2,3,4];

pop() 和 shift():从数组的 尾部/头部 删且只删1个元素;空数组是继续删除,且不报错,返回undefined

// 删除末尾元素
arr.pop();      // arr = [6,7,1,2,3];
// 删除开头元素
arr.shift();      // arr = [7,1,2,3]

splice() 方法用于添加或删除数组中的元素,会改变原始数组。

slice() 方法可从已有的数组中返回选定的元素,可提取字符串的某个部分,并以新的字符串返回被提取的部分,不会改变原始数组。

94.数组去重

参考文章:JavaScript中数组去重的几种方法(双循环去重、indexOf去重、相邻元素去重、对象属性去重、set与解构赋值去重、set与Array.form去重)_indexof循环去重_谁是听故事的人的博客-CSDN博客

1.indexOf 循环去重:

返回某个指定的元素在数组中首次出现的位置:定义一个空数组res,调用 indexOf() 方法对原来的数组进行遍历,如果元素不在res中,将其 push 进res中,最后将res返回即可获得去重的数组(判断新数组中是否有a[i],如果没有indexOf,返回-1,把a[i]放入新数组中)

var res = []
for (var i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) == -1) {
        res.push(arr[i]);
    }
}
return res;

2.ES6 Set 去重:

var newArr = Array.from(new Set(arr));

3.Object 键值对去重:

把数组的值存成 Object 的 key 值,比如 Object[val1] = true, 在判断另一个值的时候,如果 Object[val2] 存在,说明该值重复

95.去除字符串首尾空格:使用正则(^\s)|(\s$)

96.性能优化

通过 减少 HTTP 请求;使用内容发布网络(CDN);添加本地缓存;压缩资源文件;将 CSS 样式表放在顶部;把 javascript 放在底部(浏览器的运行机制决定);避免使用 CSS 表达式;减少 DNS 查询;使用外部 javascript 和 CSS;避免重定向;图片懒加载等。

97.跨域的原理

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 js 实施的安全限制,只要协议、域名、端口有任一不同,都被当作不同的域。简而言之,跨域原理即是通过各种方式,避开浏览器的安全限制。

98.暂停死区:在代码块内,使用 let、const 命令声明变量之前,该变量都是不可用的。

99.游戏《Flappy Bird》:一只小鸟在飞,前面是无尽的沙漠,上下不断有钢管生成,要躲避钢管。在玩这个游戏时总出现卡顿甚至崩溃,其原因以及解决办法:

这是单机游戏,回答与网络无关

1.内存溢出问题:在钢管离开可视区域后,销毁钢管;不断生成钢管且不及时清理,容易内存溢出从而游戏崩溃,因此可通过垃圾收集器回收钢管。

2.资源过大问题:选择图片文件更小的图片格式,比如 webp、png 格式,因为绘制图片需要较大计算量。

3.资源加载问题:在可视区域之前预加载好资源,如果在可视区域生成钢管的话,用户认为钢管是卡顿后才生成的,用户体验不流畅。

4.canvas 绘制频率问题:大部分显示器刷新频率为 60 次/s,因此游戏的每一帧绘制间隔时间需要小于 1000/60=16.7ms,才能实现不卡顿。

100.按需加载

当用户触发了动作时才加载对应的功能。触发的动作要看具体的业务场景,包括但不限于:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。加载的文件可以是 JS、图片、CSS、HTML 等。

101.说一下什么是 virtual dom

用 JavaScript 对象结构表示 DOM 树的结构,用这个树构建一个真正的 DOM 树,插到文档中, 当状态变更的时候,重新构造一棵新的对象树。将新树和旧树比较,记录差异,应用到所构建的真正 DOM 树,从而实现视图更新。Virtual DOM 本质上是在 JS 和 DOM 之间做一个缓存。

102.JS 原型链

JS 通过原型实现继承,在 JS 中,一个构造函数默认有一个 prototype 属性,它是一个对象, 同时这个 prototype 对象自带有一个 constructor 属性,这个属性指向这个构造函数,同时每一个实例都会有一个proto属性指向这个 prototype 对象,把这个叫做隐式原型。在使用一个实例方法时,会先检查这个实例中是否有这个方法,没有的话会检查这个 prototype 对象是否有这个方法,基于这个规则,如果让原型对象指向另一个类型的实例,即 constructor1.protoytpe = instance2,如果引用 constructor1 构造的实例 instance1 的某个属性 p1,会先在 instance1 内部属性中找,接着在 instance1.proto(constructor1.prototype)即 instance2 中寻找 p1

搜寻轨迹:instance1->instance2->constructor2.prototype……->Object.prototype 即原型链

原型链顶端是 Object.prototype

img

103.Promise 回调链

Promise 能够在回调函数里使用 return 和 throw, 所以在 then 中可以 return 出一个 promise 对象或其他值,也可以 throw 出一个错误对象;如果没有 return,将默认返回 undefined,后面的 then 中的回调参数接收到的是 undefined。

104.async 和异步

用法:async 表示这是一个 async 函数,await 只能用在这个函数里面。

await 表示在这里等待异步操作返回结果,再继续执行。 await 后一般是一个 promise 对象

示例:async 用于定义一个异步函数,该函数返回一个 Promise。 如果 async 函数返回的是一个同步的值,这个值将被包装成 resolve 的 Promise,等同于 return Promise.resolve(value)。

await 用于一个异步操作之前,表示要 “等待” 这个异步操作的返回值。await 也可以用于一个同步的值。

105.ES6,ES7 的语法:promise,await/async,let、const、块级作用域、箭头函数

106.promise 和 await/async 的关系:异步编程的解决方案

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/14659.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于html+css的图片展示32

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…

STM32WB55_NUCLEO开发(11)----发送数据到手机

概述 本篇文章将详细介绍如何在上节配置的基础上&#xff0c;实现通过点击STM32WB开发板上的按键发送数据到手机上。 硬件准备 首先需要准备一个开发板&#xff0c;这里我准备的是NUCLEO-WB55RG 的开发板&#xff1a; 蓝牙配置 选择“mySVC”选项卡。添加第二个特征&…

有始有终的编码原则

基本情况 在程序员的修炼之道之中&#xff0c;说到&#xff1a; 这个建议能简单地应用到大多数场合。简单说就是&#xff0c;分配资源的函 数或对象&#xff0c;对释放资源应负有责任。 这其实就是我们常说的谁分配的就谁负责释放&#xff0c;这也是内存释放的一个原则&#x…

CGI, FastCGI, WSGI, uWSGI, uwsgi一文搞懂

1. CGI # 1、通用网关接口&#xff08;Common Gateway Interface/CGI&#xff09;是一种重要的互联网技术&#xff0c;可以让一个客户端&#xff0c;从网页浏览器向执行在网络服务器上的程序请求数据。CGI描述了服务器和请求处理程序之间传输数据的一种标准。 # 2、CGI程序可以…

Hive ---- DDL(Data Definition Language)数据定义

Hive ---- DDL&#xff08;Data Definition Language&#xff09;数据定义 1. 数据库&#xff08;database&#xff09;1. 创建数据库2. 查询数据库3. 修改数据库4. 删除数据库5. 切换当前数据库 2. 表&#xff08;table&#xff09;1. 创建表2. 查看表3. 修改表4. 删除表5. 清…

TCP教程:详解TCP连接过程

目录标题 一 、简述二 、TCP建立连接协议&#xff08;三次握手&#xff09;2.1 概述及目的2.2 第一次握手&#xff1a;客户端发送SYN报文2.3 第二次握手&#xff1a;服务器回应SYN-ACK报文2.4 第三次握手&#xff1a;客户端回应ACK报文2.5 顾客预定座位场景2.6底层原理2.7 TCP …

Docker 网络

一、Docker 网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c;同时Docker网桥是每个容器的默认网关。因为在同一宿…

科海思除COD树脂,大孔树脂,除COD专用树脂

一、产品介绍 Tulsimer A-722 MP具有控制孔径的大孔强碱性Ⅰ型阴离子交换树脂 Tulsimer A-722 MP 是一款具有便于颜色和有机物去除的控制孔径的&#xff0c;专门开发的大孔强碱性Ⅰ型阴离子交换树脂。 Tulsimer A-722 MP&#xff08;氯型&#xff09;专门应用于去除COD…

day2 OSI七层体系结构

目录 网络体系结构的形成 协议与划分层次 OSI七层体系结构 网络体系结构的形成 两台计算机要互相传送文件需解决很多问题&#xff1b; (1) 必须有一条传送数据的通路。 (2) 发起方必须激活通路。 (3) 要告诉网络如何识别接收方。 (4) 发起方要清楚对方是否已开机&#…

[BJDCTF2020CTF]之Misc篇(NSSCTF)刷题记录③

NSSCTF-Misc篇刷题记录wp SUCTF-2019-MISC签到题2021-安徽省赛-misc签到RCTF-2019-Misc-draw2020-BJDCTF-Misc-藏藏藏2020-BJDCTF-Misc-签个到2020-BJDCTF-Misc-认真你就输了2020-BJDCTF-Misc-你猜我是个啥2020-BJDCTF-Misc-一叶障目2020-BJDCTF-Misc-鸡你太美2020-BJDCTF-Misc…

NLP原理和应用入门:paddle(梯度裁剪、ONNX协议、动态图转静态图、推理部署)

目录 一、梯度裁剪 1.1设定范围值裁剪 1. 全部参数裁剪&#xff08;默认&#xff09; 2. 部分参数裁剪 1.2 通过L2范数裁剪 1.3通过全局L2范数裁剪 二. 模型导出ONNX协议 三、动态图转静态图 3.1两种图定义 3.2 什么场景下需要动态图转静态图 3.3为什么动态图模式越来…

【NFS共享存储服务】

目录 一、NFS (Network File System&#xff09;网络文件系统1.1、NFS工作原理1.2、举例1.2.1、共享文件总结 一、NFS (Network File System&#xff09;网络文件系统 依赖于RPC (远端过程调用) 需安装nfs-utils、rpcbind软件包 系统服务: nfs、rpcbind 共享配置文件: /etc/ex…

Ajax和Json综合案例

1. 查询所有 创建brand.html,使用axios发送请求&#xff0c;其中查询一般采用get的请求方式 <script src"js/axios-0.18.0.js"></script><script>//1. 当页面加载完成后&#xff0c;发送ajax请求window.onload function () {//2. 发送ajax请求axi…

造型简约的机箱,安装简单兼容性好,安钛克P20C体验

我们准备组装一台新主机的时候&#xff0c;机箱确实很重要&#xff0c;它决定了主机的整体风格和兼容性。我比较喜欢用中塔机箱&#xff0c;像是上个月我新装的主机&#xff0c;用的就是安钛克P20C&#xff0c;这款机箱的设计很简约&#xff0c;而且还有多种版本可选&#xff0…

【剑指offer】学习计划day1

目录 一. 前言 二. 用两个栈实现队列 a.题目 b.题解分析 c.AC代码 二. 包含min函数的栈 a.题目 b.题解分析 c.AC代码 一. 前言 本系列是针对Leetcode中剑指offer学习计划的记录与思路讲解。详情查看以下链接&#xff1a; 剑指offer-学习计划https://leetcode.cn/study-pla…

jstat命令查看jvm内存情况及GC内存变化

命令格式 jstat [Options] pid [interval] [count] 参数说明&#xff1a; Options&#xff0c;选项&#xff0c;一般使用 -gc、-gccapacity查看gc情况 pid&#xff0c;VM的进程号&#xff0c;即当前运行的java进程号 interval&#xff0c;间隔时间(按该时间频率自动刷新当前内存…

Python整个颜色小网站,给刚刚失恋的他.........

一些过场剧情: 死党一直暗恋校花&#xff0c;但是校花对他印象也不差&#xff0c; 就是死党一直太怂了&#xff0c;不敢去找校花&#xff0c; 直到昨天看到校花登上了校董儿子的豪车&#xff0c; 死党终于彻底死心&#xff0c;大醉一场&#xff0c;作为他的兄弟&#xff0c…

系统集成项目管理工程师 笔记(第六章:项目整体管理)

文章目录 项目整体管理6个过程制定项目章程过程 6.3 制订项目管理计划 2476.4 指导与管理项目工作 2516.5 监控项目工作 255监控项目工作的输入监控项目工作的工具与技术监控项目工作的输出 6.6 实施整体变更控制6.7结束项目或阶段 6.1 项目整体管理概述 242 6.1.1 项目整体管理…

“探索C++非质变算法:如何更高效地处理数据“

&#x1f4d6;作者介绍&#xff1a;22级树莓人&#xff08;计算机专业&#xff09;&#xff0c;热爱编程&#xff1c;目前在c&#xff0b;&#xff0b;阶段>——目标Windows&#xff0c;MySQL&#xff0c;Qt&#xff0c;数据结构与算法&#xff0c;Linux&#xff0c;多线程&…

王道计组(23版)6_总线

总线概述 特点 分时&#xff1a;同一时刻只允许一个部件向总线发送信息 共享&#xff1a;总线上可以挂接多个部件&#xff0c;各个部件互相交换的信息都可以通过这组线路分时共享&#xff0c;多个部件可以同时从总线接收相同的信息 分类 片内总线&#xff1a;CPU芯片内部AL…