JavaScript中的操作符类型转换示例总结_基础知识

首先,我们先来做一些题目吧!为了统一,我不混着来写这些题目,面试题目中,经常将这些题目混起来,这样对你的迷惑度会更大,为了更方便演示,我在这里分模块写了一些题目,大家可以看下!

操作符字符串的隐性转换
 乘法

 console.dir("-------以下乘法---------");
 console.dir(5*"5");
 console.dir(5*"a");
 console.dir(5*NaN);
 console.dir(5*null);
 console.dir(5*undefined);
 console.dir(5*5);
 console.dir("-------以上乘法---------");

除法

 console.dir("-------以下除法---------");
 console.dir(5/"5");
 console.dir(5/"a");
 console.dir(5/NaN);
 console.dir(5/null);
 console.dir(null/5);
 console.dir(5/undefined);
 console.dir(5/5);
 console.dir(5/0);
 console.dir(0/5);
 console.dir(0/0);
 console.dir("-------以上除法---------");

 取余、求模

 console.dir("-------以下取余、求模--------");
 console.dir(16%"5");
 console.dir(5%"a");
 console.dir(5%NaN);
 console.dir(5%null);
 console.dir(null%5);
 console.dir(5%undefined);
 console.dir(5%5);
 console.dir(5%0);
 console.dir(0%5);
 console.dir(0%0);
 console.dir("-------以上取余、求模---------");

 加法

 console.dir("-------以下加法--------");
 console.dir(16+"5");
 console.dir(5+"a");
 console.dir(5+NaN);
 console.dir(5+null);
 console.dir(5+undefined);
 console.dir(5+5);
 console.dir("两个数的和是"+5+5);
 console.dir("两个数的和是"+(5+5));
 console.dir("-------以上加法--------");

 减法

 console.dir("-------以下减法--------");
 console.dir(16-"5");
 console.dir(5-"a");
 console.dir(5-NaN);
 console.dir(5-null);
 console.dir(5-undefined);
 console.dir(5-5);
 console.dir(5-true);
 console.dir(5-"true");
 console.dir(5-"");
 console.dir("两个数的差是"+5-5);
 console.dir("两个数的差是"+(5-5));
 console.dir("-------以上减法--------");

 关系操作符

 console.dir("-------以下关系操作符--------");
 console.dir(16>"5");
 console.dir("16">"5");
 console.dir(5<"a");
 console.dir(5>=NaN);
 console.dir(5<NaN);
 console.dir(NaN>=NaN);
 console.dir(5>=null);
 console.dir(5>=undefined);
 console.dir(5>=5);
 console.dir(5>=true);
 console.dir(5>="true");
 console.dir(5>="");
 console.dir("Brick">"alphabet");
 console.dir("brick">"alphabet");
 console.dir("-------以上关系操作符--------");

 乘法

 console.dir(5*"5"); //25
 console.dir(5*"a");//NaN
 console.dir(5*NaN);//NaN
 console.dir(5*null);0
 console.dir(5*undefined);//NaN
 console.dir(5*5);//25

下面说一下乘法隐性转换原则:

1、如果2个数值都是数字,那么直接进行乘法运算,(相信大家都会的,和小学数学一样,同时要注意数字的符号),如果乘积数值超过了ECMAscript的数值表示范围,则返回Infinity(正无穷)或者-Infinity(负无穷)
2、如果一个数是NaN,那么结果就是NaN
3、如果Infinity与0相乘,结果是NaN
4、假如一个操作符是数字,另外一个不是数值,那么先用Number()函数,将其进行转化,将转化出来的值与数字进行相乘。假如转换出来的结果出现NaN,那么结果就是NaN。
除法

 console.dir(5/"5");//1  将字符转化为数字进行相除
 console.dir(5/"a");//NaN  将“a”用Number()函数进行转化,出来的值是NaN,结果就是NaN
 console.dir(5/NaN);//NaN
 console.dir(5/null);//Infinity null用Number()函数进行转化,结果是0,那么5/0是正无穷
 console.dir(null/5);//0 同上0/5是0
 console.dir(5/undefined);//NaN  undefined 用Number()进行转化,结果是NaN
 console.dir(5/5);//1
 console.dir(5/0);//Infinity
 console.dir(0/5);//0
 console.dir(0/0);//NaN //0除以0结果是NaN

下面说一下除法隐性转换原则:

和乘法类似,唯一多的一条就是0/0结果是NaN
取余、求模

