总结

发表于 | 更新于 | 分类于

箭头函数于普通函数的区别

  1. 函数的this代表不一样：

    • 箭头函数，this代表上层对象，若无自定义上层，则代表window。 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()，call()和apply()都会立即执行，而bind()会先创建一个函数实例，然后手动的去执行；

      • 函数.call(对象,arg1,arg2….)
      • 函数.apply(对象，[arg1,arg2,…])
      • var ss=函数.bind(对象,arg1,arg2,….)

    • 普通函数，this代表当前对象。

let、const、var区别

  1. var声明变量存在变量提升，let和const不存在变量提升
  2. let和const有块级作用域
  3. 同一作用域下let和const不能声明同名变量，而var可以

浅拷贝和深拷贝

  • 浅拷贝

    1. Object.assign()
    2. Array.prototype.concat() //修改新对象会改到原对象
    3. Array.prototype.slice() //修改新对象会改到原对象
    • 【Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组】

  • 深拷贝

    1. 函数库lodash中的_.cloneDeep
    2. JSON.parse(JSON.stringify()) *详细地址
      • 深拷贝的方法有局限性，它只适用于一般数据的拷贝（对象、数组）
      • 如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式
      • 如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}
      • 如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失
      • 如果json里有NaN、Infinity和-Infinity，则序列化的结果会变成null；
      • 如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor；

map，forEach， for…in， for…of

  1. map：返回一个新数组，它不会检测一个空数组，也不会改变原始数组
  2. forEach：不会返回结果，必须要通过外部数组push，对数组进行值操作，会改变原来数组的值
  3. for…in：循环返回的值都是数据结构的 键值名。
  4. for…of：循环用来获取一对键值对中的值，这个是ES6新增的一个方法，不支持数组，可以中断循环

typeof instanceof

1.typeof：判断基本类型类型（number, string, undefined，boolean）,array,object,正则，日期等类型返回’object’
2.instanceof：用于判断一个变量是否某个对象的实例

js中递归，闭包

  • 递归：一个函数自己调用自己，递归应用场景(累加和，阶乘)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     //1.求1-n之间的累加和
        function getSum(n){
            //递归 ： 自己调用自己
            return n == 1? 1 : getSum(n-1) + n;
            // if(n == 1){
            //     return 1;
            // }else{
            //     return getSum(n-1) + n;
            // };
        };
        var num1 = getSum(100);
        console.log(num1);
       
    //2.求阶乘
        var res = (function(n){return n==1?1:n*arguments.callee(n-1)})(6);
        console.log(res);

        function getJieChen(n){
            //递归实现
            return n == 1?1:n*getJieChen(n-1);  
        };
        var n1 = getJieChen(5);
        console.log(n1);

  • 闭包：在函数外部访问函数内部变量

    reduce与递归将多维数组转换为一维数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//将二维数组转化为一维
  let arr = [[0, 1], [2, 3], [4, 5]]
  let newArr = arr.reduce((pre,cur)=>{
      return pre.concat(cur)
  },[])
  console.log(newArr); // [0, 1, 2, 3, 4, 5]

//将多维数组转化为一维
  let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
  const newArr = function(arr){
     return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
  }
  console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

  //递归
  let arr = [1, 2, 3, 4, 5, [6, 7, 8, [9, 10, 11, 12, [13, 14, 15, 16]]]]
  let newArr = [] // 存放转化后的一维数组
  function arrConversion (arr) {
    for (let i = 0; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
        arrConversion(arr[i])
      } else {
        newArr.push(arr[i])
      }
    }
  }
  arrConversion(arr)
  console.log(newArr) // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]

Html5新增

  1. 语义化标签：header,footer,nav,aside,aritcle等
  2. 新增视频video和音频audio标签
  3. 存储：sessionStorage将数据保存在session中，浏览器关闭后删除，大小5M，无数量限制，页面刷新不会消除数据；而localStorage则一直将数据保存在客户端本地，大小5M，无数量限制；补充cookie，存储在本地的数据，存储大小4K，可设定时效，且有数量限制；IE专属userData，大小1M，可设定时效，使用时需判断是否是IE浏览器

CSS权重

从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1，!important是无穷。

