• 用 React 全家桶 + TS 写项目快一年了，大大小小的坑踩了很多，在此整理了在项目中遇到的疑惑和问题。
• 体会：不要畏惧 TS，别看 TS 官方文档内容很多，其实在项目中常用的都是比较基础的东西，像泛型运用、一些高级类型这种用的很少（封装库、工具函数、UI组件时用的比较多）。只要把常用的东西看熟，最多一个小时就能上手 TS。
• 如果本文对你有所帮助，还请点个赞，谢谢啦~~

HTML：超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。

• 块级性元素：完成web页面区域的划分，确保内容的有效分割，aside、figure

• 行内语义元素：完成web页面具体内容的引用和描述

• 交互性元素：主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础

radio:在使用radio标签时，为了只能单选，需要将radio标签的name属性对应的值相同

label:使用label标签绑定元素时，当点击label便签内的文本时，浏览器就会自动聚焦或者选择对应的表单元素上

锚点链接:为我们点击链接，可以快速定位到页面中的某个位置

• 在链接文本的href属性中，设置属性值为#名字的形式

• 找到目标位置标签，里面添加一个id属性=刚才的名字

select下拉菜单：有多个选项供用户选择

css：层叠样式表，用于设计风格和布局

• 层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。样式冲突，执行就近原则，样式不冲突，不会重叠

• 继承性：子标签会继承父标签的某些样式，如字体样式等

• 优先级：当一个元素指定多个选择器，就会有优先级的产生，选择器不同，则根据选择器的权重执行，权重值大小：!important>行内样式>ID选择器>类选择器>元素选择器>继承

• 类型选择器：也叫做"标签名选择器"或者是"元素选择器"，直接为标签加入样式

• 类选择器：以一个句点（.）开头，会选择文档中应用了这个类的所有物件，你能对一个元素应用多个类，然后分别指向它们，或者仅仅在选择器中存在所有这些类的时候选择这一元素

• ID选择器：ID选择器开头为#而非句点，不过基本上和类选择器是同种用法

• 伪类选择器：伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候

• 关系选择器：典型用单个空格字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器

font：复合字体样式属性，用于定义字体、大小、粗细和文字样式，必须保留font-size和font-family属性，否则font属性将不起作用

• 内部样式表：在style标签中书写CSS代码，style标签写在head标签中

• 行内样式表：使用style属性引入CSS样式

• 外部样式表：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

background-repeat属性用于控制图像的平铺行为。可用的值是：

• repeat：在两个方向上重复

background-size：设置长度或百分比值，来调整图像的大小以适应背景

• cover：浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比

• contain：浏览器将使图像的大小适合盒子内

background-position：允许您选择背景图像显示在其应用到的盒子中的位置

• 两个单独的值：一个水平值后面跟着一个垂直值

• 混合使用关键字，长度值以及百分比

• scroll：背景图像随对象滚动而滚动，是默认选项

• fixed：背景图像固定在页面不动，只有其他的内容随滚动条滚动

background混合写法：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

盒子模型：CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

margin：外边距可以让块级元素水平居中，但是必须满足两个条件：

• 盒子必须指定了宽度width

外边距合并：使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

清除浮动：父元素高度自适应，子元素float后，造成父元素高度为0，造成高度塌陷

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

• 清除浮动元素造成的影响

• 如果父盒子本身有高度，则不需要清除浮动

• 清除浮动之后，父级元素就会根据浮动的子盒子自动检测高度，就不会影响下面的标准流了

相对定位：元素在移动位置的时候，是相对于它原来的位置来说的

• 相对于自己原来的位置移动

• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待（不脱标，继续保留原来位置）

绝对定位：元素在移动位置的时候，是相对于它的父元素来说的

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

• 如果祖先元素有定位（相对、绝对、固定），则以最近一级有定位的祖先元素为参考点移动位置

• 绝对定位不再占有原来的位置（脱标）

display：属性设置为none隐藏元素后，不再占有原来的位置

overflow：让一个元素在页面中隐藏或者显示出来

• visible(默认选项)：不剪切也不添加滚动条

• hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉

• scroll：不管超出与否，总是显示滚动条

• auto：超出自动显示滚动条，不超出不显示滚动条

vertical-align：用于设置图片或者表单和文字垂直对齐

• baseline（默认）：元素放在父元素的基线上

• middle：把此元素放置在父元素的中部

单行文本溢出显示省略句：

多行文本溢出显示省略号：

transition：变化的属性 花费时间 运动曲线 合适开始

• 如果想要多个属性都变化，属性写all即可

转换（transform）：可以实现元素的位移、旋转、缩放等效果

flex原理：flex是flexible box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex常见的父项属性（对父元素设置的）：

