开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 精华笔记 112314 -> 正文阅读

[JavaScript知识库]精华笔记 112314

promise

异步编程的方式

1.回调

2.时间监听, promise与事件监听不同的是，事件一旦错过了，再去监听是得不到答案的。

3.promise 避免回调地狱，缺点：无法取消promise，一旦新建便无法取消，如果不设置回调函数，promise内部抛出错误，不会反映到外部，处于Pending状态时，无法得知自己进展到哪个状态

4.async await

promise函数接受一个函数作为参数，改函数的两个参数，分别是resolve和reject。resolve函数的作用是在异步操作成功时调用，将异步操作的结果作为参数传递出去，reject函数的作用是将Promise对象的状态从未完成变为失败，在异步操作失败时调用，将异步操作报的错误，作为参数传递出去。

Promise实例生成后，用then方法制定resolved状态和rejected状态的回调

p2的resolve方法将p1作为参数，即一个异步操作的结果返回的是临桂购物异步操作

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('fail')), 2000)
})

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve(p1), 1000)
})
p2.then(result => console.log(result)).catch(error => console.log(error)); // error fail

then方法

他返回的是一个新的promise方法

H5

meta标签

主要有http-equiv属性和name属性

http-equiv

CSS

自适应布局和响应式布局

自适应布局：根据设备不同而进行适应，需要根据不同使用场景开发多套界面。

**布局特点：**屏幕分辨率变化时，页面里面元素的位置会变化，而大小不会变化。

响应式布局

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；

通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；

px和视口

那么，px真的是一个设备无关，跟长度单位米和分米一样是固定大小的吗？

答案是否定的，分别表示pc端下和移动端下的显示结果

媒体查询

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

百分比 eg.height:100%;

BFC

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

块级格式化上下文，简单来说BFC是一个完全独立的空间(布局环境)，让空间里的子元素不会影响到外面的布局，怎么使用BFC呢，BFC可以看做是一个css属性

怎么触发BFC ？

overflow : hidden
display : inline-block
position : absolute
display : table-cell
display : flex

BFC的规则？

BFC就是一个块级元素，块级元素会在垂直方向一个接一个排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度的时候，浮动元素也参与了计算

BFC解决了什么问题？

面试官：请说说什么是BFC？大白话讲清楚 (juejin.cn)

使用float脱离文档流，高度塌陷父盒子高度塌陷

例如：我们给子盒子设置了float而父盒子没有高度，导致父盒子没有被撑开，解决此文以可以让父盒子触发BFC,上述触发BFC的属性都可以设置，比如给父盒子加 overflow : hidden
Margin边距重叠

可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。

3.两栏布局

	  div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>

可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

<div style="width: 300px;display:flex;">

盒模型

盒模型组成

盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成

标准盒模型

标准盒子模型中内容的宽高就是盒子的 width、height 属性值；如果给盒子设置了 padding、border、margin 盒子实际占有的宽高会发生变化

盒子实际占有宽度为：内容宽度 + 左padding + 右padding + 左border + 右border + 左margin + 右 margin

IE盒模型

在 IE 盒子模型中 width 和 height 是盒子的内容 + padding + border 三者之和；设置盒子的 pading 或 border 后盒子的宽高并不会发生变化，会去修改内容的宽高来保持盒子的宽高不变

两者转换

box-sizing : content-box 标准盒模型

? border-box IE盒模型

margin重叠及预防方式 CSS 外边距(margin)重叠及防止方法 - 知乎 (zhihu.com)

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

两个或多个块级盒子的垂直相邻边界会重合。**结果的边界宽度是相邻边界宽度中最大的值。**如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。

1、水平边距永远不会重合。
2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
3、相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
4、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
5、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。
6、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。

外边距(margin)重叠示例
外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

防止外边距重叠解决方案：
虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素加float:left;或display:inline-block;
内层元素padding:1px;

子盒子和父元素的width继承

同为内联元素，内联元素不可以设置width和height, 所以其宽度默认是auto，由内容撑起来
同为块级元素，子元素width是100%,所以会继承父元素的宽度，但是不会继承其高度，可以通过内容把高度撑起来；

