当前位置：首页 > backend >正文

前端学习（4）—— JavaScript(基础语法)

backend 2025/7/5 7:45:41

一，介绍

1.1 是什么

1.2 组成

1.3 书写形式

1.4 输入输出

二，变量的使用

2.1 基本用法

2.2 动态类型

三，基本数据类型

3.1 数字类型

3.2 字符串类型

3.3 布尔类型

3.4 未定义数据类型

3.5 空值类型

四，运算符

五，条件语句

5.1 基本语法

5.2 switch语句

六，循环语句

6.1 while

6.2 for

七，数组

7.1 创建数组

7.2 获取数组元素

7.3 新增元素

7.4 删除元素

八，函数

8.1 语法格式

8.2 函数表达式

8.3 作用域

九，对象

9.1 理解对象

9.2 创建对象

9.3 关于 new 关键字

9.4 JavaScript 对象和 C++/Java 对象的区别

一，介绍

1.1 是什么

JavaScript，简称JS：

是世界上最流行的编程语言之一
是一个脚本语言, 通过解释器运行
主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.

JS能做的事情：

网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode)
手机 app 开发

JavaScript和Java的关系：

最初在网景公司，命名为LiveScript
后来 Netscape 将其命名为了JavaScript，是因为当时 Java 风生水起的时候，带有 Java 的名字有助于这门新语言的传播
所以 Java 和 JavaScript 的关系相当于印度和印度尼西亚一样，黑客和博客一样，是不同的两个东西

1.2 组成

ECMAScript(简称 ES): JavaScript 语法
DOM: 页面文档对象模型, 对页面中的元素进行操作
BOM: 浏览器对象模型, 对浏览器窗口进行操作

光有 JS 语法只能写一些简单的基础逻辑流程，要想完成更复杂的任务，比如浏览器以及页面的交互，那么就需要 DOM API 和 BOM API

1.3 书写形式

①第一个程序

<script>alert("你好");
</script>

直接用浏览器打开后，就是一个弹窗信息

②行内式

这种是直接嵌入到 html 元素内部的属性中：

<input type="button" value="按钮" onclick="alert('你好')">

运行后显示一个按钮，按下就会显示一个确认弹窗

③内嵌式

这种就是和 css 一样，写到 script 标签中，就和 ① 一样

<script>alert("你好");
</script>

④外部式

这个也是和 css 一样，将 JS 代码写到另一个 .js 文件中，然后在 html 文件里引入即可：

<script src="hello.js"></script>
alert("你好")

1.4 输入输出

①输入：prompt

<script>prompt("你好");
</script>

会弹出一个输入框

②输出：alert

这个就是弹出一个对话框，前面已经演示过了：

<script>alert("你好");
</script>

③输出：console.log

这个是在控制台打印一个日志：

<script>console.log("你好");
</script>

其中打印的信息只有在浏览器的调试界面才能看到：

这样的输出一般是给程序猿看的，不展示给用户

console 是一个 js 中的“对象”，而点点 “ . ” 表示取对象中的某个属性或者方法，这点和 C++ 一样

二，变量的使用

2.1 基本用法

直接上代码：

<script>var name = '张三';var age = 20;console.log(name);console.log(age);
</script>

var 是 JS 中的关键字, 表示这是一个变量.
= 在 JS 中表示 "赋值", 相当于把数据放到内存的盒子中
JS 中可以省略末尾分号，但是建议还是加上
初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来. 初始化的值如果是数字, 那么直接赋值即可.

如下示例：

<script>var name = prompt("请输入姓名：");var age = prompt("请输入年龄：");var score = prompt("请输入分数：");alert("您的姓名是：" + name);alert("您的年龄为：" + age);alert("您的分数是：" + score);/*alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " + 
score + "\n"); 也可以把三个输出内容合并*/
</script>

2.2 动态类型

JS 的变量类型是程序运行过程中才确定的，这点和 Python 一样：

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

三，基本数据类型

3.1 数字类型

关于number数字类型：

JS 中不区分整数和浮点数，统一都使用 "数字类型" 来表示
计算机中都是使用二进制来表示数据，而人平时都是使用十进制，因为二进制在使用过程中不太方便(01太多会看花眼)。所以在日常使用二进制数字时往往使用八进制和十六进制来表示二进制数字

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

然后就是一些特殊的数字值：

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

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

<script>console.log(isNaN(10));  // falseconsole.log(isNaN('hehe' - 10));  // true
</script>

3.2 字符串类型

①基本使用

字符串值需要用双引号或单引号括起来，否则运行出错：

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

如果字符串中本来包含引号，可以使用下面两种方法解决：

②求字符串长度

直接使用 String 的 length 属性即可：

③字符串拼接

直接使用 + 进行拼接
数字和字符串也可以拼接
要分清除相加的变量是数组还是字符串

3.3 布尔类型

这个我们已经很熟悉了，就是真或者假，Boolean 参与运算时当作 1 和 0 来看待

<script>console.log(true + 1);console.log(false);
</script>

3.4 未定义数据类型

如果一个变量没有被初始化过，结果就是 undefined
undefined 和字符串进行相加，结果是进行字符串拼接
undefined 和数字进行相加，结果为 NaN

3.5 空值类型

null 表示当前的变量是一个“空值”
null 和 undefined 都表示取值非法的情况，但是侧重点不同
null 表示当前的值为空，表示有一个盒子，但是这个盒子是空的
而 undefined 表示当前变量未定义，就是连盒子都没有

