轻松学习JavaScript六:JavaScript的表达式与运算符

JavaScript脚本语言描述了一组用于操作数据值的运算符,包括一元运算符,布尔运算符,算术运算符,关系运

算符,三元运算符,位运算符和赋值运算符。

表达式是JavaScript语言的一个“短语”,包含变量名(或字面量)和运算符。最简单的表达式时字面量或变量名。当

然也有合并简单的表达式来创建复杂的表达式。

一一元运算符

(1)递增++和递减--

    var box1=100;
    ++box1;//相当于box=box+1
    document.write("box1="+box1+"<br/>");//输出box1=101
    var box2=100;
    --box2;//相当于box=box2-1
    document.write("box2="+box2);//输出box2=99

前置和后置的区别

    var box=100;
    var age=++box;//box先累加1为101,再赋值给age为101
    var height=box++;//box先赋值给height为101,box再累加为102
    document.write("age="+age+"<br/>");//输出age=101
    document.write("height="+height+"<br/>");//输出height=101
    document.write("box="+box);//输出box=102,原因是box经过了两次累加,所以是102

在没有赋值操作,前置和后置是一样的。但在赋值操作时,如果递增或递减运算符前置,那么前置的运算符会先

累加或累减再赋值,如果是后置运算符则先赋值再累加或累减。

(2)加和减运算符

用于取正或取负运算,也有把数字字符串转换为数值形式的功能。

    var box = "20";
    document.write(typeof box+"<br/>");	//输出string
    var age=-box;
    document.write(age+"<br/>");//输出-20
    document.write(typeof age);	//输出number  

二算术运算符

JavaScript语言中规定了五种算术运算符,即+,-,*,/和%(取余)。如果在算术运算符的值不是数值,那么它会

先使用Number()转型函数将其转换为数值(隐式转换)。

    var box=100+"100";
    document.write("box="+box+"<br/>");//输出100100
    document.write(typeof box);//输出string

这是为什么呢?JavaScript语言中的做算术运算时,只要其中一个是字符串,那么结果就会转换为字符串。相当

于字符串连接符,不能再算作是加法算术运算符。

    var box="100"-10;
    document.write("box="+box+"<br/>");//输出90
    var age=5/4;
    document.write("age="+age+"<br/>");//输出1.25
    var height=("你的年龄是:"+(10+10));//括号强制优先级
    document.write(height);//输出你的年龄是:20

取余

    var box=10%3;
    document.write("box="+box);//输出1

三关系运算符

用于进行比较的运算符称作为关系运算符:<(小于),>(大于),<=(小于等于),>=(大于等于),==(相对),!=(不

等),===(恒等或全等),!==(不全等或不恒等)。关系运算符大多数返回的是一个布尔值。

和其他运算符一样,当关系运算符操作非数值时要遵循以下规则:

1两个操作符都是数值,则数值比较

2两个操作数都是字符串,则比较两个字符串对应的字符编码值

3两个操作数有一个是数值,则将另一个转换为数值,在进行数值比较

4两个操作数有一个是对象,则先调用value()方法或toString()方法,再用结果比较。

    var box1=3>2;
    document.write(box1+"<br/>");//输出true
    var box2="3">22;
    document.write(box2+"<br/>");//输出false
    var box3="3">"22";
    document.write(box3+"<br/>");//输出true
    var box4="a">"B";//a为97,B为66
    document.write(box4+"<br/>");//输出true
    var box5= "Blue"<"alpha";//Blue的第一个字母是B,alpha的第一个字母是a,a为97,B为66
    document.write(box5)	//输出true

在相等和不等的比较上,如果操作数是非数值,则遵循以下规则:

1一个操作数是布尔值,则比较之前将其转换为数值,false转成0,true转成1。

2一个操作数是字符串,则比较之前将其转成为数值再比较。

3一个操作数是对象,则先调用value()方法或toString()方法再比较。

4不需要任何转换的情况下,null和undefined是相等的

5一个操作数是NaN,则==返回false,!=返回true,并且NaN和自身不等

6两个操作数都是对象,则比较它们是否是同一个对象,如果都指向同一个对象,则返回true,否则返回false

