百家云面试总结

1. 笔试的两道算法题

   //输入形如aaaabbbbcc,输出4a4b2c
 function char_count(str) {
	let count = 0 ,i = 0,j = 0, str1 = '' ,a = '';
       while(i<str.length){
           a = str.charAt[i];
           if(str.charAt(i)=== str.charAt(j)){
               j++;
               count++;
               
               continue;
           }
           else {
                str1+=count+str.charAt[i];
               i=j;
           }
           
              
               count = 0;
       }
       return str1
    }
    console.log(char_count("aaaabbbccccjjjj"))


   //输入一个数组，第一个是数组长度，对后面的数进行排序，输出排序后的
   function arraySort(arr) {
    
    for(let i = 1; i<arr.length; i++){
        let minIndex = i;
        for(let j = i + 1; j<arr.length; j++){
            if(arr[minIndex]>arr[j]){
                minIndex = j;
            }
        }
        swap(arr, i, minIndex);
    }
    arr.splice(0,1);
	return arr;
}
function swap(arr,i,j){
    let temp;
    temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
    
}
var arr = [5,1,3,4,7,2,9,10]

console.log(arraySort(arr));

2. es6中新增了哪些语法

let //变量声明
1.变量不能重复声明
2.块级作用域
3.不存在变量提升
4.不影响作用域链

const //定义常量
1.一定要赋初始值
2.一般常量用大写
3.常量的值不能修改
4.块级作用域
5.对于数组和对象的元素修改，不算做对常量的修改

` ` //模板字符串
1.在里面可以换行
2.拼接的时候用 ${}

=>()  //箭头函数
1.this是静态的，this始终只想行数生命时所在作用域下的this的值
2.不能作为构造实例化对象
3.不能使用arguments变量
4.箭头函数的简写
   1）.省略小括号，当形参只有一个的时候
   2）.省略花括号，当代码只有一条语句的时候，此时return必须省略，而且语句的执行结果就是函数的返回值
5.箭头函数适合于this无关的回调，定时器，数组的方法回调
6.箭头函数不适合与this,事件回调，对象的方法

rest参数
1.ES6引入rest参数，用于获取函数的实参，用来代替arguments
2.用法：  function date(...args){
	    console.log(args);
	}
	date("xiaohong","xiaobai","小明")
3.rest参数必须要放到参数最后

...  //扩展运算符能将数组转换为逗号分割的参数序列
1.用法：    const tfboys = ["易烊千玺","王源","王俊凯"]；
	function chunwan() {
	    console.log(arguments);
	}
	chunwan(...tfboys);

Symbol  //数据类型。类似于字符串
1.symbol的值时唯一的，用来解决命名冲突的问题
2.symbol的值不能与其他数据进行运算
3.symbol定义的对象不能使用for ...in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
4.用法：let a = Symbol("小桥流水人家")

七种数据类型：USONB
	       U：undefined
	       S: string , symbol
	       O: object
	       N:null , number
	       B: boolean

for(in) 保存的是键值， for(of)保存的是value

生成器   //函数，用来进行异步编程
1.用法：function *gen(){
	console.log("hello generator")
            }
            let iterator = gen()
            iterator.next();

Promise  //构造函数，用来封装异步操作并获取其成功或失败的结果
1.用法  https://www.cnblogs.com/whybxy/p/7645578.html

set //集合
1.用法：   let s = new Set();
                s.size
	s.add()
	s.delete()
	s.has()  //是否有某个元素 返回true
	s.clear()

Map 
1.用法：size
	set  //增加一个新元素，返回当前Map
	get //返回键名对象的键值
	has //检测Map中是否包含某个元素，返回boolean值
	clear //清空集合，返回undefined

class //类
1.静态成员不在实例化对象里，实例化的对象只能访问它的prototype中的属性

3. let,var,const的区别

let声明是块级作用域，只在那个代码块里起作用，没有变量提升，不影响作用域链
var在声明的全局起作用，有变量提升
const要赋初始值，常量的值不能修改

4. symbol的作用

symbol的值时唯一的，用来解决命名冲突的问题

5. promise是为了解决什么问题，回调地狱是怎么产生的

