数据类型转换-运算符

1 回顾

1.1 JavaScript 基本语法

1. JS 在 HTML 中的使用方式行内式内嵌式外链式2. JS 中的注释///**/3. JS 严格区分大小写
4. JS 语句结束符： 分号或者是换行

1.2 变量

1. 数据、直接量、变量数据：计算机计算的就是数据，所有的信息通过数据来表示直接量：直接使用数据就是直接量变量：给数据取个名字，通过名字使用数据2. 变量的意义方便多次重复使用某个数据变量可以把数据存储下来，保证下次使用的还是之前的数据3. 变量的语法创建新的变量使用var可以只创建变量不赋值，也可以同时创建变量并赋值变量的值可以修改同时声明多个变量4. 变量名的命名规范

1.3 数据类型

1. 分类：原始类型： number string boolean null undefined对象类型：2. number 数值类型2.1 整型   十进制表示、八进制表示、十六进制表示2.2 浮点型   科学计数法   浮点型的计算存在精度问题2.3 NaN   isNaN()2.4 数值的有效范围        Infinity -Infinity  isFinite()3. string 字符串类型3.1 使用单引号或者双引号表示字符3.2 转义字符     \n  \\  \'  \"4. boolean 布尔类型truefalse5. null 和 undefinedundefined 表示没有定义null 表示定义了值是空

2 数据类型转换

2.1 数据类型转换的规则

① 其他类型转为 number 类型

1. string 转为 number 类型的规则：① 纯数字字符串会转为对应的数字，十六进制表示以及科学计数法表示的数字都是纯数字。② 空字符串转为数字 0。 ③ 其他字符串转为 NaN。注意： string 类型数据在转为 number 类型数据的时候会自动去掉两端的空格，剩下部分按照以上规则进行转换2. boolean 转为 number 类型的规则：true -> 1false -> 03. null 转为 number 类型的规则：null -> 04. undefeind 转为 number 类型的规则：undefined -> NaN

// 字符串转为 number 类型  使用 Number();var n1 = Number('hello');var n2 = Number('89.34');var n3 = Number('89abc');var n4 = Number('89.43e4');var n5 = Number('0x11');var n6 = Number('');   var n7 = Number('     ');   var n8 = Number('  101   ');   var n9 = Number('  10 1   ');   console.log(n1, typeof(n1));  // NaN numberconsole.log(n2, typeof(n2));  //89.34console.log(n3, typeof(n3));  // NaNconsole.log(n4, typeof(n4));  //89.43e4console.log(n5, typeof(n5));  //17console.log(n6, typeof(n6));   // 0console.log(n7, typeof(n7));   // 0console.log(n8, typeof(n8));   // 101console.log(n9, typeof(n9));   // NaN

  // boolean 转为 numbervar v1 = Number(true);var v2 = Number(false);console.log(v1, typeof(v1));  // 1console.log(v2, typeof(v2));  // 0

 // null 转为 numbervar v3 = Number(null);console.log(v3, typeof(v3));  // 0

// undefined 转为 numbervar v4 = Number(undefined);console.log(v4, typeof(v4));  // NaN

② 其他类型转为 string 类型

数据长什么样就转为什么样的字符串

        var s1 = String(34.67);var s2 = String(true);var s3 = String(null);var s4 = String(undefined);console.log(s1, typeof(s1));  //34.67console.log(s2, typeof(s2));  //trueconsole.log(s3, typeof(s3));  //nullconsole.log(s4, typeof(s4));  //undefinded

③ 其他类型转为 boolean 类型

1. number 转为 boolean 类型的规则：0 和 NaN 转为 false，其他数字都转为 true2. string 转为 boolean 类型的规则：空字符串转为 false，其他字符串都转为 true3. null 转为 boolean 类型的规则：null -> false4. undefeind 转为 boolean 类型的规则：undefiend -> false

总结： 0、NaN、空字符串、null、undefined 转为布尔值会转为 false，其他数据转为布尔值都是 true。

 0、NaN、空字符串、null、undefined 转为 false，其他数据转为 true。console.log(Boolean(0));         //falseconsole.log(Boolean(NaN));       //falseconsole.log(Boolean(''));        //falseconsole.log(Boolean(null));      // falseconsole.log(Boolean(undefined));  // false

2.2 强制类型转换（显示转换）

① 强制把其他类型转为 number 类型的函数

Number()
parseInt()
parseFloat()

parsentInt()、parsentFloat 与 Number 的区别：

  1. parseInt() 和 parentFloat() 用于提取字符串的数字，所有非字符串类型得到的都是 NaN
  2. 纯数字字符串转为对应的数字；以数字开头的字符串转为开头的数字；其他字符串都是 NaN（空字符也是NaN）
       console.log(parseInt('123.34abc'));     //123console.log(parseFloat('123.34abc'));  //123.34console.log(parseInt(''));  // NaN