另外，给子元素添加padding和margin时，可以看到内容的宽度时父元素的宽度减去子元素的margin和padding值；
父亲是块元素，孩子是内联元素一般的内联元素是不能设置width和height，同第一条

如果是img或者input等可以设置width和height的类型，

对于img，如果不设置宽高则默认以图片原本大小显示，单独设置宽或者高的值则按原图等比例缩放，设置width:100%;height:100%则可以铺满整个父元素；
同为块级元素，子元素脱离文档流

子元素设置浮动，则宽度为auto，宽度由内容撑起来
子元素设置定位，position：absolute或者fixed，效果同上
设置定位，position：relative，这时候子元素并没有脱离文档流，所以width依旧是100%；

同为块级元素，父元素脱离文档对子元素继承宽度没有影响。

父盒子和子盒子高度关系

在开发过程中，由于不方便给父盒子高度，导致父盒子没有高度，但是可以给子盒子高度，从而撑开父盒子，也让父盒子有了高度，这样父盒子高度能够自适应，但是浮动的盒子不会撑开父盒子的高度
父盒子给了宽高，但是子盒子如果超出了父盒子，子盒子就会溢出

!(C:\Users\ADMINI~1\AppData\Local\Temp\Image.png)

![Image](C:\Users\ADMINI~1\AppData\Local\Temp\Image.png

清除浮动的方式

clear：both 本质就是闭合浮动，让父盒子闭合出口和入口，不让子盒子出来

1.额外标签法：在最后一个浮动标签后，新增一个标签，给其设置clear:both （不推荐）

优点：通俗易懂、方便

缺点：添加无意义标签、语义化差

 .father {
            width: 300px;
            background-color: pink;
        }
        
        .son {
            height: 500px;
            width: 100px;
            /* 因为这里子盒子设置了浮动，所以不会继承父亲宽度，靠自己 */
            background-color: blue;
            float: right
        }
        
        .clear {
            clear: both
        }
 
<div class="father">
        <div class="son"></div>
        <div class="clear"></div>
 </div>

父级添加 overflow属性（父级添加overflow : hidden）（不推荐）

通过触发BFC方式，实现清除浮动

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被屏蔽掉，无法显示要溢出的元素

使用after伪元素清除浮动（推荐使用）

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom触发hasLayout


    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>

使用after和before双伪元素清除浮动


     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

伪元素和伪类区别

伪元素在CSS3之前就存在，只是没有伪元素的说法，都是归纳为伪类，css3才正式分出来叫伪元素。

那如何区分伪元素和伪类，记住两点：

伪类表示被选择元素的某种状态，例如:hover
1. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如::before和::after
  
  核心区别在于，是否创造了“新的元素“

核心：伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

什么是盒子塌陷

理论上在父元素内部出现的元素出现在盒子外部

出现原因：当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。

（1）最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height ，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。缺点是非自适应，浏览器的窗口大小直接影响用户体验。

（2）给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。

（3）给父盒子添加overflow属性。

重绘和回流（重排）

回流：指渲染树中的节点信息发生了大小、边距等问题，需要重新结算个节点和css具体的大小和位置

容易引起回流的操作：

布局流相关操作：盒模型相关的操作会触发重新布局、定位相关的操作会触发重新布局、浮动相关的操作会触发重新布局
改变节点内的内容：改变节点的结构或者其中的文本结构会触发重新布局
css：width、height、padding、border、margin、position、top、left、bottom

重绘：指节点的部分属性发生变化，但不影响布局，只需要重新计算节点在屏幕中的绝对位置并渲染的过程，就叫做重绘

比如改变元素的背景颜色、字体都会造成重绘。

css: color、border-style、bordr-radius、text-decoration、box-shadow、outline

重绘不一定需要回流、但是回流一定需要重绘（这句要答给面试官听）

浏览器渲染页面的时候，大致是以下步骤

1.解析html生成DOM树，解析CSS生成CSSOM树，将DOM树和CSSOM树结合，生成渲染树根据渲染树，

2.浏览器可以计算出网页中有哪些节点，各节点的CSS及从属关系——回流

3.根据渲染树以及回流得到的节点信息，计算出每个节点在屏幕中的位置——重绘最后将得到的节点的位置信息交给浏览器的图形处理程序，让浏览器显示页面

css经典布局 —三栏布局

https://segmentfault.com/a/1190000017785077

两边固定中间自适应—

flex布局 flex这里可以做到重要内容先加载，而后面的两个不可以

注意： main 一般要放在最前面，因为要优先加载主内容

HTML结构设置

新建一个父元素，包含三个子元素：main、left、right（注意，main写在前面）
style样式设置

1、父元素设置宽度为100%，display: flex；
2、左右两则按产品需求设置宽高
3、中间部分设置flex: 1；左侧设置 order : -1，因为我们把main写在了最前面，所以要把左侧的order写为-1

    <style>
        .container {
            width: 100%;
            height: 200px;
            display: flex;
        }
        
        .main {
            flex: 1;
            height: 200px;
            background-color: pink;
        }
        
        .left {
            height: 200px;
            width: 100px;
            background-color: blue;
            order: -1;
        }
        
        .right {
            height: 200px;
            width: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

绝对定位加margin

左右绝对定位左top: 0px left:0px width: 200px 右right 0px,top：0px;

? 中间margin 0 200px 0 200px

    <style>
        .container {
            position: relative;
            height: 800px;
            width: 100%;
        }
        
        .left {
            position: absolute;
            width: 200px;
            top: 0px;
            left: 0px;
            height: 100%;
            background-color: pink;
        }

        .main {
            height: 100%;
            margin: 0 200px 0 200px;
            background-color: blue;
        }
            
        .right {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 200px;
            background-color: yellow;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="container">      
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

利用浮动

左盒子左浮动，width:200px 右盒子右浮动，width: 200px 中间margin 0 200px；

注意，浮动一定要把中间的盒子写在最后面才可以！

   <style>
        .container div {
            height: 100vh;
        }
        
        .left {
            float: left;
            width: 200px;
            background-color: red;
        }
        
        .right {
            float: right;
            width: 200px;
            background-color: blue;
        }
        
        .main {
            margin: 0 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>

中间固定两边自适应—

HTML结构设置

新建一个父元素，包含三个子元素：left、main、right
style样式设置

1、父元素设置display: flex；（flex-direction: row；可不设，因为默认就是row）
2、左侧右侧设置flex: 1，平分剩余空间

 .container {
            width: 100%;
            height: 200px;
            display: flex;
        }
        
        .main {
            width: 600px;
            height: 200px;
            background-color: pink;
        }
        
        .left {
            flex: 1;
            height: 200px;
            background-color: blue;
            order: -1;
        }
        
        .right {
            flex: 1;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

盒子设高、宽设置100%问题

父盒子的宽度可以直接设100%, 然后子盒子不设宽度就会继承，子盒子也可以写成100%

但是父盒子高度不能直接写成10，等同于父盒子高度未生效，同样子盒子写100%，也撑不起父盒子。此时子盒子、父盒子就都没有高度。如果想要表示父盒子是页面全部，那么就必须给html,body都设成100%才可以。

html的百分比是相对于浏览器而言，其他是相对于其父元素而言。也就是说应该养成一个好的习惯，写html网页时候上来就把**html,body{height:100%}写上去。**这样后面的div就可以用百分比起作用了。

<style type="text/css">
            html,body{
                height:100%;
            }
        </style>

px、rem、em区别

16px = 1em = 1 rem

px像素：他是相对于屏幕分辨率而言的单位，无法因为适应页面的大小而改变

em和rem比px更具有灵活性，更适合运用于响应式布局

em是相对于其父元素来设置字体大小的，一般是以的font-size为准，这样可能存在一个问题，进行任何元素设置，都需要知道他父元素的大小

rem是相对于根元素，这就意味着我们只需要在根元素确定一个参考值。

rem和em区别一句话概括，em相对于父元素，rem相对于根元素

水平垂直居中的布局

面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高） (juejin.cn)

margin负值 ——理解不一定准确

margin-left	自身向左移动
margin-top	自身向上移动
margin-right	自身不动，其右边元素向左移动
margin-bottom	自身不动，其下边元素上衣

定宽高

子绝父相+margin负值

子绝父相，子top和left设为50%，margin-left设为子盒子宽度一半的负值，margin-top设为子盒子高度的一半

   #father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        #son {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: yellow;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>

绝对定位 + transform

子绝父相，top:50%,left:50%, transform:translate(-50%,-50%); 这是让盒子向上向左移动自己宽高的一半

translateX填正值往右平移，填负数，往左平移

translateY填正值往下平移，填负值，往上平移

  #father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        #son {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: yellow;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)

绝对定位+top、left、bottom、right都为0， margin为auto

 #father {
             position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        #son {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: yellow;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>

flex布局

注意flex布局的justify-content和align-items都是给父盒子设定的

   #father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #son {
            position: absolute;
            height: 100px;
            width: 100px;
            background-color: yellow;
        }

不定宽高

实现垂直居中

1.line-height 比较适合文字的居中，其核心是设置行高。

//html
<div class="middle">555</div>
 
//css
.middle{
  height: 50px;
  line-height: 50px;
  background: red;
}

2、绝对定位加负外边距

这种方法核心在于先设置需要居中的元素为绝对定位，在设置其top:50%; 加上 margin-top等于负的自身高度的一半来实现居中。好处是实现起来比较方便，且父元素的高度可以为百分比，也不用设行高。代码如下：

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
.main {
  width: 60px;
  height: 10%;
  background: #dddddd;
  position: relative;//父元素设为相对定位
}
.middle{
  position: absolute;//设为绝对定位
  top: 50%;//top值为50%
  margin-top: -25%;//设margin-top为元素高度的一半
  width: 60px;
  height: 50%;
  background: red;
}

flex 布局利用 align-items: center;//垂直居中

//html
<div class="main">
  <div class="middle"></div>
</div>
  
//css
.main {
  width: 60px;
  height: 10%;
  background: #dddddd;
  display: flex;//设为flex
  justify-content: center;//水平居中
  align-items: center;//垂直居中
}
.middle{
  width: 30%;
  height: 50%;
  background: red;
}

CSS画图

画三角形

CSS绘制三角形—border法 - 简书 (jianshu.com)

        #father {
            height: 0px;
            width: 0px;
            border: 40px solid;
            border-color: transparent transparent red transparent;
        }

画自宽度适应的正方形

方法一：width 用%，高度用vh

        #square {
            height: 30vh;
            width: 30%;
            background-color: pink;
        }

方法二： width 取% 高度不设，用padding-bottom撑开盒子

        html,
        body {
            width: 100%;
            height: 100%
        }
        
        #square {
            width: 30%;
            padding-bottom: 30%;
            background-color: pink;
            /* 下面可要可不要 */
            margin-left: 10%;
            margin-top: 10%
        }

画圆

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        #circle {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="circle"></div>

画半圆

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        #circle {
            border-radius: 50px 50px 0 0;
            height: 50px
        }

