什么是JavaScript

简介: 【8月更文挑战第20天】

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,三元运算符

三元运算符(即该运算符需要三个运算子)?:,也可以用于逻辑判断

相关文章
|
前端开发 JavaScript
70.【JavaScript 6.0】(六)
70.【JavaScript 6.0】
56 1
|
1月前
|
前端开发 JavaScript API
JavaScript
JavaScript
9 2
|
2月前
|
Web App开发 JavaScript 前端开发
javascript主要特点有哪些,简单描述javascript的特点
javascript主要特点有哪些,简单描述javascript的特点
61 0
|
4月前
|
存储 JSON JavaScript
探索JavaScript中的深度复制
【8月更文挑战第20天】
35 7
|
6月前
|
JavaScript 前端开发 算法
JavaScript 解密技巧大分享
JavaScript 解密技巧大分享
49 2
|
移动开发 JavaScript 前端开发
JavaScript1
JavaScript1
57 0
|
7月前
|
JavaScript 前端开发
JavaScript-T1
JavaScript-T1
50 0
|
7月前
|
JavaScript 前端开发
JavaScript 中的提升是什么
JavaScript 中的提升是什么
35 0
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
59 0
|
JavaScript 前端开发 UED
Javascript
Javascript

相关实验场景

更多