parseInt() 和 parsentFloat() 的区别：

  1. parseInt() 只能提取字符串中的整数部分。
  2. parentFloat() 可以提取字符串中的小数部分.
        console.log(parseInt('123.34abc'));     //123console.log(parseFloat('123.34abc'));  //123.34

注意：

  1. Number() 的转换规则此时标准的转换规则。
  2. 可以使用 parsetInt() 来对某个数字进行取整（会把小数部分舍去）。

② 强制把其他类型转为 string 类型的函数

String()

③ 强制把其他类型转为 boolean 类型的函数

Boolean()

2.3 自动类型转换（隐式转换）

  1. JavaScript 作为弱类型编程语言，支持数据类型自动转换。

  2. 数据参与运算，数据不符合运算所要求的类型，数据会根据运算要求的类型自动转换。

  3. 运算所要求的数据类型由运算符绝对。

  4. 自动类型转换的规则与强制类型（Number、String、Boolean）转换的规则是一样的。

     '100' + 20               10020       false * 20              0       undefined + 100            NaN ‘100’ == 100          true    false === 0              falsenull == undefined        true200 !== 300               true'abc' < 'b'              true  100 > 20 && 1000        1000       +'hello'                 NaN

3 运算符

3.1 运算符和表达式

① 运算符

运算符就是参与运算的符号，像+、-、*、/ 等。

与运算符一起运算的变量、直接量、表达式称之为操作数。

② 表达式

  1. 表达式是变量或者直接量与运算符组成的式子，表达式会有一个计算结果，称之为表达式的值，也就是说表达式是有值的。

  2. 最简单的表达式是"原始表达式", 如 直接量、 变量名、 关键字等。

  3. 复杂表达式由简单表达式组成, 运算符何以将简单表达式组合成复杂表达式。

  4. 注意带有副作用的表达式，这样的表达式除了有表达式的计算结果之外，还会对表达式中的变量产生影响。

3.2 运算符的分类

① 按照运算符需要的操作数的个数

一元运算符/一目运算符
二元运算符/二目运算符
三元运算符/三目运算符

② 按照运算符的功能

算术运算符、关系运算符、逻辑运算符、位运算符、赋值运算符、其他运算符

3.3 运算符讲解（按照功能）

① 算术运算符

运算符 含义 操作数个数 操作数的类型要求 组成的表达式的值的类型 有无副作用
+ 加号 2 number number 无
- 减号 2 number number 无
* 乘号 2 number number 无
/ 除号 2 number number 无
% 取余（取模） 2 number number 无
+ 正号 1 number number 无
- 负号 1 number number 无
++ 累加 1 number number 有
– 累减 1 number number 有

正号运算符：

通常会使用正号运算符来把其他类型的数据转为 number 类型，利用运算符自动类型转换。

       var msg = 'hello';console.log(+msg);  //NaNconsole.log(msg);   //hello

累加运算符和累减运算符：

累加和累减都是一元运算符，操作数必须以变量的形式表示，具有副作用。

累加和累减的符号可以在操作数的前面也可以在操作数的后面，对操作数产生的副作用是一样的，但是所组成的表达式的值不同。

运算符在操作前面： 表单式取操作数累加或累减之后的值作为表达式的值。

运算符在操作数后面：表达式取操作数累加或累减之前的值作为表达式的值。

        var num = 20;var res = (num ++) - (++ num) + (num --) - (++ num) + (num --);console.log(res);  // 20console.log(num);  // 21// 定义变量var num = 20;// 20  num = 21// -// 22  num = 22// +// 22  num = 21// -// 22  num = 22// +// 22  num = 21

        var a = 20var res = (++ a ) - (a ++) || (a --) - (--a)console.log(res)    // 2console.log(a)      // 20

② 关系运算符（比较运算符）

运算符 含义 操作数个数 操作数的类型要求 组成的表达式的值的类型 有无副作用
> 大于 2 number、string boolean 无
>= 大于等于 2 number、string boolean 无
< 小于 2 number、string boolean 无
<= 小于等于 2 number、string boolean 无
== 相等 2 number、其他类型 boolean 无
!= 不相等 2 number、其他类型 boolean 无
=== 全等 2 所有类型 boolean 无
!== 不全等 2 所有类型 boolean 无

两个操作数比较大小的规则：

  1. 如果两个操作的类型不一致，各自自动转为 number 类型进行比较。
  2. 如果两个操作数都是 string 类型，按照 string 类型比较大小的规则进行比较。
     console.log('a' < 'b');  // trueconsole.log('A' > 'a');  // false在unicode 编码中，a=97,b=98,依次向上。A=65,B=66,依次向上