画扇形

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        #circle {
            border-radius: 0 50px 0 0;
            height: 50px;
            width: 50px;
        }

选择器有哪些？优先级？

JS

数组方法

reduce

求数组里面所有值的和这里可设初始值

let fn = (...res) => {
    return res.reduce((result, value) => result + value, 10);
}
console.log(fn(1, 2, 3, 4)); // 10+1+2+3+4 = 20

累加对象数组里面的值

let sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce((res, value) => res + value.x, 0); //形参还是必须为res和value，不能是value.x,具体的函数体写value.x
console.log(sum);

扁平化数组

forEach

函数珂里化

let sum = a => {
    return b => {
        return c => {
            return a + b + c
        }
    }
}
console.log(sum(1)(2)(3))

sort 方法原理

sort 方法是用到了冒泡排序,sort方法会改变原数组

array.sort((a,b)=> a-b)

typeof

对数组和对象使用typeof,得到的都是object。

使用instanceof 判断， A instanceof B即对象A是不是构造函数B构造的。

console.log([] instanceof Array); // true
console.log({} instanceof Array); // false

在typeof上进行提高，typeof数组和对象都是object，但是数组的长短为0或者0以上的整数，Object的长度为undefined

let e = [2, 3, 4];
let f = { name: 'cy' };
console.log(typeof e && isNaN(e.length)); // true
console.log(typeof f && isNaN(f.length)); // false

