HTML/CSS

1.什么是盒子模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分组织用来分隔相邻的区域。这四个部分一起构成了css中元素的盒模型

2.行内元素有哪些？块级元素有哪些？空（void）元素有哪些

行内元素：a 、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系统没有内容的HTML元素，例如：hr、br、meta、link、img、input

3.css实现垂直水平居中

父元素display:flex;justify-content:center;align-items:center;
父元素text-align:center;
子元素margin:0 auto;

4.简述一下src与href的区别

href是指网络资源所在的位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的文职，直线改的内容将会嵌入到文档中当前标签所在位置；在请求src资源是会将其直线改的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕之后，图片和框架等元素也是如此，类似于将所指向资源嵌入到当前标签内。这也是为什么将js脚本放在底部而不是头部。

5.px和em的区别

相同点：px和em都是长度单位；
异同点：px的值固定的，指定是多少就是多少，计算比较容易。em的值是不固定的，并且em会继承父元素的字体大小。
浏览器的默认字体高都是16px、所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em,10px=0.625em.

6.sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器存储的缓存数据
不同点：
（1）存储内容是否发送到服务器端：当设置了Cookie后，数据会发送到服务器端，造成一定的贷款浪费；
localStorage会将数据保存到本地，不会造成宽带浪费；
（2）数据存储大小不同，Cookie数据不超过4k，适用于回话标识；localStotage数据存可以达到5M
（3）数据存储的有效位不同：cookie只在设置了Cookie过期时间之前一直有效，即使关闭窗口或者浏览器；sessionStorage，仅在关闭浏览器之前有效；localStorage数据存储永久有效；
（4）作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

JavaScript

1.js的数据类型有哪些？

基本数据类型：Number,String,Boolean,underfined
引用数据类型：Object(Array,Null也属于Object)

2.JavaScript中如何检测一个变量是一个String

typeof（obj）===“string”
obj.constructor===string

3.列举一些常用的字符串方法

concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。
indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项，返回 -1 。
charAt() – 返回指定位置的字符。
lastIndexOf() – 返回字符串中一个子串最后一处出现的索引，如果没有匹配项，返回 -1 。
match() – 检查一个字符串是否匹配一个正则表达式。
substr() 函数 – 返回从string的startPos位置，长度为length的字符串
substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。
slice() – 提取字符串的一部分，并返回一个新字符串。
replace() – 用来查找匹配一个正则表达式的字符串，然后使用新字符串代替匹配的字符串。
search() – 执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。
split() – 通过将字符串划分成子串，将一个字符串做成一个字符串数组。
length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。
toLowerCase() – 将整个字符串转成小写字母。
toUpperCase() – 将整个字符串转成大写字母。

4.怎样添加、移除、移动、复制、创建和查找节点？

1.创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

5.如何理解闭包？

1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。

2、表现形式：使函数外部能够调用函数内部定义的变量。 3、实例如下：

(1)、根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count

function add(){
    var count=0;    //函数全局作用域 标记为flag2
    return function(){
        count+=1;   //函数的内部作用域
        alert(count);
    }
}
var s = add()
s();//输出1
s();//输出2

6.什么是跨域？跨域请求资源的方法有哪些？

（1）、什么是跨域？

1.由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况： 2.网络协议不同，如http协议访问https协议。 3.端口不同，如80端口访问8080端口。 4.域名不同，如qianduanblog.com访问baidu.com。 5子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。域名和域名对应ip,如www.a.com访问20.205.28.90. （2）、跨域请求资源的方法：

1、porxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

2、CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

3、jsonp 定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通常情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

    function testjsonp(data) {
       console.log(data.name); // 获取返回的结果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>复制代码

7.Array相关的属性和方法有哪些

Array 对象属性
constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。
Array 对象方法
concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素。
shift() 删除并返回数组的第一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
valueOf() 返回数组对象的原始值

8..let、count、var区别？

var：js中定义变量，有变量提升。
let：js中定义变量，只在声明的代码块中生效（块级作用域）、暂时性死区（在声明变量之前无法读取或操作这个变量）、没有变量提升、无法重复声明。
const：js中定义常量，const声明的是一个常量,const声明的变量必须要进行初始化不能够重新赋值

9.箭头函数相对于普通函数有啥区别

（1）没有自己的this，指向外层普通函数作用域
（2）没有constructor，不能通过new 调用；
（3）没有new.target 属性
（4）不绑定Arguments 对象

9.对promise的理解？

promise有三种状态:pending/reslove/reject 。pending就是未决,resolve可以理解为成功,reject可以理解为拒绝 promise构造函数是同步执行的，then方法是异步执行的

10.promise的三种状态？这三种状态什么时候存在？这三种状态什么时候改变？

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。

11.三种状态后接的方法？

可以用 promise.then()，promise.catch() 和 promise.finally()这些方法将进一步的操作与一个变为已敲定状态的 promise 关联起来，.then返回的数据永远是promis可一直.then。

12.promise的all和rece

all与then同级的另一个方法，all方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。 all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调

2023京文教育前端面试题汇总

HTML/CSS

JavaScript