string 类型的数据比较大小的规则：

  1. 比较的是字符对应的 unicode 编码，unicode 编码是数字，可以比较大小。
  2. 字符串比较是按位一位一位的比较，如果一个操作数第一位的字符比另外一个操作第一位字符的unicode编码大，该操作整体都大。

相等和不相等的判断规则：

  1. 如果两个操作数类型不一致，自动转为 number 之后进行比较。
  2. 如果两个操作数类型一致，直接看是不是一样的。
         console.log(0 == false);  //trueconsole.log('' == false); //tureconsole.log(undefined == undefined);  // trueconsole.log('hello' == 'hello');  // true

全等和不全等的判断规则：

  1. 如果两个操作数类型不一致，直接返回 false，不会进行自动类型转换的。
  2. 如果两个操作数类型一致，比较是否一样。
     console.log(true == 1);  // trueconsole.log(true === 1);  // false

null 进行相等（==）判断的时候，非常特殊：

console.log(null == null);      // true
console.log(null == 0);        // false
console.log(null == false);    // false
console.log(null == '');         // false
console.log(null == undefined);  // true

③ 逻辑运算符

运算符 含义 操作数个数 操作数的类型要求 组成的表达式的值的类型 有无副作用
&& 逻辑与 2 任何类型 取其中一个操作数作为表达式的值 无
|| 逻辑或 2 任何类型 取其中一个操作数作为表达式的值 无
! 逻辑非 1 boolean boolean 无

逻辑与组成的表达式的值的计算规则：

  1. 如果第一个操作数不成立，取第一个操作数作为表达式的值。
  2. 如果第一个操作数成立，取第二个操作数作为表达式的值。

逻辑或组成的表达式的值的计算规则：

  1. 如果第一个操作数不成立，取第二个操作数作为表达式的值。
  2. 如果第一个操作数成立，取第一个操作数作为表达式的值。
var n = 10;var res = n ++ || -- n;console.log(res);  // 10console.log(n);    // 11

 console.log(!true);  //falseconsole.log(!false);  //tureconsole.log(!0);  //ture

④ 赋值运算符

运算符 含义 操作数个数 操作数的类型要求 组成的表达式的值的类型 有无副作用
= 赋值 2 无要求，左边的操作数必须是变量 变量（左边操作数）的值作为表达式的值 有
+= 赋值求和 2 无要求，左边的操作数必须是变量 变量（左边操作数的值作为表达式的值 有
-= 赋值求差 2 无要求，左边的操作数必须是变量 变量（左边操作数的值作为表达式的值 有
*= 赋值求积 2 无要求，左边的操作数必须是变量 变量（左边操作数的值作为表达式的值 有
/= 赋值求商 2 无要求，左边的操作数必须是变量 变量（左边操作数的值作为表达式的值 有
%= 赋值求余 2 无要求，左边的操作数必须是变量 变量（左边操作数的值作为表达式的值 有
+= 赋值连接 2 string，左边的操作数必须是变量 变量（左边操作数的值作为表达式的值 有

总结：

  1. 赋值运算符要求左边的操作数必须是变量，右边的操作数变量、直接量、表达式都可以。
  2. 赋值运算符都有副作用，使用的就是赋值运算符的副作用，左边操作数会被修改。
  3. 赋值运算符组成的表达式以左边操作数为值（修改过后的）。
// 声明变量var num = 100;var age = 10;// 修改变量的值num = 200;num = 100 + 90;var res = (num = age);  console.log(num);  //10console.log(res);  //10console.log('');console.log('');

     num += 90;  //   num = num + 90console.log(num);  // 100num -= 10;   //  num = num - 10console.log(num);  // 90num *= 2;   // num = num * 2console.log(num);  // 180num /= 3; // num = num / 3console.log(num);  // 60num %= 9;  //  num = num % 9console.log(num);  // 6

⑤ 其他运算符

运算符 含义 操作数个数 操作数的类型要求 组成的表达式的值的类型 有无副作用
typeof 判断数据的类型 1 任意类型 string 无
, 逗号 2 无
+ 字符串连接符 2 string string 无
?: 比较运算符 3 任意类型 取第二个操作数或者第三个操作数作为表达式的值 无

+ 符合具有3个含义：

  1. 如果操作数只有一个，+ 表示正号运算符.
  2. 如果操作数两个，且没有任何一个操作数是字符串，+ 表示加号。
  3. 如果操作数连个，只要有一个操作数是字符串，+ 表示字符串连接符。
 console.log( 100 + 23);        //123 console.log( 100 + '12');      //10012console.log( '100' + '12');    //10012console.log( true + false);    //1console.log('');console.log('');

?：三元运算符组成的表示的值的规则：

  1. 如果第一个操作数成立，取第二个操作数作为表达式的值。
  2. 如果第一个操作数不成立，取第三个操作数作为表达式的值。
     var res = 100 ? 20 : 10;console.log(res);              //20var res1 = null ? 100 : 200;console.log(res1);             //200