Array.isArray()

let e = [2, 3, 4];
let f = { name: 'cy' };
console.log(Array.isArray(e)); // true
console.log(Array.isArray(f)); // false

toString() . toString()方法可以返回对象的字符串，但是对于实例对象返回的都是 [object, Object],

? 但是对于null和undefined会报错

let a = [2, 4];
console.log(a.toString()) // 2,3
let b = { name: 'cy' };
console.log(b.toString()) // [object, Object]
function Person() {
    this.age = 18;
}
let p1 = new Person();
console.log(p1.toString()); // [object, Object]
console.log(Person.toString()) // function Person() { this.age = 18;}
function Son() {
    console.log('woshierzi')
}
let p2 = new Son();
console.log(p2.toString()) // [object, Object]

利用Object.prototype.toString.call()方法将该变量转换成代表其类型的string.

在Js中，所有的类都继承于Object，因此toString()方法也被继承了，但是实际上并不是这样的，各类数据类型使用toString()后变现不一样的原因在于：所有类在继承Object时候，改写了toString()方法。Object原型上的方法是可以输出数据类型的，因此我们想判断数据类型的时候，也只能用原始方法。
```
let f = null;
let obj = { name: 'cy' };

function sum() {
    console.log('a')
}
console.log(Object.prototype.toString.call(f)) // [object Null]
console.log(Object.prototype.toString.call(obj)) // [object Object]
console.log(Object.prototype.toString.call(sum)) // [object Function]
```

