JavaScript基础

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端开发专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了JavaScript的基础知识，包括数据类型、运算符、流程控制、数组、函数、对象以及拓展内容。深入探讨了基本数据类型与引用数据类型的区别，强调了函数的使用、作用域和匿名函数的概念。此外，还讲解了对象的定义、操作和遍历，以及内置对象Math的使用。文章旨在帮助读者全面理解和掌握JavaScript核心概念。

一、数据类型

JavaScript 数据类型整体分为：基本数据类型 和 引用数据类型

1. 基本数据类型

number 数字型
- 包括整数、小数、正数、负数
string 字符串型
- 使用单引号，双引号，反引号包裹起来的内容，推荐使用单引号
- 模板字符串
```
let name='zhangsan', age=20
document.write(`姓名: &{name}, 年龄: &{age}`)
```
bool布尔型
- true， false
undefined 未定义型
- 只有一个值，即undefined
- 只声明变量，不赋值的情况下，变量的默认值为 undefined
- 使用场景：判断数据是否从后端传送过来，可通过监测这个变量是不是undefined
null 空类型
- null 表示值为空
- 使用场景：
  - 官方：把 null 作为一个尚未创建的对象
  - 大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

2. 引用数据类型

array 数组
object 对象
function 函数

3. 数据类型转换

typeof 用于检测变量的数据类型
坑：使用 表单、prompt 获取过来的数据默认是 字符串类型 的，此时就不能直接简单的进行加法运算
```
let name = 'zhangsan'
typeof name -->  string
```
隐式转换
- + 两边只要有一个是字符串，都会把另外一个转换成字符串
- 除了+ 号以外的算术运算符，比如-*/等都会把数据转成数字类型
- + 作为正号解析可以转换成number
```
'11' + 11 --> 1111
'11' - 11 --> 0
typeof +'123' --> number
```
显式转换
- 转换为数字型
  - Number(数据)
    - 如果字符串内容里面有非数字，转换失败时为 NaN(Not a Number)，即不是一个数字
    - NaN 也是number类型的数据，代表非数字
  - parseInt(数据)
    - 只保留整数
  - parseFloat(数据)
    - 可以保留小数
- 转换为字符型
  - String(数据)
  - 变量.toString(进制)

二、运算符

1. 算术运算符

+ - * / %

2. 赋值运算符

+= -= *= /= %=

3. 比较运算符

> < >= <= == === !==
- == 左右两边是否相等。只要求值相等 ，不要求数据类型 一样，即可返回true
- === 左右两边是否类型和值都相等。是全等，要求值和数据类型 都一样返回的才是true（开发中，请使用===）
- !== 左右两边是否不全等。比较结果为bool类型，即只会得到true或false
- tips：
  - 字符串比较的是ASCII码
  - NaN 不等于任何值，包括它本身
  - 尽量不要比较小数，因为小数有精度问题
  - 不同类型之间比较会发生隐式转换

4. 逻辑运算符

用来解决 多重条件 判断

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边都为true结果才为true	一假则假
\|\|	逻辑或	或者	符号两边有一个为true结果就为true	一真则真
!	逻辑非	非	true遍false false变true	真变假假变真

逻辑运算符中的短路：
- 在 && 和 || 中，当满足一定条件会让右边的代码不执行
- && 左边为 false 就短路
- || 左边为 true 就短路

5. 运算符优先级

越往下优先级越低
- 小括号（()）
- 一元运算符（++ -- ！）
- 算术运算符（先*/% 后+-）
- 关系运算符（> >= < <=）
- 相等运算符（== != === !==）
- 逻辑运算符（先&&后||）
- 赋值运算符（=）
- 逗号运算符（,）

三、表达式和语句

1. 表达式和语句区别

表达式计算出一个值
语句用来自行以使某件事发生（做什么事）
某些时候，也可以把表达式理解为语句，因为它是在计算结果，也是做事

2. 程序三大流程控制语句

顺序结构：写几句就从上往下执行几句
分支结构：有的时候要根据条件选择执行代码
循环结构：某段代码被重复执行

3. 分支语句

分支语句：让我们有选择性的执行想要的代码
if 分支语句

if(条件1) {
  代码1
}else if(条件2) {
  代码2
}else if(条件3) {
  代码3
}else {
  代码n
}
// 若以上条件都不满足，执行else里的代码

三元运算符
- 符号：? 和: 配合使用
- 语法：条件 ? 满足条件执行的代码: 不满足条件执行的代码
- 一般用来取值
switch 语句
- switch case 语句一般用于 等值判断，不适合于区间判断
- switch case 一般需要配合 break 关键字使用，没有 break 会造成 case 穿透
- 释义：
  - 找到跟小括号数据全等的 case 值，并执行里面对应的代码
  - 若没有全等 === 的则执行 default 里面的代码，例：数据若跟值2 全等，则执行代码2
