牛客网刷题记录（1）

港控/mmm° 2022-03-15 09:26 291阅读 0赞

来源(第四范式2019前端面试题)：[https://www.nowcoder.com/profile/2496345/test/21517591/318667][https_www.nowcoder.com_profile_2496345_test_21517591_318667]

**1.JavaScript数据类型**

JavaScript基本数据类型：null undefined number string 还有es6的symbol  
引用类型:Object,Array,Function

**2.标准盒模型和怪异盒模型**

参考文章：  
[https://www.cnblogs.com/yky-iris/p/7719895.html][https_www.cnblogs.com_yky-iris_p_7719895.html]  
[https://blog.csdn.net/zhangyingchengqi/article/details/48489055][https_blog.csdn.net_zhangyingchengqi_article_details_48489055]

标准盒模型：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

**3.HTML哪些是块级元素，哪些是行内元素**

·块级元素  
1.总是从新的一行开始  
2.高度、宽度都是可控的  
3.宽度没有设置时，默认为100%  
4.块级元素中可以包含块级元素和行内元素

·行内元素  
1.和其他元素都在一行  
2.高度、宽度以及内边距都是不可控的  
3.宽高就是内容的高度，不可以改变  
4.行内元素只能行内元素，不能包含块级元素

--------------------

附注：关于行内元素能否设置宽高的问题  
可以参考：[https://blog.csdn.net/little\_little0\_0/article/details/78566870][https_blog.csdn.net_little_little0_0_article_details_78566870]

总结下：并不是所有的行内元素都不能设置宽高，替换元素就可以，例如input就可以宽高，span就不能设置宽高。

替换元素：浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。

不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

除此之外，当我们给行内元素添加属性float时，我们也可以给它设置宽高。因为不论元素本身是什么，当它浮动时，就会生成一个块级框。行内元素也就会生成相应的行内框。此时我们为它设置宽高，宽高就会起作用了。例如

效果如图：

![在这里插入图片描述][20190301214204321.png]

--------------------

块级元素：块级大多为结构性标记

<address>...</adderss>   
      <center>...</center>  地址文字
      
      <h1>...</h1>  标题一级
      <h2>...</h2>  标题二级
      <h3>...</h3>  标题三级
      <h4>...</h4>  标题四级
      <h5>...</h5>  标题五级
      <h6>...</h6>  标题六级
    
      <hr>  水平分割线
      <p>...</p>  段落
      <pre>...</pre>  预格式化
      <blockquote>...</blockquote>  段落缩进   前后5个字符
      <marquee>...</marquee>  滚动文本
    
      <ul>...</ul>  无序列表
      <ol>...</ol>  有序列表
    
      <dl>...</dl>  定义列表
    
      <table>...</table>  表格
      <form>...</form>  表单
    
      <div>...</div>

行内元素：行内大多为描述性标记

<span>...</span>
      <a>...</a>  链接
      <br>  换行
      <b>...</b>  加粗
      <strong>...</strong>  加粗
      <img >  图片
      <sup>...</sup>  上标
      <sub>...</sub>  下标
    
      <i>...</i>  斜体
      <em>...</em>  斜体
      <del>...</del>  删除线
      <u>...</u>  下划线
      
      <input>...</input>  文本框
      <textarea>...</textarea>  多行文本
      <select>...</select>  下拉列表

问题：如何给不能设置宽高的行内元素设置宽高

1.设置`display:block`或者`display:inline-block`  
2.浮动，设置`float:left`或者`float:right`  
3.设置`position:absolut`  
4.设置`pargin/padding`

简单来说，只要html代码中出现以上2或者3两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的width 和 height 了，且默认宽度不占满父元素。

内联块状元素（inline-block ）元素特点：  
1、和其他元素都在一行上；  
2、元素的高度、宽度、行高以及顶和底边距都可设置。  
将内联元素 -----> 内联块元素 (可以设置元素的高宽) 方法如下:

display:inline-block;
    position:absolute;
    float:left / right;

参考文章：  
[https://bri-robby.iteye.com/blog/2269352][https_bri-robby.iteye.com_blog_2269352]  
[https://www.jianshu.com/p/8eec15102720][https_www.jianshu.com_p_8eec15102720]

**4.CSS选择器**

CSS选择器：  
标签选择器、类选择器、ID选择器

div p	选择<div>元素内的所有<p>元素
    div>p	选择所有父级是 <div> 元素的 <p> 元素
    div+p	选择所有紧接着<div>元素之后的<p>元素

举例说明(div+p)：

.div01+p{
           color: blue;
    }
    
    <div class="div01">
          <p>div01</p>
         <div class="div02">
              <p>div02</p>
         </div>
    </div>
    
    <p>div03</p>

![在这里插入图片描述][20190301225720872.png]

一个问题：CSS属性继承问题，看下面代码

![在这里插入图片描述][2019030212033428.png]  
问题是：`>`是子代选择器，为什么子代的子代还可以被设置颜色（li标签），但是子代的子代例如上面p标签就没有被设置颜色了。

答案：CSS属性继承

继承就是指子节点默认使用父节点的样式属性。

所有元素可继承：visibility和cursor。  
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。  
终端块状元素可继承：text-indent和text-align。  
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。

对于上面问题，因为p不是内联元素，所以不会继承，li是内联元素所以可以继承。

**5.原型链中delete**

function Foo(){}
    
    Foo.prototype.z = 3;
    
    var obj = new Foo();
    
    console.info(obj.z)	//输出内容 3
    
    obj.z = 10;
    
    console.info(obj.z);	//输出内容 10
    
    delete obj.z;
    
    console.info(obj.z);	//输出内容 3

为什么最后输出的是3而不是undefined呢 ？  
这涉及到delete和原型链问题，delete删除的是本身上（对象定义）的z，而不是原型链上的。

参考内容：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_delete]

**如果对象的原型链上有一个与待删除属性同名的属性，那么删除属性之后，对象会使用原型链上的那个属性（也就是说，delete操作只会在自身的属性上起作用）。**

**6.this指向问题**

var obj = {
    
       name:"zhangsan",
    
       sayName:function(){
    
         console.info(this.name);
    
       }
    
     }
    
     var wfunc = obj.sayName;
    
     obj.sayName();
    
     wfunc();
    
     var name = "lisi";
    
     obj.sayName();
    
     wfunc();

输出结果：`zhangsan undefined zhangsan lisi`

**7.变量提升**

compute(10,100);
    
    var compute = function(A,B) {
      console.info(A * B) ;
    };
    
     function compute(A,B){
       console.info(A + B);
     }
     
     function compute(A,B){
       console.info((A + B)*2);
     }
     
     compute(2,10);

输出结果：220 20

JS在创建变量是先都声明好，然后再去赋值。并不是声明一个变量就赋值，再声明一个再赋值。  
比如：

var a=1; var b=2;

JS解析是

var a;
    var b;
    a=1;
    b=2;

再者js所谓变量提升，提升就是为了事先声明变量。在作用域中，不管变量和函数写在什么位置，所有变量会被整体提升到作用域顶部，所有函数也会被整体提升到作用域顶部，但是函数整体在变量整体的后面。所以这题的解析如下:

//声名变量
    var compute;
    
    function compute(A, B) {
    	console.info(A + B);
    }
    
    function compute(A, B) {
    	console.info((A + B) * 2);
    }
    compute(10, 100);
    
    //赋值
    compute= function(A, B) {
    	console.info(A * B);
    };
    compute(2, 10);

**8.跨域问题**

同域：相同域名，端口相同，协议相同，缺一不可。

跨域是浏览器的同源策略造成的，是浏览器对javascript的安全限制。浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议至少有一个不相同，就是跨域。

跨域问题只存在于浏览器端，不存在于服务器端。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

**9.正则表达式**

**10.回流（reflow）**

reflow(回流):对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow。

display显示/隐藏元素，显示时占据空间，隐藏时元素不占据空间，隐藏前后dom结构有发生变化，需要重新渲染。  
visibility显示/隐藏元素，显示时占据空间，隐藏时元素占据空间，隐藏前后dom结构未发生变化，不需要重新渲染。

单纯改变字体颜色，背景只需要repaint(重绘)，不需要reflow。

会导致回流的操作：  
1.页面首次渲染  
2.浏览器窗口大小发生改变  
3.元素尺寸或位置发生改变  
4.元素内容变化（文字数量或图片大小等等）  
5.元素字体大小变化  
6.添加或者删除可见的DOM元素  
7.激活CSS伪类（例如：:hover）  
8.查询某些属性或调用某些方法

**12.箭头函数和普通函数**

箭头函数与普通函数的区别：  
1.对this的关联。内置this的值，取决于箭头函数在哪里定义，而非箭头函数执行的上下文环境。（数体内this的指向是定义时所在的对象，而不是使用时所在的对象。）  
2.new 不可用。箭头函数不能用new关键字来实例化对象，否则报错。  
3.this指向不会改变。函数内置this指向不可改变，this在函数体内整个执行环境中为常量。有利于JavaScript引擎优化处理。  
4.没有arguments对象。不能通过arguments对象访问传入的实参。只能使用显示命名或者其它新特性完成。

**13.BFC**

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。  
2、position的值不是static或者relative。  
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex  
4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

**14.进程和线程**

进程至少包括1个线程，可包含多个线程  
进程有自己的内存空间，多个线程共享内存  
多进程的程序比多线程的程序更健壮，因为一个线程挂掉就等于该进程挂掉

进程是动态的、多个进程可以含有相同的程序和多个进程可以并发运行。

**15.JS中单线程，以及同步和异步**

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
      var elements = document.getElementsByTagName("li");
      for (var i=0;i<elements.length;i++){
         elements[i].onclick =function( ){
           alert(i); 
         };
     }

输出： 4 4 4 4

js是单线程的，一个时间点只能做一件事，优先处理同步任务； 按照代码从上往下执行，遇到异步，就挂起，放到异步任务里，继续执行同步任务，只有同步任务执行完了，才去看看有没有异步任务，然后再按照顺序执行！

这里for循环是同步任务，onclick是异步任务，所以等for循环执行完了，i变成4了，注意：这里因为i是全局变量，最后一个i++，使得i为4(后面的onclick函数，最后在循环外面执行，不受i<length限制)； 所以for循环每执行一次，onclick事件函数都会被挂起一次，共4次； for循环结束后，点击事件 触发了4个onclick函数，接着输出4个4！

[https_www.nowcoder.com_profile_2496345_test_21517591_318667]: https://www.nowcoder.com/profile/2496345/test/21517591/318667
[https_www.cnblogs.com_yky-iris_p_7719895.html]: https://www.cnblogs.com/yky-iris/p/7719895.html
[https_blog.csdn.net_zhangyingchengqi_article_details_48489055]: https://blog.csdn.net/zhangyingchengqi/article/details/48489055
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220315/50bd003bc58b44d28777424a0852c5c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220315/c24071885de44b548674f7b22aa53a38.png
[https_blog.csdn.net_little_little0_0_article_details_78566870]: https://blog.csdn.net/little_little0_0/article/details/78566870
[20190301214204321.png]: /images/20220315/6eaad6cab2fc4002932e14e1005613d2.png
[https_bri-robby.iteye.com_blog_2269352]: https://bri-robby.iteye.com/blog/2269352
[https_www.jianshu.com_p_8eec15102720]: https://www.jianshu.com/p/8eec15102720
[20190301225720872.png]: /images/20220315/cf137307a90d420591575927fb231cad.png
[2019030212033428.png]: /images/20220315/1fc9cc6231544d9d93c38fc6172d7fdb.png
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Operators_delete]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220315/613db08fbef0417097585ada00875e3b.png