码上风云

记录精彩的程序人生

  menu
24 文章
0 浏览
2 当前访客
ღゝ◡╹)ノ❤️

2020年十道前端基础面试题,你会几个?

前端初级工程师面试中常见的问题有好多,下面总结一下常见的问题,先给问题,大家思考一下再看答案。
1.常用的浏览器内核有哪些?
2.行内元素与块元素有什么区别?
3.清除浮动有哪些方法?
4.如何理解JavaScript中的this?
5.原始类型与引用类型有什么区别?
6.如何深度克隆一个对象?
7.数组去除重复元素有哪些方法?
8.同步与异步的区别?
9.get请求与post请求的区别?
10.跨域请求有哪些方案?

下面只做简短的重点回答。
答案:
1.常用的浏览器内核有哪些?
答:
Trident 内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]
Gecko 内核:Netscape6 及以上版本,FF,MozillaSuite/SeaMonkey 等
Presto 内核:Opera7 及以上。 [Opera 内核原为:Presto,现为:Blink;]
Webkit 内核:Safari,Chrome 等。 [ Chrome 的:Blink(WebKit 的分支)]

2.行内元素与块元素有什么区别?
答:

  • 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。
  • 块级元素各占据一行
  • 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。
  • 行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置 width 无效,height 无效(可以设置 line-height),margin 上下无效,padding 上下无效

3.清除浮动有哪些方法?
答:

  • 给父级元素设置宽高,或者给父元素设置overflow 样式,不管是 overflow:hidden 或 overflow:auto
  • <div style="clear: both"></div>
.clear:after{

content:'';

display:block;

clear:both

}

4.如何理解JavaScript中的this?
答:
this 是 JavaScript 语言的一个关键字。
它是函数运行时,在函数体内自动生成的一个对象,只能在函数体内使用。
函数的不同使用场合,this 有不同的值。总的来说,this 就是函数运行时所在的环境对象。下面分四种情况,详细讨论 this 的用法。

  • 作为对象的方法调用
    当函数作为对象的方法被调用时, this 指向该对象
  • 作为普通函数调用
    当函数作为普通函数被调用时,this 指向全局对象(在浏览器的 JavaScript 里指向 window)
  • 构造器调用
    当函数作为构造函数被使用时,this 指向返回的这个对象
  • call 或 apply 调用

具体内容自己阐述。

5.原始类型与引用类型有什么区别?
答:

基本数据类型:

  • 基本数据类型的值是不可变的
  • 基本数据类型不可以添加属性和方法
  • 基本数据类型的赋值是简单赋值。
    (如果从一个变量向另一个变量赋值基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上)
  • 基本数据类型的比较是值的比较
  • 基本数据类型是存放在栈区的

引用类型

  • 引用类型的值是可以改变的
  • 引用类型可以添加属性和方法
  • 引用类型的赋值是对象引用
    (与基本数据类型的简单赋值不同,这个值的副本实际上是一个指针,而这个指针指向存储在堆内存的一个对象。那么赋值操作后,两个变量都保存了同一个对象地址,而这两个地址指向了同一个对象。因此,改变其中任何一个变量,都会互相影响)
  • 引用类型的比较是引用的比较
  • 引用类型是同时保存在栈区和堆区中的

6.如何深度克隆一个对象?
答:

克隆的概念:

浅度克隆:原始类型为值传递,对象类型仍为引用传递。
深度克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

function clone(obj){
    if(!obj ||typeof(obj) != 'object') return obj;
    var r = Array.prototype.splice === obj.splice ? []:{};
    for(var i in obj){
        if(obj.hasOwnProperty(i)){
            r[i] = clone(obj[i]);
        }
    }
    return r ;
}
//数组、对象都可以for in,同时针对对象必须需要判断hasOwnProperty属性,以防克隆原型链上的属性

7.数组去除重复元素有哪些方法?
答:

//方法1:
Array.prototype.method1 = function(){ 
       var arr=[];    //定义一个临时数组 
       for(var i = 0; i < this.length; i++){    //循环遍历当前数组 
           //判断当前数组下标为i的元素是否已经保存到临时数组 
           //如果已保存,则跳过,否则将此元素保存到临时数组中 
           if(arr.indexOf(this[i]) == -1){ 
               arr.push(this[i]); 
           } 
       } 
       return arr; 
   }

//方法2
Array.prototype.method2 = function(){  
            var h={};    //定义一个hash表  
            var arr=[];  //定义一个临时数组  
              
            for(var i = 0; i < this.length; i++){    //循环遍历当前数组  
                //对元素进行判断,看是否已经存在表中,如果存在则跳过,否则存入临时数组  
                if(!h[this[i]]){  
                    //存入hash表  
                    h[this[i]] = true;  
                    //把当前数组元素存入到临时数组中  
                    arr.push(this[i]);  
                }  
            }  
            return arr;  
        }  