用来解决回调地狱的问题，避免代码嵌套臃肿，维护性差，错误处理也不能统一的问题

6. html5中有哪些语法，低版本的浏览器怎么兼容这些语法

<canvas>
<video>和<audio>
header,nav,article,section,aside,footer
(适当回答一些就好)

移除的元素：纯表现的元素：<basefont> <big> <center> <font> <s> <strike> <tt> <u>

html5的兼容性问题

7. css3新增了哪些语法

border-radius
box-shadow
border-image
background-size
text-shadow

8. cookie,localstorage,sessionstorage的区别

sessionStorage，localStorage和Cookies都用于在客户端存储数据。每个都有自己的存储和到期限制。

localStorage：

可以简单地将localStorage视为对cookie的改进，从而提供更大的存储容量。可用大小为5MB，与典型的4KB cookie相比，可以使用的空间大得多。
对于每个HTTP请求（HTML，图像，JavaScript，CSS等），数据不会发送回服务器 - 减少了客户端和服务器之间的流量。
存储在localStorage中的数据将一直存在，直到被明确删除。所做的更改将保存并可用于该网站的所有当前和未来访问。
它适用于同源策略。因此，存储的数据只能在同一个来源上使用。
存储没有过期日期的数据，只能通过JavaScript清除，或清除浏览器缓存/本地存储的数据。
cookie：

我们可以设置每个cookie的到期时间;
4K限制适用于整个cookie，包括名称，值，到期日期等。要支持大多数浏览器，请将名称保留在4000字节以下，并将整体cookie大小保持在4093字节以下。
每次HTTP请求（HTML，图像，JavaScript，CSS等）都会将数据发送回服务器 - 增加客户端和服务器之间的流量。
存储必须通过后续请求发送回服务器的数据。其到期时间根据类型而有所不同，到期时间可以从服务器端或客户端（通常从服务器端）设置。
Cookie主要用于服务器端读取（也可以在客户端读取），localStorage和sessionStorage只能在客户端读取。
sessionStorage：

它类似于localStorage。
更改仅适用于每个窗口（或Chrome和Firefox等浏览器中的标签）。所做的更改将保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，将删除存储
数据仅在设置它的窗口/选项卡中可用。
数据不是持久的，即窗口/标签关闭后它将丢失。与localStorage一样，它适用于同源策略。因此，存储的数据只能在同一个来源上使用。
类似于localStorage，但在浏览器关闭时（不是选项卡）到期。

9. 闭包是什么

闭包就是能够读取其他函数内部变量的函数，闭包是由函数以及声明该函数的词法环境组合而成，该环境包含了这个闭包创建时作用域内的任何变量

闭包的主要应用场景：
1.匿名自执行函数
2.缓存
3.封装
4.实现类和继承

11. 怎么实现异步加载

12. 深拷贝和浅拷贝的区别

浅拷贝只拷贝引用，引用的值变，拷贝后的值也变
深拷贝碰见对象会重新创建一个对象,引用的值变，拷贝后的值不变

// 浅拷贝的实现;

function shallowCopy(object) {
  // 只拷贝对象
  if (!object || typeof object !== "object") return;

  // 根据 object 的类型判断是新建一个数组还是对象
  let newObject = Array.isArray(object) ? [] : {};

  // 遍历 object，并且判断是 object 的属性才拷贝
  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] = object[key];
    }
  }

  return newObject;
}

// 深拷贝的实现;

function deepCopy(object) {
  if (!object || typeof object !== "object") return;

  let newObject = Array.isArray(object) ? [] : {};

  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      newObject[key] =
        typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
    }
  }

  return newObject;
}

13. 你了解浏览器的兼容性吗，怎么解决这些兼容性
    常见的兼容性问题及解决方法
14. css3的动画用到了哪几个元素，区别是什么

animation:配合@keyframes使用，有两帧。起始和结束
transition：需要事件触发，可以是一帧一帧的
transform  ：变形，可以改变图像的角度啥的

15. post和get的区别

Post 和 Get 是 HTTP 请求的两种方法。

