您的当前位置:首页JavaScript一元正号运算符示例代码

JavaScript一元正号运算符示例代码

2023-12-06 来源:菲特宠物网

本文适合JavaScript初学者。

一元正号介绍

一元正号运算符(+)位于其操作数前面,计算其操作数的数值,如果操作数不是一个数值,会尝试将其转换成一个数值。 尽管一元负号也能转换非数值类型,但是一元正号是转换其他对象到数值的最快方法,也是最推荐的做法,因为它不会对数值执行任何多余操作。

转换字符串

一元正号可以用于转换数值字符串为数字,比如如下代码:

+ "123" // 123+ "12.3" // 12.3

也可以转换二进制、16进制数值、自然底数的字符串:

+ "0x11" // 17+ "0b11" // 3+ "1e10" // 10000000000

看起来 和parseFloat功能类似,但是parseFloat支持字符串后面部分不为数字的情况,一元正号却不行,比如:

parseFloat("1px") // 1+ "1px" // NaN

如果是空字符串或者多个空格组成的字符串,一元正号会转换为0,parseFloat 结果为NaN

 + ' ' // 0parseFloat(' ') // NaN

负数形式字符串也可以转换成数值,但是对于十六进制 二进制不适用,对于自然底数适用(parseFloat 都适用):

+'-123' // 123+ "-0x11" // NaN+ "-0b11" // NaN+ "-1e10" // -10000000000

转换日期对象

一元正号转换日期对象为数字,得到时间戳,比如如下代码:

+ new Date(); // 1561020101609

相当于如下代码:

new Date().getTime(); // 1561020101609

转换null、undefined、NaN

一元正号会把null转换为0,undefined 转换为NaN。一元正号施加于NaN,结果还是NaN。代码如下:

+ null // 0+ undefined // NaN+ NaN // NaN

转换布尔值一元正号会把true 转换为1,false转换为0:

+ true;// 1+ false;// 0

转换数组

一元正号会把空数组[],转换为0。如果数组只有一个元素,切第一个元素为数字或者字符串,会对第一个元素进行转换,如果有多个元素,返回NaN,代码如下:

+ []// 0+ ['123'] // 123+ [true] // NaN+ [1,2] // NaN

总结

一元正号运算符对于数字字符串和日期的转换比较适用。

好了,

小编还为您整理了以下内容,可能对您也有帮助:

js中'b'+'a'+ +'a'+'a'=baNaNa是为什么啊?

这里考察四则运算的类型转换
其中+'a' = NaN, 这里的+是一元正号,计算操作数的数值,Number('a') = NaN
剩下就是字符串和其他类型相加,都会被转化为字符串
'b'+'a'+ +'a'+'a'='baNaNa'

js中'b'+'a'+ +'a'+'a'=baNaNa是为什么啊?

这里考察四则运算的类型转换
其中+'a' = NaN, 这里的+是一元正号,计算操作数的数值,Number('a') = NaN
剩下就是字符串和其他类型相加,都会被转化为字符串
'b'+'a'+ +'a'+'a'='baNaNa'

请问这段javascript 代码是什么意思?为什么能输出汉字。

这代码混淆,其实靠的是js的类型转化的一些基本原理。

换个简单点的例子吧,

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]

这个代码实际上等同于“sb”。

首先要运用到的第一个知识就是js运算符的优先级,因为这么长一段运算看的人眼花,我们必须得先根据优先级分成n小段,然后再各个击破。优先级的排列如下表:

优先级从高到低:

根据此规则,我们把这一串运算分为以下16个子表达式:

运算符用红色标出,有一点可能大家会意识不到,其实中括号[]也是一个运算符,用来通过索引访问数组项,另外也可以访问字符串的子字符,有点类似charAt方法,如:'abcd'[1] // 返回'b'。而且中括号的优先级还是最高的哦。

 

预处理结束,接下来需要运用的就是javascript的类型转化知识了。我们先说说什么情况下需要进行类型转化。当操作符两边的操作数类型不一致或者不是基本类型(也叫原始类型)时,需要进行类型转化。先按运算符来分一下类:

减号-,乘号*,肯定是进行数算,所以操作数需转化为number类型。

加号+,可能是字符串拼接,也可能是数算,所以可能会转化为number或string

一元运算,如+[],只有一个操作数的,转化为number类型

下面来看一下转化规则。

1. 对于非原始类型的,通过ToPrimitive() 将值转换成原始类型:

ToPrimitive(input, PreferredType?)

可选参数PreferredType是Number或者是String。返回值为任何原始值.如果PreferredType是Number,执行顺序如下:

如果input为primitive,返回

否则,input为Object。调用 obj.valueOf()。如果结果是primitive,返回。

否则,调用obj.toString(). 如果结果是primitive,返回

否则,抛出TypeError

如果 PreferredType是String,步骤2跟3互换,如果PreferredType没有,Date实例被设置成String,其他都是Number

 

2. 通过ToNumber()把值转换成Number,直接看ECMA 9.3的表格

3. 通过ToString()把值转化成字符串, 直接看ECMA 9.8的表格

规则就这么多,接下来实践一下,根据我们上面划分出的子表达式,一步一步将这个神奇的代码给执行出来。开工~

先看最简单的子表达式16:+[]

只有一个操作数[],肯定是转化为number了,根据上面的规则2,[]是个数组,object类型,即对象。所以得先调用toPrimitive转化为原始类型,并且PreferredType为number,这个参数表示更“倾向于”转化的类型,这里肯定是number了。然后首先调用数组的valueOf方法,数组调用valueOf会返回自身,如下:

这个时候,我们得到一个空串“”,还没有结束,看上面的规则2描述,继续调用toNumber,转化为number类型,如下:

大功告成!子表达式16转化完毕,+[],最终得到0。

 

来看子表达式15:[~+""]

空串""前面有两个一元操作符,但是操作数还是只有一个,所以,最终要转化为的类型是number。看规则2吧,空串调用toNumber得到0。接下来是~,这是个什么东东呢?它是位运算符,作用可以记为把数字取负然后减一,所以~0就是-1 。

别忘了,这个子表达式外头还包着中括号,所以最终的值为[-1],即一个数组,里面只有一个元素-1.

 

接下来看子表达式13就简单了,把15、16求出来的填进去,就变成了这样:--[-1][0],取数组的第0个元素,然后自减,结果为-2,是不so easy!

 

继续往上走,子表达式14: [~+[]]

其实把15、和16的原理用上就非常明显了,答案[-1]

 

继续来求子表达式9,此刻它已变成:-2*[-1],有稍许不一样,不过没关系,我们还是按照规则来,运算符是乘号*,当然是做数算,那后面的[-1]就得转化为number,与16的求法类似,过程如下:

①调用toPrimitive,发现是object类型

②调用valueOf,返回自身[-1]

③因为不是原始类型,继续调用toString,返回"-1"

④"-1"是原始类型了,然后调用toNumber,返回-1

⑤与-2相乘,返回2

 

子表达式10:~~!+[],不多说了,答案1. 就是从右往左依次一元计算。

 

有了9和10,我们来到了子表达式4,此刻它已经长这样了:2+1, 好,我不多说了。

 

继续看表达式7:!(~+[]),~+[]=-1,这个根据上面已经知道了,那!-1是什么呢?这里要说一下这个感叹号,它是逻辑取非的意思,会把表达式转化为布尔类型,转化规则和js的Truthy和Falsy原则是一样的,后面跟数字的,除0以外都为false,后面跟字符串的,除空串以外都为false。这里的!-1当然就是false了。

 

接下来这个表达式3:false+{}有点关键。一个布尔加一个对象,那这个{}应该先转化为原始类型,流程如下:

①调用toPrimitive,发现是object类型

②调用valueOf,返回自身{},

③不是原始类型,调用toString,返回"[object Object]"

④false与"[object Object]"相加,false先转化为字符串"false"

⑤相加得结果"false[object Object]"

 

