[学习交流] 【上海校区】JavaScript变量，数据类型，运算符

一.直接量和变量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
1.直接量：字面量
数值  ：1,2,3,4,5,1.1，1.11,1.356，-1，-2，-3
字符串：由单双引号包裹起来的内容 'hello world'  "hello world"

其他：布尔 true/false  null

直接量
alert(111);
alert(1.19);
alert(-5);

   alert('hello world');
alert('3.14');字符串
alert(3.14);数值

alert(true);
alert(false);

</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>变量</title>
<script type="text/javascript">

1.变量：变化的量
2.定义变量：变量需要先定义在使用
var 变量名;

变量名的命名规则：
1)变量名必须以字母、下划线、$开头
2)变量名可以包含数字、字母、下划线、$
3)变量名区分大小写
4)不能使用关键字和保留字
3.变量的赋值(变量的初始化)：
变量名=值;
4.读取变量中的数据(变量的取值)
变量名
5.若变量只定义，未赋值 undefined
6.定义变量的本质：在内存中开辟空间并且命名(变量名),将数据存入此空间(变量名所代表的空间)
7.变量的赋值是一种值的传递（变量是独立的空间）

变量的定义
var a;定义一个变量，并且命名为a
a=10;赋值变量的初始化
变量的取值
console.log(a);在控制台中输出日志
1.先定义一个变量，再初始化
var a;定义一个变量
变量初始化
a=20;
   取出变量的值
     console.log(a);

     2.var a=10,b=30,c=10;定义变量的同时即初始化
     console.log(a);
     console.log(b);
     console.log(c);

     3.多变量定义
      var a,b,c;

     a=10;
     b=20;
     c=30;

变量不可以重复定义
var a=20;在内存中开辟空间命名为a，并且将20存入a这块空间中

var a=30;

console.log(a);
</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">

JS是一门弱类型语言,在变量定义的时候，不需要指定数据类型

var a='hello world';
var b=123;
console.log(a);
console.log(b);
var a=20;
console.log(a);

a=30;变量的重复赋值（覆盖）

console.log(a);

a='hello world';

console.log(a);

      var a=10;

   var b=a;变量的赋值仅仅是一种值的传递

   console.log(a);
   console.log(b);

   a=30;
   b=20;
   console.log(a);30
   console.log(b);10 20
</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
二.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">

数据类型：
（1）基本数据类型(原始数据类型)
数值类型(number) 数字  1,2,3,10,1.1，2.1,1.222，-10
字符串类型(string)       由""  ''       字符串内容会原样输出
布尔类型(boolean)          false(假) true(真)
undefined       变量定义但未初始化
null                      空                引用类型
（2）引用类型
Object  Array(数组)  Date(日期)  Function (函数)  RegExp(正则)

检测变量数据类型
typeof 变量名;

注意：typeof表达式本身的结果是一个字符串类型
"string"  "number"  "boolean" "undefined"  "null"

      var a=10;

console.log(a);
console.log(typeof a);number

var a='hello';
a='10';
a='3.14';
a="10+20";
      console.log(a);
console.log(typeof a);string

   var isBoy=false;

   console.log(isBoy,typeof isBoy);

   var a=10;
      console.log(typeof a);
   var b=typeof a;将a的数据类型保存在变量b中
   console.log(b);"number"
   console.log(typeof b);先运算在输出

console.log(typeof typeof a);string

变量的数据类型取决变量里保存的数据
var a=10;number
var b=20;

console.log(typeof a,typeof b);

a=true;boolean
console.log(typeof a);

a='hello';string
console.log(typeof a);
</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
三.运算符

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
运算符：
运算符根据操作数的个数可以分为：一元(一目)运算符、二元运算符、三元运算符
根据运算符的作用：
（1）算术运算符：
   + - *  /  %(取余)

   一元运算符：
   自增:++
   自减:--

   注意：未赋值时，前置和后置  无区别
     赋值时：
     1.后置：先赋值，后运算
     2.前置：先运算，后赋值

   注意：+ 两边有一个为字符串类型时，则执行拼接操作,结果为字符串类型
（2）赋值运算符
= (赋值) +=  -=  *=  /=  %= 先运算，再赋值

(3)比较运算符
运算结果为boolean类型
>= <=  >  < ==(等于) !=(不等于) ===（全等）

注意：
== 只比较数值
===  不仅比较数值，还比较数据类型
(4)逻辑运算符
一般情况下，运算结果为布尔类型
&&(逻辑与) : 并且
若运算符两边均为真(true),则结果为真(true),其它均为假
||(逻辑或) : 或者
运算符两边有一个为真，则为真；两边均为假，则为假

