最新Es6面试题

程序员文章站 2023-12-22 08:49:46

...

1.this 关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
哪些方法中会使用到：
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

2.箭头函数

箭头函数有几个使用注意点：
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

4.解构赋值

解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2

5.Set 和 Map 数据结构

set:它类似于数组，但是成员的值都是唯一的，没有重复的值。
map:键值对的集合

6.map和Object的区别

Object:是字符串的数据类型
map:key值，使用数据类型

7.Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
this 问题：

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

例子：

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

8.promise

Promise是异步b编程解决方案之一。最大的好处是提供了一个then，来为异步提供回调函数。其先进之处是可以在then方法中继续写Promise对象并f返回，然后继续用then来进行回调操作，并且能够在外层捕获异步函数的异常信息。
⑴Promise用法：

 const fn = new Promise(function(resolve,reject){
    axios.get(url).then(res => {
        resolve(res);
    }).catch(err => {
        reject(err);
    })
}).then((res) => {
    console.log(res);
}).catch((err) => {
    console.log(err);
})

⑵Promise原理：
在Promise的内部，有一个状态管理器的存在，有三种状态：pending、fulfilled、rejected。 ①promised对象初始化为pending；
②当调用resolve(成功)，会由pending => fulfilled。
③dda当调用reject(失败)，会由pending => rejected。
看上面的的代码中的resolve(num)其实是将promise的状态由pending改为fulfilled，然后向then的成功回掉函数传值，reject反之。但是需要记住的是注意promsie状态只能由 pending => fulfilled/rejected, 一旦修改就不能再变。promise.then方法每次调用，都返回一个新的promise对象所以可以链式写法（无论resolve还是reject都是这样）
⑶Promise的三个状态：
pending：异步任务正在进行中； resolved(也可以叫fulfilled)，异步任务执行成功； rejected，异步任务执行失败。
⑷Promise对象初始化：
① new Promise(fn)； ②Promise.resolve(fn)；
⑸Promise特点：
①对象的状态不受外界影响；
②一旦状态改变，就不会再变，任何时候都可以得到这个结果；
⑹Promise方法：
①Promise.all( [promise1，promise2，promise3] ).then( )；作为参数的几个promise对象一旦有一个的状态为rejected，则all的返回值就是rejected。当这几个作为参数的函数的返回状态为fulfilled时，至于输出的时间就要看谁跑的慢了。

var   p1 = Promise.resolve(1),
      p2 = Promise.reject(2),
      p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then((res)=>{
    //then方法不会被执行
    console.log(results);
}).catch((err)=>{
    //catch方法将会被执行，输出结果为：2
    console.log(err);
});

   ②promise.race( )：从字面意思上理解就是竞速，那么理解起来上就简单多了，也就是说在数组中的元素实例那个率先改变状态，就向下传递谁的状态和异步结果。但是，其余的还是会继续进行的。

 let p1 = new Promise((resolve)=>{
  setTimeout(()=>{
    console.log('1s') //1s后输出
    resolve(1)
  },1000)
})
let p10 = new Promise((resolve)=>{
  setTimeout(()=>{
    console.log('10s') //10s后输出
    resolve(10) //不传递
  },10000)
})
let p5 = new Promise((resolve)=>{
  setTimeout(()=>{
    console.log('5s') //5s后输出
    resolve(5) //不传递
  },5000)
})
Promise.race([p1, p10, p5]).then((res)=>{
    console.log(res); // 最后输出
})
//结果：
1s
1
5s
10s

9.new一个对象的过程

创建一个新对象

this指向这个新对象

执行构造函数里面的代码

返回新对象

10.说几个如何解决跨域的问题

（1）CORS（跨域资源共享）
基本思维就是使用自定义的http头部让浏览器和服务器沟通，从而决定请求或者响应是否成功。比如再头部添加Origin，包含协议域名端口号。

（2）图像ping
我们知道一个网站加载图片，不用担心跨域问题，使用img标签，利用onload和onerror方法进行相应的处理。

（3）jsonp
通过动态的script元素，使用时，为src设置指定为跨域url。但是因为是其他域加载的代码，所以在确保跨域的服务器是安全的情况下，才建议使用。

（4）Comet
用Comet来实现与跨域服务器的通信有两种方式：长轮询（long polling）和流（http streaming）。

说到长轮询，很容易就会联想到短轮询，短轮询就是不断向服务器发送请求，看看有没有新数据。可以看出这种模式效率不高，如果大多数情况下没有数据，还是得不断发送请求。
为了缓解这个问题，于是就有了长轮询，长轮询将短轮询颠倒了一下。页面发送请求到服务器，服务器一直保持连接打开，直到有数据可发送。数据发送完毕后，浏览器关闭连接。随后又发送一个新的请求到服务器，这一过程会不断重复。

（5）Web Sockets
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 属性readyState：

0 - 表示连接尚未建立（正在连接）。
1 - 表示建立连接。
2 - 表示连接正在进行关闭。
3 - 表示连接关闭。
（6）fetch()
Fetch 的核心在于对 HTTP 接口的抽象，除此之外，它是基于 Promise 的。

fetch()**可以接受跨域 cookies；**你也可以使用fetch()建立起跨域会话。其他网站的Set-Cookie` 头部字段将会被无视。
fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。

11.ajax的两个属性

readyState:
0: 请求未初始化（未调用open()方法）
1: 服务器连接已建立（已调用open()方法）（未调用send()方法）
2: 请求已接收（已调用send()方法）
3: 请求处理中
4: 完成

status:
200: “OK”
404: 未找到页面
document.style操作的是行间样式，无论读还是写

12.、数组和类数组类数组：

①拥有length属性，其它属性(索引)为非负整数；②不具有数组所具有的方法；③类数组是一个普通对象，而真实的数组是Array类型。常见的类数组：arguments，document.querySelectorAll得到的列表，jQuery对象($(“div”))；