javascript中各种表达式和理解并等能使用javascript中各种运算符

原始表达式

原始表达式是最简单的表达式。它是表达式的最小单元。

Javascript中的原始表达式有:常量、直接量、关键字、变量。

1

2

3

4

5

6

1.23 //数字直接量

"hello" //字符串直接量

true //保留字,布尔值

null //保留字,表示空值

this //保留字,返回当前对象

i //变量,表示i值

数组初始化表达式

数组初始化表达式(也称数组直接量),它实际上是一个新创建的数组。

数组初始化表达式是通过一对方括号和其内由逗号隔开的列表构成。

1

2

3

4

[] //空数组

[1 + 2,3 + 4] //[3.7]

[[1,2,3],[4,5,6]] //表达式可嵌套,这里相当于二维数组

[1,,,,,3] //逗号间元素可以省略,逗号间空位将填充为undefined

注意,元素列表最后一个元素后可以留单个逗号,但是不会创建一个值为undefined的元素。即会忽略最后一个空位。

1

2

3

4

5

6

7

var a = [1,];

alert('a数组的长度是:' + a.length); //a数组的长度是:1

var b = [1,,];

alert('b数组的长度是:' + b.length + ';b数组的第二个元素是:'+b[1]);

//b数组的长度是:2;b数组的第二个元素是:undefined

//b数组列表中两个逗号间的空位是有被创建元素的,只是为赋值,为undefined。

//而第二个逗号后面的空位,被忽略,数组长度为2

对象初始化表达式

对象初始化表达式(也称对象直接量),它实际上是一个新创建的对象。

对象初始化表达式是通过一对花括号和其内由逗号隔开的值名对列表构成。

1

2

3

4

5

6

7

8

var p = {} //空对象

var q = {x:1,y:2} //有两个属性的对象

var o = {dot1:{x:1,y:3},dot2:{x:4,y:6}} //对象直接量也可嵌套

var side = 1;

var square = {

    'upperLeft':{x:q.x,y:q.y}, //对象中的属性名称可以是字符串

    'lowerRight':{x:q.x + side,y:q.y + side} //属性值也可以是表达式

};

函数定义表达式

函数定义表达式,在某种意义上也可以称为函数直接量。

一个典型的函数定义表达式包含关键字function,跟随其后的是一对圆括号,括号内是一个以逗号分隔的列表,列表含有0个或多个标示符表示参数,然后再跟随一个由花括号包裹的javascript代码段。

1

2

3

var square = function(x){

    return x * x;

}

属性访问表达式

属性定义表达式用于获得属性或数组元素的值。

有两种写法:

1

2

expression.identifier //expression用于指定对象,identifier用于指定需要访问的属性名称

expression[expression] //表达式指定要访问的属性名称或代表要访问数组元素的索引

1

2

3

4

5

6

7

8

var o = {x:1,y:{z:3}}; //创建一个对象,有两个属性,其中属性y的值也是一个对象,有一个属性z

var a = [o,4,[5,6]]; //创建一个数组,第一个值为一个对象,第三个值是另一个数组

alert(o.x); //1 ,对象o的x属性值

alert(o.y.z); //3 ,对象o的y属性,它的z属性值

alert(o['x']); //1 ,对象o的x属性值

alert(a[1]); //4 ,数组a中索引为1的元素

alert(a[2]['1']); //6 ,数组a中索引为2的元素,它的索引为1的元素

alert(a[0].x); //1 ,数组a中索引为0的元素,它的x属性

调用表达式

调用表达式即调用函数或方法的语句。

1

2

3

f(0); //f是一个函数,给它传递一个值为0的参数

Math.max(x,y,z) //Math.max是一个求最大值的函数,其中x,y,z是传入的参数

a.sort() //是一个没有参数的排序函数

对象创建表达式

对象创建表达式用来创建一个对象并调用一个函数(即构造函数)初始化新创建的对象。

对象创建表达式用使用new关键字来初始化一个对象实例。

1

2

3

4

new Array(); //创建一个数组对象

new Object(); //创建一个对象

new Point(2,3); //创建一个Point对象实例

new Date; //如果构造函数不需要任何参数,可以省略圆括号,但是不推荐

