huihui
huihui
 ## 一、操作方法 数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会 下面对数组常用的操作方法做一个归纳 ### 增 下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响 - push() - unshift() - splice() - concat() #### push() `push()`方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度 ```js let colors = []; // 创建一个数组 let count =...
 ## 一、是什么 `GET`和`POST`,两者是`HTTP`协议中发送请求的方法 #### GET `GET`方法请求一个指定资源的表示形式,使用GET的请求应该只被用于获取数据 #### POST `POST`方法用于将实体提交到指定的资源,通常导致在服务器上的状态变化或**副作用** 本质上都是`TCP`链接,并无差别 但是由于`HTTP`的规定和浏览器/服务器的限制,导致他们在应用过程中会体现出一些区别 ## 二、区别 从`w3schools`得到的标准答案的区别如下: - GET在浏览器回退时是无害的,而POST会再次提交请求。 - GET产生的URL地址可以被Bookmark,而POST不可以。 - GET请求会被浏览器主动cache,而POST不会,除非手动设置。 - GET请求只能进行url编码,而POST支持多种编码方式。 - GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。 - GET请求在URL中传送的参数是有长度限制的,而POST没有。 - 对参数的数据类型,GET只接受ASCII字符,而POST没有限制。 -...
 ## 一、是什么 `React`基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等 在`React`中这套事件机制被称之为合成事件 #### 合成事件(SyntheticEvent) 合成事件是 `React `模拟原生 `DOM `事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器 根据 `W3C `规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口,例如: ```jsx const button = 按钮 ``` 如果想要获得原生`DOM`事件,可以通过`e.nativeEvent`属性获取 ```js const handleClick = (e) => console.log(e.nativeEvent);; const...
 ## 一、是什么 本质上是优化高频率执行代码的一种手段 如:浏览器的 `resize`、`scroll`、`keypress`、`mousemove` 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能 为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用`throttle`(防抖)和`debounce`(节流)的方式来减少调用频率 #### 定义 - 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效 - 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时 一个经典的比喻: 想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应 假设电梯有两种运行策略 `debounce` 和 `throttle`,超时设定为15秒,不考虑容量限制 电梯第一个人进来后,15秒后准时运送一次,这是节流 电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖...
 ## 一、概述 前面我们讲到,`JS `中有六种简单数据类型:`undefined`、`null`、`boolean`、`string`、`number`、`symbol`,以及引用类型:`object` 但是我们在声明的时候只有一种数据类型,只有到运行期间才会确定当前类型 ```js let x = y ? 1 : a; ``` 上面代码中,`x`的值在编译阶段是无法获取的,只有等到程序运行时才能知道 虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制 常见的类型转换有: - 强制转换(显示转换) - 自动转换(隐式转换) ## 二、显示转换 显示转换,即我们很清楚可以看到这里发生了类型的转变,常见的方法有: - Number() - parseInt()...
 ## 一、是什么 CDN (全称 Content Delivery Network),即内容分发网络 构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。`CDN` 的关键技术主要有内容存储和分发技术 简单来讲,`CDN`就是根据用户位置分配最近的资源 于是,用户在上网的时候不用直接访问源站,而是访问离他“最近的”一个 CDN 节点,术语叫**边缘节点**,其实就是缓存了源站内容的代理服务器。如下图:  ## 二、原理分析 在没有应用`CDN`时,我们使用域名访问某一个站点时的路径为 > 用户提交域名→浏览器对域名进行解释→`DNS` 解析得到目的主机的IP地址→根据IP地址访问发出请求→得到请求数据并回复 应用`CDN`后,`DNS` 返回的不再是 `IP` 地址,而是一个`CNAME`(Canonical Name ) 别名记录,指向`CDN`的全局负载均衡 `CNAME`实际上在域名解析的过程中承担了中间人(或者说代理)的角色,这是`CDN`实现的关键 ####...
 ## 一、typeof `typeof` 操作符返回一个字符串,表示未经计算的操作数的类型 使用方法如下: ```js typeof operand typeof(operand) ``` `operand`表示对象或原始值的表达式,其类型将被返回 举个例子 ```js typeof 1 // 'number' typeof '1' // 'string' typeof undefined // 'undefined' typeof true // 'boolean'...
 ## 一、问题 `JavaScript `引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待 如果 `JavaScript` 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿 而这也正是 `React 15` 的 `Stack Reconciler `所面临的问题,当 `React `在渲染组件时,从开始到渲染完成整个过程是一气呵成的,无法中断 如果组件较大,那么`js`线程会一直执行,然后等到整棵`VDOM`树计算完成后,才会交给渲染的线程 这就会导致一些用户交互、动画等任务无法立即得到处理,导致卡顿的情况  ## 二、是什么 React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化,是对 React...
 ## 一、等于操作符 等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 `true` 前面文章,我们提到在`JavaScript`中存在隐式转换。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等 遵循以下规则: 如果任一操作数是布尔值,则将其转换为数值再比较是否相等 ```js let result1 = (true == 1); // true ``` 如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等 ```js let result1 = ("55" == 55); // true...
 ## 一、HTTP1.0 `HTTP`协议的第二个版本,第一个在通讯中指定版本号的HTTP协议版本 `HTTP 1.0` 浏览器与服务器只保持短暂的连接,每次请求都需要与服务器建立一个`TCP`连接 服务器完成请求处理后立即断开`TCP`连接,服务器不跟踪每个客户也不记录过去的请求 简单来讲,每次与服务器交互,都需要新开一个连接  例如,解析`html`文件,当发现文件中存在资源文件的时候,这时候又创建单独的链接 最终导致,一个`html`文件的访问包含了多次的请求和响应,每次请求都需要创建连接、关系连接 这种形式明显造成了性能上的缺陷 如果需要建立长连接,需要设置一个非标准的Connection字段 `Connection: keep-alive` ## 二、HTTP1.1 在`HTTP1.1`中,默认支持长连接(`Connection: keep-alive`),即在一个TCP连接上可以传送多个`HTTP`请求和响应,减少了建立和关闭连接的消耗和延迟 建立一次连接,多次请求均由这个连接完成  这样,在加载`html`文件的时候,文件中多个请求和响应就可以在一个连接中传输 同时,`HTTP 1.1`还允许客户端不用等待上一次请求结果返回,就可以发出下一次请求,但服务器端必须按照接收到客户端请求的先后顺序依次回送响应结果,以保证客户端能够区分出每次请求的响应内容,这样也显著地减少了整个下载过程所需要的时间 同时,`HTTP1.1`在`HTTP1.0`的基础上,增加更多的请求头和响应头来完善的功能,如下: - 引入了更多的缓存控制策略,如If-Unmodified-Since, If-Match, If-None-Match等缓存头来控制缓存策略...