面试常见问题

最新推荐文章于 2024-06-07 10:38:23 发布

诸葛胖虎

最新推荐文章于 2024-06-07 10:38:23 发布

阅读量135

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43074337/article/details/98039454

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

声明变量的若干种方法

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，除此之外还有另外两种声明变量的方法：import命令和class命令。

在所有情况下，都取到顶层对象的方法

// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

元素左右居中问题

文字居中：text-align:center 可让文字水平居中，line-height的值与height相同则垂直居中
块元素：margin:0 auto 可让块元素在父元素内水平居中。
行内元素：可display:block（以块元素显示）再margin:0 auto；
flex弹性布局
已经知道元素宽度/高度，left/top:50%,margin-left/margin-top: -元素宽度/高度一半

javascript的类型

number/string/object/null/undefined/boolean/symbol

ECMAScript和JavaScript的区别:

可以简单理解javaScript = ECMAScript + DOM + BOM
ECMAScript是语言规范,一种标准，javascript是遵守这套规范的具体实现

闭包相关问题

闭包指的是：能够访问另一个函数作用域的变量的函数。清晰的讲：闭包就是一个函数，这个函数能够访问其他函数的作用域中的变量。

function outer() {
     var  a = '变量1'
     var  inner = function () {
            console.info(a)
     }
    return inner    // inner 就是一个闭包函数，因为他能够访问到outer函数的作用域
}

为什么要return呢？因为如果不 return，你就无法使用这个闭包。把 return inner 改成 window.inner = inner 也是一样的，只要让外面可以访问到这个 inner 函数就行了。

所以 return inner 只是为了 inner 能被使用，也跟闭包无关。

闭包的作用
闭包常常用来「间接访问一个变量」。换句话说，「隐藏一个变量」。

假设我们在做一个游戏，在写其中关于「还剩几条命」的代码。
如果不用闭包，你可以直接用一个全局变量：

window.lives = 30 // 还有三十条命

这样看起来很不妥。万一不小心把这个值改成 -1 了怎么办。所以我们不能让别人「直接访问」这个变量。怎么办呢？

用局部变量。

但是用局部变量别人又访问不到，怎么办呢？

暴露一个访问器（函数），让别人可以「间接访问」。

代码如下：

!function(){

  var lives = 50

  window.addLives = function(){
    lives += 1
  }

  window.delLives = function(){
    lives -= 1
  }

}()

闭包带来的问题
1.引用的变量可能发生变化
2.this指向问题
注意，内存泄漏是IE的bug斌不是闭包带来的问题

数组排序方法

1.冒泡排序
2.选择排序
3.插入排序
4.快速排序
5.arr.sort()

let arr = [1, 20, 49, 32, 43, 69];
arr.sort();
console.log(arr); // [1, 20, 32, 43, 49, 69]

//另一种写法
arr.sort(function(a, b){
    return a - b;
});
console.log(arr); // [1, 20, 32, 43, 49, 69]
//倒序
arr.sort(function(a, b){
    return b - a;
});
console.log(arr); // [69, 49, 43, 32, 20, 1]

cookies和webstorage

诞生的最初目的是为了记录会话状态，以方便服务器端使用。
cookies 的缺点
1.cookie体积过大会造成请求和响应速度变慢。
2.默认浏览器会任何请求都把cookie带上去（即使不需要），哪怕是静态资源。
3.cookie可以在前后端修改，数据容易篡改或伪造。
4.cookie对于敏感数据的保护基本是无效的。
5.有些用户是禁用掉cookie的。
6.cookie 不能跨越多个域名使用。
7.单个 cookie 保存的数据不能超过 4k
webstorage
Web Storage又分为两种： sessionStorage 和localStorage ，即这两个是Storage的一个实例。从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地。其API提供的方法有以下几种：

    - setItem (key, value) ——  保存数据，以键值对的方式储存信息。

    - getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

    - removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

    - clear () ——  删除所有的数据

    - key (index) —— 获取某个索引的key

使用方法，以localstorage为例

     let storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

在这里插入图片描述

