前端小白面试一定会遇到的坎(持续不定期更新)

本人是一个前端小白,自己总结面试及工作学习中遇到的一些问题,如果有错误,希望大家能及时指出,我也会及时更正

1)html篇

1.盒子模型包括什么

盒子模型包括: 内容(content) + 边框(border) + 内边距(padding) + 外边距(margin)

2.水平居中的方式

1:通过设置margin: 0 auto;text-align: center;实现水平居中
2:通过flex属性,父盒子设置flex属性,子盒子设置align-self: center;
3:通过定位实现水平居中
4:将内部盒子转化为display:inline-block;搭配text-align:center;实现水平居中

1.盒子垂直水平居中

1:利用定位;父盒子相对相对定位,子盒子绝对定位;子盒子设置left:50%;top:50%;transform:translate(-50%,-50%); 实现水平垂直居中
2:利用flex属性,父盒子设置flex属性.子盒子设置justify-content: center; align-items: center;实现水平垂直居中

2)javascript篇

1.js有哪些数据类型

js数据类型包括: Number, String, Boolean, Null, Object, Undefined

2.如何判断一个变量是不是数组

用Array.isArray()方法, 正确返回true, 错误返回false

3.数组去重的方法

1:利用ES6的Array.from(new Set(array))方法,传入一个数组;
2:利用双重for循环配合splice去重

function unique(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,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, >0, 'a', 'a',{},{}];
   console.log(unique(arr))
   //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直>接消失了

这是我自己常用的两种,还有多种方法,大家可以在网上查询搜集.

4.深拷贝和浅拷贝有什么方法,区别是什么

浅拷贝: 数组可以用splice()方法和concat()方法实现浅拷贝,对象可以用Object.assign()方法实现浅拷贝
深拷贝: 数组和对象都可以用json.parse()，json.stringify()序列化的方式实现深拷贝
区别: 浅拷贝只是仅仅复制对象的引用，而不是对象本身,深拷贝则是把复制的对象所引用的全部对象都复制一遍

2)jQuery篇

1.什么是jQuery,跟原生js有什么区别

jQuery是一个简洁而快捷的javascript库,里面封装了大量的DOM操作,以及一些css样式表的,提高系统性能和我们开发的效率
js与jq本质的区别就是js是一个脚本语言,而jq只是基于js开发的一个库,方便我们更好的编程; 在操作方面,jq有更为简洁的获取DOM元素的方法

**2.jQuery有哪些选择器 **

1.元素选择器:

$("p") 选取 <p> 元素。

2.id选择器

$("#box") 选取id="box" 的元素。

3.class选择器

$(".box") 选取所有 class="box" 的元素

4.属性选择器:

$("[href]") 选取所有带有 href 属性的元素。。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

具体可参考链接: https://blog.csdn.net/weixin_43675447/article/details/87870597.

什么是链式编程

对象不停地调用方法,像一条链子一样;
对象.方法().方法().方法();
注意: 对象调用方法,如果返回值还是当前对象,那么就可以继续调用方法,如果返回的不是当前对象或者不是一个对象,则不能继续调用