记录一下最近面试前端实习遇到的题目笔试题 split()和join()的区别写一个两栏布局，左侧宽度固定，右侧宽度自适

笔试题 + 面试题

1. `split()`和`join()`的区别

split(param)用于把一个字符串切割成字符串数组，参数是分割符；join(param)用于把一个数组转换成一个字符串，参数是分隔符，默认为,；

2. 写一个两栏布局，左侧宽度固定，右侧宽度自适应

3. DOM如何取消冒泡和阻止默认事件

取消冒泡：

在目标元素事件函数中设置：event.stopPropagation() ；不支持IE9以下

在目标元素事件函数中设置：event.cancelBubble = true;兼容IE 封装取消冒泡函数：

function stopBubble(event){
    if(event.stopPropagation){
        event.stopPropagation()     //W3C标准，IE9以下不兼容
    }else{
        event.cancelBubble = true   //兼容IE
    }
}

阻止默认事件：

return false;

event.preventDefault();

event.returnValue = false; 封装函数：

function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

参考🔗：DOM初探（26）——取消冒泡和阻止默认事件

4. 反转字符串

str.split('').reverse().join('')
for-of循环

   let str = 'abcdefd', res = ''
   for(let ch of str){   res = ch + res;   }

charAt()

   let str = 'abcdefd', res = ''
   let strArr = str.split('')
   for(let i=strArr.length-1; i>=0; i++){  res += strArr[i]; }

5. 数组的`splice()`用法

语法：arr.splice(startIndex, howmany, item1, item2, ..., itemX)

参数	描述
startIndex	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, ..., itemX	可选。要添加到数组中的新项目。

参考🔗：JavaScript Array splice() 方法
该方法会改变原数组。 返回值：新数组，包含删除的项目（如果有）

6. 介绍一下`Promise`，都有哪些方法？

Promise对象是JavaScript的异步操作解决方案，为异步操作提供统一接口。Promise可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。
Promise通过自身的状态来控制异步操作。Promise实例有3种具体状态：

异步操作未完成（pending）
异步操作成功（fulfilled）
异步操作失败（rejected）以上三种状态的变化只有两种：
未完成->成功
未完成->失败 一旦状态发生变化，就不会再有新的状态变化。即Promise实例的状态变化只可能发生一次。
有哪些方法？
构造函数：使用Promise构造函数生成实例对象

const p = new Promise((resolve, reject) => {
    if(/*异步操作成功*/)   resolve(value)
    else    reject(new Error())
})

Promise.prototype.then()：用来添加回调函数，该方法可以链式调用

const p = new Promise((resolve, reject) => {
    resolve('成功！')
})
p.then(value => {
    console.log(value);
})

Promise.prototype.catch()：用于指定发生错误时的回调函数

getJSON('./posts.json').then(function(posts){
    //...
}).catch(function(error){
    console.log('发生错误！', error)
})

如果该对象状态变为resolved，将会调用then方法指定的回调函数；如果异步操作抛出错误，状态变为rejected，就会调用catch()方法指定的回调函数。如果then()方法指定的回调函数运行中抛出错误，也会被catch()方法捕获。

Promise.prototype.all()：将多个Promise实例包成一个新的Promise实例。

const p = Promise.all([p1, p2, p3])

p的状态由p1, p2, p3决定，分成两种情况。

只有p1, p2, p3状态都变成fulfilled，p的状态才会变成fulfilled，此时，p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Promise.race()：将多个Promise实例包成一个新的Promise实例。 Promise.race()方法的参数与Promise.all()方法一样，但是只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

7. 你用过哪些`ES6`的新特性？具体用法是怎样的呢？

模板字符串：支持换行，使用${}包裹一个变量或者表达式
数组解构和对象解构：可以快速获取数组和对象的值

const arr = [1, 2, 3, 4]
const [num1, num2, num3, num4] = arr

const obj = {id: 1, name: '张三'}
cosnt {id, name} = obj

