前端面试题集锦(4)

目录

1、对 this 的理解, 三种改变 this 的方式 ?

2、cookie, localStorage,sessionStorage 的区别 ?

3、原生 ajax 的流程 ?  

4、如何实现继承 ?

5、函数的节流和防抖是什么 ?

6、什么是 Promise 以及promise的作用 ?

7、Promsie 和 async/await 的区别和使用 ?

8、对于数组去重你有哪些办法 ?

9、如何实现数组的复制 ?

10、git 的常用指令有哪些 ?


1、对 this 的理解, 三种改变 this 的方式 ?

1. 任何情况下直接在 script 中写入的 this 都是 window
2. 函数中的 this 非严格模式: this 指向 window , 严格模式时: this 指向 undefined
3. 箭头函数的 this
       ✏️  this都指向箭头函数外上下文环境的 this 指向
4. 对象中 this
✏️  对象属性的this 指向对象外上下文环境的 this
✏️  对象方法( 普通函数 ) 中的 this ,指向当前对象 ( 谁执行该方法, this 就指向谁 )
5. 回调函数的 this 指向
✏️  setTimeout setInterval 回调函数不管是否是严格模式都会指向 window
✏️  通过在函数内执行当前回调函数 非严格模式:this 指向 window , 严格模式时: this 指向undefined
✏️  递归函数中的this 非严格模式: this 指向 window , 严格模式时: this 指向 undefined
✏️   使用 arguments 0 执行函数时 this 指向 arguments
✏️  事件中的回调函数,this 指向事件侦听的对象 (e.currentTarget);
6 call apply bind 方法执行时 this 的指向
✏️  如果call,apply,bind 传参时,第一个参数传入的不是 null 或者 undefined ,传入什么 this 指向什么
✏️  如果第一个参数传入的是null 或者 undefined , 非严格模式下指向 window
7 、在 ES6 的类中 this 的指向
✏️  构造函数中的this 指向实例当前类所产生的新的实例对象
✏️  类中实例化方法中this 指向谁执行该方法, this 指向谁
✏️  类中静态方法中this 执行该类或者该类的构造函数
✏️  类中实例化箭头方法,this 仍然指向当前类实例化的实例对象
8 ES5 的原型对象中 this 的指向
✏️  在原型的方法中,this 指向实例化当前构造函数的实例化对象(谁执行该方法, this 指向谁) ;
✏️  三种改变this 指向的方式
✏️  函数名.call (this,....) this 写谁就指谁。
✏️  函数名.apply(this,[ 参数 1 ,参数 2 ...]) this 写谁就指谁。
✏️  函数名. bind (this,1,2,3) this 写谁就指谁。

2cookie, localStorage,sessionStorage 的区别 ?

📕 cookie

存储方式
存储用户信息,获取数据需要与服务器建立连接。
以路径存储,上层路径不能访问下层的路径 cookie ,下层的路径 cookie 可以访问上层的路径 cookie
作用与特性
可存储的数据有限,且依赖于服务器,无需请求服务器的数据尽量不要存放在 cookie 中,以免影响页面性能。
可设置过期时间。
存储数量及大小 将 cookie 控制在 4095B 以内,超出的数据会被忽略。
IE6 或更低版本 最多存 20 cookie
IE7 及以上
版本 多可以有 50 个;
Firefox 50 个;
chrome Safari 没有做硬性限制。
cookie 最大特征就是可以在页面与服务器间互相传递,当发送或者接受数据时自动传递

📕 localStorage

存储客户端信息,无需请求服务器。
数据永久保存,除非用户手动清理客户端缓存。
开发者可自行封装一个方法,设置失效时间。 5M 左右,各浏览器的存储空间有差异。
任何地方都可以存都可以取
操作简单

📕 sessionStorage

存储客户端信息,无需请求服务器。
数据保存在当前会话,刷新页面数据不会被清除,结束会话(关闭浏览器、关闭页面、跳转页面)数据失效。
5M 左右,各浏览器的存储空间有差异。
同页面不同窗口中数据不会共享

3、原生 ajax 的流程 ?  

<script>
  //创建xhr
  var xhr=new XMLHTTPRequest()

  //侦听通信状态改变的事件
  xhr.addEventListener("readystatechange",readyStateChangeHandler);

  //Method 分为 get post put delete等等
  //Async 异步同步
  //name和password是用户名和密码
  xhr.open(Method,URL,Async,name,password)

  //发送内容给服务器
  xhr.send(内容)

  function readyStateChangeHandler(e){
     //当状态是4时,并且响应头成功200时,
     if(xhr.readyState===4 && xhr.status===200){
     //打印返回的消息
     console.log(xhr.response)
     }
   }
</script>

4、如何实现继承 ?

📕  对于 JavaScript 来说,继承有两个要点:
            1. 复用父构造函数中的代码
            2. 复用父原型中的代码第一种实现复用父构造函数中的代码,我们可以考虑调用父构造函数并将 this 绑定到子构造函数。