7在全等和全不等的判断上,比如值和类型都相等,才返回true,否则返回fasle。

    var box1='2'==2;
    document.write(box1+"<br/>");//输出true,比较的只是数值
    var box2={}=={};
    document.write(box2+"<br/>");//输出false,因为比较的是它们的地址,每个新创建对象的引用地址都不同。
    var box3=null==undefined;
    document.write(box3+"<br/>");//输出true,因为均为空数值
    var box4='2'===2;
    document.write(box4+"<br/>");//输出false,两个操作数的数据类型不相等
    var box5=null===undefined;
    document.write(box5);//输出false,两个操作数的数据类型不相等

四逻辑运算符

JavaScript语言中的逻辑运算符通常作用于布尔值的操作,一般和关系运算符配合使用,有三个逻辑运算符:&&

(逻辑与),||(逻辑或)和!(逻辑非)。

(2)&&表示两边都必须是true,才返回true。

如果两边的操作数有一个操作数不是布尔值的情况下,与运算就不一定返回布尔值,此时遵循下面的规则:

1第一个操作数是对象,则返回第二个操作数

2第二操作数是对象,则第一个操作数返回true,才返回第二个操作数,否则返回false

3一个操作数是null,则返回null

4一个操作数是undefined,则返回undefined

5如果一个运算数是对象,另一个是 Boolean 值,返回该对象

逻辑与运算符属于短路操作,如果有第一个操作数返回的是false,第二个不管是true还是false都返回false。

    var box1={}&&(5>4);
    document.write(box1+"<br/>");//输出true
    var box2=(5>4)&&{};
    document.write(box2+"<br/>");//输出[object Object]
    var box3=(3>4)&&{};
    document.write(box3);//输出false

(2)||表示两边有一个是true,就返回true。

如果两边的操作数有一个操作数不是布尔值的情况下,与运算就不一定返回布尔值,此时遵循下面的规则:

1第一个操作数是对象,则返回第一个个操作数

2第一个操作数的求值结果为fasle,则返回第二个操作数

3两个操作数都是对象,则返回第一个操作数

4两个操作数都是null,则返回null

5两个操作数都是undefined,则返回undefined

6两个操作数都是NaN,则返回NaN

逻辑或运算符也属于短路操作,如果有第一个操作数返回的是true,第二个不管是true还是false都返回true。

    var box1={}||(5>4);
    document.write(box1+"<br/>");//输出[object Object]
    var box2=(5>4)||{};
    document.write(box2+"<br/>");//输出true
    var box3=(3>4)||{};
    document.write(box3);//输出[object Object]

(3)!逻辑非运算符可以作用与任何值,无论这个值是什么数据类型,这个运算符都会返回一个布尔值,它的流程

是:先将这个值转换成布尔值,然后取反,规则如下:

1操作数是一个对象,返回false

2操作数是一个空字符串,返回true

3操作数是一个非空字符串,返回false

4操作数是数值0,返回true

5操作数是任意非0数值,返回false

6操作数是null,返回true

7操作数是NaN,返回true

8操作数是undefined,返回true

    var box=!{};
    document.write(box);//输出false

五位运算符

JavaScript语言中包括了七种位运算符:~(位非),&(位与),|(位或),^(位异或),<<(左移),>>(有符右移号),

>>>(无符号右移)

(1)位非(~)运算把运算数转换成32位数字,然后把二进制数转换成它的二进制反码,最后把二进制数转换成浮点

数。实质上是对数字求负,然后减去1即为所得值。

    var box=~25;
    document.write(box);//输出-26

(2)位与(&)运算直接对数字的二进制形式进行运算,然后对上下同一位置的两个数位进行与运算,只有两个数位

都为1时才得出1,其余的均为0.

    var box=25&3;
    document.write(box);//输出1

(3)位或(|)运算也是直接对数字的二进制形式进行计算,然后对上下同一位置的两个数位进行或运算,只右两个数

位都为0时才得出0,其余的均为1.

    var box=25|3;
    document.write(box);//输出27

(4)位异或(^)也是直接对二进制形式进行运算。当只有一个数位存放的是1时,它才返回1。其余的返回0。也就是

两个数位相同时返回0,不同时返回1.

    var box=25^3;
    document.write(box);//输出26

(5)左移运算也是对二进制数进行操作,相等于第一个操作数乘以(2的左移位数次幂)的积。

    var box=25<<3;
    document.write(box);//25左移3位相当于25乘以(2的3次幂),因此输出200

