JS基础知识（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/txl2498459886/article/details/126430755

本文详细介绍了JavaScript的基础概念，包括它的组成、使用方法、变量与常量、数据类型、运算符和控制结构。深入探讨了字符串比较、数据类型转换的规则以及数组的创建与操作。此外，还讲解了函数的使用，特别是带参数的函数，以及如何通过逻辑和比较运算符进行条件判断。通过对这些基础知识的掌握，读者可以更好地理解和运用JavaScript进行前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比较运算符：>、 <、 ==、 ===、 !=

七、程序的流程控制语句（顺序，分支，循环）

一、JS概念

JS是一门解释型、弱类型以及面向对象的脚本语言，主要用于客户端浏览器与用户的交互。

编程语言可分为：解释型、编译型

解释型：不检查代码语法，从上往下开始执行，遇到错误停止代码的运行，如JS、Python..

编译型：在运行代码之前，计算机内部会自动的检查一遍代码语法，如果有错误，则整个文件都不能运行,如JAVA、C...

编程语言又可分为：强类型、弱类型

弱类型：变量的数据类型由赋值的数据决定，并且数据类型能在后面的使用中，根据使用环境的不同，悄然改变数据类型，即产生了隐式数据类型的转换。

强类型：变量的数据类型由关键字提前声明好，再不进行强制转换的情况下，不会随着使用环境的不同而改变。

个人认为Python比较特殊，Python的变量数据类型不由关键字声明，而是赋值的数据决定，但不会发生隐式数据类型转换，只能进行强制转换。

二、JS的组成

1、ECMAScript：核心语法；

2、DOM：Document Object Model，文档对象模型，用JS操作HTML和CSS；

3、BOM：Browser Object Model，浏览器对象模型，用JS操作浏览器；

三、如何使用JS

两种方法：
1、直接在HTML中的body标签内，使用script标签，在script标签内书写JS代码。（在head标签内写script也可以，但不推荐，原因是因为有可能减慢网页加载速度）

<body>
		<script></script>
<body>

<head>
    <script></script>
</head>

2、外部引入js。在外部创建后缀名为.js的文件，通过script标签的src属性在HTML代码内引入，同样达到效果。

<script src="外部js文件路径"></script>

注意：如果script标签加上了src属性，此时在script标签中写JS代码的话，就不会再生效了。

<script src="../js/test.js">
    console.log(123);
</script>

三、变量和常量

变量：在JS中，使用var关键字来进行变量的声明。（在ES6中，也可以使用let关键字）

let声明与var声明的区别
个人认为，除了字不同之外，最大的区别就是是否产生了变量提升现象，以及是否有块级作用域。

变量提升：编译器将声明的变量在运行完成之前，不论是写在前面还是后面的变量，都放在所有代码的最前面，这样在变量被声明之前，也可以访问到该变量，只是说值为undefined。使用var定义的变量会产生这种情况，但使用let声明的变量不行，会报错。

console.log(a);
console.log(12);
console.log(12);
console.log(12);
console.log(12);
var a = "aaaa";

但当使用let声明时：

console.log(a);
console.log(b);
console.log(12);
console.log(12);
console.log(12);
console.log(12);
var a = "aaaa";
let b = "bbbb";

块级作用域：指的是声明的变量只在某一范围内能够获取并使用，一旦超出这个范围，则失效。

for (var i = 0; i < 5; i++) {
	console.log("正在循环");
}
console.log(i);

使用let声明循环变量时：

for (let i = 0; i < 5; i++) {
	console.log("正在循环");
}
console.log(i);

常量：在JS中使用const声明的变量为常量，常量一旦被赋值之后，就不可以被修改，如果尝试修改的话，会报错。

const a = "我是常量";
a = "我要修改常量";
console.log(a);

四、数据类型

1、基本数据类型：

1）、 Number：数字类型，无穷多个

其中有一个特殊值：NaN，全程Not a Number，意思是：不是一个数字。但它是数字类；

NaN的特点：

（1）、和任何类型的数据做计算结果都为NaN；

（2）、NaN===NaN，结果为false；

如何判断是不是NaN？

使用JS提供的一个方法，isNaN(被判断的值)，如果为true则是NaN，反之则不是。

2）、 String：字符串类型，无穷多个，变量赋值时值要用双引号包裹；

var str1="我是字符串类型的变量"

3）、Boolean：布尔类型，取值只有两个，true：真，false：假；

4）、Null：空类型，值只有一个null，表示空，可以用于变量内存的释放：变量名=null;

5）、Undefined：未定义类型，值只有一个undefined，表示未定义；

6）、BigInt：整数类型，表示任意大的整数；

7）、Symbol：Symbol类型，作用是定义唯一变量；