知道了表达式3和4,我们就可以来看表达式1了,此时它是这样的:"false[object Object]"[3],因为这个[]可以取字符串的子字符,像charAt一样,所以得到了结果"s"

 

经过上面艰难的流程,我们拿到了字符"s",也就是那张图的左半边,剩下的那个"b",相同的原理可以搞出来,我这里就不一一演示了,留给你练练吧~

     

回顾一下这个过程其实也不复杂,只是有一些需要重复劳动的,只要你掌握了运算的优先级,能把大串分解成一个个小串,然后运用类型转化的知识挨个处理就搞定了。怎么样,看到这里你还觉得神奇吗?

同样的,中文字符也是由这样组成的,跟英文同样的道理。

JavaScript都有些什么运算符?有什么要特别注意的?我是个新手,哪个大牛帮我总结下。

你在其它主流语言中能见到的运算符,95%以上都能在JavaScript中使用。下面来看下几大类运算符:

1、 算术运算符:+,-,*,/,%

举例:45 + 44 = 89 89 - 44 = 45 9 * 3 = 27 9 / 3 = 3 86 % 10 = 6

加、减、乘、除、取余是最基本的算术运算符,几乎所有编程语言都具有这些运算符。在JavaScript语言中加、减、乘、除、取余分别用’+’, ’-’, ’*’, ’/’, ‘%’字符来表示。它们接收两个数值类型作为操作数进行相应的数算,并将运算结果返回。

2、 复值运算符:=

举例:total = num1+num2

赋值运算符是一个‘=’符号。当浏览器遇到赋值运算符,会先执行运算符右边的表达式,然后将其赋值给左边的变量或表达式。初学者特别要注意,这不是判断相等的运算符,而是赋值运算符。

3、 复合运算符:+=,-=,*=,/=

举例: value += 5;

“+=”运算符将相加和赋值操作合并在一起,是一个运算符,所以+=符号中间不能有空格。除了有“+=”运算符,JavaScript还提供了-=,*=和/=运算符;分别表示相减并赋值,相乘并赋值,相除并赋值。

4、 比较运算符==,===,!=,!===,>, <, >=, <=

举例: if(num1==num2) x>y, x<y, x>=y, x<=y

比较运算符比较两个对象的大小,判断是不相等,返回布尔类型的值。使用起来简单方便,但是我们需要注意如下几点:

注意1,不要混淆“=”和“==”,如

if ( num1 = num2 ) {

//除了num2为0的情况,其它情况都会执行。

}

注意2,“=”、“==”和“===”的区别

一个等号“=”是赋值运算符;两个等号“==”是相等比较的运算符(字符6和数字6会认为是相等的);三个等号“===”是严格的相等比较运算符(字符6和数字6不会认为是相等的,即要内容和数据类型完全一致)。

5、 逻辑运算符:&&,||, !

举例:if (x === y && m === n ) { … }

逻辑与由两个’&’组成,中间不能有空格;表示两个操作数都为true时,结果才为true。

逻辑或由两个’|’组成,与逻辑与相反,逻辑或只需操作数有一个为true,则结果为true。

逻辑非是一个感叹号,操作数为true,则结果为false,操作数为false,则结果为true。

6、 一元运算符:++,--

举例:intValue++; intValue--; ++intValue; --intValue;

自增运算符给变量加1,运算效果和intValue = intValue + 1、intValue += 1一样。自增运算符“++”是一元运算符,表示它只需要一个操作数。自增运算符又可分为前置自增和后置自增运算,即运算符++即可以放在操作数前边,也可以放在操作数后面,如前置自增++intValue和后置自增intValue++;

与自增运算符相反,自减运算符给变量减1,运算结果和intValue = intValue - 1、intValue -= 1的一样。自减运算符也是一元运算符,同样也有前置自减和后置自减的用法。

一元运算符出现的位置很重要,会影响自增运算的返回值。如前置++在计算后会返回变量增加后的值,而后置++会返回变量未增加前的值。

7、 三元运算符:? :