```
switch(数据){
  case 值1:
  代码1
  break
  case 值2:
  代码2
  break
  default:
  代码n
  break
}
```

4. 循环结构

知识点
- 循环必备三要素
  - 变量起始值
  - 终止条件（没有终止条件，循环会一直执行，造成死循环）
  - 变量变化值（用自增或自减）
- 循环结束
  - continue：结束本次循环，结束下次循环
  - break：跳出所在的循环
- 注意事项
  - 循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程
while 循环
- 释义：
  - 跟 if 语句很像，都要满足小括号里的条件 true 才会进入执行代码
  - while 大括号里代码执行完毕后不会跳出，而是回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
```
while(循环条件) {
要重复执行的代码(循环体)
}
```
for 循环
- for 循环的好处
  - 把声明起始值、循环条件、变化值写到一起，一目了然
```
for(声明记录循环次数的变量; 循环条件; 变化值) {
  循环体
}
```
- for 循环和 while 循环的区别
  - for 循环： 明确循环的次数
  - while 循环： 不明确循环的次数
- for 循环嵌套
  - 一个循环里面再套一个循环，一般用在 for 循环里
```
for(外部声明的记录循环次数的变量; 循环条件; 变化值) {
  for(内部声明的记录循环次数的变量; 循环条件; 变化值){
    循环体
  }
}
```

四、数组

1. 定义

数组是一种可以按顺序保存数据的数据类型

2. 数组的基本使用

遍历数组

let names = ['zhangsan', 'lisi', 'wangwu']
for (let i=0; i<name.length; i++) {
  console.log(names[i])
}

3. 操作数组

增：数组添加新的元素
- arr.push(新增的内容)
  - arr.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
  - 语法：arr.push(元素1, 元素2, ..., 元素n)
- arr.unshift(新增的内容)
  - arr.unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
  - 语法：arr.unshift(元素1, 元素2, ..., 元素n)
删：删除数组中的元素
- arr.pop()
  - arr.pop() 方法从数组中删除最后一个元素，并返回该元素的值
  - 语法：arr.pop()
- arr.shift()
  - arr.shift() 方法从数组中删除第一个元素，并返回该元素的值
  - 语法：arr.shift()
- arr.splice(操作的下标, 删除的个数)
  - arr.splice() 方法删除指定元素
  - 语法：arr.splice(start, deleteCount)
  - start：起始位置；deleteCount：要删除数组元素的个数（可选），如果没有deleteCount，则默认删除start之后的全部数据
改：重新赋值
- 数组[下标] = 新值
查：查询/访问数组中的元素
- 数组[下标]
小结

说明	push()	unshift()	pop()	shift()	splice()
位置	在末尾添加元素	在开头添加元素	在末尾删除元素	在开头删除元素	指定删除元素位置
参数	可以添加一个或多个数组元素	可以添加一个或多个数组元素	不带参数	不带参数	带参数（起始位置，删除个数）
返回值	数组新长度	数组新长度	删除元素的值	删除元素的值	以数组的形式返回删除的元素

五、函数

1. 定义

function，执行特定任务的代码块
可以实现代码复用，提高开发效率

2. 函数使用

声明语法

function 函数名() {
  函数体
}

函数名 - 命名规范
- 和变量名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定

动词	含义
can	判断是否可执行某个动作
has	判断是否含有某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

函数调用
- 注意：声明（定义）的函数必须调用后才会真正被执行，使用（）调用函数
- 语法：函数名()
tips
- 函数声明：function
- 函数调用：函数名()
- 函数执行：函数不调用不执行
- 函数的复用代码：随时调用，随时执行，可重复调用
- 循环重复代码：循环代码写完即执行，不能很方便控制执行位置

3. 函数参数

函数可分为形参和实参
- 形参：函数声明时，小括号里面的是形参，形式上的参数
- 实参：函数调用时，小括号里面的是实参，实际的参数
- 尽量保持形参和实参的个数一致
- 多个参数中间使用逗号隔开

4. 函数返回值

函数是被设计为 执行特定任务的代码块
返回值：把处理结果返回给调用者
当函数需要返回数据出去时，用 return 关键字
return 数据
- 在函数中使用 return 关键字将内部的执行结果交给函数外部使用
- 函数内部只能出现一次 return，并且 return 后面的代码不会再被执行，所以 return 后面的数据不要换行写
- return 会立即结束当前函数
- 函数可以没有 return，这种情况函数默认返回值为 undefined

5. 作用域

