面试题总结二

一、数组去重

https://blog.csdn.net/weixin_41451859/article/details/107337899

 

2、字符串倒序

var str = "abcdefg"

var newStr = ""

// 方法一：反转数组
newStr = str.split("").reverse().join("")


// 方法二：遍历
str = str.split("")
for(var i = str.length - 1 ; i >= 0; i--) {
  newStr = newStr + str[i]
}

 

3、ES6中let和var区别（作用域）

• var — 定义的变量具有函数级作用域 【子域可以访问父域，而父域不能访问子域】

• let — 定义的变量具有块级作用域【外界无法访问】

// 典型事例
for(var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i) // 输出值：5
  }, 1000)
}

for(let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i) // 输出值：0 1 2 3 4
  }, 1000)
}

 
4、localStorage、sessionStorage、cookie之间的区别、各自的储存容量、怎么选择相应的存储机制 

• localStorage：存储用量可达5M或者更大；在所有同源窗口中共享，永久有效，除非手动清除；仅在客户端本地中保存，不会自动发送给服务器；适用场景：长期保存本地数据

  localStorage.getItem(name); // 获取
  
  localStorage.setItem(name,value); // 设置
  
  localStorage.removeItem(name); // 移除
  
  localStorage.clear();​ // 清空所有信息

• sessionStorage —— 存储用量可达5M或者更大；仅在当前浏览器窗口有效，不同浏览器、同一窗口也不共享，关闭页面或浏览即会清除数据；仅在客户端本地中保存，不会自动发送给服务器；适用场景：敏感账号一次性登录，可保证打开页面时sessionStorage数据为空

  seesionStorage.getItem(name); // 获取
  
  seesionStorage.setIntem(name,value); // 设置
  
  seesionStorage.removeItem(name); // 移除
  
  seesionStorage.clear();​ // 清空所有信息

• cookie —— 一般不超过4k；在所有同源窗口中共享，默认关闭浏览器即会失效，若设置时间cookie则会被存放在硬盘，过期后失效；在http请求中，会在浏览器和服务器之间来回传递，若数据保存过多，容易造成性能问题；适用场景：判断用户是否登录过网站，以便实现下次自动登录或记住密码，保存事件信息等

  // 设置 Cookie
  setCookie(key, val, days) {
      let date = new Date(); // 获取时间
      date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days);
      // 字符串拼接 Cookie
      window.document.cookie = `${key}=${val};path=/;expires=${date.toGMTString()};`;
  }
  
  // 获取 Cookie
  getCookie() {
      let cookie = document.cookie.split(';');
  }
  
  // 清除Cookie
  clearCookie() {
      this.setCookie('', '', -1);
  }

5、前端的性能优化（雅虎35条黄金定律）

• 网页内容： 减少http请求次数、减少DNS查询次数、避免页面跳转、缓存Ajax、延迟加载、提前加载、减少DOM数量、根据域名划分内容、减少使用iframe、避免4004；

• 服务器：使用CDN、添加Expires或Cache-Control报文头、Gzip压缩传输文件、配置ETags、今早flush输出、使用GET Ajax请求、避免空的图片src；

• cookie：减少cookie大小、页面内容使用无cookie域名；

• css：将样式表置顶、避免css表达式、用<link>代替@import、避免使用filters；

• js：将脚本置底、使用外部js和css文件、精简js和css、去除重复脚本、减少DOM访问、使用智能事件处理；

• 图片：优化图像、优化css sprite、不要在HTML中缩放图片、使用小且可缓存得favicon.ico；

• 移动客户端：保持单个内容小于25KB、打包组建成符合文档；

需要详细总结请查看：这里  

6、简述VUE/React生命周期（每个生命周期做了什么）

• beforeCreate：在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用；（创建前状态：this.$el、this.$data 都还是 undefined）

           

           

• created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），property和方法的运算，watch/event事件回调。然而，过载夹断还没开始，$el property 目前尚不可用。（创建完毕状态：this.$data 可获取到值，但dom还未加载，this.$el 还是 undefined）

          

          

• beforeMount：在挂载开始之前被调用，相关render函数首次被调用；（挂载前状态：this.$data 可获取到值，this.$el 还是 dom是虚拟状态，{{ name }}还未渲染为data的数据）

          

          

• mounted：挂载后调用，不能保证所有的子组件一起被挂载，如果希望整个视图渲染完毕，可使用this.$nextTick；（挂载完毕状态：数据就会被成功渲染出来）

           

           

• beforeUpdate：数据更新时调用，发生在虚拟 Dom 打补丁之前。适合在更新之前访问现有 Dom，比如手动移除已添加的事件监听器；（更新前状态）
• updated：组件 Dom 已更新，可以执行依赖 Dom 的操作，但一般情况下应避免更新状态，需要更新时最好使用计算属性或者watcher；不能保证所有的子组件一起被挂载，如果希望整个视图渲染完毕，可使用this.$nextTick；（更新完毕状态）
• beforeDestroy：实例销毁之前调用，当前状态时，实例仍然可用；（销毁前状态）
• destroyed：实例销毁后调用，vue实例的所有指令都被解绑，所有事件监听器被移除，子实例也都被销毁；（销毁完毕状态）
• activated：在keep-alive缓存的组件激活时调用；（激活阶段）
• deactivated：在keep-alive缓存的组件停用时调用；（停用阶段）
• errorCaptured：Vue 2.5.0+ 新增钩子；捕获来自子孙组件错误时被调用；会收到三个参数：错误对象、发生错误的组件实例、包含错误来源信息的字符串；可返回false以阻止错误继续向上传播；（捕捉组件错误）

7、Promise（相比传统回调式异步优势），jsonp等跨域方案

promise、跨域方案