for in/ for of

剩余参数和拓展运算符

拓展运算符

1.拓展运算符是在函数的实参部位。

let test = (a, b, c) => {
    console.log(a, b, c)
}
let arr = [2, 3, 4];
console.log(test(...arr));

2、拓展运算符还能把字符串换为数组

let str = 'hello'
let str1 = '1,2,3'
let arr1 = [...str]; // ['h','e','l','l','o']
let arr2 = [...str1]; // ['1',',','2',',','3']
console.log(arr1);
console.log(arr2);

3、拓展运算符还能取代apply的写法

// es5写法
function f(x, y, z) {
    console.log(x, y, z)
}
let args = [1, 2, 3];
f.apply(null, args);
// es6写法
f(...args);

取代apply，应用Math.max方法，求最大值

arr = [2, 3, 4, 5];
console.log(Math.max(...arr))
console.log(Math.max.apply(null, arr))

剩余参数

剩余运算符，他是在函数的形参位置，拥有数组的方法，跟arguments不一样

let fn = (...res) => {
    return res.reduce((result, value) => result + value, 0);
}
console.log(fn(1, 2, 3, 4)); // 10

Set

类似数组，但是成员的值是唯一的，没有重复的值，Set本身是一个构造函数，用来生成Set结构数据

他的参数可以是一个数组或者类似数组的对象作为参数，用来初始化

set方法，set.size set.add(2) set.has(2)

本省NaN == NaN,为false 但是在set里面，两个NaN是相等的

但是两个对象总是不相等的，哪怕两个空对象也是不相等的。

数组去重

let a = new Set([NaN, NaN])
console.log(a.size) //1
let d = new Set();
console.log(typeof d)//object
let c = new Set([{}, {}])
console.log(c.size) //2

Intanceof原理

instanceOf原理_zyxzp2012的博客-CSDN博客_instanceof的原理

instanceOf主要的实现原理就是只要右边变量的prototype在左边变量的原型链上即可。因此，instanceOf在查找的过程中会遍历左边变量的原型链，直到找到变量右边的prototype，如果查找失败则返回false

function new_instance_0f(leftValue,rightValue){
    let rightProto = rightValue.prototype  //   取右边变量的protptype值
    leftValue = leftValue.__proto__        //   取左边变量的__proto__

    while(true){
        if (leftValue === null) return false
        if (leftValue === rightProto) return true
        leftValue = leftValue.__proto__
    }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDEQyYvY-1633090669480)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210707093651580.png)]

  function A() {

        }
        let a = new A()
        console.log(a instanceof Function); //  flase 正确的应该是 A.__proto__ = Function.prototype
        console.log(a instanceof A); //  true a.__proto__ === A.prototype
        console.log(a instanceof Object); // true a.__proto__.__proto__ === Obect.prototype
        console.log(a.__proto__ === A.prototype); // true
        console.log(a.__proto__.__proto__ === Object.prototype) // true
        console.log(A.__proto__ === Function.prototype); // true