//方法3
Array.prototype.method3 = function(){  
            //直接定义结果数组  
            var arr=[] ;
            for(var i = 1; i < this.length; i++){    //从数组第二项开始循环遍历此数组  
                //对元素进行判断:  
                //如果数组当前元素在此数组中第一次出现的位置不是i  
                //那么我们可以判断第i项元素是重复的,否则直接存入结果数组  
                if(this.indexOf(this[i]) == i){  
                    arr.push(this[i]);  
                }  
            }  
            return arr;            
        }  

//方法4
Array.prototype.method4 = function(){  
            //将数组进行排序  
            this.sort();  
            //定义结果数组  
            var arr=[];  
            for(var i = 1; i < this.length; i++){    //从数组第二项开始循环遍历数组  
                //判断相邻两个元素是否相等,如果相等说明数据重复,否则将元素写入结果数组  
                if(this[i] !== arr[arr.length - 1]){  
                    arr.push(this[i]);  
                }              
            }  
            return arr;  
              
        }  

//方法5
const set=new Set([1,2,3,4,4]);
console.log([...set]);//[1,2,3,4]; 
//[...set]是一个扩展运算符,将一个数组转为用逗号分隔的参数列表。

//方法6
function dedupe(array){
    return Array.from(new Set(array));
    //这里的 Array.from()方法是将两类对象转为真正的数组:类似数组的对象和可遍历的对象(包括es6新增的数据结构Set和Map)
 }

8.同步与异步的区别?
答:
同步:按照任务的顺序执行任务,前一个任务没有执行结束,下一个任务不会执行,要等待上一个任务执行结束.
异步:执行顺序是不确定的,由触发条件决定,什么时间执行也是不确定的,异步处理可以同时执行多个。

//同步好处
1、同步流程对结果处理通常更为简单,可以就近处理。
2、同步流程对结果的处理始终和前文保持在一个上下文内。
3、同步流程可以很容易捕获、处理异常。
4、同步流程是最天然的控制过程顺序执行的方式。
//异步的好处
1、异步流程可以立即给调用方返回初步的结果。
2、异步流程可以延迟给调用方最终的结果数据,在此期间可以做更多额外的工作,例如结果记录等等。
3、异步流程在执行的过程中,可以释放占用的线程等资源,避免阻塞,等到结果产生再重新获取线程处理。
4、异步流程可以等多次调用的结果出来后,再统一返回一次结果集合,提高响应效率。

使用场景:

//异步的使用场景:
1、*不涉及共享资源,或对共享资源只读,即非互斥操作
2、*没有时序上的严格关系
3、不需要原子操作,或可以通过其他方式控制原子性
4、*常用于IO操作等耗时操作,因为比较影响客户体验和使用性能
5、*不影响主线程逻辑
//同步的使用场景:
不使用异步的时候

总结:
同步的执行效率会比较低,耗费时间,但有利于我们对流程进行控制,避免很多不可掌控的意外情况;
异步的执行效率高,节省时间,但是会占用更多的资源,也不利于我们对进程进行控制

9.get请求与post请求的区别?
答:
FORM 中的 get post 方法区别 Form 中的 get 和 post 方法,在数据传输过程中分别对应了 HTTP 协议中的 GET 和 POST 方法。二者主要区别如下:

  • Get 是用来从服务器上获得数据,而 Post 是用来向服务器上传递数据。
  • Get 将表单中数据的按照 variable=value 的形式,添加到 action 所指向的 URL 后面,并且两者使用“?”连接,而各个变量之间使用 “&”连接;Post 是将表单中的数据放在 form 的数据体中,按照变量和值相对应的方式,传递到 action 所指向 URL。
  • Get 是不安全的,因为在传输过程,数据被放在请求的 URL 中,而如今现有的很多服务器、代理服务器或者用户代理都会将请求 URL 记录到日志文件中,然后 放在某个地方,这样就可能会有一些隐私的信息被第三方看到。另外,用户也可以在浏览器上直接看到提交的数据,一些系统内部消息将会一同显示在用户面前。 Post 的所有操作对用户来说都是不可见的。
  • Get 传输的数据量小,这主要是因为受 URL 长度限制;而 Post 可以传输大量的数据,所以在上传文件只能使用 Post(当然还有一个原因,将在后面的提到)。
  • Get 限制 Form 表单的数据集的值必须为 ASCII 字符;而 Post 支持整个 ISO10646 字符集。
  • Get 是 Form 的默认方法。

10.跨域请求有哪些方案?

  • 过滤器
    思路就是设置请求头,具体代码可以网上查一下
  • 注解方式
    在后台代码方法体上面添加@crossorigin
  • JSONP
    定义和用法:通过动态插入一个 script 标签。浏览器对 script 的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下)。
    特点:通过动态创建 script 来读取他域的动态资源,获取的数据一般为 JSON 格式。
    注意:只对 get 请求有效
  • 配置 nginx 实现
    location 添加如下:
add_header 'Access-Control-Allow-Origin' $http_origin;
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
	add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
	if ($request_method = 'OPTIONS') {
		add_header 'Access-Control-Max-Age' 1728000;
		add_header 'Content-Type' 'text/plain; charset=utf-8';
		add_header 'Content-Length' 0;
		return 204;

think twice, code once