zoukankan      html  css  js  c++  java
  • Javascript基础巩固系列——运算符+数据类型转换

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/13704608.html, 多谢,=。=~(如果对你有帮助的话请帮我点个赞啦)

    重新学习JavaScript是因为当年转前端有点儿赶鸭子上架的意味,我一直在反思我的知识点总是很零散,不能在脑海中形成一个完整的体系,所以这次想通过再次学习将知识点都串联起来,结合日常开发的项目,达到温故而知新的效果。与此同时,总结一下我认为很重要但又被我遗漏的知识点~

    运算符

    加法运算符(+

    • 可以进行数值相加运算或非数值连接运算,运算子的不同,导致了不同的语法行为,即“重载”(overload)。
    • 如果运算子是对象,会先转成原始类型的值(先执行valueOf(),如果非原始类型再执行toString(),这两个方法支持自定义),然后再相加。
    var obj = { p: 1 };
    obj + 2 // "[object Object]2"
    
    • 如果运算子为Date对象的实例,会先执行toString()
    var obj = new Date();
    obj.valueOf = function () { return 1 };
    obj.toString = function () { return 'hello' };
    
    obj + 2 // "hello2"
    

    余数运算符(%

    • 运算结果的正负号由第一个运算子的正负号决定。
    -1 % 2 // -1
    1 % -2 // 1
    

    数值运算符(+

    • 为一元运算符(加法是二元运算符),可以将任何值转为数值,与Number函数作用相同 ,会返回一个新的值,不会改变原始变量的值。
    +true // 1
    +[] // 0
    +{} // NaN
    

    指数运算符(**

    • 完成指数运算,前一个运算子是底数,后一个运算子是指数,多个指数运算符连用时,先进行最右边的计算。
    2 ** 4 // 16
    // 相当于 2 ** (3 ** 2)
    2 ** 3 ** 2
    // 512
    

    非相等运算符(<<=>>=

    • 两个运算子均为字符串时就按照字典顺序比较(实际上是比较 Unicode 码点),任何值(包括NaN本身)与NaN使用非相等运算符进行比较,返回的都是false
    1 > NaN // false
    1 <= NaN // false
    '1' > NaN // false
    '1' <= NaN // false
    NaN > NaN // false
    NaN <= NaN // false
    

    相等运算符(=====

    • ==比较两个值是否相等,如果两个运算子非同一类型,会先转换成同一类型(原始类型的值会转换成数值,复合类型会先转换为原始类型,undefinednull只有与自身比较,或者互相比较时,才会返回true,与其他类型的值比较时,结果都为false)再进行严格比较。
    'true' == true // false
    // 等同于 Number('true') === Number(true)
    // 等同于 NaN === 1
    
    [1, 2] == '1,2' // true
    
    undefined == null // true
    false == null // false
    0 == undefined // false
    
    • ===比较两个值是否为“同一个值”,如果两个运算子非同一类型,直接返回falseNaN与任何值都不严格相等(包括自身),复合类型(对象、数组、函数)比较它们是否指向同一个地址。
    NaN === NaN  // false
    +0 === -0 // true
    {} === {} // false
    [] === [] // false
    (function () {} === function () {}) // false
    

    取反运算符(!

    • 对于非布尔值,取反运算符会将其转为布尔值。undefinednullfalse0NaN、空字符串''六个值取反后为true,其他值都为false,两次取反就是将一个值转为布尔值的简便写法。
    !54 // false
    !'hello' // false
    ![] // false
    !{} // false
    
    !!x
    // 等同于
    Boolean(x)
    

    且运算符(&&

    • 如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值为false,则直接返回第一个运算子的值,且不再对第二个运算子求值(很多人喜欢用这种“短路”替代if语句,但不利于排错也看不出目的,应慎用)。
    't' && 'f' // "f"
    't' && (1 + 2) // 3
    
    var x = 1;
    (1 - 1) && ( x += 1) // 0
    x // 1
    

    或运算符(||

    • 如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值;如果第一个运算子的布尔值为false,则返回第二个运算子的值(常用于为一个变量设置默认值)。
    't' || 'f' // "t"
    '' || 'f' // "f"
    
    function saveText(text) {
      text = text || '';
      // ...
    }
    

    void运算符(void

    • 执行一个表达式,然后不返回任何值,或者说返回undefined,主要用途是浏览器的书签工具(Bookmarklet),以及在超级链接中插入代码防止网页跳转。
    <!-- 点击链接后会先执行f()但不会跳转页面 -->
    <a href="javascript: void(f())">文字</a>
    <!-- 用户点击链接提交表单,但是不产生页面跳转 -->
    <a href="javascript: void(document.form.submit())">
      提交
    </a>
    

    左结合与右结合

    • 在运算符优先级相同时,JavaScript 语言的大多数运算符是“左结合”,少数运算符是“右结合”,有赋值运算符、三元运算符、指数运算符。
    // 相当于w = (x = (y = z));
    w = x = y = z;
    
    // 相当于q = a ? b : (c ? d : (e ? f : g));
    q = a ? b : c ? d : e ? f : g;
    
    // 相当于2 ** (3 ** 2)
    2 ** 3 ** 2
    

    数据类型转换

    Number()强制转换

    • 将任意类型的值转化成数值,需要与parseInt()区分,Number函数比parseInt函数严格很多,只要有一个字符无法转成数值,整个字符串就会被转为NaN,但都会自动过滤字符串前后的空格。
    parseInt('42 cats') // 42
    Number('42 cats') // NaN
    
    parseInt('	v
    12.34
    ') // 12
    Number('	v
    12.34
    ') // 12.34
    
    • 参数是对象时,将返回NaN,除非是包含单个数值的数组,走的是先调用valueOf()再调用toString()的那套逻辑。
    Number({a: 1}) // NaN
    Number([1, 2, 3]) // NaN
    Number([5]) // 5
    

    String()强制转换

    • 可以将任意类型的值转化成字符串,参数如果是对象,返回一个类型字符串,如果是数组,返回该数组的字符串形式,走的是先调用toString()再调用valueOf()的逻辑。
    String({a: 1}) // "[object Object]"
    String([1, 2, 3]) // "1,2,3"
    

    Boolean()强制转换

    • 与取反运算符逻辑相同,除了undefinednull0NaN、空字符串''这五个值的转换结果为false,其他的均为true。
    Boolean(new Boolean(false)) // true
    

    参考资料

    JavaScript 语言入门教程 :https://wangdoc.com/javascript/index.html

  • 相关阅读:
    新人讲解
    为人处世
    项目管理
    读书
    游戏
    总结反思
    地图相关
    产品经理
    摄影
    Java 邮件发送
  • 原文地址:https://www.cnblogs.com/dreamsqin/p/13704608.html
Copyright © 2011-2022 走看看