原型添加方法—扁平化

Array.prototype.flatten = function() {
let arr = this;
return arr.reduce((result, value) => {
return result.concat(Array.isArray(value) ? value.flatten() : value)
}, [])
}
let arr = [2, 3, [2, 3]]

    console.log(arr.flatten());

Null和undefined的区别

undefined表示变量已经声明还没有初始化赋值的时候，变量的默认值就是Undefined。

? 以下情况汇报undefined

null表示还尚未存在的一个对象，常表示函数返回一个不存在的对象

相似性

undefined和null在if语句中，都会被自动转为false，相等运算符（==）甚至直接报告两者相等。（===）全等运算符算出来是不等的。

区别：

1.null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9YQErGY-1633090669483)(C:\Users\ADMINI~1\AppData\Local\Temp\Image.png)]

JS每隔5秒钟打印1 2 3 4 5

js每隔一秒打印1,2,3,4,5_cristina_song的博客-CSDN博客

        function count() {
            for (let i = 0; i < 5; i++) {
                setTimeout(() => {
                    console.log(i)
                }, 1000 * i)
            }
        }
        count();

apply, call ,bind三者的区别

三者都是改变this指向，第一个参数都是this要指的对象，如果没有这个参数，或者为null或者Undefined,则默认指向window。

三者都可以传参，但是apply是数组，call和bind是参数列表。

? bind可以分次传参，apply和call是一次性传参

? bind是返回改变this指向后的函数，便于稍后调用，apply和call是立即执行

apply,call,bind三者实现

Promise

promise是异步编程的解决方案，比传统的解决方案—回调函数和事件更合理且更强大。

回调地狱产生的原因：异步返回值依赖于另一个异步返回值，就产生了回调函数嵌套回调函数的情况。 KO

Promise.prototype.catch() 这个相当于语法糖，调用它就相当于调用Promise.prototypr.then(null,onRejected)

Async函数就相当于Generator函数的语法糖

简单来说promise是一个容器，俩民保存着某个未来才会结束的事件（通常是一个异步操作的结果）。从语法上来讲，promise是一个对象，可以从他获取异步操作的结果。

特点：1，状态不受外界影响，只有异步操作的结果才能决定当前的状态，有三个状态，pending,fuffilled,rejected。

2.状态一经改变就不会再变，任何时候都可以得到这个结果，promise对象状态的改变只有两种情况，从Pending变为fullfilled，从pending变为rejected,只要这两种情况发生，状态就凝固了，就不会再改变了，就算状态已经改变，再对他添加回调函数，叶晖立即得到这个结果，这与事件监听不一样，如果错过了他，监听就不会有结果

有了promise对象，可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，此外promise提供统一的接口使得异步操作更容易。

Promise缺点，首先无法取消promise，其次如果不设置回调函数，那么promise内部的错误不会反应到外部，再者当处于pending状态时，无法得知目前进展到哪个状态。

promise实例生成后分别用 then方法指定resolved状态和rejected状态的回调函数

隐式声明和显示声明

let a = 3

b = 3 隐式声明会成为全局变量的一个属性

隐式变量没有变量提升

隐式声明的变量可以被delete，但是显示声明的变量不可以

如果都在全局中，他们都是全局变量，如果在函数中隐式声明为全局变量，显示声明为全局变量。

变量名和函数名重命名问题

js中变量名与函数名重名的问题_Charles_Tian的博客-CSDN博客

数组转换字符串、字符串转数组的方法

字符串转数组

spilt方法

let str1 = 'hello world'
    //split 方法不会改变字符串
console.log(str1.split('')); // ['h','e','l','l','o','','w','o','r','l','d'],这个会把空格也转换成 空字符串
console.log(str1.split()); //['hello world'] 什么都不写的话就会被拆成 一个字符串
let str2 = 'a,b,c,d'
console.log(str2.split(',')) // ['a','b','c','d']

使用Array.from()方法 这个方法可转换伪数组