清除浮动

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
clear：both：本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来
缺点：添加无意义标签，语义化差
2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
通过触发BFC方式，实现清除浮动
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
3.使用after伪元素清除浮动（推荐使用）

  .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;/*content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少*/
        height: 0;
        clear:both;
        visibility: hidden;/**visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来/
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

原理和第一种方法在本质上是一样的
优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
4.使用before和after双伪元素清除浮动


     .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>

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

伪数组

伪数组就是具有length属性的特殊的对象
常见的伪数组有：
1.函数内部的 arguments
2.DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）
3.jQuery 对象（比如 $(“div”) ）

转为真数组的方法：
1.ES5方法：

let newElem = Array.prototype.slice.call(elem)

2.ES6方法：

let newElem = Array.from(elem)

3.声明一个空数组，通过遍历伪数组把它们重新添加到新的数组中

数组去重

1.for循环嵌套，利用splice去重


function newArr(arr){
    for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++)
            if(arr[i]==arr[j]){ 
            //如果第一个等于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
            }
        }
    }
    return arr;
}
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];

2.建新数组，利用indexOf去重


function newArr(array){ 
    //一个新的数组 
    var arrs = []; 
    //遍历当前数组 
    for(var i = 0; i < array.length; i++){ 
        //如果临时数组里没有当前数组的当前值，则把当前值push到新数组里面 
        if (arrs.indexOf(array[i]) == -1){ 
            arrs.push(array[i])
        }; 
    } 
    return arrs; 
}
var arr = [1,1,2,5,5,6,8,9,8];

3.建新数组，利用includes去重

function unique(arr) {
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))

4.ES6中利用Set去重


function newArr(arr){
    return Array.from(new Set(arr))
}
 
var arr = [1,1,2,9,6,9,6,3,1,4,5];
console.log(newArr(arr))

5.利用sort

function unique(arr) {
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
     var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
     console.log(unique(arr))

6.[…new Set(arr)]
简化上文set方法，缺陷不能删除空对象

对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

xhtml和html有什么区别

HTML是一种基本的WEB网页设计语言，XHTML是纯净版HTML
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素

行内元素(内联元素)和块元素的区别

块元素
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。

Doctype作用

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

严格模式与混杂模式如何区分？它们有何意义？

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

对标签语义化如何理解

用正确的标签做正确的事情
HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

1、 Position属性的值有哪些？怎样使用？

static/relative/fixed/absolute/inherit/sticky
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。
fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。
relative元素的定位是相对它自己的正常位置的定位。
absolute元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
Inherit是继承父元素的position值

CSS Hack

CSS hack是通过在CSS样式中加入一些特殊的符号，通过不同的浏览器识别不同符号的特点，以达到应用不同的CSS的样式效果，作用:让CSS代码兼容不同的浏览器。

HTML5有哪些新特性

HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储的更好的支持；新的特殊内容元素，比如 article、footer、header、nav、section；新的表单控件，比如 calendar、date、time、email、url、search。

移除的新元素<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>

如何区分h5与html

1、在文档声明上，html有很长的一段代码，并且很难记住这段代码，都是靠工具直接生成，而html5却是不同，只有简简单单的声明，也方便人们的记忆，更加精简。

2、在结构语义上:html没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>

什么是FOUC?如何解决？

文档样式短暂消失,主要是指某些页面会在浏览器中出现一些情况:一开始一段短暂的时间页面是没有样式的，随着页面加载样式才慢慢显现.
原因：
1.使用import方法导入样式表。
2.将样式表放在页面底部
3.有几个样式表，放在html结构的不同位置。
原理
当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中

一次完整的HTTP事务是怎样的过程？

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

事件冒泡与事件捕捉

事件冒泡：父子div都有click事件，点击子元素，父元素的click事件也会被触发
事件捕捉，与事件冒泡相反
W3C使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。IE则是使用e.cancelBubble = true。W3C使用event.preventDefault()可以取消默认事件。IE则是使用e.returnValue = false。
先捕获后冒泡

常见HTTP状态码

2开头（请求成功）表示成功处理了请求的状态代码。

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 （已创建）请求成功并且服务器创建了新的资源。
202 （已接受）服务器已接受请求，但尚未处理。
203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容）服务器成功处理了请求，但没有返回任何内容。
205 （重置内容）服务器成功处理了请求，但没有返回任何内容。
206 （部分内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向。

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求）服务器不理解请求的语法。
401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 （禁止）服务器拒绝请求。
404 （未找到）服务器找不到请求的网页。
405 （方法禁用）禁用请求中指定的方法。
406 （不接受）无法使用请求的内容特性响应请求的网页。
407 （需要代理授权）此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408 （请求超时）服务器等候请求时发生超时。
409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型）请求的格式不受请求页面的支持。
416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500 （服务器内部错误）服务器遇到错误，无法完成请求。
501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

诸葛胖虎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试常见问题

声明变量的若干种方法ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，除此之外还有另外两种声明变量的方法：import命令和class命令。在所有情况下，都取到顶层对象的方法// 方法一(typeof window !== 'undefined' ? window : (typeof process === 'object...
复制链接

扫一扫