其中BigInt和Symbol是后面新增的，目前不做过多说明。

2、复杂数据类型：有Object、Array等

可以使用typeof查看基本数据类型。

var a=123
console.log(typeof a) //Number

五、算数运算符、逻辑运算符和比较运算符

算数运算符：+、 -、 *、 /、 %

算数运算符的 + - * / 和一般数学运算没有区别，但也有特殊情况：

1、当加法运算的左右两边有一边是字符串时，编译器会将数字也转为字符串，从而最终的结果不是数字，而是字符串拼接的结果。

var a="123"
var b=123
console.log(a+b)

2、当+ - * / % 的左右两边有任意一边是字符串时，最后的结果为NaN。

var a = "我是字符串";
var b = 123;
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

其中% 表示的是模运算，也就是取余数的意思。

var a=2
var b=5
console.log(b%a)

如何计算数字+运算符的字符串？

使用eval函数，将数字字符串变为数字类型，运算符字符串变为算术运算符。

console.log(eval("1+2*3")) //7

逻辑运算符：&& 、|| 、!

一般用于条件判断

&&：表示并且，只有当&&左右两边的条件都满足时才为true，执行下面的代码，否则执行其它；

||：表示或者，当||左右两边的条件满足一个时就为true，都不满足时才为false；

!：表示取反操作，如果当前结果为true，加上之后就为false，反之亦然。

比较运算符：>、 <、 ==、 ===、 !=

        >：大于
       <：小于
       ==：等于
       ===：等于
       !=：不等于

== 和 ===的区别？

==只比较转换后的值是否相等，不比较他们的类型，如'123'==123，编译器先将'123'转换为Number类型后才进行比较。

而===是在比较数据类型的基础上再比较结果是否相等，都相等才为true，否则为false。

字符串比较相等的原理？

例："asdwe"=="asdwq"
编译器会将每个字符串中相同下标的字符进行比较，比较的依据是ASCII码，相同则比较下一个，直到遇见不同的位置，比较出结果；如果都相同，则说明两个字符串相等。

六、数据类型的转变（基本数据类型）

不同的数据类型之间可以互相转变，这里只说基本数据类型。

其他类型转String

1）、变量.toString()：除了null和undefined都可以转变为字符串，并且不会影响原变量，null和undefined调用该方法会报错。

var a = 2;
var b = 5;
console.log(typeof a.toString());
console.log(typeof a);

2）、String()方法：所有的类型都可以转为String，无限制。

3）、通过+法运算：通过+运算符产生了隐式转换，写法是：要转换的变量+""（可以是空字符串，也可以添加其他内容）。

其他类型转Number

1、parseInt(变量)：将其他类型转为整数类型

转换规则：

（1）、如果是纯非数字字符串，转换的结果为：NaN。

（2）、如果开头是数字字符串，其他是非数字的话，只能识别最开始的数字。

（3）、undefined和null转换的结果为NaN。

（4）、true和false转换结果都为NaN。

2、parseFloat(变量)：将其他数据类型转浮点数

转换规则：

（1）、如果是纯非数字字符串，转换的结果为：NaN。

（2）、如果是小数字符串，且有多个小数点的话，只能识别第一个小数点。

（3）、undefined和null转换的结果为NaN。

（4）、true和false转换结果都为NaN。

3、Number(变量)：转为数字类型

转换规则：

（1）、undefined转换结果为NaN。

（2）、非数字字符串转换结果为NaN。

（3）、如果是数字和字符串结合，转换为NaN。

（4）、空字符串转换结果为0。

（5）、true转换结果为1，false转换结果为0。

（6）、null的转换结果为0。

4、使用算数运算符：

原理：触发隐式转换。

注意：+运算的两边有一边是数字字符串的话，会先将字符串转变为Number类型，再进行运算。

其他类型转Boolean

1、使用Boolean()：

转换规则：

（1）、数字转Boolean，除了0和NaN，其余都是true。

（2）、字符串转Boolean，除了空字符串，其余都是true。

（3）、null和undefined转Boolean，都是false。

（4）、对象转Boolean，也是true。

2、使用逻辑运算符!：

原理：触发隐式转换。

注意：第一次使用!得到的是相反的值，需要使用两次!才得到正确的,如 !!1==true。

七、程序的流程控制语句（顺序，分支，循环）

顺序控制语句

就是除了分支和循环控制语句之外的就是顺序控制语句。

分支语句

if if...else... if...else if...else

1、只有当括号内的条件的结果为true时，才会执行{}中的代码块。

if(判断条件){
    代码块
}

2、当判断条件为true时，执行代码块1，否则执行代码块2。

if(判断条件){
    代码块1
}else{
    代码块2
}