• flex-wrap：设置子元素是否换行

• align-content：设置侧轴上子元素的排列方式（多行）

• align-items：设置侧轴上的子元素排列方式（单行）

flex-direction设置主轴的方向：在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

• row（从左向右，沿x轴方向）

• column（从上向下，沿y轴方向）

• flex-start：默认值，子元素从头开始依次排列

• center：在主轴居中对齐

• space-between：先两边贴边，在平分剩余空间（常用）

• flex布局中默认是不换行的，如果子元素超出父盒子宽度，则其子元素会自动缩小

• wrap：子元素超出父盒子则会换行

align-items：设置侧轴上的子元素的排列方式（单行）

align-content：设置侧轴上子元素的排列方式（多行）

• 如果上下不对齐可以使用vericle-align属性使其对齐

• title网站标题：是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点，建议：网站名-网页的介绍

• description网站说明：简要说明网站主要是做什么的

• keywords关键字：页面关键词，是搜索引擎的关注点之一

对于列表页，可以使用ul然后对其使用display布局

服务器：服务器是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等

远程服务器：通常是别的公司为我们提供的一台电脑，我们只需要把网站项目上传到这台电脑上，任何人就可以利用域名访问我们的网站了

• 去免费空间网站注册账号

• 记录下主机名、用户名、密码、域名

• 利用cutftp软件上传网站到远程服务器

• 在浏览器中输入域名，即可访问网站

组成：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM ）

• undefined类型：当一个变量没有被定义、只被声明的时候

• 数值类型转换为字符串类型的隐式转换：num + “”

• 利用toString()函数将数值类型转换为字符串类型

• 利用Number()将字符串类型转换为数值类型

BOM（浏览器对象模型）

3.2 获取结点的方式

• offsetLeft / offsetTop : 获取距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离

• offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left

• offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px

• 如果没有给当前元素指定过top样式，则style.top 返回的是空字符串

• clientLeft和clientTop：返回的是元素边框的 borderWidth，如果不指定一个边框或者不定位改元素，其值就为0

• offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离

定义：事件流描述的是从页面中接受事件的顺序，在JS中分为两种，一个是事件冒泡，还有一个是事件捕获。

• DOM 0级事件处理（如果想要删除事件，通过将事件程序属性赋值为null来实现）

6.2 一些简单的JS动画

• 缓动运动（加速度 = (结束值 - 起始值) / 缓动系数 加速度由慢到快）

• 若函数无返回值，打印输入undefined

• 如果返回值为对象，则返回该对象

7.3 函数的调用方式

• 构造函数方法的方式调用：this指向当前构造函数的对象

• 构造函数调用：this该构造函数

• 可以传递任何类型的参数（非严格模式’use strict’可以传递同名参数）

• 可以使用同名参数，返回结果为最后一个参数

• 若实际参数比形式参数少，剩下的形参为undefined类型

• 若形参个数比实参多，考虑使用arguments

重载：定义相同的函数名，传入不同的参数（js为弱类型语言，数据类型分的不是很清楚，所以不存在重载），在js中，当函数名相同时，默认最后一个声明的函数有效

7.6 函数的参数传递

• 基本数据类型的传递：在向参数传递基本数据类型的值时，被传递的值会被赋值给另一个局部变量

• 引用数据类型的传递：在向参数传递引用数据类型的值时，会把这个值在内存中的地址赋值给局部变量

• length属性：arguments对象中的length属性表示实参的长度，而函数的length属性表示形参的长度

• name属性：函数的名称

作用：这两个函数都是在特定的作用域中调用函数,能改变函数的作用域，实际上是改变函数体内 的this指向

区别：call()可以接收任何类型的参数，而apply()只能接收数组参数。

定义：柯里化通常也称部分求值，其含义是给函数分布传递参数，每次传递参数进行处理，并返回一个更具体的函数接收剩下的参数，这中间可嵌套多层这样的接收部分参数函数，直至返回最后结果

8.1 JS作用域内部原理

• 编译：分词、分词、代码生成，编译器把程序分解成词法单元，将自发单元解析成AST，再把AST转换成机器指令，等待执行的过程（边解释边执行）

• 执行：引擎运行代码时，首先查找当前的作用域，看变量是否在当前的作用域，如果在，引擎就会直接使用这个变量，否则，引擎会继续向上查找

• 查找：在当前作用域中无法找到某个变量时，引擎就会在外层嵌套的作用域中查找，知道找到该变量，或者抵达最外层作用域（全局作用域）为止

• 嵌套：在多层的嵌套作用域可以定义同名的标识符，这叫做遮蔽效应

• 异常：引擎在最外层（全局作用域）中查找不到变量时，就会触发异常