全局作用域
- 全局有效
- 作用于所有代码执行的环境（整个script标签内部）或者一个独立的js文件
- 函数外部 let 的变量：全局变量在任何区域都可以访问和修改
局部作用域
- 局部有效
- 作用于函数内的代码环境，就是局部作用域
- 因为跟函数有关系，所以也称为函数作用域
- 函数内部 let 的变量：局部变量只能在当前函数内部访问和修改
块级作用域
- {}内有效
- 块级作用域由{}包括，if 语句和 for 语句里面的{}等
- {}内部 let 的变量：let 定义的变量，只能在块级作用域里访问，不能跨块访问，也不能跨函数访问
变量有一个坑，特殊情况：
- 如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当做全局变量看，但是强烈不推荐
- 但是有一种情况，函数内部的形参可以看做是局部变量
变量访问的原则
- 作用域链：采取就近原则的方式来查找变量最终的值

6. 匿名函数

匿名函数
- 将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
- 语法和调用：
```
// 语法
let fn = function(){
  函数体
}
// 调用
fn()
```
函数立即执行
- 场景介绍：避免全局变量之间的污染
```
// 方式1
(function() {console.log(111)})();
// 方式2
(function() {console.log(222)} ());
// 不需要调用，立即执行
```
- 注意：
  - 立即执行函数的作用：防止变量污染
  - 立即执行函数无需调用，立即执行（其实本质已经调用了）
  - 多个立即执行函数之间用分号;隔开，不然会报错

六、对象

1. 定义

定义
- 对象是一种数据类型
- 无序的数据的集合
特点
- 无序的数据的集合
- 可以详细的描述某个事物

2. 对象使用

声明

对象是由属性和方法组成的

let 对象名 = {
  属性名: 属性值,
  方法名: 函数
}
let person = {
  name: 'Lucky',
  age:20,
  sex: 'male',
  sayHi: function() {
    document.write('Hello world')
  }
}

属性
- 属性都是成对出现的，包括属性名和属性值，它们之间使用:分隔
- 多个属性之间使用,分隔
- 属性就是依附在对象上的变量（外面是变量，对象内是属性）
- 属性名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
- 属性访问：使用.或[]获得对象中属性对应的值，称之为属性访问
```
let person = {
  name: 'Lucky',
  age: 18
}
console.log(person.name)
console.log(person['age'])
```
方法
- 方法是由方法名和函数，它们之间使用:分隔
- 多个方法之间使用英文,分隔
- 方法是依附在对象中的函数
- 方法名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
- 方法访问：使用.调用对象中的函数，称之为方法调用。千万别忘了给方法名后面加小括号
```
let person = {
  name: 'Lucky',
  sayHi: function() {
    console.log('Hello World!!')
  }
}
person.sayHi()
增加属性
person.age = 18
person.move = function() {
  console.log('move move move')
}
```

3. 操作对象

增

对象增加新的数据
对象名.新属性名 = 新值
无论是属性还是方法，同一个对象中出现名称一样的，后面的会覆盖前面的

let person = {
  name: 'Lucky',
  sayHi: function() {
    console.log('Hello World!!')
  }
}
person.age = 19
person.move = function() {
  console.log('move... move...') 
}

删
- 删除对象中属性
- delete 对象名.属性名
改
- 重新赋值
- 对象.属性 = 值
- 对象.方法 = function () {}
查
- 查询对象
- 对象.属性 或者 对象[‘属性’]
- 对象.方法()

4. 遍历对象

一定记住：k 是获得对象的属性名，对象名[k]是获得属性值

let obj = {
  name = 'Lucky',
  age = 20,
  sex = 'female'
}
// 遍历对象
for (let k in obj) {
  console.log(k)
  console.log(obj[k])
}

5. 内置对象

Math
- 提供了一系列做数学运算的方法
- 方法有：
  - random：生成0~1之间的随机数（包括0不包括1）
  - ceil：向上取整
  - floor：向下取整
  - max：找最大值
  - min：找最小值
  - pow：幂运算
  - abs：绝对值

七、拓展

1. 术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、switch、case、break
保留字	在目前的JavaScript中没意义，但未来有可能会具有特殊意义的词汇	int、short、long、char
标识（标识符）	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10+3、age>=18
语句	一句代码也称之为一条语句，一般按用途还会分类：输出语句、声明语句、分支语句	无

2. 基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型
复杂类型又叫做引用类型
值类型
- 在存储时变量中存储的是值本身
- string、number、boolean、undifined、null
引用数据类型
- 复杂数据类型，在存储时变量中存储的仅仅是地址（引用）
- 通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆栈空间分配区别
- 栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等，其操作方式类似于数据结构中的栈；
- 值类型存放到栈里面
- 值类型的数据直接存放在变量（栈空间）中
- 堆（操作系统）：存放复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；
- 引用数据类型存放到堆里面
- 引用数据类型变量（栈空间）存放的是地址，真正的对象实例存放在堆空间中