广告
返回顶部
首页 > 资讯 > 前端开发 > html >es6里的has()怎么用
  • 479
分享到

es6里的has()怎么用

2024-04-02 19:04:59 479人浏览 独家记忆
摘要

本篇内容主要讲解“es6里的has()怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6里的has()怎么用”吧!在es6中,has()方法用于拦截Ha

本篇内容主要讲解“es6里的has()怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6里的has()怎么用”吧!

在es6中,has()方法用于拦截HasProperty操作,也可用于隐藏某些属性;该方法作为函数的in运算符,返回一个布尔值,指示是否存在自有或继承的属性,语法为“Reflect.has(查找属性的目标对象,要检查的属性)”。

教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

es6里面has()的用法是什么

has作为函数的 in 运算符,它返回一个布尔值,指示是否存在自有或继承的属性。

下面给出了函数has()的语法,其中,

  • target是要在其中查找属性的目标对象。

  • propertyKey是要检查的属性的名称。

Reflect.has(target, propertyKey)

has()方法用来拦截 HasProperty 操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是 in 运算符。

has()方法可以接受两个参数,分别是目标对象、需查询的属性名。

使用 has()方法隐藏某些属性,不被 in 运算符发现。

var handler = {
  has(target, key) {
    if (key[0] === "_") {
      return false;
    }
    return key in target;
  },
};
var target = { _prop: "foo", prop: "foo" };
var proxy = new Proxy(target, handler);
"_prop" in proxy; // false

如果原对象的属性名的第一个字符是下划线,proxy.has()就会返回 false,从而不会被 in 运算符发现。

如果原对象不可配置或者禁止扩展,这时 has()拦截会报错。

var obj = { a: 10 };
Object.presentExtensions(obj);
var p = new Proxy(obj, {
  has: function(target, prop) {
    return false;
  },
});
"a" in p; // TypeError is thrown

上面代码中,obj 对象禁止扩展,结果使用 has 拦截就会报错。也就是说,如果某个属性不可配置(或者目标对象不可扩展),则 has()方法就不得“隐藏”(即返回 false)目标对象的该属性。

值得注意的是,has()方法拦截的是 HasProperty 操作,而不是 HasOwnProperty 操作,即 has()方法不判断一个属性是对象自身的属性,还是继承的属性。

另外,虽然 for…in 循环也用到了 in 运算符,但是 has()拦截对 for…in 循环不生效。

let stu1 = { name: "lily", score: 59 };
let stu2 = { name: "lucy", score: 99 };
let handler = {
  has(target, prop) {
    if (prop === "score" && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  },
};
let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);
"score" in oproxy1;
// lily 不及格
// false
"score" in oproxy2;
// true
for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// lily
// 59
for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// lucy
// 99

上面代码中,has()拦截只对 in 运算符生效,对 for…in 循环不生效,导致不符合要求的属性没有被 for…in 循环所排除。

到此,相信大家对“es6里的has()怎么用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: es6里的has()怎么用

本文链接: https://www.lsjlt.com/news/97552.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • es6里的has()怎么用
    本篇内容主要讲解“es6里的has()怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6里的has()怎么用”吧!在es6中,has()方法用于拦截Ha...
    99+
    2022-10-19
  • css中:has()怎么用
    这篇文章将为大家详细讲解有关css中:has()怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。:has()1. 基本概念:has()通常被称为“父选择器”,这个伪类使我们能够根据其后代选择一个元素。...
    99+
    2023-06-27
  • jquery has()方法怎么用
    本教程操作环境:Windows10系统、jquery3.2.1版本、Dell G3电脑。jquery has()方法怎么用?has() 方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素。提示:如需选取拥有多个元素在其内的元素,请使...
    99+
    2023-05-14
    has jQuery
  • es6的set怎么用
    本篇内容介绍了“es6的set怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • ES6的Promise怎么用
    这篇文章主要为大家展示了“ES6的Promise怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ES6的Promise怎么用”这篇文章吧。什么是PromisePromise 是异步编程的一种...
    99+
    2023-06-22
  • 怎么用ES6
    本篇内容主要讲解“怎么用ES6”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用ES6”吧!ps:ES5之后的JS语法统称ES6!!!一、关于取值的吐槽取值在...
    99+
    2022-10-19
  • es6中的generator怎么用
    本篇内容介绍了“es6中的generator怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • es6的promise怎么使用
    今天小编给大家分享一下es6的promise怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2022-10-19
  • es6中的assign怎么用
    本篇内容介绍了“es6中的assign怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • es6中的super怎么用
    这篇“es6中的super怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“es6中的s...
    99+
    2022-10-19
  • es6中的const怎么用
    这篇文章主要介绍了es6中的const怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6中的const怎么用文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • es6中的fetch怎么用
    本篇内容主要讲解“es6中的fetch怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“es6中的fetch怎么用”吧! es6中...
    99+
    2022-10-19
  • es6中的import怎么用
    这篇文章主要讲解了“es6中的import怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6中的import怎么用”吧! ...
    99+
    2022-10-19
  • es6中的yield怎么用
    这篇文章主要介绍“es6中的yield怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6中的yield怎么用”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • es6的set怎么使用
    这篇文章主要讲解了“es6的set怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6的set怎么使用”吧!Set是一种用于存储有序数据的数据结构,Set中的元素具有唯一性,不允许存...
    99+
    2023-07-04
  • es6怎么判断是否在数组里
    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。es6判断指定值是否在数组里的方法在es6中,可以利用includes()、find()、some()方法来判断元素是否在数组中。方法1:使用includ...
    99+
    2023-05-14
    ES6 es6数组
  • ES6的Class类怎么使用
    本篇内容介绍了“ES6的Class类怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在ES6中,class (类)作为对象的模板被引入...
    99+
    2023-06-27
  • es6中的symbol怎么使用
    这篇“es6中的symbol怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“es6中...
    99+
    2022-10-19
  • es6中的set怎么使用
    这篇文章主要讲解了“es6中的set怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6中的set怎么使用”吧!本文操作环境:windows7系统、...
    99+
    2022-10-19
  • es6的math方法怎么用
    今天小编给大家分享一下es6的math方法怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作