展开语法：...
箭头函数：函数的快捷写法，箭头函数内部的this指向的是定义时所在的对象。
对象的简化赋值：变量名和属性名一致，可以简写。
函数的默认参数值：function a(x = 1){...}

8. `HTTP`状态码相关知识：文件被下载返回的状态码是？

200：请求成功
301：资源被永久转移到其它URL
404：请求的资源（网页等）不存在
500：内部服务器错误

9. 设置一个dom元素不出现在页面上有哪几种方法？

display: none
visibility: hidden
width\height: 0
opacity: 0
left\top：改变元素位置
margin负值：
用一个跟页面背景颜色相同的dom元素盖住它

10. 语义化标签

语义化是根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器更好的解析。 简单理解：用正确的标签包含了正确的内容，使得文档解构良好，便于阅读。
语义化的好处：

丢失样式的时候能够让页面呈现出清晰的解构
方便其它设备解析（如屏幕阅读器，盲人阅读器等）以意义的方式来渲染网页
有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效的信息；
便于团队开发和维护，语义化更具可读性；

11. 常用的块级元素、行内元素、空元素

行内元素：a（链接），span，label，strong（强调文本），label（为input元素定义标注），em（强调文本）等。
块级元素：div，ul，li，dl，dt，h1-h6，p等
空元素（没有实际内容的元素）：br，hr，col，img，input，link，meta等参考🔗：HTML 空元素

11. CSS选择器

id选择器（#content { ... }）：通过对应的 id 属性来选择元素
类选择器（.content { ... }）：通过对应的 class 属性来选择元素
伪类选择器（a:hover { ... }，li: last-child { ... }）：以一个冒号开头，用于选择元素的特定状态和关系
属性选择器（a[href="external"] { ... }）：基于元素的某个属性或属性是否有某个值来选择元素
标签选择器（div { ... }，p { ... } ）：用于选择特定类型的元素
伪元素选择器（a:before { ... }）：伪元素用于创建一些不在文档树中的元素并为其添加样式
上下文选择器：使用文档DOM结构来进行css选择的。
- 相邻同辈选择器（p + p { ... }）：选择位于某个元素后面，并与该元素拥有共同父元素的元素
- 子选择器（body > p { ... }）：只选择一个元素的直接后代，即子元素
- 后代选择器（body p { ... }）：用于选择某个或者某组元素的后代元素
通用选择器（* { ... }）：可以匹配任何元素选择器优先规则：

!important > 行内样式 > id选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通用选择器样式表来源不同时，选择器生效的优先级样式：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义的样式 > 浏览器默认样式 !important标记，优先级最高

12. BFC

参考🔗：BFC：块级格式化上下文

13. 浮动

参考🔗：CSS：浮动

14. `script`标签的`async`和`defer`

参考🔗：script元素的async属性和defer属性

15. `new`操作的流程

一个新的空对象被创建并分配给 this。

函数体执行。通常它会修改 this，为其添加新的属性。

返回 this 的值。如果构造函数中设置了return语句：

如果 return 返回的是一个对象，则返回这个对象，而不是 this。

如果 return 返回的是一个其它类型（包括原始类型，数组等），则忽略。参考🔗：构造器和操作符 "new"

16. 使用`setTimeout`实现`setInterval`

参考🔗：用setTimeout实现setInterval

17. 重绘和回流

回流：当渲染树中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建的过程叫回流（改变大小、布局）。
重绘：当渲染树中的一部分元素需要更新属性，如改变元素的外观、风格，而不影响布局的重新渲染的过程叫重绘（改变样式）

举例什么行为会产生重绘？什么行为会产生回流？
参考🔗：面试题总结：说一下对回流和重绘的理解

18. 如何进行页面优化？

参考🔗：前端性能优化总结

19. 你了解HTTP缓存吗？

参考🔗：http缓存详解，http缓存推荐方案

20. `sort()`的原理

太晚了，我不想看了。。。等明天继续
。。。待更新

记录一下最近面试前端实习遇到的题目

笔试题 + 面试题

1. split()和join()的区别