前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js-数据运算

js-数据运算

作者头像
bamboo
发布2019-01-29 16:09:25
3.6K0
发布2019-01-29 16:09:25
举报
文章被收录于专栏:bamboo前端学习记录

一、运算符概述

1、定义

JavaScript中运算符主要用于连接简单表达式,组成一个复杂的表达式

2、运算符类别

  • 算数运算符
  • 赋值表达式
  • 比较表达式
  • 布尔运算符
  • 位运算符

二、算数运算符

1、加法运算符(Addition):x + y

加法运算符是在运行时决定,到底是执行相加,还是执行连接。也就是说,运算子的不同,导致了不同的语法行为,这种现象称为“重载”(overload)

(1)、在两个操作数都是数字的时候,会做加法运算

代码语言:javascript
复制
console.log(2+4);//6

(2)、两个参数都是字符串或在有一个参数是字符串的情况下,会把另外一个参数转换为字符串做字符串拼接

代码语言:javascript
复制
console.log("2"+"4");//"24"
代码语言:javascript
复制
'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"

(3)、在参数有对象的情况

  • 3.1首先自动调用对象的valueOf方法

一般来说,对象的valueOf方法总是返回对象自身,,也可自定义

  • 3.2再自动调用对象的toString方法,将其转为字符串(如果valueOf方法直接返回一个原始类型的值,就不会调用tostring

对象的toString方法默认返回object Object,也可自定义

代码语言:javascript
复制
var obj = { p: 1 };
obj + 2 // "[object Object]2"
  • 3.3自定义valueOf方法或toString方法,得到想要的结果
代码语言:javascript
复制
var obj = {
  valueOf: function () {
    return 1;
  }
};

obj + 2 // 3
代码语言:javascript
复制
var obj = {
  toString: function () {
    return 'hello';
  }
};

obj + 2 // "hello2"
  • 3.4 Date对象特例

如果运算子是一个Date对象的实例,那么会优先执行toString方法。

代码语言:javascript
复制
var obj = new Date();
obj.valueOf = function () { return 1 };
obj.toString = function () { return 'hello' };

obj + 2 // "hello2"

(4)、在只有一个字符串参数和+号的时候会尝试将其转换为数字,转换失败输出NaN

代码语言:javascript
复制
console.log(+"4");//4 
代码语言:javascript
复制
+'dddddd'
NaN

2、其他算术运算符

对于其他运算符,在运算前都强制转换数字,再运算。对象就调用valueOf或者toString,如果不能转换的,输出NaN

减法运算符(Subtraction): x - y

乘法运算符(Multiplication): x * y

除法运算符(Division):x / y

余数运算符(Remainder):x % y

自增运算符(Increment):++x(先加后赋值) 或者 x++(先赋值后加)

自减运算符(Decrement):--x 或者 x--

求负运算符(Negate):-x

数值运算符(Convert to number): +x

三、赋值运算符

赋值运算符用于给变量赋值,最常见的赋值运算符,当然就是等号,表达式x=y表示将y赋值给x。除此之外,JavaScript还提供其他11个赋值运算符。

运算时从右到左,如var z=y=x;

代码语言:javascript
复制
x += y // 等同于 x = x + y
x -= y // 等同于 x = x - y
x *= y // 等同于 x = x * y
x /= y // 等同于 x = x / y
x %= y // 等同于 x = x % y
x >>= y // 等同于 x = x >> y
x <<= y // 等同于 x = x << y
x >>>= y // 等同于 x = x >>> y
x &= y // 等同于 x = x & y
x |= y // 等同于 x = x | y
x ^= y // 等同于 x = x ^ y

四、比较运算符

比较运算符比较两个值,然后返回一个布尔值,表示是否满足比较条件。

JavaScript提供了8个比较运算符。

1、 == 比较两个值是否相等

  • 相等运算符(==)会将它们转换成同一个类型,再用严格相等运算符进行比较。

2、=== 严格相等,比较它们是否为同一个值(数据类型也要相同)

内容较多,单独写了一篇文章去说相等和严格相等

3、!=不相等

4、!== 严格不相等

它的算法就是先求严格相等运算符的结果,然后返回相反值。

5、其他比较运算符(< 小于 <= 小于或等于 > 大于 >= 大于或等于)

5.1同为字符串按照Unicode 顺序进行比较

首先比较首字符的 Unicode 码点,如果相等,再比较第二个字符的 Unicode 码点,以此类推

5.2不全为字符串的比较,分成以下两种情况

1)原始类型值(数值、字符串、布尔值)

如果两个运算子都是原始类型的值,则是先转成数值再比较

代码语言:javascript
复制
5 > '4' // true
// 等同于 5 > Number('4')
// 即 5 > 4

true > false // true
// 等同于 Number(true) > Number(false)
// 即 1 > 0

2 > true // true
// 等同于 2 > Number(true)
// 即 2 > 1

2)有一方或者双方为对象的比较

调用valueOf方法和toString方法,转为原始类型的值,再进行比较

