JavaScript的类型转换与各种运算符

2023年4月3日 63次阅读 来源: 栖梧

第十七天笔记

类型转换

隐式类型转换

  • 隐式类型转换

JavaScript是弱类型/松散类型的 在任何情况下都可以强制转换

//定义number类型 string类型以及boolean类型的变量
    var num = 100;
    var str = '卧龙前端';
    var boo = false;

    // 1.转换为string类型
    var result1 = '' + num;// 100
    console.log(typeof result1);// string
    var result2 = boo + '';// true
    console.log(typeof result2);// string

/*
    2.转换为number类型
     * string类型转换为number类型
      * 如果文本内容是普通的文本(非数字) -> 转换后的结果为 NaN
      * 如果文本内容是数字值 -> 转换后的结果为对应数字值
     * boolean类型转换为number类型
      * true转换为1
      * false转换为0
*/
    var result3 = +str;
    console.log(result3);// NaN
    console.log(typeof result3);// number
    var result4 = +boo;
    console.log(result4);// true为1，false为0
    console.log(typeof result4);// number

/*
    3.转换为boolean类型
      * string类型转换为boolean类型
      * 空字符串(''或"")转换后的结果为false，其余情况都为true
      * number类型转换为boolean类型
      * 0或NaN转换后的结果为false，其余情况都为true
      * undefined或null转换后的结果为false
*/
    var result5 = !!str;
    console.log(result5);// true
    console.log(typeof result5);// boolean
    var result6 = !!num;
    console.log(result6);// true
    console.log(typeof result6);// boolean
  • 显式类型转换

使用JavaScript的包装类型的构造函数进行类型转换
使用数据类型的转换函数进行类型转换

//定义number类型、string类型以及boolean类型的变量
    var num = 100;
    var str = '卧龙学苑';
    var str1 = '100';
    var str2 = '100.7'
    var boo = false;

/*
    1.转换为string类型
    * String()函数 -> String(值)
    * toString()方法 -> 变量名.toString()
    * 对象的方法 -> 将变量当作是一个对象来使用
*/
    var result1 = String(num);
    console.log(typeof result1);// string
    var result2 = num.toString();
    console.log(typeof result2);// string

/*
    2.转换为number类型
    * Number()函数 -> Number(值)
    * parseInt()函数 -> parseInt(值)
    * 转换为number类型，转换为一个整数
    * parseFloat()函数 -> parseFloat(值)
    * 转换为number类型，转换为一个浮点数
*/
    var result3 = Number(boo);
    console.log(typeof result3);// number

    var result4 = parseInt(str1);
    console.log(typeof result4);// 100
    var result5 = parseFloat(str1);// 100
    console.log(result5);// 100

    var result6 = parseInt(str2);// 100.1
    console.log(result6);// 如果当前值为小数的话，parseInt()后取整数部分 - 100
    var result7 = parseFloat(str2);// 100.1
    console.log(result7);// 100.1

/*
    3.转换为boolean类型
     * Boolean()函数 -> Boolean(值)
*/
    var result8 = Boolean(str);
    console.log(result8);// true

总结:
隐式类型转换与显式类型转换的区别:
a.隐式转换类型
优点:性能好
缺点:可读性差
b.显式转换类型
优点:可读性高
缺点:性能差
需要注意的是:任何不能正确转换为数字值的内容 转换成Number类型后得到的结果都是NaN

运算符

运算符概述

JavaScript提供了一组用于操作数据值的运算符 又称为操作符
运算符可以按照作用的不同 或者操作变量数量的不同进行分类

  • 算数运算符

1.如果运算数中的一个或两个是字符串类型 JavaScript会自动转换为数字值 在进行计算
2.如果运算数中的一个换两个是字符串类型 但其中的字符不是数字 JavaScript会自动转换数字值的到NaN结果
3.任何一个运算数都是NaN 结果都是NaN
4.布尔值false和true会转转为0和1进行计算

  • 加法运算符

1.如果两个操作数都是数字值的话 会进行加法计算
2.如果字符串进行加法计算 – 字符串连接运算符(拼串)
3.如果布尔类型进行加法计算 – 将布尔类型转换为数字值 再进行加法计算

  • 减法运算符

1.减法运算之前 先将其他类型转换为number类型 再进行计算
2.如果字符串进行减法计算的话 – 将字符串类型转换为数字值 再进行减法计算
3.如果布尔类型进行减法计算 – 将布尔类型转换为数字值，再进行减法计算

  • 求余运算符

求余运算符 用于计算两个运算数整除后的余数
求的结果是正数还是负数 与第一个操作数是正数或负数有关(与第二个无关)

    console.log(100 % 3);//1
    console.log(8 % 4);//0

    console.log(100 % -3);//1
    console.log(8 % 4);//0

    console.log(-100 % 3);//-1
    console.log(-8 % 4);//0

    console.log(-100 % -3);//-1
    //与减法的情况保持一致
    console.log('卧龙学苑' % 2);//NaN
  • 自增运算符与自减运算符

自增运算符 用于整数值逐次+1 分为:
a.前置型:自增运算符位于运算数之前 先加1 再赋值

前置自增运算符 - ++变量名

b.后置型:自增运算符位于运算数之后 先赋值 再加1

后置自增运算符 - 变量名++

自减运算符 用于整数值逐次-1 分为:
a.前置型:自减运算符位于运算数之前 先减1 再赋值
b.后置型:自减运算符位于运算数之前 先赋值 再减1

  • 运算符的优先级别
    运算符具有计算的优先级别
    1.先计算优先级别高的运算符
    2.运算符的级别相同，从左至右的计算
    3.运算符中优先级别最高的是“()”
    4.优先计算的表达式利用”()”将其包裹起来
    console.log(100 + 200 - 150 * 3);// -150
    console.log(100 + 200 % 3);// 102
    console.log(2 * 200 % 3);// 1

    var num = 10;
    console.log(5 + ++num);// 16
  • 比较运算符