格式:条件表达式 ? 表达式1 : 表达式2;

三元运算符有疑问号?和冒号:组成。三元运算符的三个操作数如上示例,分别为条件表达式、表达式1和表达式2。当条件表达式为true时,表达式1会被执行;否则,表达式2将会被执行。这个逻辑和if-else语句很相似。

8、 位运算符:~、&、|、^、<<、>>、>>>

举例:~num, num1 & num2, num1 | num2, num1 ^ num2, -10<<2

位运算符实际就是对二进制进行与或非、左移、右移运行。

上述是从教程网站秒秒学上总结来的运算符各类,我感觉基本的运算符都囊括了,希望对你有帮助。

菲特宠物网还为您提供以下相关内容希望对您有帮助:

js中'b'+'a'+ +'a'+'a'=baNaNa是为什么啊?

其中+'a' = NaN, 这里的+是一元正号,计算操作数的数值,Number('a') = NaN 剩下就是字符串和其他类型相加,都会被转化为字符串 'b'+'a'+ +'a'+'a'='baNaNa'

JavaScript都有些什么运算符?有什么要特别注意的?我是个新手,哪个大牛...

一个等号“=”是赋值运算符;两个等号“==”是相等比较的运算符(字符6和数字6会认为是相等的);三个等号“===”是严格的相等比较运算符(字符6和数字6不会认为是相等的,即要内容和数据类型完全一致)。5、 逻辑运算符...

请问这段javascript 代码是什么意思?为什么能输出汉字。

换个简单点的例子吧,(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]这个代码实际上等同于“sb”。首先要运用到的第一个知识就是js运算符的优先级,因为这么长一段...

Web前端工程师要掌握的JavaScript代码片段(一)

1、Anagramsofstring(带有重复项)使用递归。对于给定字符串中的每个字母,为字母创建字谜。使用map()将字母与每部分字谜组合,然后使用reduce()将所有字谜组合到一个数组中,最基本情况是字符串长度等于2或1。constanagrams=str...

在JAVA中怎样区分一元运算符,二元运算符,三元运算符?

一元运算符有:"sizeof",'+'——正号,'-'——负号,'!', '++', '--' , '~'——位非,返回数字的非。2、二元运算是由两个元素形成第三个元素的一种规则。例如数的加法及乘法;更一般地,由两个集合形成第...

JavaScript语句分类大全

1、赋值语句:var2.return语句3、条件分支语句 if...else,switch4、循环语句 for,for...in,while,break,continue.5、对象操作语句with,new,delete,this6、注释语句7、函数定义语句:function,return1、变量声明赋值语句:var...

Web前端工程师应该知道的提高JavaScript技能的技巧!

运算符了,在下面的例子中,Math.max不能应用于arr数组,因为它不将数组作为参数,但它可以将各个元素作为参数传入。展开运算符...可用于提取数组的各个元素。constarr=[4,6,-1,3,10,4];constmax=Math.max(...arr);console.log(...

javascript如何使用

JavaScript有两种相等运算符。一种是完全向后兼容的,标准的"==",如果两个操作数类型不一致,它会在某些时候自动对操作数进行类型转换,考虑下面的赋值语句:var strA = "i love you!";var strB = new String("i ...

在javascript中的一段代码: if(x&gt;&gt;y){ x=0; y=10; } 请问"&gt;&gt;"是什么意...

有符号右移运算符由两个大于号表示(&gt;&gt;)。它把 32 位数字中的所有数位整体右移,同时保留该数的符号(正号或负号)。有符号右移运算符恰好与左移运算相反。例如,把 64 右移 5 位,将变为 2:var iOld = 64;/...

对于一段话的理解 我在看一本javascript的书,请大家看一下如何理解...

仍然使用 AND 运算符所用的例子,对 25 和 3 进行 OR 运算,代码如下:var iResult = 25 | 3;alert(iResult);//输出 "27"25 和 3 进行 OR 运算的结果是 27:25 = 0000 0000 0000 0000 0000 0000 0001 1001...

Top