求余在项目中用的最多的是求奇数偶数的时候。我们经常用一个数值与2进行求余,结果是0那么这个数是偶数,结果是1那么这个数是奇数。

看看上面的题目:

 console.dir(16%"5"); //1 将字符串5通过Number()转化为5然后进行求余
 console.dir(5%"a");//NaN
 console.dir(5%NaN);//NaN
 console.dir(5%null);//NaN 将null 通过Number()转化,结果是0,然后计算5%0 ,结果是NaN
 console.dir(null%5);//0 同上0%5 取余,结果是0
 console.dir(5%undefined);//NaN
 console.dir(5%5);//0
 console.dir(5%0);//NaN
 console.dir(0%5);//0
 console.dir(0%0);//NaN
console.dir(Infinity%Infinity);//NaN
console.dir(5%Infinity);//5
 console.dir(Infinity%5); //NaN

下面说一下取余隐性转换原则:

和乘法一样,我说一下比较特别的地方吧!我们都知道被除数和除数的概念吧,小学的时候就学过的。

1、被除数是无穷大,除数是有限大的值,那么结果是NaN
2、被除数是有限大的值,除数是0,那么结果是NaN
3、Infinity%Infinity结果是NaN
4、被除数是有限大的值,除数是无穷大的值,结果是被除数。
5、被除数是0,结果是0
减法

看看上面的例子吧!

 console.dir(16-"5");//11
 console.dir(5-"a");//NaN
 console.dir(5-NaN);//NaN
 console.dir(5-null);//5
 console.dir(5-undefined);//NaN
 console.dir(5-5);//0
 console.dir(5-true);//4
 console.dir(5-"true");//NaN
 console.dir(5-"");//5
 console.dir(5-Infinity);//-Infinity
 console.dir(Infinity-Infinity);//NaN
 console.dir("两个数的差是"+5-5);//NaN
 console.dir("两个数的差是"+(5-5));//两个数的差是0

下面说一下减法隐性转换原则:

和上面一样,相同的就不说了,我说一下减法特有的。

1、Infinity-Infinity结果是NaN
2、-Infinity-Infinity结果是-Infinity
3、一个数字减Infinity结果是-Infinity
4、Infinity-(-Infinity)结果是Infinity
5、如果操作数是对象,则调用对象valueOf方法,如果结果是NaN那么结果就是NaN。如果没有valueOf方法,那么调用toString()方法,并将得到的字符串转换为数值。
关系操作符

关系运算符统一返回true或者false

 console.dir(16>"5"); //true
 console.dir("16">"5");//false
 console.dir(5<"a");//false
 console.dir(5>=NaN);//false
 console.dir(5<NaN);//false
 console.dir(NaN>=NaN);//false
 console.dir(5>=null);//true
 console.dir(5>=undefined);//false
 console.dir(5>=5);//true
 console.dir(5>=true);//true
 console.dir(5>="true");//false
 console.dir(5>="");//true
 console.dir("Brick">"alphabet");//false B的字符串编码值是66 ,而a的字符串编码是97.因此false
 console.dir("brick">"alphabet");//true 小写字母b比a大,所以是true

下面说一下关系运算符隐性转换原则:

还是和上面一样,相同的就不说了。

如果比较的两个数都是字符串,那么会比较字符串对应的字符串编码值。

加法运算

加法运算隐性转换,我之所以最后说,是因为加法运算隐性转换和之前的不一样,之前的所有的运算符号,只要一个是数字,另一个也默认使用Number()进行数字转换。加法运算不一样。加法运算只要其中一个是字符串,那么另外一个也会转换为字符串,然后进行字符串的拼接!

 console.dir(16+"5"); //156
 console.dir(5+"a");//5a
 console.dir(5+NaN);//NaN
 console.dir(5+null);//5
 console.dir('5'+null);//5null
 console.dir(5+undefined);//NaN
 console.dir(null+undefined);//NaN
 console.dir(5+5);//10
 console.dir("两个数的和是"+5+5);//两个数的和是55
 console.dir("两个数的和是"+(5+5));//两个数的和是10

下面说一下加法运算符隐性转换原则:

1、有一个是字符串,那么另外一个也会转换为字符串进行拼接。假如一个是字符串,另外一个是null或者undefined,那么相加,null或者undefined就会调用String()方法,获得字符串“null”或者“undefined”,然后进行拼接。
2、假如一个数字加null或者undefined,那么还是把null或者undefined进行Number()转换之后再相加。
3、剩下的原则和其他的差不多,就不多说了。