📕  第一种方法:复用父原型中的代码,我们只需改变原型链即可。将子构造函数的原型对象的 proto 属性指向父构造函数的原型对象。
📕  第二种实现
使用 new 操作符来替代直接使用 proto 属性来改变原型链。
📕  第三种实现
使用一个空构造函数来作为中介函数,这样就不会将构造函数中的属性混到 prototype
<script>
   function A(x,y){
     this.x = x
     this.y = y
   }
   A.prototype.run = function(){}

   // 寄生继承 二者一起使用
   function B(x,y){
      A.call(this,x,y) // 借用继承
   }
   B.prototype = new A() // 原型继承

  // 组合继承
  Function.prototype.extends = function(superClass){
       function F(){}
       F.prototype = superClass.prototype
       if(superClass.prototype.constructor !== superClass){
           Object.defineProperty(superClass.prototype,'constructor',{value:superClass})
  }
  let proto = this.prototype
  this.prototype = new F()
  let names = Reflect.ownKeys(proto)
  for(let i = 0; i < names.length;i++){
      let desc = Object.getOwnPropertyDescriptor(proto,names[i])
      Object.defineProperty(this.prototypr,name[i],desc)
  }
  this.prototype.super = function(arg){
     superClass.apply(this,arg)
  }
  this.prototype.supers = superClass.prototype
}
</script>
📕  第四种实现
    es6 类的继承 extends

5、函数的节流和防抖是什么 ?

📕 节流

节流是指当一个事件触发的时候 , 为防止事件的连续频繁触发 , 设置定时器 , 达到一种一段事件内只触发一次的效果 , 在当前事件内不会再次触发, 当前事件结束以后 , 再次触发才有效 .
<script>
   function thro(cb,wait){
      let timeOut
      return function(){
        if(timeOut) return
        timeOut = setTimeout(function(){
           cb()
           clearTimeout(timeOut)
           timeOut = null
          },wait)
       }
    }
</script>

📕 防抖

防抖是指当一个事件触发的时候 , 为防止频繁触发事件 , 设置定时器 , 以达到一种 频繁触发期间不处理 , 只有当最后一次连续触发结束以后才处理

<script>
   function debounce(cb,wait){
       let timer
      return function(){
       clearTimeout(timer)
       timer = setTimeout(()=>cb(),wait)
       }
    }
</script>

6、什么是 Promise 以及promise的作用 ?

Promise 是异步编程的一种解决方案:从语法上讲, promise 是一个对象,从它可以获取异步操作的消息;
从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。
promise 有三种状态: pending( 等待态 ) fulfiled( 成功态 ) rejected( 失败态 ) ;状态一旦改变,就不会再变。创造promise 实例后,它会立即执行
promise 是用来解决两个问题的:
回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
promise 可以支持多个并发的请求,获取并发请求中的数据
这个 promise 可以解决异步的问题,本身不能说 promise 是异步的

7Promsie async/await 的区别和使用 ?

✏️  函数前面多了一个async 关键字。 await 关键字只能用在 async 定义的函数内。 async 函数会隐式地返回一个promise ,该 promise reosolve 值就是函数 return 的值。
✏️  第1 点暗示我们不能在 外层代码中使用 await ,因为不在 async 函数内。使用:
          1.async await 是配对使用的, await 存在于 async 的内部。否则会报错 。
          2.await 表示在这里等待一个 promise 返回,再接下来执行。
          3.await 后面跟着的应该是一个 promise 对象,(也可以不是,如果不是接下来也没什么意义了

8、对于数组去重你有哪些办法 ?

📕  第一种:
for(var i=0;i<arr.length;i++){
    for(var j=i+1;j<arr.length;){
        if(arr[i]===arr[j]) arr.splice(j,1);
          else j++; // 核心
     }
}

📕 第二种:

var arr1=[];
for(var i=0;i<arr.length;i++){
   for(var j=0;j<arr1.length;j++){
      if(arr1[j]===arr[i]) continue xt;
   }
   arr1.push(arr[i]);
}

📕 第三种:

var arr1=[];
for(var i=0;i<arr.length;i++){
    if(arr1.indexOf(arr[i])<0) arr1.push(arr[i])
}

📕 第四种:

var arr1=[];
for(var i=0;i<arr.length;i++){
    if(!(~arr1.indexOf(arr[i]))) arr1.push(arr[i])
}

📕 第五种:

var arr1=[];
for(var i=0;i<arr.length;i++){
    if(!arr1.includes(arr[i])) arr1.push(arr[i])
}

📕 第六种:

arr=[1,2,3,1,2,3,1,2,3]
new Set(arr);

9、如何实现数组的复制 ?

📕  for循环逐一复制
var arr1=[];
for(var i=0;i<arr.length;i++){
    if(i in arr) arr1[i]=arr[i]
}

📕 ...方式

var arr1=[...arr];

📕 slice方法

var arr1=arr.slice();

📕 concat方法

var arr1=arr.concat();

📕 map方法

var arr1=arr.map(item=>item);

📕 reduce方法

var arr1=arr.reduce((v,t)=>v.push(t),[])

10、git 的常用指令有哪些 ?

git branch 分支查看
git branch branch_1 增加分支
git checkout branch 分支切换
git merge branch_1 合并分支 ( 合并前要切换当前分支至 master)
git branch -d branch_1 删除分支
git remote 查看当前仓库管理的远程仓库信息
git remote show origin 查看指定的远程仓库的详细信息
git push --set-upstream origin branch_1 第一次将本地分支推到远程仓库
git push < 远程主机名 > < 本地分支名 >:< 远程分支名 > 将本地分支推到远程分支
git pull < 远程主机名 > < 远程分支 >:< 本地分支 > 将远程分支拉到本地分支
git branch -d branch_0 删除本地合并后分支
git brench -D branch_0 删除本地未合并分支
it push origin --delete branch_0 删除远程分支
git restore [filename] 进行清除工作区的改变
git tag 查看标签
git tag v1.0.0 打标签
git push origin v1.0.0 tag 同步到远程服务器
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兰de宝贝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值