JavaScript基础入门02

目录

1.变量的使用

1.1基本用法

1.2理解 动态类型

2.基本数据类型

2.1number 数字类型

2.2数字进制表示

2.3特殊的数字值

2.4string 字符串类型

2.4.1基本规则

2.4.2转义字符

2.4.3求长度

2.4.4字符串拼接

2.5boolean 布尔类型

2.6undefined 未定义数据类型

2.7null 空值类型

3.运算符

3.1算术运算符

3.2赋值运算符 & 复合赋值运算符

3.3自增自减运算符

3.4比较运算符

3.5逻辑运算符

3.6移位运算

---

1.变量的使用

1.1基本用法

创建变量(变量定义/变量声明/变量初始化)

var name = 'zhangsan';
var age = 20;

var 是 JS 中的关键字, 表示这是一个变量.
= 在 JS 中表示 "赋值", 相当于把数据放到内存的盒子中. = 两侧建议有一个空格
每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.
注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.
初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来.
初始化的值如果是数字, 那么直接赋值即可.

使用变量

console.log(age); // 读取变量内容
age = 30;     // 修改变量内容

为啥动漫中的角色都是要先喊出技能名字再真正释放技能?
就是因为变量要先声明才能使用.

代码示例: 弹框提示用户输入信息, 再弹框显示.

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name);
alert("您的年龄是: " + age);
alert("您的分数是: " + score);

也可以把三个输出内容合并成一次弹框

var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " +
score + "\n");

+ 表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串.
\n 表示换行
JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似. 用法上的差异此处暂时不讨论.

1.2理解 动态类型

1) JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)

var a = 10;   // 数字
var b = "hehe"; // 字符串

2) 随着程序运行, 变量的类型可能会发生改变.

var a = 10;   // 数字
a = "hehe";   // 字符串

这一点和 C Java 这种静态类型语言差异较大.
C, C++, Java, Go 等语言是静态类型语言. 一个变量在创建的时候类型就确定了, 不能在运行时发生
改变.
如果尝试改变, 就会直接编译报错.

2.基本数据类型

JS 中内置的几种类型
number: 数字. 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值.

2.1number 数字类型

JS 中不区分整数和浮点数, 统一都使用 "数字类型" 来表示

2.2数字进制表示

计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字.

var a = 07;    // 八进制整数, 以 0 开头
var b = 0xa;   // 十六进制整数, 以 0x 开头
var c = 0b10;   // 二进制整数, 以 0b 开头

注意:
一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)
各种进制之间的转换, 不需要手工计算, 直接使用计算器即可.

2.3特殊的数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字.

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

注意:
1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
2. 'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接.
3. 可以使用 isNaN 函数判定是不是一个非数字.

console.log(isNaN(10));  // false
console.log(isNaN('hehe' - 10));  // true

2.4string 字符串类型

2.4.1基本规则

字符串字面值需要使用引号引起来, 单引号双引号均可

var a = "haha";
var b = 'hehe';
var c = hehe;   // 运行出错

如果字符串中本来已经包含引号咋办?

var msg = "My name is "zhangsan"";   // 出错
var msg = "My name is \"zhangsan\"";  // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
var msg = "My name is 'zhangsan'";   // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"';   // 正确, 搭配使用单双引号

2.4.2转义字符

有些字符不方便直接输入, 于是要通过一些特殊方式来表示.
\n
\\
\'
\"
\t

2.4.3求长度

使用 String 的 length 属性即可

var a = 'hehe';
console.log(a.length);
var b = '哈哈';
console.log(b.length);

2.4.4字符串拼接

使用 + 进行拼接

var a = "my name is ";
var b = "zhangsan";
console.log(a + b);

注意, 数字和字符串也可以进行拼接

var c = "my score is ";
var d = 100;
console.log(c + d);

注意, 要认准相加的变量到底是字符串还是数字

console.log(100 + 100);   // 200
console.log('100' + 100);  // 100100

2.5boolean 布尔类型

表示 "真" 和 "假"
        boolean 原本是数学中的概念 (布尔代数).
        在计算机中 boolean 意义重大, 往往要搭配条件/循环完成逻辑判断.
Boolean 参与运算时当做 1 和 0 来看待.

console.log(true + 1);
console.log(false + 1)

这样的操作其实是不科学的. 实际开发中不应该这么写.

2.6undefined 未定义数据类型

如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型

var a;
console.log(a)

undefined 和字符串进行相加, 结果进行字符串拼接

console.log(a + "10");  // undefined10

undefined 和数字进行相加, 结果为 NaN

console.log(a + 10);

2.7null 空值类型

null 表示当前的变量是一个 "空值".

var b = null;
console.log(b + 10);   // 10
console.log(b + "10");  // null10

注意:
null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义. (相当于连盒子都没有)

3.运算符

3.1算术运算符

+
-
*
/
%

3.2赋值运算符 & 复合赋值运算符

=
+=
-=
*=
/=
%=

3.3自增自减运算符

++: 自增1
--: 自减1

3.4比较运算符

<
>
<=
>=
== 比较相等(会进行隐式类型转换)
!=
=== 比较相等(不会进行隐式类型转换)
!==

3.5逻辑运算符

用于计算多个 boolean 表达式的值.
&& 与: 一假则假
|| 或: 一真则真
! 非
位运算
& 按位与
| 按位或
~ 按位取反
^ 按位异或

3.6移位运算

<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)