代码语言:javascript
复制
var x = [2];
x > '11' // true
// 等同于 [2].valueOf().toString() > '11'
// 即 '2' > '11'
代码语言:javascript
复制
{ x: 2 } >= { x: 1 } // true
// 等同于 { x: 2 }.valueOf().toString() >= { x: 1 }.valueOf().toString()
// 即 '[object Object]' >= '[object Object]'

五、布尔运算符

1、! 取反运算符

对数据取反,得到的都是布尔值!

2、&& 且运算符

1)用途:且运算符(&&)往往用于多个表达式的求值。

2) 运算规则是:如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值为false,则直接返回第一个运算子的值,且不再对第二个运算子求值。

代码语言:javascript
复制
var x = 1;
(1 - 1) && ( x += 1) // 0
x // 1

3)跳过第二个运算子的机制,被称为“短路”,有些程序员喜欢用它取代if结构

代码语言:javascript
复制
if (i) {
  doSomething();
}

// 等价于

i && doSomething();

4)运算符可以多个连用

返回第一个布尔值为false的表达式的值。如果所有表达式的布尔值都为true,则返回最后一个表达式的值。

代码语言:javascript
复制
true && 'foo' && '' && 4 && 'foo' && true
// ''

1 && 2 && 3
// 3

3、|| 或运算符

1)运算规则:

如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值;如果第一个运算子的布尔值为false,则返回第二个运算子的值

代码语言:javascript
复制
't' || 'f' // "t"
'' || 'f' // "f"

2)或运算符可以多个连用

这时返回第一个布尔值为true的表达式的值。如果所有表达式都为false,则返回最后一个表达式的值。

代码语言:javascript
复制
false || 0 || '' || 4 || 'foo' || true
// 4

false || 0 || ''
// ''

4、condition? true case : false case 三元条件运算符

1)简介:三元条件运算符由问号(?)和冒号(:)组成,分隔三个表达式。

2)规则:如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值。

代码语言:javascript
复制
console.log(true ? 'T' : 'F');

六、位运算符

就是把两个做位运算的值,都按照二进制一位一位的按照符号规则进行运算

位运算符只对整数起作用,如果一个运算子不是整数,会自动转为整数后再执行

1、或运算(or):

符号为|,表示两个二进制位中有一个为1,则结果为1,否则为0。

0000 0010 | 0000 0001 就等0000 0011(3)

2、与运算(and):

符号为&,表示两个二进制位都为1,则结果为1,否则为0。

0000 0010 & 0000 0001 就等0000 0000(0)

3、否运算(not):

符号为~,表示将一个二进制位变成相反值。

~ 0000 0010 就等于1111 1101

4、异或运算(xor):

符号为ˆ,表示两个二进制位中有且仅有一个为1时,结果为1,否则为0。

5、左移运算(left shift):符号为<<

代码语言:javascript
复制
1(数值)<<1(左移的位数) //2
1<<2 //4
1<<3 //8

6、右移运算(right shift):符号为>>

代码语言:javascript
复制
8>>1 //4

7、带符号位的右移运算(zero filled right shift):符号为>>>

七、其他运算符

1、()小括号

圆括号是一种运算符,它有两种用法:

1)如果把表达式放在圆括号之中,作用是求值

2)如果跟在函数的后面,作用是调用函数。

2、逗号运算符

逗号运算符用于对两个表达式求值,并返回后一个表达式的值。

代码语言:javascript
复制
var x = 0;
var y = (x++, 10);
x // 1
y // 10

八、运算符的优先级

运算符的优先级,建议还是查看mdn。全部记住很难,简单理一下顺序,加深直觉(不准确哟)

自增 > 逻辑非>typeof > 加减乘除 > 判断大小(><=) >逻辑运算(与或)>三元条件运算符 >赋值 >,

1、typeof的优先级相当的高,比加减乘除神马的都高,所以虽然是操作符,在在复杂表达式的时候我们还是习惯加括号,看个例子

代码语言:javascript
复制
 typeof 2*3;//NaN
 typeof (2*3);//"number"
 typeof 2+3;// "number3"

2、 ++、--是右结合的操作符(优先级最高的几个都是右结合),而且比加减乘除优先级高。同时自增、自减运算符的运算数得是左值(可以放在赋值符号左边的值),而不能是常数

代码语言:javascript
复制
 var a=0,b=0;
 a+++b;//0
 a;//1,a++优先级比++b高,所以相当于(a++)+b
 b;//0

3、赋值运算符的优先级相当的低

代码语言:javascript
复制
 a = b == c; //等同于a = (b==c)

4、逻辑非!也在优先级队列的前端,比加减乘除高,但逻辑与、逻辑或优先级很低,不如加减乘除

代码语言:javascript
复制
 !2*0; //0, 等价于(!2)*0
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-11-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、运算符概述
    • 1、定义
      • 2、运算符类别
      • 二、算数运算符
        • 1、加法运算符(Addition):x + y
          • 2、其他算术运算符
          • 三、赋值运算符
          • 四、比较运算符
          • 五、布尔运算符
            • 1、! 取反运算符
              • 2、&& 且运算符
                • 3、|| 或运算符
                  • 4、condition? true case : false case 三元条件运算符
                  • 六、位运算符
                  • 七、其他运算符
                    • 1、()小括号
                      • 2、逗号运算符
                        • 八、运算符的优先级
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档