前言

知识体系回顾

一、HTML

1、HTML5

语义化

• 让页面的内容结构化，便于对浏览器、搜索引擎的解析
• 利于seo，爬虫可以分析关键词的权衡
• 便于团队的维护和开发
• 方便多设备解析 列举下常用的HTML5标签

<!-- 头部 -->
<header>
  <nav></nav>
</header>

<!-- 内容区 -->
<main>
  <!-- 左侧 -->
  <article>
    <!-- 左侧标题 -->
    <header></header>
    <!-- 图片区块 -->
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
  </article>

  <!-- 右侧 -->
  <aside>
    <!-- 友情链接 -->
    <nav></nav>
    <section></section>
  </aside>
</main>

<!-- 底部 -->
<footer></footer> // 语义化
......
<canvas> // 绘图
<video>
<audio> // 媒介回放
date、calendar、time // 表单控件
localStorage、sessionStorage// 本地存储
webSocket // 允许服务端主动向客户端推送数据
webworker
...
...

2、行内元素/块级元素

<span></span>
<a></a>
<img>
<select> // 行内元素
...
<h1>to<h6>
<div></div>
<ul></ul>
<table></table> // 块级元素
...

1）、行内元素
①：设置宽高无效
②：对margin设置左右方向有效，而上下无效，padding设置都无效
③：不会自动换行

2）、块级元素
①：可以设置宽高
②：设置margin和padding都有效
③：可以自动换行
④：多个块状，默认排列从上到下

3、SEO

• seo，中文字面意思，搜索引擎优化

• 实现来源，页面抓取，检索优化...

• 常用优化seo的简单方法，

  • title、description、keywords
  • 标签语义化
  • 少用iframe嵌套

4、link与@import

link、@import，都是用来引入css

优先级

• link > @import

两种方式区别

• 加载顺序，link引用的css会被同时加载，@import引用的css会等页面全部被下载完再加载
• 兼容性区别，link无兼容性之说，@import至少得IE9以上吧
• 引入的内容不同，link，还可以引入图片等资源文件，@import只引用样式文件
• 对js的支持不同，link支持使用JS控制DOM去改变样式，@import不支持

二、CSS

1、BFC原理

BFC：块级格式化上下文 Block Formatting Context
需要知道 Box Formatting Context 分别指的是什么

Box：CSS布局的基本单位

• block-level box 块级元素 ，display属性为block,
• inline-level box 行内元素，display属性为inline,
• run-in box: css3特有

Formatting Context

• 指的是页面的一块渲染区域
• 有自己的渲染规则，决定了其子元素如何定位，以及和其他元素的关系和相互作用

产生BFC的条件

• 根据元素或者其他包含他的元素
• 浮动元素（元素的float不是none）
• 绝对定位元素（position为absolute,fixed）
• 内联块（display: inline-block/flex/grid）
• overflow:hidden

BFC的特性

• 内部的Box会在垂直方向，一个接一个的放置
• BFC元素的高度会包含浮动元素
• BFC垂直方向的距离由margin决定，同时相邻的块级盒子的垂直边距会产生折叠 ...

BFC解决问题

• 清除浮动
• 避免margin重叠

2、盒子模型

从字面上理解就是用来包裹html标签的容器，标准盒子/怪异盒子模型都是由 content+padding+border+margin，组成

• W3C盒子模型
  • 可通过box-sizing: content-box来设置
  • 总的来说包括，content+padding+border+margin
• IE盒子模型
  • 可通过box-sizing: border-box来设置
  • 总的来说包括，content(padding+border)+margin

示意图

3、CSS Modules

4、Flex布局

5、css3特性

6、移动端样式适配

7、常见兼容性

8、垂直居中的方法有哪些

参考 面试分享：两年工作经验成功面试阿里P6总结

9、伪类和伪元素

10、样式优化

11、清除浮动的几种方式

12、说说CSS选择器，和优先级

三、JavaScript（基础）

1、基础知识

参考文献

• javascript面试题之null和undefined的区别

• 基本数据类型

  • string
  • number
  • null
  • undefined
  • boolean

• 引用类型

  • object
  • array
  • function

• null、undefined的区别？

  • null与undefined是两种不同的数据类型
  • null 是表示无,空值
  • undefined 表示未定义，不存在

• 易错场景✔️对比

  // 类型不一样
  console.log(typeof undefined, "undefined")// undefined;
  console.log(typeof null, "null")// object;也可以这样理解，null是一个对象的占位符，表示这个对象还没有初始化，是个空对象

  // 转为数值时，值不一样
  console.log(Number(null)); // 0
  console.log(Number(undefined)); // NaN

  // 判断null和undefined时，一定要使用===全等

  console.log(null === undefined); // false，
  console.log(null == undefined); // ture