根据操作数的个数javascript运算符可以分三类,分别为:一元运算符,二元运算符和三元运算符。

一元操作符

1. 递增递减操作符

递增递减操作符又分为前置型和后置型。前置型,操作符放在操作数前面;后置型,操作符放在操作数后面。

1

2

3

4

i++; //后置型递增

++i; //前置型递增

i--; //后置型递减

--i; //前置型递减

前置型和后置型递增递减操作有着本质上的区别,前置型变量的值都是在语句被求值以前被改变的;后置型变量的值是在语句被求值后被改变的。

1

2

3

4

5

6

7

8

9

10

var num1 = 2,num2 = 20,num3,num4;

num3 = --num1 + num2;

num4 = num1 + num2;

var age1 = 2,age2 = 20,age3,age4;

age3 = age1-- + age2;

age4 = age1 + age2;

alert('--num1 + num2 = ' + num3 + ';num1 + num2 = ' + num4);

//--num1 + num2 = 21;num1 + num2 = 21

alert('age1-- + age2 = ' + age3 + ';age1 + age2 = ' + age4);

//age1-- + age2 = 22;age1 + age2 = 21

看这个例子,--num1,是前置型递减语句,上面提到,前置型变量是在被求值前就已经改变,即在执行--num1前,num1变量已经被减去1,所以--num1的值是1,所以num3和num4的值是相等的。而age1--是后置型递减语句,在执行这条语句时,age1的值没有改变,所以这条语句保留age1原来的值,在执行完这条语句后,age1的值才被减去1,这就是age3的值会比age4的值大1的原因。

递增运算本质上跟递减运算是一样的,只不过值是被加上1.

2. 一元加和减操作符

一元减操作符将操作数转化为数值,返回其负数结果。

在对非数值操作数进行一元减操作时,会先进行类型转换,再返回其负数结果。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var s1 = '01';

var s2 = '1.1';

var s3 = 'z';

var b = 'false';

var f = 1.1;

var o = {

    valueOf : function(){

        return -1;

    }

};

s1 = -s1;

s2 = -s2;

s3 = -s3;

b = -b;

f = -f;

o = -o;

alert('s1 = ' + s1); //s1 = -1

alert('s2 = ' + s2); //s2 = -1.1

alert('s3 = ' + s3); //s3 = NaN

alert('b = ' + b); //b = NaN

alert('f = ' + f); //f = -1.1

alert('o = ' + o); //o = 1

一元加操作符,用于数值变量时,不会长生任何结果。应用于非字符变量,会先进行类型转换,然后在返回数值结果。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var s1 = '01';

var s2 = '1.1';

var s3 = 'z';

var b = false;

var f = 1.1;

var o = {

    valueOf : function(){

        return -1;

    }

};

s1 = +s1;

s2 = +s2;

s3 = +s3;

b = +b;

f = +f;

o = +o;

alert('s1 = ' + s1); //s1 = 1

alert('s2 = ' + s2); //s2 = 1.1

alert('s3 = ' + s3); //s3 = NaN

alert('b = ' + b); //b = 0

alert('f = ' + f); //f = 1.1

alert('o = ' + o); //o = -1

布尔操作符

布尔操作符一共有三个:非(NOT)、与(AND)、或(OR)

1. 逻辑非

逻辑非操作符由一个叹号(!)表示,它会将操作数转换为布尔值,再对其求反并返回最终的结果。

1

2

3

4

5

6

alert(!false); //true

alert(!"red"); //false

alert(!0); //true

alert(!''); //true

alert(!NaN); //true

alert(!1235); //false

对一个操作数使用两次逻辑非操作,实际上相当于对其使用了Boolean()函数,会将其转换为对应的布尔值。

1

2

3

4

5

6

alert(!!false); //false

alert(!!"red"); //true

alert(!!0); //false

alert(!!''); //false

alert(!!NaN); //false

alert(!!1235); //true

2. 逻辑与操作符

逻辑与操作由两个和号(&&)表示,它有两个操作数。

逻辑与操作的两个操作数都为布尔值时,当且仅当两个操作数都为true时,结果才为true,其他情况下结果都为false。