!(逻辑非)  : 取反             一元

（5）条件运算符    三元运算符
?:

var a=10;
var b=20;
console.log(a+b);先运算、再输出

十进制、二进制、八进制、十六进制
JavaScript小数运算有问题：精度损失
console.log(0.2*0.2);0.04000000000000001

var a=0.2*0.2;
var b=a.toFixed(2);保留小数点后两位数
console.log(b);

科学计数法
var a1=0.000005;
var a11=5e-6;
var a2=300000000;
var a3=3e8;
console.log(a1);
console.log(a11);
console.log(a2);
console.log(a3);
</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
      先赋值，后运算
      var a=10;
   var b=a++;
   var b=a--;

console.log(a);
console.log(b);

1. var a=5;
var b=3;
      var c=a+b+(a++);5+3+5
console.log(a,b,c);

2. var a1=a++;
var c=(a++)+(a+b)+(b--);5+9+3
console.log(a,b,c);

3. var a=2;
var b=4;
var a1=a++;2
var b1=b--;4
var b2=b++;3
var c=(a++)+(b--)+(a+b)+(b++);2+4+6+3
console.log(a,b,c);a=3  b=4  c=15

      先运算，后赋值
   var a=5;
   var c=++a;
   var b=--a;
   console.log(c);6
   console.log(b);5

1. var a=3;
var b=5;
var c=(++a)+a+b;4+4+5
      console.log(a,b,c);

2. var a=3;
a+=2; a=a+2
a-=2; a=a-2
a*=2;

console.log(a+=2);5
console.log(a*=2);10
console.log(a/=2);5
console.log(a%2);1

   console.log(a);

</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var a=3;
var b=5;
      同时成立则为true，有一项不成立则为false
1.    var c=a>b&&a<b;false
   var c1=a<b&&a<=b;true
   var c2=a<b&&a>b;false
   var c3=a>b&&a>=b;false

      其中满足一项则为true
2. var c=a>b||a<b;true
var c1=a<b||a<=b;true
var c2=a<b||a>b;true
var c3=a>b||a>=b;false

console.log(c,c1,c3);

      式子c成立取第一项反之取第二项。
3. var a=10;
var b=5;

var c=a>b?100:50;

console.log(c);

</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
四.运算符扩展

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
1.算术运算符

数值类型
var a=10;
var b=5;
console.log(a+b);

字符串
var a='hello';
var b=' 哈哈';
console.log(a+b);字符串拼接

布尔类型
var a=true;
var b=false;

不同类型之间进行算术运算

   var a=10;
   var b='hello';
   var c='5';
   var d=true;
   var d1=false;

   console.log(a+b);拼接操作
   console.log(a+c);拼接
数字型字符串与数值按照数值进行运算
   console.log(a-c);按照数值运算
   console.log(a*c);
   console.log(a/c);

布尔类型在参与数学运算时，true  1 false  0
   console.log(a+d);11
   console.log(a+d1);10

   console.log(b+d);拼接操作
   console.log(c+d);拼接
   console.log(c-d);

2.比较运算符扩展

数值类型
   console.log(3>5);
   console.log(3==5);

字符串类型
   console.log('19'>'5');false 比较首位
   console.log(3==3);
   console.log('hello '=='hello');

var a=5;
      var a1='hello';
var b='10';
var c='5';

console.log(a>b);按照数值比较
console.log(a==c);数值
console.log(a===c);数值和类型

3.逻辑运算符

若逻辑运算符两边有操作数不为布尔类型，则运算结果不一定为布尔类型
布尔类型扩展：0，'',undefined ,null均为假，其他都为真

逻辑或：
1.若第一个操作数为真，则第二个操作数不执行（结果为第一个操作数）
2.若第一个操作数为假，则结果为第二个操作数
逻辑与：
1.若第一个操作数为假，则第二个操作数不执行
2.若第一个操作数为真，则结果为第二个操作数

1.    console.log(true||false);
   var a=5;
   var b=4;

   var c=a>=b||(a++)>b;
   var c=a<=b||5;
   var c=1||2;
   var c=0||5;

   console.log(c);
   console.log(a,b,c);

2. var a=5;
var b=4;

   var c=a>=b&&(a--)>b;
   var c1=a<=b&&(a--)>b;

console.log(a,b,c);
console.log(a,c1);

console.log(a&&b);

</script>
</body>
</html>
---------------------
【转载，仅作分享，侵删】
作者：超哥要逆天
原文：https://blog.csdn.net/weixin_44382073/article/details/86029693

不二晨 · 不二晨

奈斯

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【上海校区】JavaScript变量，数据类型，运算符

1 个回复