JavaScript语言中的比较运算符 主要用于比较两个操作数的值是否相等 或者大小情况

一.大于与小于比较运算符
    console.log(10 > 11);//false
    console.log(11 > 10);//true
    console.log(10 >= 10);//true
    // 2.boolean类型 - 将boolean类型转换为number类型
    console.log(true > false);//true
    console.log(true > 0);//true
/*
    3.string类型 - a.英文; b.中文
    * 英文或中文 - 将文本转换成Unicode码 - 对应具有数字值
    * 英文单词 - 从左至右的一次比较字母 Unicode 码的大小
*/
    console.log('a' < 'b');//true
    console.log('a' > 'A');//true
    console.log('abc' > 'cba');//false
    console.log('abc' > 'acd');//false

    console.log('我' > '你');//true

二.相等与不等比较运算符

相等比较运算符
*与赋值运算符的区别
*赋值运算符(=)
*相等比较运算符(==)
不等比较运算符
*符号是”!=”
*不是”<>”
相等与不等比较运算符 只比较操作数的值 并不比较类型

    // 1.number类型
    console.log(10 == 10);// true
    console.log(10 == 11);// false
    // 2.boolean类型
    console.log(true == true);// true
    console.log(true == false);// false

    console.log(true == 1);// true

    // 3.string类型
    console.log('a' == 'a');// true
    console.log('a' == 'b');// false
    
    console.log('100' == 100);// true
三.全等与不全等运算符 
全等与不全等运算符 不仅比较值 还比较类型
    console.log(10 === 10);// true

    console.log('10' === 10);// false
    console.log('10' == 10);// true
  • 函数

isNaN()函数用于判断其参数是否为NaN值(非数字值)
作用:判断当前值是否为 NaN
true – 表示当前值是NaN(不是一个数字值)
false – 表示当前值不是NaN(不是一个数字值)
isFinite()函数
作用 – 判断当前值是否为无穷大
false – 表示当前值是无穷大
true – 表示当前值是有限数值

    console.log(isNaN(100));// false
    console.log(isNaN(Number('卧龙学苑')));// true

    var result = 100/0;
    console.log(result);// Infinity
    //isFinite()函数
    console.log(isFinite(result));// false
  • 逻辑与运算符

JavaScript运算符 基本用法是用于布尔类型的计算
逻辑与运算符时 如果两个操作数都是布尔类型的话只有当两个操作数都为true时 返回的结果才为true 否则都为false
1.将逻辑与运算符的两个操作数 转换为布尔类型
2.当左边的操作数为true时 结果为右边操作数的值
3.当左边的操作数为false时 结果为左边操作数的值

    console.log(true && true);// true
    console.log(true && false);// false
    console.log(false && true);// false
    console.log(false && false);// false

    console.log(100 && 1);// 1
    console.log(1 && 0);// 0
    console.log(0 && 1);// 0
    console.log(0 && 0);// 0

    console.log(true && true);
    console.log(true && false);
    console.log(false && true);
    console.log(false && false);

    console.log('卧龙学苑' && '卧龙学苑');// 卧龙学苑
    console.log('卧龙学苑' && '');// ''
    console.log('' && '卧龙学苑');// ''
    console.log('' && '');// ''

    console.log('卧龙学苑' && 1);// 1
    console.log(false && 0);// false
  • 逻辑或运算符

使用逻辑或运算符时 如果两个操作数都是布尔类型的话 只有当其中一个操作类型数都为true时 返回的结果才为true 否则都为false


    console.log(true || true);// true
    console.log(true || false);// true
    console.log(false || true);// true
    console.log(false || false);// false

    console.log(100 || 1);// 100
    console.log(1 || 0);// 1
    console.log(0 || 1);// 1
    console.log(0 || 0);// 0

    console.log(true || true);
    console.log(true || false);
    console.log(false || true);
    console.log(false || false);

    console.log('卧龙学苑' || '卧龙学苑');// 卧龙学苑
    console.log('卧龙学苑' || '');// 卧龙学苑
    console.log('' || '卧龙学苑');// 卧龙学苑
    console.log('' || '');// ''
  • 赋值扩展运算符

JavaScript语言中的赋值运算符用于为变量或属性进行赋值操作
JavaScript语言中的赋值扩展运算符实际就是赋值运算符与算数运算符配合使用的简写模式
JavaScript语言中的赋值扩展运算符的执行效率更高

    var b = 10, c = 20;

    var a = b + c;
    console.log(a);// 30

    // b = b + c;
    // 等价写法 - 赋值扩展运算符的性能要比赋值运算符更高
    b += c;
    console.log(b);// 30
  • 条件运算符

条件运算符 首先判断一个表达式是真是假 然后根据判断结果执行两个给指定指令中的一个

    var result = 8 > 9 ? '对' : '错';
    console.log(result);

    var score = 95;
    score > 90 ? console.log('优秀') : console.log('及格');
  • 嵌套条件运算符

条件运算符中 每个表达式可以又是一个条件运算表达式 称为条件运算的嵌套
优点:扩展了条件运算符本身的计算能力
缺点:可读性比较差 性能随着嵌套的层级越多越差
建议:不要最多不要超过三层嵌套

    var score = 55;

    var result = score > 90 ? '优秀' : (score > 80 ? '良好' : (score > 60 ? '及格' : '不及格'));
    console.log(result);
    原文作者：栖梧
    原文地址: https://segmentfault.com/a/1190000015924168
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