3、当条件1为true时，执行代码块1，否则当条件二满足时，执行代码块2...都不满足时执行代码块N。

if(判断条件1){
    代码块1
}else if(判断条件2){
    代码块2
}else{
    代码块N    
}

注意：可以有多个else if的存在。

循环控制语句

for while do...while

1、for循环：

语法：for(循环变量赋值/声明;循环条件;循环变量变化){

循环体

}

2、while循环：

语法：while(循环条件){

循环体

循环变量的变化

}

3、do...while循环：

语法：do{

循环体

循环变量变化
}while(循环条件)

while和do...while的区别？

while循环如果不满足条件，循环体一次都不会执行；

do...while循环即使不满足条件，也会执行一次的循环体，其执行顺序是：先执行循环体，再判断条件。

死循环的写法：

while(true){

循环体

}

或者

for(;;){

循环体

}

死循环会一直循环下去，永不停止，除非遇见break。

循环中的关键字：

1）、break：中断当前循环，如果是多层循环的嵌套，写在哪个循环就停止哪个循环，不影响其他循环。

2）、continue：跳过当前这一次循环，开始下一次循环。

八、数组

什么是数组？

数组是各种类型数据的有序集合。有序指的是下标。
下标：指的是每一个数据在数组中的位置，数组中是从0开始数，所以数组的最大下标为：数据个数-1。

创建数组的方式：2种

1、字面量方式：var arr=[数据项1，数据项2...]，各元素之间使用逗号隔开；

2、构造函数方式：var arr=new Array(数据项集...)

使用构造函数方式时的坑：
当你使用构造函数方式创建数组，并只传了一个数字时，构造函数会把这个数字当作是要创建的数组的长度，并且每一项都为empty（空）。

数组的基本操作

通过下标获取对应的值

var arr=[1,2,3,4,5]
console.log(arr[1]) //获取下标为1的值，结果为2

通过下标修改对应的值

var arr=[1,2,3,4,5]
arr[1]=6
console.log(arr) //修改下标为1的值，结果为[1,6,3,4,5]

通过减少数组长度删除末尾n个元素

如何获取数组长度？

数组变量名.length

var arr=[1,2,3,4,5]
arr.length=3
console.log(arr) //长度由5变成了3，最后结果[ 1, 2, 3 ]

数组的遍历：使用for循环

var arr = [1, 2, 3, 4, 5];
//根据数组的长度来遍历数组
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

（数组的常用方法后面再说。）

数组的三大不限制

1、不限制元素个数；

2、不限制元素类型；

3、不限制元素的下标越界：
1）、获取元素下标越界时，会返回undefined；

2）、添加元素下标越界时，会得到一个稀疏数组，导致下标不连续，访问没有值的下标时会得到undefined；

九、Function基础

将可以重复使用、或者需要提前准备好的代码段使用function关键字声明的叫做函数/方法。

语法：function 函数名(){

代码段
}

注意：函数定义之后，不会自己主动运行，需要调用才可以运行。

调用方式：函数名()

为什么要封装成函数？

1、不希望网页打开立刻执行，只在需要的时候才被调用’

2、希望某一部分代码块能够反复执行;

3、部分功能需要单独封装成一个函数；

4、函数内的一切占用内存的地方在函数执行完毕之后都会主动释放；

带参数的函数

有时函数内的代码块需要使用外部的变量做某些操作，此时需要定义一个带参数的函数将这个外部变量啊传入进去。

语法：function 函数名(参数1，参数2...){

代码块

}

调用：函数名(参数1，参数2...)

其中，定义函数时，括号内的参数叫做形参，全称：形式参数，可以多个，参数和参数之间使用逗号隔开；调用函数时，括号内的参数叫做实参，全程：实际参数，可以多个，参数和参数之间使用逗号隔开；

注意：在调用时，实参和形参要一一对应，否则会出现传参错误导致代码运行结果不正确等情况。

JS基础知识（一）

一、JS概念

二、JS的组成

三、如何使用JS

三、变量 和 常量

四、数据类型

五、算数运算符、逻辑运算符和比较运算符

算数运算符：+、 -、 *、 /、 %

逻辑运算符：&& 、|| 、!

比较运算符：>、 <、 ==、 ===、 !=

== 和 ===的区别？

字符串比较相等的原理？

六、数据类型的转变（基本数据类型）

其他类型转String

其他类型转Number

其他类型转Boolean

七、程序的流程控制语句（顺序，分支，循环）

顺序控制语句

分支语句

循环控制语句

八、数组

什么是数组？

创建数组的方式：2种

数组的基本操作

数组的三大不限制

九、Function基础

为什么要封装成函数？

带参数的函数

三、变量和常量