欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

最新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”));

上一篇:

下一篇: