ES9 中 Object.fromEntries() 方法的使用

Object.fromEntries() 是 ES9(ECMAScript 2018)中新增的方法,它可以将一个由键值对组成的数组转换成一个对象。这个方法在前端开发中有着广泛的应用,尤其在处理 JSONP 数据时非常方便。

JSONP 简介

JSONP(JSON with Padding)是一种跨域技术,它通过动态创建 script 标签来实现跨域请求。JSONP 的基本原理是利用 script 标签的 src 属性可以跨域访问的特性,将需要请求的数据作为函数参数传递到服务器端,然后服务器将数据包装在一个函数调用中返回给客户端,客户端再通过回调函数来获取数据。

JSONP 的具体实现可以参考以下示例代码:

-------- ---------- --------- -
  ----- ------ - ---------------------------------
  ---------- - --- - ------------ - ---------
  ----------------------------------
-

-------- ---------------- -
  ------------------
-

------------------------------- --------------

在上面的代码中,我们定义了一个 jsonp 函数,它接受两个参数:请求的 URL 和回调函数名。在函数内部,我们创建了一个 script 标签,并设置了 src 属性为请求的 URL 加上回调函数名。然后将这个 script 标签加入到页面中,这样浏览器就会发送一个跨域请求,服务器返回的数据将会被包装在回调函数中返回给客户端。

Object.fromEntries() 的使用

在处理 JSONP 数据时,我们通常需要将返回的数据转换成对象,这时就可以使用 Object.fromEntries() 方法。这个方法可以将一个由键值对组成的数组转换成一个对象,其使用方式如下:

----- ------- - -------- ------- ------- -----
----- --- - ----------------------------

----------------- -- - ---- ------ ---- -- -

在上面的代码中,我们定义了一个由两个键值对组成的数组 entries,然后使用 Object.fromEntries() 方法将其转换成了一个对象 obj。这个方法非常方便,可以帮助我们快速地将数据转换成对象。

在处理 JSONP 数据时,我们可以将返回的数据转换成一个由键值对组成的数组,然后使用 Object.fromEntries() 方法将其转换成对象。以下是一个示例代码:

-------- ---------- --------- -
  ----- ------ - ---------------------------------
  ---------- - --- - ------------ - ---------
  ----------------------------------
-

-------- ---------------- -
  ----- ------- - ---------------------
  ----- --- - ----------------------------

  -----------------
-

------------------------------- --------------

在上面的代码中,我们定义了一个 handleData 函数,它接受一个参数 data,这个参数是一个由键值对组成的对象。然后我们使用 Object.entries() 方法将对象转换成一个由键值对组成的数组 entries,再使用 Object.fromEntries() 方法将其转换成对象 obj。这样我们就可以方便地处理 JSONP 数据了。

总结

Object.fromEntries() 是 ES9 中新增的方法,它可以将一个由键值对组成的数组转换成一个对象。在处理 JSONP 数据时,我们可以将返回的数据转换成一个由键值对组成的数组,然后使用 Object.fromEntries() 方法将其转换成对象。这个方法非常方便,可以帮助我们快速地处理 JSONP 数据。

希望本文对你有所帮助,如果你有任何疑问或建议,欢迎在评论区留言。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65d753b51886fbafa450e5c8