双等号隐性转换
把以下代码运行一遍,相信你自然就懂了~

var a;

console.dir(0 == false);//true

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

console.dir(2 == {valueOf: function(){return 2}});//true

console.dir(a == NaN);//false
console.dir(NaN == NaN);//false

console.dir(8 == undefined);//false

console.dir(1 == undefined);//false

console.dir(2 == {toString: function(){return 2}});//true

console.dir(undefined == null);//true

console.dir(null == 1);//false

console.dir({ toString:function(){ return 1 } , valueOf:function(){ return [] }} == 1);//true

console.dir(1=="1");//true

console.dir(1==="1");//false

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
, 类型转换
操作符
c 类型转换操作符、类型转换操作符、javascript 类型转换、javascript的类型转换、javascript 操作符,以便于您获取更多的相关知识。

时间: 2025-01-05 06:36:16

JavaScript中的操作符类型转换示例总结_基础知识的相关文章

javascript 中that的含义示例介绍_基础知识

你可能会发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢? 在javascript中,this代表的是当前对象. var that=this就是将当前的this对象复制一份到that变量中.这样做有什么意义呢? 复制代码 代码如下: $('#zhetenga').click(function(){ //this是被点击的#zhetenga var that = this; $('.zhetenga').each(function(){ //this是.zheten

javascript中字符串的定义示例代码_基础知识

复制代码 代码如下: <html> <head> <title>javascript中字符串的定义</title> <script> //定义字符串 //第一种 var str = new Array(); alert(str);//空字符 //第二种 var str2 = new Array("hello"); alert(str2);//hello //第三种 /* String 对象可用字符串文字显式创建. 用这种方法创

JavaScript中的prototype原型学习指南_基础知识

原型是什么 Function 类型有一个属性 prototype,直接翻译过来就是原型.这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享. 这句话根据前面所说的,细细琢磨下来,就可以得到下面代码: function Person(){ ... } Person.prototype = { country : 'china', sayName : function(){ ... } } 先创建了一个 Function 类型的实例

深入了解JavaScript中的Symbol的使用方法_基础知识

Symbol 是什么? Symbols 不是图标,也不是指在代码中可以使用小图片: 也不是指代其他一些东西的语法.那么,Symbol 到究竟是什么呢?七种数据类型 JavaScript 在 1997 年被标准化时,就有 6 种数据类型,直到 ES6 出现之前,程序中的变量一定是以下 6 种数据类型之一:     Undefined     Null     Boolean     Number     String     Object 每种数据类型都是一系列值的组合,前面 5 种数据类型值的数

简单理解JavaScript中的封装与继承特性_基础知识

JavaScript中的封装封装简单地说就是让外界只能访问对象的共有变量和函数,隐藏细节和数据. js中有三种方法创建对象,分别为门户大开型.用命名规范区分私有变量.闭包创建真正的私有变量三种. 1.门户大开型,是实现对象的最基础的方法,所有方法与变量都是共有的外界可以访问. var Book = function(name){ if(this.check(name)){ console.log("error"); throw new Error("name null&quo

在javascript中创建对象的各种模式解析_基础知识

最近在看<javascript高级程序设计>(第二版) javascript中对象的创建 •工厂模式 •构造函数模式 •原型模式 •结合构造函数和原型模式 •原型动态模式 面向对象的语言大都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象.虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象.任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建:引用类型可以是原生的,也可以是自定义的.原生的引用类型有:Object.A

JavaScript中Function()函数的使用教程_基础知识

 function语句不是定义一个新的函数,并且可以定义你的函数动态使用Function()构造使用操作符的唯一途径. 注:这是面向对象编程的术语.第一次可能会感觉不太习惯,这里是没有问题的.语法 下面是使用new运算符创建一个使用功能Function()构造的语法. <script type="text/javascript"> <!-- var variablename = new Function(Arg1, Arg2..., "Function Bo

JavaScript中的Document文档对象_基础知识

Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档.描述当前窗口或指定窗口对象的文档.它包含了文档从<head>到</body>的内容. 用法:document (当前窗口) 或 <窗口对象>.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fg

简单谈谈javascript中this的隐式绑定_基础知识

我们先来看一个例子 function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2 this指向了obj,因为foo执行时的call-site(可以理解为调用时所在作用域)在obj上面.注意是运行的时候,和在哪里声明的没有关系. call-site and call-stack call-site姑且理解为调用域,call-stack为调用栈.如下代码可以辅助我们理解 function