2.4 运算符优先级

1、 一元运算符： ++ -- ! typeof
2、 乘除取余、加减
3、 关系运算符
4、 逻辑运算符
5、 赋值运算符
6、 ?:

注意： 使用 () 可以提高优先级。

var n = 100;
console.log(n ++ && n --);   101
console.log(n);              100
console.log(-- n || n ++);   99
console.log(n);              99

JS-数据类型转换-运算符相关推荐

  1. JS数据类型转换详解

    文章内容为所看网课笔记,如有侵权请联系删除 ## JS数据类型 1. 基本数据类型 number.string.undefined.null.boolean.symbol.bigint 2. 引用数据 ...

  2. 03 - JS数据类型转换/判断相等

    数据类型转换 其他类型转成数字类型:三种方式 1.parseInt();//转整数console.log(parseInt("10"));//10console.log(parse ...

  3. JS 数据类型转换、创建对象

    JS 创建数据类型一般都用Objcet // 创建字典 var dict_a = {} // 创建数组 var list_b = []//以上创建方法也可以直接使用Object创建,区别在与怎么赋值决 ...

  4. js数据类型转换（5）

  5. JS数据类型转换，转数值，转字符串，转布尔

    1.转数值 number parseInt('内容'/变量名)可以强制把字符串转整数数值,隐式转换 Parsefloat('内容'/变量名)可以强制把有小数的字符串转小数数值,隐式转换, Number ...

  6. number类型转换java_Number()数据类型转换

    Number() 如果是 Boolean 值, 和. 如果是数字值,只是简单的传入和返回. 如果是 . 如果是 undefined,返回NaN. 如果是字符串,遵循下列规则: 如果字符串中只包含数字( ...

  7. R数据分析——安装，数据类型转换，向量

    R数据分析 R中安装与使用包 卸载与移除包 基本数据类型(六种) 数据类型转换 运算符 R中的数据结构 向量 R中安装与使用包 R中的包存储在计算机上名为library的目录下 ✓ 使用函数libPa ...

  8. 前端牛客网刷题总结【 JS基础变量、数据类型、数据类型转换、运算符等】

    1.JavaScript是解释性语言.正确.体现在JS文件在完成之后,不会经过任何的编译.而是在运行时去解释执行.最好的例子就是,JS中一个函数有语法的错误,但是不会因为这个局部的错误而影响其他函数运 ...

  9. 前端：JS/17/前篇总结（JS程序的基本语法，变量），数据类型-变量的类型（数值型，字符型，布尔型，未定义型，空型），数据类型转换，typeof()判断数据类型，从字符串提取整数或浮点数的函数

    JS程序的基本语法 1,JS是区分大小写的,如:Name和name是不同的: 2,JS中每一条语句,一般以英文的分号(;)结束,在Java中是严格地一定要加上分号,不然会报错:但在JavaScript ...

最新文章

  1. 美团技术 mysql_美团MySQL数据库巡检系统的设计与应用
  2. python测试开发django-35.xadmin注册表信息
  3. virtual hust 2013.6.23 数学杂题基础题目 M - Quotient Polynomial
  4. struts2结果类型
  5. muduo网络库学习（九）日志类Logger和LogStream，将日志信息打印到屏幕
  6. linux 深度v15,[转载]深度Linux发布 V15.9
  7. 儿歌－宝宝学唱儿歌 ios版
  8. 向深海微生物学习，提高太阳能转换效率
  9. 管理中如何提高自己的推动力
  10. 【考研数学】五. 二重积分
  11. 微软输入法半角全角切换
  12. java mail实现smtp登录验证
  13. 什么是memcache，常见的memcache方法
  14. Windows最佳Markdown编辑器
  15. MSRA显著性检测数据集
  16. Qt菜单栏-工具栏-状态栏
  17. 与ISV的生态合作？怎么弄？
  18. 【VRP问题】基于蚁群算法求解配送路径最短问题附matlab代码
  19. Ruby on Rails视频教程
  20. Django无法执行迁移文件

热门文章

  1. 系统无法执行指定的程序。_使用Rust编写操作系统（一）：独立式可执行程序
  2. 连接MySQL和连接文件夹区别,对数据库连接问题的一点总结
  3. ie的window.open 未指明的错误_快递问题公告中错误使用“黑恶势力”等言辞 青岛工学院致歉...
  4. Maven的基本应用
  5. Redis入门（三）Redis的基本数据类型
  6. 2018-2019-1 20165236《信息安全系统设计基础》第八周学习总结
  7. test命令用法。功能：检查文件和比较值
  8. Gradle DSL method not found: ‘compile()’
  9. 【2007-3】【分硬币】
  10. Progress lifecycle