（1）从应用场景上来说，GET 请求是一个幂等的请求，一般 Get 请求用于对服务器资源不会产生影响的场景，比如说请求一个网
页。而 Post 不是一个幂等的请求，一般用于对服务器资源会产生影响的情景。比如注册用户这一类的操作。

（2）因为不同的应用场景，所以浏览器一般会对 Get 请求缓存，但很少对 Post 请求缓存。

（3）从发送的报文格式来说，Get 请求的报文中实体部分为空，Post 请求的报文中实体部分一般为向服务器发送的数据。

（4）但是 Get 请求也可以将请求的参数放入 url 中向服务器发送，这样的做法相对于 Post 请求来说，一个方面是不太安全，
因为请求的 url 会被保留在历史记录中。并且浏览器由于对 url 有一个长度上的限制，所以会影响 get 请求发送数据时
的长度。这个限制是浏览器规定的，并不是 RFC 规定的。还有就是 post 的参数传递支持更多的数据类型。

14. http请求的头部的一些状态参数知道吗

1** 信息，服务器收到请求，需要请求者继续执行操作.
2** 成功，操作被成功接收并处理。
3** 重定向，需要进一步的操作以完成请求。
4** 客户端错误，请求包含语法错误或无法完成请求。
5** 服务器错误，服务器在处理请求的过程中发生了错误。

http请求头、请求状态码、http响应头详解
15. 知道flex布局吗，你用过哪些它的属性
阮一峰：flex布局实例教程

16. tcp和udp的区别

1) TCP提供面向连接的传输，通信前要先建立连接（三次握手机制）； UDP提供无连接的传输，通信前不需要建立连接。
2） TCP提供可靠的传输（有序，无差错，不丢失，不重复）； UDP提供不可靠的传输。
3） TCP面向字节流的传输，因此它能将信息分割成组，并在接收端将其重组； UDP是面向数据报的传输，没有分组开销。
4） TCP提供拥塞控制和流量控制机制； UDP不提供拥塞控制和流量控制机制。

17. tcp为什么是三次握手四次挥手

 三次握手：握手过程中使用了 TCP 的标志（flag） —— SYN（synchronize） 和ACK（acknowledgement） 。

第一次握手：建立连接时，客户端A发送SYN包（SYN=j）到服务器B，并进入SYN_SEND状态，等待服务器B确认。
第二次握手：服务器B收到SYN包，必须确认客户A的SYN（ACK=j+1），同时自己也发送一个SYN包（SYN=k），即SYN+ACK包，此时服务器B进入SYN_RECV状态。
第三次握手：客户端A收到服务器B的SYN＋ACK包，向服务器B发送确认包ACK（ACK=k+1），此包发送完毕，完成三次握手
若在握手过程中某个阶段莫名中断， TCP 协议会再次以相同的顺序发送相同的数据包。

（2）四次挥手：由于TCP连接是全双工的，因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动，一个TCP连接在收到一个FIN后仍能发送数据。先进行关闭的一方将执行主动关闭，而另一方被动关闭。

客户端A发送一个FIN，用来关闭客户A到服务器B的数据传送。
服务器B收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。
服务器B关闭与客户端A的连接，发送一个FIN给客户端A。
客户端A发回ACK报文确认，并将确认序号设置为收到序号加1。

18. url输入后经历了什么

1，在应用层输入url

用户输入https://mp.csdn.net时，其中http表示采用http协议进行传输,mp.csdn.net为网络地址，表示请求的资源在那个位置（主机）。一般网络地址为IP地址，此处为域名，是IP地址的包装。为了让用户方便使用。

2.应用层DNS解析域名，获得对端IP地址

计算机在通信时是通过IP地址辨识，而不是域名。
域名查找顺序：本地缓存->系统缓存->浏览器缓存->ISP缓存->根域名服务器->主域名服务器

如果本地缓存有就直接使用，并不是每一个过程都需要走。没有才继续往下走。直到获得IP地址。

3.应用层客户端发送HTTP请求

HTTP请求包括请求报头和请求主体。其中请求报头中包含了请求方法，请求资源，请求所使用放入协议（http,smtp等），以及返回的资源是否需要缓存，客户端是否需要发送cookie等。

4.传输层TCP传输报文

