在ECMAScript 2020标准中，新增了Element、Headers、URLSearchParams等类型的API，这些新增的API对于前端开发者具有重要的意义。本文将对这些API进行详细的介绍。
1. Element
Element是DOM树中一个节点的基本类型，它表示一个HTML元素。在ES11中，Element对象新增了一些非常有用的方法。
1.1. Element.prototype.matches(selector)
该方法用来判断当前元素是否匹配一个选择器。如果匹配，则返回true，否则返回false。
示例代码：
const el = document.querySelector('#my-element');
if (el.matches('.my-class')) {
console.log('matched!');
}1.2. Element.prototype.closest(selector)
该方法用来获取当前元素最近的一个匹配指定选择器的祖先元素。如果找到了该祖先元素，则返回该元素，否则返回null。
示例代码：
const el = document.querySelector('#my-element');
const container = el.closest('.container');
if (container) {
console.log('found container:', container);
}1.3. Element.prototype.scrollIntoView()
该方法用来滚动到当前元素的可视区域。如果元素不在可视区域，则滚动到元素的顶部。
示例代码：
const el = document.querySelector('#my-element');
el.scrollIntoView();2. Headers
Headers对象用来表示HTTP请求或响应的头信息，包括头字段的名称和值。在ES11中，Headers对象新增了一些方法。
2.1. Headers.prototype.append(name, value)
该方法用来向Headers对象中添加一个新的头字段。
示例代码：
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + token);2.2. Headers.prototype.delete(name)
该方法用来从Headers对象中删除指定名称的头字段。
示例代码：
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.delete('Content-Type');2.3. Headers.prototype.entries()
该方法返回一个迭代器，用来获取Headers对象中所有头字段的名称和值。
示例代码：
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + token);
for (let [name, value] of headers.entries()) {
console.log(name, value);
}3. URLSearchParams
URLSearchParams对象用来表示URL查询字符串，其方法非常实用。在ES11中，URLSearchParams对象新增了一些方法。
3.1. URLSearchParams.prototype.append(name, value)
该方法用来向查询字符串中添加一个新的参数。
示例代码：
const params = new URLSearchParams();
params.append('q', 'javascript');
params.append('page', 1);3.2. URLSearchParams.prototype.delete(name)
该方法用来从查询字符串中删除指定名称的参数。
示例代码：
const params = new URLSearchParams(location.search);
params.delete('q');3.3. URLSearchParams.prototype.entries()
该方法返回一个迭代器，用来获取查询字符串中所有参数的名称和值。
示例代码：
const params = new URLSearchParams(location.search);
for (let [name, value] of params.entries()) {
console.log(name, value);
}3.4. URLSearchParams.prototype.toString()
该方法返回一个包含所有参数的查询字符串。
示例代码：
const params = new URLSearchParams();
params.append('q', 'javascript');
params.append('page', 1);
console.log(params.toString()); // 'q=javascript&page=1'总结
ES11中Element、Headers、URLSearchParams等类型的API更新让前端开发变得更加方便，使得我们在实现某些功能时可以更加高效的完成。这些API的使用有助于提高我们的代码开发效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648cca1148841e9894b1b52c