2.3 JavaScript
2.3.1 什么是JavaScript
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”,指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序的"脚本".
JavaScript 是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多
为什么学习 JavaScript
操控浏览器的能力
广泛的使用领域
易学性
JavaScript版本
es6后面单独拉出来讲解
2.3.2 基本语法
1,语句和标识符
JavaScript程序的单位是行(line),也就是一行一行地执行。一般情况下,每一行就是一个语句
var num = 10;
语句以分号结尾,一个分号就表示一个语句结束
标识符
标识符指的是用来识别各种值的合法名称。最常见的标识符就是变量名
标识符是由:字母,美元符号($),下划线(_)和数字组成,其中数字不能开头
温馨提示
中文是合法的标识符,可以用作变量名(不推荐)
JavaScript保留关键字
以下关键字不需要强行记忆
2,变量
var num = 10;
变量的重新赋值
var num = 10;
num = 20;
变量提升
JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这叫做变量提升
console.log(num);
var num = 10;
运行结果
3,输出
JavaScript有很多种输出方式,都可以让我们更直观的看到程序运行的结果
var num = 20;
console.log(num);
alert("我是弹出框")
document.write("要输入的内容")
4,数据类型
原始类型(基础类型)
数值,字符串,布尔值
// 数值|数字 类型
var age = 20;
// 字符串类型
var name = '张三';
// 布尔类型: 0:false 1:true
var isOk = true;
var isOk2 = true;
合成类型(复合类型)
对象:因为一个对象往往是多个原始类型的值的合成,可以看作是一个存放各种值的容器
var user = {
name: '老八',
age: 20,
sex: '男'
}
温馨提示
至于undefined和null,一般将它们看成两个特殊值。
null和undefined的区别
关键区别
null 表示有意旨意的对象值缺失,而 undefined 表示未意旨意的对象值缺失。
null 通常用来表示变量或属性没有值,而 undefined 用来表示变量或属性没有被声明或初始化。
5,运算符
typeof
判断数据类型(判断基本数据类型使用)
算术运算符
加减乘除运算符
加减乘除运算符就是基本的数学运算符效果
10 + 10; // 20
100 - 10; // 90
10 * 2; // 20
10 / 5; // 2
余数运算符
余数运算符是比较常用的,因为在逻辑思维上寻找规律,余数运算符是很好用的。
13 % 5 // 3
自增和自减运算符
自增和自减运算符,是一元运算符,只需要一个运算子。它们的作用是将运算子首先转为数值,然后加上1或者减去1
var x = 1;
var y = 1;
++x // 2
--y // 0
赋值运算符
JavaScript 中有多种赋值运算符,可以用来将值赋值给变量或属性。以下是其中一些最常用的赋值运算符:
最常见的赋值运算符,就是等号(=)
// 将 1 赋值给变量x
var x = 1;
// 将变量 y 的值赋值给变量 x
var x = y;
有点懒得写了,如果大家需要我补全的话,我会把这部分补全
比较运算符
比较运算符用于比较两个值的大小,然后返回一个布尔值,表示是否满足指定的条件。
2 > 1 // true
JavaScript 一共提供了8个比较运算符。
“==”和“===”的区别
== (松散等价)
== 运算符检查两个值是否相等,但不检查数据类型。这意味着它会执行类型转换,这可能会导致意外结果。
console.log(5 == '5'); // true
console.log(null == undefined); // true
=== (严格等价)
== 运算符检查两个值是否相等,但不检查数据类型。这意味着它会执行类型转换,这可能会导致意外结果。
console.log(5 === '5'); // false
console.log(null === undefined); // false
最佳实践
为了避免意外结果和确保代码更加健壮,建议使用 === 运算符进行大多数比较。这将帮助您捕捉类型相关的错误,并确保代码行为如预期。
然而,在某些情况下,您可能需要使用 == 运算符,例如在处理 legacy 代码或需要执行松散比较的特殊用例时。
布尔运算符
布尔运算符(Boolean Operators)是 JavaScript 中的一种运算符,它们用于将布尔值(true 或 false)结合起来以获取新的布尔值。
JavaScript 中有以下四种布尔运算符:
1,&&(逻辑与):返回两个布尔值的逻辑与结果。如果两个布尔值都是 true,返回 true;否则返回 false。
true && true // true
true && false // false
false && true // false
false && false // false
2,||(逻辑或):返回两个布尔值的逻辑或结果。如果两个布尔值至少有一个为 true,返回 true;否则返回 false。
true || true // true
true || false // true
false || true // true
false || false // false
3,!(逻辑非):返回一个布尔值的逻辑非结果。如果布尔值为 true,返回 false;否则返回 true。
true ! // false
false ! // true
4,??(空值合并):返回两个值中的第一个非 null 或 undefined 值。如果第一个值为 null 或 undefined,返回第二个值;否则返回第一个值。
null ?? 'default' // 'default'
undefined ?? 'default' // 'default'
'hello' ?? 'default' // 'hello'
6,条件语句
条件语句(Conditional Statements)是 JavaScript 中的一种语句,它用于根据一定的条件来执行不同的代码块。
if语句
if结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。所谓布尔值,指的是JavaScript的两个特殊值,true表示真,false表示伪。
if语句语法规范
if (布尔值){
语句;
}
需要注意的是,“布尔值”往往由一条件表达式产生的,必须放在圆括号中
var m = 3;
if (m === 3){
m++;
}
console.log(m); // 4
温馨提示
if后面的表达式之中,不要混淆赋值表达式(=),严格相等运算符(===)和相等运算符(==)。尤其是赋值运算符不具有比较作用
if...else
if...else基本结构
if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的代码。
var flag = false;
if (flag) {
alert("我是老八");
}else{
alert("我是鸡你太美")
}
此外,JavaScript还支持if...else if...else链,用于检查多个条件。例如:
if (条件1) {
// 当条件1为真时执行的代码块
} else if (条件2) {
// 当条件1为假且条件2为真时执行的代码块
} else {
// 当以上所有条件都为假时执行的代码块
}
在这个结构中,程序会从上到下依次检查每个条件,一旦某个条件满足(即计算结果为true),就执行对应的代码块,并跳过之后的所有条件检查。如果没有条件满足,则执行最后一个else后的代码块(如果有的话)。
switch
多个if...else连在一起使用的时候,可以转为使用更方便的switch结构
switch (表达式) {
case 值1:
// 当表达式的值等于值1时执行的代码
break;
case 值2:
// 当表达式的值等于值2时执行的代码
break;
...
default:
// 当没有任何case的值与表达式的值匹配时执行的代码(可选)
}
需要注意的是,每个case代码块内部的break语句不能少,否则会接下去执行下一个case代码块,而不是跳出switch结构。
var x = 1;
switch(x){
case 1:
console.log("x 等于 1");
case 2:
console.log("x 等于 2");
default:
console.log("x 等于 3");
break;
}
// x 等于 1
// x 等于 2
// x 等于 3
7,三元运算符
三元运算符(即该运算符需要三个运算子)?:,也可以用于逻辑判断