位于传输层的TCP协议提供可靠的字节流服务，他为了方便传输，将大块的数据分割成以报文段为基本单位的数据包进行管理。并未他们编号。方便接收端收到报文后进行组装，还原报头信息。

为了保证可靠性传输，TCP采用三次握手来保证可靠性传输。

5.网络层IP协议查询MAC地址

IP协议把TCP分割的数据包传送给接收方。而要保证却是能够传送给对方主机还需要MAC地址，也就是物理地址。IP地址和MAC地址是一一对应关系。一个设备有且只有一个MAC地址。IP地址可以更换，MAC不会变。ARP协议就是讲IP协议转换成MAC地址的协议，利用ARP协议，找到MAC地址，当通信的双方不在同一个局域网时，还需要多次中转，才能到达目标，在中转时，通过下一个MAC地址来搜索下一个中转目标。

6.数据到达链路层

找到对方的MAC地址后，就将数据包放到链路层进行传输，封装上链路层特有的报头，然后交付给物理层，物理层通过实际的电路如双绞线进行传输。

走到数据链路层，客户端的请求发送阶段完毕。

7.服务器接受请求

服务端主机的网卡接收到数据后，驱动操作系统拿到数据，自下而上进行解包，数据包到链路层，就解析客户端在链路层封装的报头信息，提取报头信息内容，如目标MAC地址，IP地址等。

到达网络层，提取IP协议报头信息，到达传输层，解析传输层协议报头，

到达应用层，解析HTTP报头信息，获得客户端请求的资源和方法。查找到资源后。将资源返回给客户端，并返回响应报文。

响应报文中包括协议名称/协议版本，状态码，状态码描述等信息。其中常见状态码：200 表示请求资源成功。301：永久重定向，表示资源已经永久性重定向到指定位置。

8.请求成功返回相应资源
请求成功后，服务器会返回相应的HTMML文件，该文件的传输方式又会从应用层出发，自上问下传送，到达对端时，自下而上进行解析。

二：页面渲染

现代浏览器渲染页面的过程是这样的：jiexiHTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像元素或display属性值为none的元素都不在渲染树中。

在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘

19. js的垃圾回收机制是什么

v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。

新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过多次垃圾回收的对象被称为老生代。

新生代被分为 From 和 To 两个空间，To 一般是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当我们执行垃圾回收算法的时候应用逻辑将会停止，等垃圾回收结束后再继续执行。这个算法分为三步：

（1）首先检查 From 空间的存活对象，如果对象存活则判断对象是否满足晋升到老生代的条件，如果满足条件则晋升到老生代。如果不满足条件则移动 To 空间。

（2）如果对象不存活，则释放对象的空间。

（3）最后将 From 空间和 To 空间角色进行交换。

新生代对象晋升到老生代有两个条件：

（1）第一个是判断是对象否已经经过一次 Scavenge 回收。若经历过，则将对象从 From 空间复制到老生代中；若没有经历，则复制到 To 空间。

（2）第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时，若 To 空间使用超过 25%，则对象直接晋升到老生代中。设置 25% 的原因主要是因为算法结束后，两个空间结束后会交换位置，如果 To 空间的内存太小，会影响后续的内存分配。

老生代采用了标记清除法和标记压缩法。标记清除法首先会对内存中存活的对象进行标记，标记结束后清除掉那些没有标记的对象。由于标记清除后会造成很多的内存碎片，不便于后面的内存分配。所以了解决内存碎片的问题引入了标记压缩法。

由于在进行垃圾回收的时候会暂停应用的逻辑，对于新生代方法由于内存小，每次停顿的时间不会太长，但对于老生代来说每次垃圾回收的时间长，停顿会造成很大的影响。 为了解决这个问题 V8 引入了增量标记的方法，将一次停顿进行的过程分为了多步，每次执行完一小步就让运行逻辑执行一会，就这样交替运行。

20. 用过哪些ui组件

1.elementui
2.iview

21. 怎么封装组件
22. 组件怎么引用的
23. vue有什么好处

【1】只专注于视图层的轻量级的框架
【2】数据的双向绑定 优点是减少了dom操作
【3】组件化 和 响应式设计
【4】实现数据与结构的分离 高效轻便 易于浏览器的加载速度
请采纳

