第十二节：JavaScript 基础语法
3.2.1 变量
标识符
实际开发中，经常要自定义一些符号来标记一些名称，这些符号都被称为标识符
- 由大小写字母、数字、下划线 和 美元符号($) 组成，如：str、arr3、$3
- 不能以数字开头，如：34da 是非法标识符
- 严格区分大小写，如：it 和 IT 表示两个不同的标识符
- 不能使用 JavaScript 中的关键字命名，如：var 作为变量名是不合法的
- 要尽量做到 “见起名知其意”，如 name 表示名字
注意：当标识符需要多个单词进行表示时，可以使用以下几种方法
- 下划线法（user_name）：通常应用于变量的命名
- 驼峰法（userName）：通常用于函数的命名
- 帕斯卡法（UserName）
保留关键字
JavaScript 保留字
| break | do | instanceof | typeof |
|---|---|---|---|
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger* | function | this | with |
| default | if | throw | delete |
| in | try | let* | yield* |
JavaScript 关键字
| abstract | enum | int | short |
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implenments | protected | volatile |
| double | import | public |
变量的使用
变量可以看做是存储数据的容器，变量的声明规则和标识符一样
// 变量声明
var a = 10;
// 变量可以一次声明多个
var lastname="Doe", age=30, job="carpenter";
常量的定义
JavaScript 在ES6 中新增了 const 关键字，用于实现常量的定义，习惯上常量名称总是使用大写字母表示
常量一旦被赋值就不能改变，并且常量在声明时，必须为其指定某个值
const PI = 3.14;
const P = 2 * PI * r;
3.2.2 数据类型
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
原始数据类型(基本类型)
- 字符串 String
字符串是存储字符的变量，可以使用单引号或双引号
var = "Hello";
字符串和数字拼接，数据类型仍为字符串
alert("hello" + 220); // hello220
字符串和数字拼接，先计算括号内的结果，再进行拼接
alert("hello" + (220 + 120); // hello340
-
数值型 Number
JavaScript 中的数值类型不区分整数和浮点数，所有数字都是数值型
var oct = 032; // 八进制数表示的26 var dec = 26; // 十进制数表示的26 var hex = 0x1a; // 十六进制数表示的26 var fnum1 = 3.14E3; // 科学计数法格式 3.14*10³非数值 NaN
JavaScript 中的 NaN 是一个全局对象的属性，与数值型中的特殊值 NaN 一样，都表示非数字，可用于表示某个数据是否属于数值型
当 NaN 和 NaN 进行比较时，结果不一定是 true，这是因为 被操作的数据类型可能是布尔值、字符型、空值、未定义型 和 对象型中的任意一种类型
-
布尔型 Boolean
布尔型是 JavaScript 中较常用的数据类型之一，通常用于逻辑判断，它只有 true 和 false 两个值，表示事物的 真 和 假
var flag1 = true; var flag2 = false; // 注意：JavaScript 中严格遵循大小写，因此，true 和 false 值只有全部为小写时才表示布尔型转义符
转义符 说明 \’ 单引号 \" 双引号 \n 回车换行 \r 换行 \v 跳格（Tab、水平） \t Tab符号 \f 换页 \\ 反斜杠(\) \b 退格 \0 Null字节 -
空值 Null
只有一个特殊的 null 值，用于表示一个不存在的或无效的对象或地址，只有变量的值是小写的 null 时才会表示空值
-
未定义型 Undefined
未定义型 也只有一个特殊的 undefined 值，用于声明的变量还未被初始化时，变量的默认值为 undefined
与 null 不同的是，unfinished 表示没有为变量设置值，而 null 则表示变量不存在或者无效
注意：null 和 undefined 与 空字符串 和 0 都不相等
引用数据类型
引用数据类型为 Object对象，后面详细介绍
Object 对象分为用户自定义的对象 和 JavaScript 提供的内置对象
数据类型检测
JavaScript 中变量的数据类型不是开发人员设定的，而是根据该变量使用的上下文在运行时决定的
var num1 = 12, num2 = "14", sum = 0;
sum = num1 + num2; // 变量进行相加运算
console.log(sum); // 输出结果为：1214
-
typeof 操作符
typeof 操作符 以字符串的形式，返回未经计算的操作数的类型
var num1 = 12, num2= "14"; var sum = num1 + num2; console,log(typeof num1); // number console.log(typeof.num2); // string console.logo(typeof.sum); // string -
对象原型的扩展函数
JavaScript 中一切皆为对象，因此可以利用对象原型的扩展函数，Object.peototype.toString.call() 更精确的区分数据类型
var data = null; // 待判断的数据 var type = 'Null'; // 数据类型，开始字母要大写，如：Boolean、String、Undefined 等 // 检测数类型的表达式，若是指定的 type 类型，则返回 true，否则返回 false Object.peototype.toString.call(data) == '[Object ' + type + ']';
数据类型转换
-
转布尔型
数据转布尔型在实际开发中是最常见的一种类型转换，经常用于表达式和流程控制语句，如数据的比较、条件的判断
- 通过 Boolean() 函数可以对用户输入的内容进行布尔类型转换
- 当用户单击取消按钮 或 未输入任何字符 就单击“确定”按钮时，会被转为 false
- 当有内容输入时就转为 true
- Boolean() 函数会将任何非空字符串和非零的数值转换为 true，将空字符串、0、NaN、undefined 和 null 转换为 false
var con = prompt(); // 保存用户的输出内容 if (Boolean(con)) { document.write('已输入的内容'); } else { document.write('无输入内容'); } console.log(Boolean(con)); // 用户单击“取消”按钮，则结果为 false console.log(Boolean(con)); // 用户未输入，单击“确定”按钮，则结果为 false console.log(Boolean(con)); // 用户输入"哈哈"，单击“确定”按钮，则结果为 true - 通过 Boolean() 函数可以对用户输入的内容进行布尔类型转换
-
转数值型
实际开发中，为了保证参数都是数值类型，要利用 JavaScript 提供的 Number()函数、parseInt()函数、parseFloat()函数 进行数据转换
这三个函数在转换纯数字时会忽略前导零
- “0123” 会被转换成 123
parseFloat() 函数会将数据转换为浮点数
parseInt() 函数会直接忽略小数部分，返回数据的整数部分，并可通过第二个参数设置转换的进制数
待转数据 Number() parseInt() parseFloat() 纯数字字符串 转换成对应的数字 转换成对应的数字 转换成对应的数字 空字符串 0 NaN NaN 数字开头的字符串 NaN 转成开头的数字 转成开头的数字 非数字开头的字符串 NaN NaN NaN null 0 NaN NaN undefined NaN NaN NaN false 0 NaN NaN true 1 NaN NaN var num1 = prompt(); // 假设输入为：123abc var num2 = prompt(); // 假设输入为：456 console.log(parseInt(num1) + parseInt(num2)); // 此时 num1=123，num2=456，结果为：579设置转换的进制数 console.log(parseInt('A',16)); // 用16进制转换 F，结果为：10判断类型 isNaN
实际开发中，为了数据更严谨，使用 isNaN
var num1 = prompt("输入第一个数据"); // 假设数据为：abc var num2 = prompt("输入第二个数据"); // 假设数据为：123 var num1 = parseInt(num1), num2 = parseInt(num2); // 转数值型 if (isNaN(num1) || isNaN(num2)) { // 判断是否为 NaN console.log("非法数字"); } else { console.log(num1 + num2); } -
转字符型
实际开发中，可以利用 JavaScript 中的 String() 函数 和 toString() 函数将数据转换成字符串
- String() ：可以将任意类型转换成字符型
- toString()：除了 null 和 undefined ，没有 toString() 外，其他数据都可以完成字符的转换
var num1 = num2 = num3 = 4, num4 = 26;
console.log(num1 + num2 + num3.toString()); // 4 + 4 +"4" = "84"
console.log(num4.toString(2)); // 将 num4 转换成二进制数，再转为字符："11010"
3.2.3 表达式
算数运算符
| 运算符 | 说明 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 取余 |
| ** | 幂运算（ES7新特性） |
| ++ | 自增 |
| – | 自减 |
-
取余
取余操作，俗称：模
作用：取两个数字的余数
var i = 10 % 3; // 值为 1使用场合：
- 判断数字的奇偶性
- 获取数字的最后几位
-
自增自减
++ : 自增，在数值的基础上，进行 +1 操作
–：自减，在数值的基础上，进行 -1 操作
自增自减分为先加后加
- 先加为：自身先加，再进行运算
- 后加为：先运算，再自加（只影响自身结果，不影响运算结果）
// 定义变量 var a = 1, b = 0; b = ++a; // a=2,b=2 b = a++; // a=2,b=1; 自减同上
赋值运算符（待学习）
| 运算符 | 说明 | 实例 | 结果 |
|---|---|---|---|
| = | 赋值 | a=3,b=2; | |
| += | 加并赋值 | a+=b; | a=a+b; |
| -= | 减并赋值 | a-=b; | a=a-b; |
| *= | 乘并赋值 | a*=b; | a=a*b; |
| /= | 除并赋值 | a/=b; | a=a/b; |
| %= | 模并赋值 | a%=b; | a=a%b; |
| += | 连接并赋值 | ||
| **= | 幂运算并赋值 | ||
| <<= | 左移位赋值 | ||
| >>= | 右位移赋值 | ||
| >>>= | 无符号右位移赋值 | ||
| &= | 按位与赋值 | ||
| ^= | 按位异或赋值 | ||
| |= | 按位或赋值 |
比较运算符
| 运算符 | 说明 |
|---|---|
| == | 等于（只比较数据，不比较类型） |
| != | 不等于（只比较数据，不比较类型） |
| === | 全等（不仅比较数据，还要比较类型） |
| !== | 不全等（不仅比较数据，还要比较类型） |
| > | 大于 |
| >= | 大于等于 |
| < | 小于 |
| <= | 小于等于 |
判断数据是否为数字
isNaN()会抛开数据类型来判断数据是否为数字
console.log(isNaN(20)); // true
逻辑运算符
| 逻辑运算符 | 说明 |
|---|---|
| 逻辑与 | && |
| 逻辑或 | || |
| 逻辑非 | ! |
-
逻辑与 &&
关联两个条件，两个条件都为真的时候，那么整个表达式的结果才为真
var score = 85; var result = score>=60 && score<=80; // false -
逻辑或 ||
关联两个条件，两个条件中，只要有一个为真，那么整个表达式的结果就为真 问题：笔试题和面试题,笔试题或面试题的分数，有一个超过60就认为是合格
var score = 85; var result = score>=60 || score<=80; // true -
逻辑非 !
对条件取反（非真即假 非假即真） 语法：!条件
注意：逻辑非，只有一个操作数
true == !false; -
短路逻辑
短路 &&
如果第一个条件的结果已经为 false 的话，那么就不会再判断第二个 条件,那么整个表达式的值，就是 false 如果第一个条件的结果是true的话，则继续判断(执行)第二个条件 (表达式)，并且以第二个表达式的值，作为整个 表达式的值
短路 ||
如果第一个条件的结果已经为 true的话，那么就不会再判断第二个 条件，那么整个表达式的值，就是true 如果第一个条件的结果是false的话，则继续判断(执行)第二个条件 (表达式),并且以第二个表达式的值，作为整个表达式的值
三元运算符
三元运算符也叫三目运算符：运算符需要三个操作
运算过程：先判断条件表达式的值，如果为 true，则返回表达式1，如果为 false，则返回表达式2
语法：条件表达式 ? 表达式1 : 表达式2;
var msg = age>18 ? “成年人” : “未成年人”;
位运算符
JavaScript 中将参与位运算符的操作视为 由二进制（0和1）组成的 32 位的串
| 运算符 | 说明 | 实例 | 解释 |
|---|---|---|---|
| & | 按位与 | a & b | a 和 b 每一位进行 “与“ 操作后的结果 |
| | | 按位或 | a | b | a 和 b 每一位进行 ”或“ 操作后的结果 |
| ~ | 按位非 | ~ a | a 的每一位进行 ”非” 操作后的结果 |
| ^ | 按位异或 | a ^ b | a 和 b 每一位进行 “异或” 后的结果 |
| << | 左移 | a << b | 将 a 左移 b 位，右边用 0 填充 |
| >> | 右移 | a >> b | 将 a 右移 b 位，丢弃被移出位，左边最高位用 0 或 1 填充 |
| >>> | 无符号右移 | a >>> b | 将 a 右移 b 位，丢弃被移出位，左边最高位用 0 填充 |
-
“&” 是将参与运算的两个二进制数进行 “与” 运算，如果两个二进制位都是 1，则该位的运算结果为 1，否则为 0
// 实例：15 & 9 15 = 1111, 9 = 1001; 00000000 00000000 00000000 00001111 00000000 00000000 00000000 00001001 ——————————————————————————————————— 00000000 00000000 00000000 00001001 结果为 1001，换算成 10进制为：9 -
“|” 是将参与运算 的两个进制数进行 “或” 运算，如果两个二进制位上有一个是1，则该位的运算结果为1，否则为0
// 实例：15 | 9 15 = 1111, 9 = 1001; 00000000 00000000 00000000 00001111 00000000 00000000 00000000 00001001 ——————————————————————————————————— 00000000 00000000 00000000 00001111 结果为 1111，换算成 10进制为：15 -
"~" 只对一个操作数进行操作，如果二进制位是 0，则取反值为1，如果二进制位是1，则取反值为0
// 实例：15 15 = 1111; 00000000 00000000 00000000 00001111 ——————————————————————————————————— 11111111 11111111 11111111 11110000 // 运算结果的最高位为 1，表示负数，则末位减1取反 00000000 00000000 00000000 00010000 结果换算成 10进制为：-16 -
"^" 将参与运算的两个二进制数进行 “异或” 运算，如果二进制位相同，则值为 0，否则为 1
// 实例：15 15 = 1111; 00000000 00000000 00000000 00001111 00000000 00000000 00000000 00001001 ——————————————————————————————————— 00000000 00000000 00000000 00000110 结果换算成 10进制为：6 -
“<<” 将操作数所有二进制位向左移动指定位数。运算时，右边的空位补0，左边移走的部分舍去
// 实例：9 15 = 1001; 00000000 00000000 00000000 00001001 << 2 ——————————————————————————————————— 000000 00000000 00000000 0000100100 结果为 100100，换算成 10进制为：36 -
">>" 将操作数所有二进制数向右移动指定位数。运算时，左边的空位根据原数的符号位补 0 或 1（原来是负数就补 1，是正数就补 0）
// 实例：9 15 = 1001; 00000000 00000000 00000000 00001001 >> 2 ——————————————————————————————————— 0000000000 00000000 00000000 000010 结果为 10，换算成 10进制为：2 -
">>>" 将操作数所有二进制向右移动指定位数。运算时，左边的空位补 0，（不考虑原数正负）
00000000 00000000 00000000 00010011 >> 2 ——————————————————————————————————— 0000000000 00000000 00000000 000100 结果为 100，换算成 10进制为：4
3.2.4 流程控制
选择结构
选择语句也叫判断语句，当满足某个条件时，就进行某种处理，否则进行另一种处理，也可针对不同的情况进行不同的处理
-
if…else if…else 语句
在 JavaScript 中, 非"",非0, 非null, 如果当做判断条件的时候, 会看做 true ,其他的是 false
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tPldCVeu-1610438290537)(assets/image-20201002170719064.png)]
语法格式: if (判断条件) { 满足此条件时执行的代码段 } else if (判断条件) { 满足此条件时执行的代码段 } else if (判断条件) { 满足此条件时执行的代码段 } else { 不满足以上所有条件时，执行的代码段 }// 判断学生成绩，划分等级 if (score >= 0 && score <= 100) { if (score >= 90) { console.log("优秀"); } else if (score >= 80 && score < 90) { console.log("良好"); } else if (score >= 60 && socre <80) { console.log("及格"); } else { console.log("不及格"); } } -
switch case 语句
switch 语句也是多分支语句，功能与 if 系列条件语句相同，不同的是他只能针对某个表达式的值做出判断，从而决定执行哪一段代码，该选择结构语句的特点就是代码更加清晰简洁、便于阅读
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnYSmzbh-1610438290539)(assets/image-20201002171823030.png)]
语法格式: switch (表达式) { case 值 1: 代码段 1; break; case 值 2: 代码段 2; break; default: 代码段 n; }// 判断学生成绩，划分等级 switch (parseInt(score/10)) { case 10: console.log('满分'); break; case 9: console.log('优'); break; case 8: console.log('良'); break; case 6: console.log('及格'); break; default: console.log('差'); }跳转结构
常用的跳转语句有 break 和 continue语句
- break 可用在 switch 和 循环语句中，作用是 中止当前语句的执行，跳出 switch 选择结构或循环语句，执行后面的代码
- continue 用于结束本次循环的执行，开始下一轮循环的执行操作
outerloop: for (var i=0; i<10; ++i) { if (i == 3) { break outerloop; } console.log("i=" + i); } // 结果：0, 1, 2 outerloop: for (var i=0; i<10; ++i) { if (i == 3) { continue outerloop; } console.log("i=" + i); } // 结果：0, 1, 2, 4, 5, 6, 7, 8, 9
循环结构
循环语句可以数显一段代码的重复执行，如连续输出 1~100 的数字
-
while 循环
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rgZ5f5xT-1610438290543)(assets/image-20201002175502802.png)]
语法格式： while(循环条件) { 循环体 ... }while(true) { console.log("这是一个死循环"); } // 当 while 的循环条件为 true 时，该循环为死循环，无限循环 -
do…while 循环
do…while 循环语句的功能与while循环语句类似，唯一的区别在于，while 是先判断条件后 再执行循环体，而 do…while 会无条件执行一次循环体后再判断条件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKNTHiCt-1610438290544)(assets/image-20201002175531921.png)]
语法格式: do { 循环体 ... } while (循环条件);var num = 5; do { console.log(num); num--; } while (num > 3); // 结果输出为 5 4 -
for 循环
for循环语句是最常用的循环语句，它适合循环次数已知的情况
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p0SOCIWE-1610438290546)(assets/image-20201002175720525.png)]
for 关键字后面小括号中包含了3部分内容，分别为初始化表达式、循环条件 和 操作表达式，它们之间用 “;” 隔开，{}中的执行语句为循环体
语法格式: for (初始化表达式; 循环条件; 操作表达式) { 循环体 ... }for (var i=i; i<100; i++) { console.log(i); // 循环体 }
let 关键字
let 不存在预解析，var 存在预解析
consol.log(age); // undefined
var age = 18;
console.log(num); // 报错
let num = 10;
let 是局部变量
// var
for(var i=0; i<10; i++) {}
console.log(i); // 10
// let
for(let i=0; i<10; i++) {}
console.log(i); // 报错
let 有块级作用域
// var
for(var i=0; i<10; i++) {
arr[i] = function() {
console.log(i);
}
}
console.log(arr);
// 执行 arr[0]
arr[0](); // 10
arr[1](); // 10
// let
for(let i=0; i<10; i++) {
arr[i] = function() {
console.log(i);
}
}
console.log(arr);
// 执行 arr[0]
arr[0](); // 0
arr[1](); // 1
…
}
~~~JavaScript
for (var i=i; i<100; i++) {
console.log(i); // 循环体
}
let 关键字
let 不存在预解析，var 存在预解析
consol.log(age); // undefined
var age = 18;
console.log(num); // 报错
let num = 10;
let 是局部变量
// var
for(var i=0; i<10; i++) {}
console.log(i); // 10
// let
for(let i=0; i<10; i++) {}
console.log(i); // 报错
let 有块级作用域
// var
for(var i=0; i<10; i++) {
arr[i] = function() {
console.log(i);
}
}
console.log(arr);
// 执行 arr[0]
arr[0](); // 10
arr[1](); // 10
// let
for(let i=0; i<10; i++) {
arr[i] = function() {
console.log(i);
}
}
console.log(arr);
// 执行 arr[0]
arr[0](); // 0
arr[1](); // 1
扫一扫
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
