javascript的==和===,以及if(xxx)总结

本文详细解析了JavaScript中==与===运算符的工作原理及使用场景。解释了两者如何处理不同数据类型之间的比较,以及在if条件判断中的行为。特别强调了NaN、undefined和null在这些运算符下的表现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载请注明 本文出自:http://blog.youkuaiyun.com/nancle

首先说==和===

  • 首先说明一个很特殊的值NaN, typeof(Nav)得到'number',但是NaN不等于任何一个值(包括它本身),判断一个值是不是NaN只能使用isNaN
    NaN == NaN //得到 false
    NaN === NaN //得到false
    isNaN(NaN) //得到true
  • 然后===也比较简单:
    1. 等号两边类型和值都相等才返回true
      1 === 1 //得到 true
      1 === ‘1’//得到false
    2. 对于对象、数组、函数(三者均为对象Object的instance):只有等号两边引用了同一个对象,才返回true;引用不同对象,即使两个对象值相等也返回false。
      var a = {test:'test'};
      var b = {test:'test'};
      var c = a;
      a === b //得到false
      a === c  //得到true
    3. 对于undefined和null:只有两边同时为undefined或者同时为null时完全相等
      undefined === undefined //得到true
      null === null //得到true
      undefined === null //得到false
  • ==稍微复杂些:
    1.  如果等号两边的类型和值相等则返回true
    2. 如果等号两边类型相等,但是值不相等,则按以下规则比较:
      • 如果一个值是数字,另一个值是字符串,把字符串转换为数字,再用转换后的值进行比较。
        1 == '1' //得到true
      • 如果一个值为true,将它转化为1,再进行比较。如果一个值为false,把它转化为0,再进行比较。
        true == 1 //得到true
        0 == false// 得到true
      • 如果等号两边都是对象,那么必须引用同一个对象才返回true。如果一个值是对象,另一个值是数字或字符串,将对象转换成原始类型的值,再进行比较。可以使用对象的toString()方法或valueOf()方法把对象转化成原始类型的值。JavaScript核心语言的内部类通常先尝试valueOf()方法转换,再尝试toString()方法转换,但是对于Date类,则先执行toString()方法再执行valueOf()方法转换。不属于JavaScript核心语言的对象则可以采用JavaScript实现定义的方式把自身转换成原始数值。
        var  a = {test:'test'};
        var  b = {test:'test'};
        a.valueOf = function(){return 1};
        b.valueOf = function(){return 1};
        a == b // 返回false
        1 == a //返回true
      • 对于undefined和null: 等号两边出现任意一个都返回true
        undefined == undefined //得到true
        null == null //得到true
        undefined == null //得到true

    然后说明if(xxx):

    if(xxx)其实很简单,它始终会把xxx的值转换成Boolean(即true或者false);  0,'0',[],null,undefined,NaN转换成Boolean类型都为false。


    附:这里说一个很有用的技巧,在变量前面加两个!! 取反符号,可以把变量强制转换成Boolean类型,这样一来,!!NaN ===  !!null也得到true,神奇吧!

    ### UniApp 中动态组件 `<component :is>` 的使用方法 在 Vue.js UniApp 开发中,动态组件是一种常见的功能需求。通过 `<component :is>` 可以实现组件的动态加载切换。然而,在 UniApp 中需要注意不同平台的支持情况以及可能存在的兼容性问题。 #### 基本语法 以下是 `<component :is>` 的基本用法: ```html <template> <view> <!-- 动态按钮用于切换组件 --> <button @click="switchToComponent('ComponentA')">切换到 A</button> <button @click="switchToComponent('ComponentB')">切换到 B</button> <!-- 动态组件区域 --> <component :is="currentComponent"></component> </view> </template> <script> import ComponentA from './components/ComponentA.vue'; import ComponentB from './components/ComponentB.vue'; export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA' // 默认显示的组件名称 }; }, methods: { switchToComponent(componentName) { this.currentComponent = componentName; } } }; </script> ``` 上述代码展示了如何利用 `:is` 属性来动态切换组件[^1]。其中,`this.currentComponent` 是一个绑定的数据属性,其值决定了当前要渲染的具体组件。 --- #### 注意事项 1. **H5 平台支持良好** 在 H5 环境下,UniApp 对 `<component :is>` 提供了良好的支持,可以直接按照标准 Vue.js 方式使用[^4]。 2. **小程序环境下的限制** 部分情况下,微信小程序或其他小程序环境中可能会存在对 `<component :is>` 不完全支持的情况[^3]。如果遇到此问题,可以尝试以下解决方案: - 使用条件渲染替代动态组件: ```html <template> <view> <button @click="toggleComponent">切换组件</button> <!-- 条件渲染 --> <ComponentA v-if="showComponent === 'a'" /> <ComponentB v-else-if="showComponent === 'b'" /> </view> </template> <script> import ComponentA from './components/ComponentA.vue'; import ComponentB from './components/ComponentB.vue'; export default { components: { ComponentA, ComponentB }, data() { return { showComponent: 'a' }; }, methods: { toggleComponent() { this.showComponent = this.showComponent === 'a' ? 'b' : 'a'; } } }; </script> ``` 这种方式虽然不如动态组件简洁,但在某些平台上更加稳定可靠。 3. **路径字符串形式** 如果需要动态导入组件,则可以通过路径字符串的形式指定组件名。例如: ```javascript let dynamicComponentPath = './path/to/component'; // 组件路径 const DynamicComponent = () => import(dynamicComponentPath); this.dynamicComponentInstance = DynamicComponent; // 赋值给实例对象 ``` 此时可以在模板中直接引用该实例作为动态组件的内容。 --- ### 总结 在 UniApp 中使用 `<component :is>` 实现动态组件的功能时,需注意目标运行环境的不同特性。对于 H5 场景可正常应用;而对于部分小程序场景可能存在兼容性问题,建议采用条件渲染等方式规避潜在风险。 ---
    评论 1
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值