24. vue-cli和vue的关系

俗称 vue-cli 为脚手架，是一套大众化的前端自动化解决方案，他的核心是 
webpack ，框架是vue，还有相关辅助插件组成。不怕浪费时间自己也可以按
照自己的习惯搭一套，如果你有丰富的前端经验，可能构建一条合理的解决方
案，不然会疏忽很多细节。grunt、gulp 时代，前端自动化规则，输入输出文件格
式，文件的监听，文件的路径都是自己配置的。配置一套理想的方案也是相当耗
费时间，所以 vue 就提供了一套面相大众的解决方案——vue-cli，他的输入输出
规则，文件的打包路径，模块的命名基本上符合大众前端开发者的习惯，不过实
际开发中需要一定的调整。

25. vue组件间的通信方式是什么（重要，必问）

1.父组件向子组件传值  props
2.子组件向父组件传值的方法   事件方式
3.兄弟组件传值的方法   $emit, $on

vue中组件传值的几种常用方法

26. 双向数据绑定是怎么实现的（重要，几乎必问）

```
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。我们先来看Object.defineProperty()这个方法：
var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('我被获取了')
            return val;
        },
        set: function (newVal) {
            console.log('我被设置了')
        }
})
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法
```

27. 函数节流和函数防抖的区别

//函数防抖---将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次！！！！！！！！！！)。
function debounce(fn, await){
    let timer; //let timer只能在setTimeout的父级作用域中，这样才是同一个timer
    return function() {
        if(timer){
            clearTimeout(timer);
        }
        /*
        setTimeout会在n秒后执行，如果过了n秒，timer被点击了就清除timer重新计时，
        否则过了n秒它还是没被点击就执行传过来的函数
        */
        timer = setTimeout(() => {
            fn
        },await)
    }
}

//函数节流-----当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率
function throttle(fn, await){
    let timer;
    return function() {
        let args = arguments;
        if(timer){//如果timer为真，return出去
            return;
        }
        timer = setTimeout(() => {
            fn.apply(this, args);//在n秒后fn回调函数执行，timer置空
            timer = null;
        },await)
    }
}

28. 面向对象是什么，和结构化有什么区别

面向对象就是把问题抽象成一个一个对象
面向对象的三大特性：继承封装多态
结构化就是把一个问题一步一步的解决

29. git的基本语法

30. vue的常见一些指令

v-model
v-for
v-if
v-text
v-on
v-bind
...(还有挺多，不过回答了常用的就可以·了·)

31. vue的生命周期（超级重要，每次面试恨不得都问·）
    8个钩子函数（很重有，每一步做什么的·要知道）

32. vuex是什么，有什么用

vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应
用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，应
用遇到多个组件共享状态时，使用vuex
vuex的五个特性：state,getter,mutation,action,module

vuex总结
33. 单例模式是什么，策略模式又是什么

单例模式保证了全局只有一个实例来被访问。比如说常用的如弹框组件的实现和全局状态的实现。
策略模式主要是用来将方法的实现和方法的调用分离开，外部通过不同的参数可以调用不同的策略。我主要在 MVP 模式解耦的时候
用来将视图层的方法定义和方法调用分离。

34. 时间复杂度和空间复杂度是什么

1、时间复杂度是指执行算法所需要的计算工作量。

时间复杂度是一个函数，它定性描述了该算法的bai运行时间。这是一个关于代表算法输入值的字符串的长度的函数。时间复杂度常用大O符号表述，不包括这个函数的低阶项和首项系数。

2、空间复杂度是指执行这个算法所需要的内存空间。

空间复杂度需要考虑在运行过程中为局部变量分配的存储空间的大小，它包括为参数表中形参变量分配的存储空间和为在函数体中定义的局部变量分配的存储空间两个部分。

35. 常见排序算法的时间复杂度度和空间复杂度是什么

选择排序  时间复杂度为O(n^2),空间复杂度为
快排排序
堆排序
归并排序

36. 数组的一些用法

push()
pop()
shift()
unshift()
splice()
slice()

37.怎么判断一个对象是array（typeof返回的是对象）

Array.prototype.isPrototypeOf(obj)

obj instanceof Array