四，运算符

关于运算符这里就不赘述了，和其它高级语言的使用是大差不差的：

名称	符号	备注
算术运算符	+、-、*、/、%
赋值运算符	=、+=、-=、*=、/=、%=
自增自减运算符	++、--
比较运算符	<、>、<=、>=、==、!=、===、!==	两个等于号的比较相等会进行隐式类型转换，而三个等于号的不会
逻辑运算符	&&、\|\|、!
位运算	&、\|、~、^
位移运算	<<、<<、>>>	>>是有符号右移，<<<是无符号右移

五，条件语句

5.1 基本语法

基本语法和C++一样，if、else if 和 else，这里不再赘述，下面通过两个案例了解一下即可：

①判断一个数字是正数还是负数

<script>var num = 10;if (num > 0) {console.log("num 是正数");}else if (num < 0)  {console.log("num 是负数");} else {console.log("num 是 0");}
</script>

②判断一个年份是否是闰年

<script>var year = 2000;if(year % 100 == 0){if(year % 400 == 0) console.log("yes");else console.log("no");}else{if(year % 4 == 0) console.log("yes");else console.log("no");}
</script>

附：三元表达式在 JavaScript 仍然可用

5.2 switch语句

语法格式也和C++一样，这里不再赘述

判断一个数是星期几：

<script>var day = prompt("请输入今天星期几: ");switch (parseInt(day)) {case 1:console.log("星期一");break;case 2:console.log("星期二");break;case 3:console.log("星期三");break;case 4:console.log("星期四");break;case 5:console.log("星期五");break;case 6:console.log("星期六");break;case 7:console.log("星期日");break;default:console.log("输入有误");}
</script>

六，循环语句

6.1 while

①计算 !5

<script>var a = 5;var ret = 1;while(a > 0){ret *= a;a--;}console.log(ret);
</script>

②打印 1 - 100 内的偶数

<script>var a = 1;while(a <= 100){if(a % 2 == 0) console.log(a);a++;}
</script>

6.2 for

for的用法和C++一样，不再赘述

计算 !5

<script>var ret = 1;for(var i = 1; i <= 5; i++) ret *= i;console.log(ret);
</script>

七，数组

7.1 创建数组

可以使用 new 关键字创建，也可以使用字面量方式创建，一般使用后者

<script>var arr1 = new Array();var arr2 = [];var arr3 = [1, 2, '你好', true]; //允许元素类型不同
</script>

7.2 获取数组元素

使用下标的方式访问数组

注意：请勿给数组直接赋值，否则会干掉数组原有的所有元素，然后数组这个变量就不再是数组了

7.3 新增元素

①通过修改 length 新增

相当于在末尾新增元素，默认为 undefined，可以通过下标来修改

②通过下标新增

如果下标超出原有范围去赋值元素，则会给指定位置擦汗如元素，其余位置填充 undefined：

③使用 push 进行追加元素

示例：将一个数组的元素放进另一个数组里去：

7.4 删除元素

我们使用 splice 方法来删除元素，里面有两个参数，表示删除第一个参数位置到第二个参数为重中间的所有值，包括位置本身，如下示例：

八，函数

8.1 语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {函数体return 返回值;
}// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

8.2 函数表达式

可以将一个函数搞成匿名函数，然后将这个函数用一个变量表示，后续可以通过这个变量来调用函数：

<script>var add = function() {var sum = 0;for(var i = 0; i < arguments.length; i++){sum += arguments[i];}return sum;}console.log(add(10, 20));console.log(add(1,2,3,4));console.log(typeof add);
</script>

8.3 作用域

JS中变量的作用域和C++很像，下面说明下不同点：

创建的全局变量在整个 script 标签中或者单独的 .js 文件中有效
如果在函数内部创建变量时不带 var 关键字，那么这个变量会变成全局变量
函数内部可以再定义函数，内部函数可以访问外层函数的局部变量

九，对象

9.1 理解对象

这里对象的概念和主流面向对象编程语言是很类似的，在JS中，字符串，数值，数组，函数等都是对象，都包含属性和方法

JS的对象和 Java/C++ 对象概念基本一致，只是具体的语法表现形式差别较大

9.2 创建对象

①使用字面量创建对象（常用）

使用 {} 创建对象，并且属性和方法使用键值对的形式，键值对之间用逗号分割

如下代码：

<script>var a = {}; //创建空对象var student = {name: '你好',height: 180,weight: 150,SayHello: function(){console.log("hello");}};console.log(student.name);console.log(student['height']);student.SayHello();
</script>

②使用 new Object 创建对象

是先创建一个空对象，然后直接使用下面的方式来新增属性，并且可以随时新增：

<script>var student = new Object();student.name = '你好',student.height = 180,student.weight = 150,student.SayHello = function(){console.log("hello");}console.log(student.name);console.log(student['height']);student.SayHello();
</script>

③使用构造函数创建对象

JS的构造函数和C++很类似，但是JS的构造函数不是和类强绑定的，JS的构造函数仅仅只是一个特殊的函数而已，如下代码：

<script>function Student(name, height, Say){this.name = name;this.height = height;this.Say = function(){console.log(Say);}}var s1 = new Student('张三', 140, '你好');var s2 = new Student('李四', 150, '你好鸭');var s3 = new Student('王五', 160, '你也好呀');console.log(s1);s1.Say();
</script>