逻辑与操作是短路操作,即当第一个操作数为false时,就不会再对第二个操作数进行求值。

1

2

3

4

5

var f1 = false;

var f2 = 1;

var result = (f1 && f2++);

alert(result); //false

alert(f2); //1

这个例子中,由于f1的值为false,这直接导致它与任何值进行逻辑与操作都将返回false,所以f2++这条语句不会被执行,所以f2保留最初的值不变。

3. 逻辑或操作符

逻辑或操作符由两个竖线(||)表示,也有两个操作数。

进行逻辑或操作的两个操作数都为布尔值时,当且仅当两个操作数都为false时,结果才为false,其他情况结果都为true。

逻辑或操作也是短路操作,即当第一个操作数为true时,就不会再对第二个操作数进行求值。

1

2

3

4

5

var f1 = true;

var f2 = 1;

var result = (f1 || --f2);

alert(result); //true

alert(f2); //1

这个例子中,由于f1的值为true,这直接导致它与任何操作数进行逻辑或操作都将返回true,所以--f2这条语句不会执行,所以f2保留最初的值不变。

乘性操作符

乘性操作符也包括三个,分别为乘法、除法和求模。

1. 乘法

乘法操作符由一个星(*)表示,用于计算两个操作数的乘积。

1

var result = 3 * 2;

如果有一个操作数不是数值,那么javascript会将调用它的Number()方法将其转换为数值,再进行乘法操作。

1

var result = "3" * 2; //6

2. 除法

除法操作符由一个斜线(/)表示,有两个操作数。执行第二个操作数除第一个操作数的计算。

1

var result = 6 / 2;

如果有一个操作数不是数值,那么javascript会将调用它的Number()方法将其转换为数值,再进行除法操作。

1

var result = "6" / 2; //3

3. 求模

求模操作符由一个百分号(%)表示,用于求余数。

1

var result = 26 % 5; //1

如果有一个操作数不是数值,那么javascript会将调用它的Number()方法将其转换为数值,再进行求模操作。

加性操作符

加性操作符有加法和减法两个。

1. 加法

如果两个操作数都是数值,则进行常规的加法计算。

1

var resule = 1 + 2;

如果两个操作数都是字符串,则将两个操作数拼接起来;

如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后再将两个字符串拼接起来。

1

2

3

4

5

6

7

8

var result1 = 1 + 1;

var result2 = 1 + '1';

var result3 = 1 + 3 + '5';

var result4 = '5' + 1 + 3;

alert('result1 = ' + result1); //result1 = 2

alert('result2 = ' + result2); //result2 = 11

alert('result3 = ' + result3); //result3 = 45,1 + 3是两个数值相加,得到结果4,再与字符串5进行拼接

alert('result4 = ' + result4); //result4 = 513,第一个操作数是字符串,故接下来的操作都将是变成字符串连接

2. 减法

如果两个操作数都是数值,则进行常规的减法计算;如果一个操作数为非数值,会进行类型转换,然后在进行减法计算。

1

2

3

4

5

6

7

8

9

10

11

12

var result1 = 5 - true;

var result2 = 1 - '';

var result3 = 5 - '1';

var result4 = 5 - null;

var result5 = NaN - 1;

var result6 = 5 - 3;

alert('result1 = ' + result1); //result1 = 4

alert('result2 = ' + result2); //result2 = 1

alert('result3 = ' + result3); //result3 = 4

alert('result4 = ' + result4); //result4 = 5

alert('result5 = ' + result5); //result5 = NaN

alert('result6 = ' + result6); //result6 = 2

关系操作符

关系操作符主要有:小于( <)、大于(>)、小于等于(<=)和大于等于(>=)。

关系操作符都将返回一个布尔值。

1

2

3

4

5

6

var x1 = 5;

var x2 = 6;

var result1 = x1 > x2,

    result2 = x1 < x2;

alert("x1 > x2 = " + result1); //x1 > x2 = false

alert("x1 < x2 = " + result2); //x1 < x2 = true

字符串的比较时比较两个操作数对应位置的每个字符的字符编码值。大写字母的字符编码全部小于小写字母的字符编码。

1

2

var result3 = ' Bad '<'apple ';