(6)有符号右移运算也是对二进制数进行操作,相等于第一个操作数除以(2的右移位数次幂)的商。

    var box=24>>2;
    document.write(box);//输出6

(7)无符号右移运算也是对二进制数进行操作,对于正数,与有符号右移是相同的结果,但是对于负数,就会有所

不同。

具体详细的了解ECMAScript 位运算符,可以访问ECMAScript位运算符

六赋值运算符

赋值运算符包括:=(),+=(),-=(),*=(),/=(),%=(),<<=(),>>=(),>>>=()。

      var box=100;
      box+=100;//相当于box=box+100
      document.write("box="+box);//输出box=200

七其他运算符

1字符串运算符:“+”,它的作用是将两个字符串想加。规则:只要有一个字符串即可。

    var box=100+"10"';
    document.write("box="+box);//输出100100   

2逗号运算符,可以在一条语句中执行多个操作

    var box=100,age=200,height=300;
    document.write("box="+box);//输出box=100

3三元操作符:

    var box=(3>4)?"对":"错";
    document.write(box);//输出错

如果想更详细的了解ECMAScript运算符的知识,可以访问JavaScript高级教程中的ECMASscript一元运算符。这

个系列中有详细的运算符教程。对于JS的运算符来说,我们可以对比着C++,C#和Java来学,这个还是相当的容易

的。

时间: 2024-10-09 09:02:35

轻松学习JavaScript六:JavaScript的表达式与运算符的相关文章

轻松学习JavaScript十八:JavaScript之DOM简介

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部分.HTML或XML页面的每个部分都 是一个节点的衍生物.通过DOM,可访问HTML文档的所有元素.当网页被加载时,浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了访问HTML和XML文档的标准."W3C 文档对象模型(DOM)是中立

JavaScript学习笔记【2】表达式和运算符、语句、对象

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 表达式和运算符 语句 对象 表达式和运算符 数组直接量中的列表逗号之间的元素可以省略,这时省略的空位会填充值undefined.元素列表末尾可以留下单个逗号,这时并不会创建一个新的值为undefined元素. 属性访问表达式,.identifier的写法只适用于要访问的属性名称是合法的标识符,并且需要知道要访问的属性的名字.如果属性名称是一个保留字或者包含空格和标识符,或是一个数字(对于数组来说),则必须使用方括号的写法.当属性

轻松学习JavaScript八:JavaScript函数

函数是一组可以随时随地运行的语句,函数作为ECMAScript的核心是很重要的.函数是由事件驱动的或者当它被 调用时执行的可重复使用的代码块.也就是函数是定义一次但却可以调用或执行任意多次的一段JavaScript代码.函 数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函 数调用表达式的值. 一函数声明 函数对于任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方,任何时候 调用执行.JS中的函数使用functio

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

前端学习 第六弹: javascript中的函数与闭包

前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {    var tmp = 3;    function bar(y) {        alert(x + y + (++tmp));    }    bar(10);}foo(2) 这时无论怎么运行输出的都是16,但这不是闭包 如果我们返回内部函数,内部function会close-over外部fu

轻松学习JavaScript十一:JavaScript基本类型(包含类型转换)和引用类型

一值的类型 早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的 值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值. (1)原始值 存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. (2)引用值 存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处. 为变量赋值时,ECMAScript的解释程序必须判断该值是原始类型,还是引用类型.要实现这一点,解释程序则需 尝试判断该值是否

怎样轻松学习JavaScript

js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路".js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样

分针网—每日分享: 怎么轻松学习JavaScript

js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路". js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库,对象库就一大堆. C:混合多种编程思想. 它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不

轻松学习javascript,首先你要傻一点

转自:宁采臣 js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路". js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库,对象库就一大堆. C:混合多种编程思想. 它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAV

轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)

一面相对象继承机制 今天算是什么都没干,尽在了解面向对象三大特性之一的继承了,过去的学习的C++和C#都是正统的面向对象语 言,学习的时候也没有怎么深入了解过,只是简单的学习最基础的继承.下午在看继承机制的时候,看到一个很经典 的继承机制实例.这个实例使用UML很好的解释了继承机制. 说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆 形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种, 具有