Array.from()是js中一个内置函数，他从给定的数组**创建一个新的数组实例。**对于字符串，字符串的每个字母都会被转换为新数组实例的元素，对于整数值，新数组实例将获取给定数组的元素
```
let str1 = 'hello world'
console.log(Array.from(str1)); //  ['h','e','l','l','o','','w','o','r','l','d']
```

数组转字符串

toString(); 它甚至可以把多维数组转换为字符串

const arr1 = [1, 2, [1, [3], 2]]
console.log(arr1.toString()) // '1,2,1,3,2'

join方法第一个参数可以设定用什么符号来分割，如果参数省略，则使用逗号做分隔符

const arr = [1, 2, 3, 4]
consoleconst arr = [1, 2, 3, 4]
console.log(arr.join()) //'1,2,3,4'
console.log(arr.join('=')) //'1=2=3=4'
const arr1 = [1, 2, [1, [3], 2]]
console.log(arr1.toString()) // '1,2,1,3,2'log(arr.join()) //'1,2,3,4'
console.log(arr.join('=')) //'1=2=3=4'
const arr1 = [1, 2, [1, [3], 2]]

Antd

1.form表单如何获取元素

获取form的值 form.getFieldsValue()

计算机网络

get和post区别

get是从服务器获取数据，post是给服务器发送数据
get的参数是直接放在Url中的，post则放在request body中，所以post比get请求安全性高
get传送的数据量比较小，不大于2KB；post传送的数据量大。此外对于get请求server端通过request.query.string获取数据，对于post,server端用request.form获取数据
get和post本质上都是tcp链接，但由于http规定和浏览器、服务器的限制，导致他们在应用过程中体现不同
get请求产生1个TCP数据包，post请求产生2个TCP数据包

get请求：浏览器吧Http header和data一起发送，服务器响应200；

post请求：浏览器先发送header,服务器响应100contiue,浏览器再发送data，服务器响应200.

TCP和UDP的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yn15m04j-1633090669485)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210707194834973.png)]

// [‘a’,‘b’,‘c’,‘d’]




2. 使用Array.from()方法  **这个方法可转换伪数组**

Array.from()是js中一个内置函数，他从给定的数组**创建一个新的数组实例。**对于字符串，字符串的每个字母都会被转换为新数组实例的元素，对于整数值，新数组实例将获取给定数组的元素

let str1 = ‘hello world’
console.log(Array.from(str1)); // [‘h’,‘e’,‘l’,‘l’,‘o’,’’,‘w’,‘o’,‘r’,‘l’,‘d’]


#### 数组转字符串

1. toString();  它甚至可以把多维数组转换为字符串

const arr1 = [1, 2, [1, [3], 2]]
console.log(arr1.toString()) // ‘1,2,1,3,2’




2. join方法  第一个参数可以设定用什么符号来分割，如果参数省略，则使用逗号做分隔符

const arr = [1, 2, 3, 4]
consoleconst arr = [1, 2, 3, 4]
console.log(arr.join()) //‘1,2,3,4’
console.log(arr.join(’=’)) //‘1=2=3=4’
const arr1 = [1, 2, [1, [3], 2]]
console.log(arr1.toString()) // ‘1,2,1,3,2’log(arr.join()) //‘1,2,3,4’
console.log(arr.join(’=’)) //‘1=2=3=4’
const arr1 = [1, 2, [1, [3], 2]]




## Antd

 1.form表单如何获取元素

  获取form的值   form.getFieldsValue()



## 计算机网络

#### get和post区别

1. get是从服务器获取数据，post是给服务器发送数据

2. get的参数是直接放在Url中的，post则放在request body中，所以post比get请求安全性高

3. get传送的数据量比较小，不大于2KB；post传送的数据量大。此外对于get请求server端通过request.query.string获取数据，对于post,server端用request.form获取数据

4. get和post本质上都是tcp链接，但由于http规定和浏览器、服务器的限制，导致他们在应用过程中体现不同

5. get请求产生1个TCP数据包，post请求产生2个TCP数据包

   get请求：浏览器吧Http header和data一起发送，服务器响应200；

   post请求：浏览器先发送header,服务器响应100contiue,浏览器再发送data，服务器响应200.

#### TCP和UDP的区别

[外链图片转存中...(img-Yn15m04j-1633090669485)]

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集