• 使用场景

• null

  • null，作为对象原型链的终点。

  Object.getPrototypeOf(Object.prototype)
  // null
  

  • null，作为函数参数，表示函数的参数不是对象。

  function testObj(obj){
    if(null === obj){
      // 异常处理，创造一个新对象
    }
    // ...
  }
  

• undefined

  • undefined，被声明了，但是没有赋值。

  var i;
  console.log(i); // undefined
  

  • undefined，函数没有返回值时，默认返回的就是undefined。

  var a=f();
  a // undefined
  

  • undefined，对象没有赋值属性。

  var a= new Object();
  a.b // undefined
  

  • undefined，调用函数时，应该提供的参数没有提供，该参数就是undefined。

  function f(x){
    console.log(x)
  }
  f()
  // undefined
  

2、原型和原型链

指构造函数的内置属性，prototype属性，每一个函数对象里面会默认一个protoptype属性，这个属性指向函数的原型对象。

Prototype.constructor会指向原构造函数。

对象的原型，也是个对象。只要对象的原型有值，不为null，他就还有原型，所以构成了原型链。

3、作用域和闭包

4、数组的一些问题

参考文献

• 数据结构 - 数组
• JS实现数组去重方法整理

• 问题一、slice()和splice()的区别？

• slice(start，end)，从已有的数组中返回你选择的某段数组元素

  • start，表示从何处开始选取，end,表示从何处结束选取
  • start可以是个负数，-1表示从最后一个，-2倒数第二个....
  • end如果没有指定参数，那就是默认的到数组的最后一个

• splice(index,howmany,item1,....,itemX)，从数组中添加或者删除元素，然后返回被删除的数组元素

  • index，表示从什么位置开始添加/删除
  • howmany，表示删除的元素数量，| 0 表示不删除数组元素
  • item1....itemx，表示新增的数组元素

• 问题二、尽可能多的说出几种数组去重的方法？

• 方案一、Array.filter()+indexOf

function distinct(a,b) {
    let arr = a.concat(b);
    return arr.filter((item,index) => {
        return arr.indexOf(item) === index;
    })
}

• 方案二、for...of+includes()

function distinct(a,b) {
    let arr = a.concat(b)
        let result = []
        for (let i of arr) {
            !result.includes(i) && result.push(i)
        }
        return result
}

includes()，成功返回true，失败返回false

• 方案三、双重for循环

function distinct(a, b) {
    let arr = a.concat(b);
    for (let i=0, len=arr.length; i<len; i++) {
        for (let j=i+1; j<len; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
                len--;
                j--;
            }
        }
    }
    return arr
}

• 方案四、Array.sort()

function distinct(a, b) {
    let arr = a.concat(b)
    arr.sort(function(a,b){        //对数组进行排序才能方便比较
        return a - b;
    })
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}

• 方案五、for...of+Object（执行结果效率而言相对较高）

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }

    return result
}

• 方案六、ES6的new Set()

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}

• 问题三、数组遍历的几种方法？

• forEach

• map

• filter

• some、every

• reduce

• forEach

• for of

• 问题四、数组删除的几种方法？

5、深浅拷贝

6、this关键字

7、你对this、apply、call、bind的理解？

参考文献

• 「前端料包」一文彻底搞懂JavaScript中的this、call、apply和bind 常见的一些问题汇总

• 1、apply和call的区别？

• 2、什么场景下用apply，什么场景下用call

• apply

• 定义：方法能劫持另外一个对象的方法，继承另外一个对象的属性

• Function.apply(obj,args)

  • obj这个对象，将代替Function类里this对象
  • args这个是数组，将作为参数出传给Function(args->arguments)

function Person(name,age) {
  this.name=name;
  this.age=age; 
}
function Student(name,age,grade) {
  Person.apply(this,arguments)
  this.grade=grade;
}
// 创建一个学生类
const name = new Student('张三'，'21','大四');

// nanme:张三 age:21 grade 大四

// 也就说用Student去执行Person这个类里面的内容，Person这个类里面的存在this.name等之类语句，也就是等同于在Student对象里面也创建了同样属性

• call

• 字面意思和apply相同

• Function.apply(obj,[param1[,param2[,...[paramN]]]])

  • obj这个对象，将代替Function类里this对象
  • params，这个是一个参数列表

// 可以直接将上面的Student的函数里面apply换成call
Person.call(this,name,age)

8、new关键字

9、类型判断

10、for循环对比

11、