CSS3新特性

  1. animation配合keyframes使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
  -o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst{
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}
  1. transform 字面上就是变形，属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行translate平移、rotate旋转、scale缩放、skew斜切。
1
2
3
4
1.translate有2个参数，代表x轴和y轴, 只有1个参数时，只在x轴移动，y轴默认是0；transform: translate(10px,10px)
2.rotate(1800deg)参数值为正数顺时针旋转，值为负数逆时针旋转； transform:rotate(90deg)
3.scale(x,y)  x轴和y轴缩放，第二个参数没有默认取第一个参数的值，scale(0.5)参数值小于1缩小，scale(1.5)参数值大于1放大； transform:scale(1.2)
4.skew(x,y) 斜切 用法和rotate类似，在x轴和y轴同时进行角度扭曲，第二个参数没有时默认为0，不进行斜切； transform: skew(90deg,10deg)
  1. transition有4个值（默认是前2个值）：property(指定css属性的name)、duration（动画持续时间）、timing-function(切换动画的速度)、delay(动画执行前的延迟时间)

flex布局
媒体查询

less和sass

  1. Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，它可以运行在 Node 或浏览器端。
  2. Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

  3. 相同之处

    1、混入(Mixins)——class中的class；

    2、参数混入——可以传递参数的class，就像函数一样；

    3、嵌套规则——Class中嵌套class，从而减少重复的代码；

    4、运算——CSS中用上数学；

    5、颜色功能——可以编辑颜色；

    6、名字空间(namespace)——分组样式，从而可以被调用；

    7、作用域——局部修改样式；

    8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

  4. 区别

    Less是基于JavaScript，是在客户端处理的。

    Sass是基于Ruby的，是在服务器端处理的。

    关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

    输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

    Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持。

输入url到页面加载发生了什么

  1. 用户输入”吴彦祖”
  2. 浏览器通过DNS把url解析为IP
  3. 和IP地址建立TCP链接，发送Http请求
  4. 服务器接收请求，查库读取文件等，拼接好返回Http响应
  5. 浏览器收到首屏html，开始渲染
  6. 解析html为dom，dom-tree
  7. 解析css为css-tree
  8. dom+css生成render-tree绘图
  9. 加载script文件
  10. 执行js

从“在浏览器输入域名”到“页面静态资源完全加载”的整个流程

  1. 用户输入
    当用户输入关键字并键入回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面。

  2. URL 请求过程

    首先，网络进程会查找本地缓存是否缓存了该资源。

    如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

    接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

    数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。

    首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。

    浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件。

    其中，DNS也有几步缓存：浏览器缓存，hosts文件，
    如果本地域名解析服务器也没有该域名的记录，则开始递归+迭代解析
    TCP三次握手，HTTP。TLS握手，HTTPS。

  3. 准备渲染进程

    默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。

  4. 渲染阶段

    文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有CSS的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。

    如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。

    CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西

    在生成 Render 树的过程中，浏览器就开始调用GPU 绘制，合成图层，将内容显示在屏幕上了。

eventloop机制，promise的实现和静态方法、async实现

  1. Event Loop 是什么？
    js的任务队列分为同步任务和异步任务，所有的同步任务都是在主线程里执行的，异步任务可能会在宏任务或者微任务里面。
  2. JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)
    • 宏任务：包括整体代码script，setTimeout，setInterval
    • 微任务：Promise.then(非new Promise)，process.nextTick(node中)
    • 事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。

浏览器页签间通信

  1. localStorage —— 使用addeventlistene舰艇storage事件
  2. cookie+setInterval —— cookie存储数据，定时器在一定间隔获取cookie数据
  3. websocket通讯 —— html5中的协议，基于http协议，完成部分握手动作，完成双向通信功能，支持持久连接。
  4. sharedWorker —— 必须运行在服务器上

ES6中的map和set

https://es6.ruanyifeng.com/#docs/set-map

  1. Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
  2. Maps 和 Objects 的区别
    一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
    Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
  3. Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Promise 和 async/await

对于单一的 Promise 链其实并不能发现 async/await 的优势，当需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了

  1. promise是ES6，async/await是ES7
  2. async/await相对于promise来讲，写法更加优雅
  3. reject状态：
    1）promise错误可以通过catch来捕捉，建议尾部捕获错误，
    2）async/await既可以用.then又可以用try-catch捕捉