8.2 变量声明的提升

• 若只对变量声明但未对其赋值，函数的声明会优先于未赋值的变量声明，且函数的声明会覆盖同名未赋值的变量声明

• 若定义了变量且对其赋值了，且函数名和变量名相同，则最后声明的会覆盖前面的声明

• 全局作用域：代码在程序的任何地方都能被访问，window对象的内置属性都拥有全局作用域

• 函数作用域：在固定的代码片段才能被访问

作用域链：一般情况下，变量取值到创建这个变量的函数的作用域中取值，但如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样的查找过程形成的链条就叫做作用域链。

• 闭包：定义在函数内部的函数，能使得全局作用域读取函数作用域的变量

• 特点：闭包可以记住诞生的环境，比如fn2可以记住它诞生的环境fn1，所以fn2中可以得到fn1中的内部变量

• 本质：闭包就是函数内部和函数外部链接的一座桥梁

• 计数器：读取了函数内部的变量，这些变量始终在内存中，在使用闭包时，要小心内存的泄露

• 能够封装对象的私有属性和方法

• 使用闭包使得函数中的变量始终在内存中，内存消耗很大，所以不能滥用闭包，否则会造成页面的性能问题

• 每个父函数调用完成，都会形成新的闭包，父函数中的变量始终会在内存中，相当于缓存

定义：定义函数之后，立即调用该函数，这种函数叫立即执行函数（注：()跟在函数后面，表示函数被调用）

9.4 对循环和闭包的错误理解

9.5 闭包的使用场景

• 函数赋值：将内部函数赋值给外部的变量

• IIFE：立即执行函数

• get和set方法：将要操作的变量保存在函数内部，防止暴露在外部

• 模拟缓存机制：模拟一个对象的key，看该对象中是否有相同的key，如果有，直接获取value返回

第十章 深入理解this指向

• 函数独立调用，函数内部的this也指向window

• 被嵌套的函数独立调用时，this也指向window

• 当做构造函数调用：this指向当前的构造函数

• 当做构造函数的方法调用：this指向当前对象

隐式丢失：被隐式绑定的函数丢失了绑定对象，从而默认绑定到window，这种情况比较容易出错却又非常常见

• 其他情况：指向了window的特殊情况

• 硬绑定：显示绑定的变形

• 使用new关键字实例化一个对象，此时的this指向当前对象

• 使用return关键字来返回对象的时候，实例化出来的对象是当前的返回对象

• 在严格模式下，独立调用的函数内部的this指向undefined

• 函数apply()和call()：始终是他们的第一个参数

• 若在非严格模式，传入null、undefined，this都会指向window，但非严格模式下，call()后面传入什 么，this就指向什么

1.js中有哪些数据类型，并解释清楚原始数据类型和引用数据类型

原始数据类型：将变量名和值都存储在栈内存中

引用数据类型：将变量名存储在栈内存中，将值存储在堆内存中，并在栈内存中存储值的地址，该地址指向堆内存中的值。

当给b赋予另一个a的值
若a值为原始数据类型，直接在栈内存中生成b值，两个变量以后进行值改变不会相互影响

若a值为引用数据类型，赋予b变量的是值地址，通过这个地址，两者指向的其实是堆内存中的同一个值，所以以后a,b任一变量对值进行改变，会直接影响另一个变量的值

null表示一个标识被赋值了，且该标识赋值为“空值”,从逻辑角度来看，null值表示空对象指针；

undefined表示声明了标识，但没有给标识赋值。

3. 如何复制一个对象的值？

4. js在什么时候会进行隐式类型转换，转换的结果？

5. 类型识别的方法？

• 可以判别自定义对象类型

• 可以判别自定义对象类型

• 不能判别自定义对象类型

工作中可以写一个函数方便判定

1. 函数里的this什么含义，什么情况下，怎么用?
谁调用的方法或者属性，this就指向谁
如果没有被谁调用，this指向window

函数curry化是什么意思？
把接受多个参数的函数转换为接受单一参数的函数，且函数可以持续接收参数
将一个复杂的问题片段化，使之进行简化

3. 数组和对象有哪些原生方法，列举一下，分别是什么含义，比如链接两个数组用哪个方法，删除数组的指定项。

2.闭包的作用和使用场景
闭包的作用一：隐藏、封装
闭包的作用二：记忆函数

1.讲解原生Js实现ajax的原理。

　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用 javascript来操作DOM而更新页面。

　　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法

2 (发送数据) send方法已调用，但是当前的状态及http头未知

3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

3.如何获取一个大于等于0且小于等于9的随机整数？.

4.想要去除一个字符串的第一个字符，有哪些方法可以实现.