alert("'Bad '<'apple ' = " + result3);  //'Bad '<'apple ' = true

两个操作数都是字符串时,进行的是字符串的比较;当时如果其中有一个操作数是数值时,会将另一个操作数转换为数值,然后进行数值比较。

1

2

3

4

var result4 = '23 '>'3 ';

var result5 = '23 '>3;

alert("'23 '>'3 ' = " + result4);  //'23 '>'3 ' = false

alert("'23 '>3 = " + result5);    //'23 '>3 = true

NaN与任何操作数进行关系比较,结果都是false。

1

2

3

4

5

6

var result6 = "a" < 3;

var result7 = NaN < 0;

var result8 = NaN > 3;

alert(' "a" < 3 = ' + result6); //"a" < 3 = false. 这里字符串a不能被转换为数值,会返回NaN,然后NaN再与数值3比较

alert(' NaN < 0 = ' + result7); //NaN < 0 = false

alert(' NaN > 3 = ' + result8); //NaN > 3 = false

相等操作符

相等操作符主要有两组,分别为:相等和不像等,全等和不全等。

1. 相等和不相等

相等(==)和不相等(!=)操作都会先转换操作数,然后再比较他们的相等性。

null和undefined比较是相等的。

如果有一个操作数是NaN,则相等操作符返回false,不相等操作符返回true。注意:NaN跟任何值都不相等,包括其自身。

如果两个操作数都是对象,则比较他们是不是同一个对象,如果两个操作数都指向同一个对象,则相等操作返回true,否则返回false。

1

2

3

4

5

6

var result1 = ('5' =  = 5);

var result2 = (NaN! = NaN);

var result3 = (null == undefined);

alert("'5' == 5返回" + result1); //'5'==5返回true

alert("NaN! = NaN返回" + result2); //NaN!=NaN返回true

alert("null == undefined返回" + result3); //null == undefined返回true

2. 全等和不全等

全等(===)和不全等(!==)不会将操作数进行类型转换。如果两个操作数在未经转换前相等(即类型和值都相等),那么全等操作返回true,否则返回false。

1

2

3

4

5

6

7

8

var result1 = ('5' === 5);

var result2 = (NaN! == NaN);

var result3 = (null === undefined);

var result4 = (5 === 5);

alert("'5' === 5返回" + result1); //'5' === 5返回false

alert("NaN !== NaN返回" + result2); //NaN !== NaN返回true

alert("null === undefined返回" + result3); //null === undefined返回false

alert("5 === 5返回" + result4); //5 === 5返回true

新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。条件操作符

条件操作符是一个三元操作符,它的语法形式如下所示:

1

variable = boolean_expression ? true_value : false_value;

这行代码表示,先对boolean_expression进行求值,假如值为true,则将true_value的值赋给变量;如果值为false,则将false_value的值赋给变量。

1

2

3

var num1 = 3,num2 = 8;

var max_num = num1 > num2 ? num1 : num2;

alert(max_num); //8

赋值操作符

简单的赋值操作符是由一个等号(=)来表示的。用于将右侧的值赋给左侧的变量。

1

2

var num=10;

alert('num的值是'+num); //num的值是10

除了简单的赋值操作符外,还有些复合赋值操作符,主要有:*=、/=、%=、+=、-=

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var num1 = 3;

result1 += num1;

result2 -= num1;

result3 *= num1;

result4 /= num1;

result5 %= num1;

alert('result1 = ' + result1);

//result1 = 3 .相当于result1 = result1 + num,即0 + 3

alert('result2 = ' + result2);

//result2 =- 3 .相当于result1 = result1 - num,即0 - 3

alert('result3 = ' + result3);

//result3 = 0 .相当于result1 = result1 * num,即0 * 3

alert('result4 = ' + result4);

//result4 = 0 .相当于result1 = result1 / num,即0 / 3

alert('result5 = ' + result5);

//result5 = 0 .相当于result1 = result1 % num,即0 % 3

逗号操作符

使用逗号操作符可以在一条语句中执行多个操作。

1

var num1 = 1,num2 = 2,num3 = 3;

发布了38 篇原创文章 · 获赞 20 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/webxuexi168/article/details/104318658