JavaScript基础

yqd666

已于 2025-03-15 16:45:35 修改

阅读量612

点赞数 26

文章标签： javascript 笔记开发语言

于 2025-03-15 09:23:22 首次发布

本文链接：https://blog.youkuaiyun.com/y516369/article/details/146242131

版权

文章目录

1.引入方式
- 1.1 内部方式
- 1.2 外部形式
- 1.3 内联 JavaScript
2.注释和结束符
3.输入和输出
- 3.1 输出
- 3.2 输入
4.变量(let)
- 4.1 变量的基本使用
- 4.2 变量命名规则与规范
- 4.3 let 和var区别
- 4.4 数组 (Array)
5.常量(const)
6.数据类型
7.类型转换
- 7.1 隐式转换
- 7.2 显式转换
8.运算符
- 8.1 赋值运算符
- 8.2 一元运算符
- 8.3 比较运算符
- 8.4 逻辑运算符
- 8.5 运算符优先级
9.语句
- 9.1 表达式和语句
- 9.2 分支语句
- 9.3 循环语句
- - 9.3.1 while 循环
  - 9.3.2 for循环
10.数组
- 10.1 数组的基本使用
- 10.2 操作数组
11.函数
- 11.1 为什么需要函数
- 11.2 函数使用
- 11.3 作用域
- 11.4 匿名函数
12.对象
- 12.1 对象的使用
- 12.2 属性
- 12.3 对象中的方法
- 12.4 遍历对象

1.引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

1.1 内部方式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来学习前端技术！')
  </script>
</body>
</html>

1.2 外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
（1）demo.js

document.write('嗨，欢迎来传智播学习前端技术！')

（2）引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

注：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

1.3 内联 JavaScript

（1）代码写在标签内部
在这里插入图片描述
（2）注意：vue框架会用这种模式

2.注释和结束符

（1）通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：
①单行注释：使用 // 注释单行代码
②使用 /* */ 注释多行代码
（2）结束符：在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。实际开发中有许多人主张书写 JavaScript 代码时省略结束符 ;

3.输入和输出

（1）输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。
（2）举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

3.1 输出

（1）语法1：
在这里插入图片描述
①作用：向html的body内输出内容
②注意：如果输出的内容写的是标签，也会被解析成网页元素
（2）语法2：

作用：页面弹出警告对话框
（3）语法3：
在这里插入图片描述
作用：控制台输出语法，程序员调试使用

3.2 输入

（1）语法：

let name = prompt('请输入您的姓名:')
console.log(name)

（2）作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
（3）展示：
在这里插入图片描述

4.变量(let)

（1）变量是计算机中用来存储数据的“容器”
（2）变量本质：是程序在内存中申请的一块用来存放数据的小空间

4.1 变量的基本使用

（1）声明变量：要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）
①语法：
在这里插入图片描述
②声明变量有两部分构成：声明关键字、变量名（标识）
③let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语
④举例：

（2）变量赋值：
①定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
在这里插入图片描述
②也可以声明变量的时候直接完成赋值操作,这种操作也称为变量初始化

（3）更新变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。

（4）声明多个变量：
①语法：多个变量中间用逗号隔开
在这里插入图片描述
②看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

4.2 变量命名规则与规范

（1）规则：
①不能用关键字（关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等）
②只能用下划线、字母、数字、$组成，且数字不能开头
③字母严格区分大小写，如 Age 和 age 是不同的变量
（2）规范：
①起名要有意义
②遵守小驼峰命名法：第一个单词首字母小写，后面每个单词首字母大写。例：userName

4.3 let 和var区别

（1）在较旧的JavaScript，使用关键字 var 来声明变量，而不是 let。var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
（2）let 为了解决 var 的一些问题。var 声明:
①可以先使用在声明 (不合理)
②var 声明过的变量可以重复声明(不合理)
③比如变量提升、全局变量、没有块级作用域等等
（3）结论：var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

4.4 数组 (Array)

（1）数组一种将一组数据存储在单个变量名下的优雅方式
在这里插入图片描述

（2）声明语法
在这里插入图片描述
①数组是按顺序保存，所以每个数据都有自己的编号
②计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
③在数组中，数据的编号也叫索引或下标
④数组可以存储任意类型的数据
（3）取值语法
在这里插入图片描述
（4）元素：数组中保存的每个数据都叫数组元素
（5）下标：数组中数据的编号
（6）长度：数组中数据的个数，通过数组的length属性获得

5.常量(const)

（1）概念：使用 const 声明的变量称为“常量”。
（2）使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
（3）命名规范：和变量一致
（4）常量使用：常量不允许重新赋值,声明的时候必须赋值（初始化）
在这里插入图片描述
（5）在JavaScript中，const声明的变量确保变量名指向的内存地址不变，但并不保证该地址的数据不可变。对于基本数据类型（如数字、字符串、布尔值），const确保变量的值不会改变。但对于复合数据类型（如对象和数组），const只能保证变量名指向的引用地址不变，对象或数组内容本身是可以被修改的。

6.数据类型

JS 数据类型整体分为两大类：
在这里插入图片描述
（1）数字类型（Number）：
①即我们数学中学习到的数字，可以是整数、小数、正数、负数

②JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认(Java是强数据类型例如 int a = 3 必须是整数)
③NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果
在这里插入图片描述
NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

（2）字符串类型（string）
通过单引号（''）、双引号（""）或反引号(``) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
①无论单引号或是双引号必须成对使用
②单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
③必要时可以使用转义符 \，输出单引号或双引号
④字符串拼接： + 运算符可以实现字符串的拼接
⑤模板字符串
在这里插入图片描述
（3）布尔类型（boolean）
表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。
（4）未定义类型（undefined）
①未定义是比较特殊的类型，只有一个值 undefined。只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
在这里插入图片描述
②工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来
（5）null（空类型）
①JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值
在这里插入图片描述
②null 和 undefined 区别：undefined 表示没有赋值，null 表示赋值了，但是内容为空
③null 开发中的使用场景：把 null 作为尚未创建的对象。将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
（6）通过 typeof 关键字检测数据类型。typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：
①作为运算符： typeof x （常用的写法）
②函数形式： typeof(x)
③有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。
在这里插入图片描述

7.类型转换

（1）JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
（2）注意：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。此时需要转换变量的数据类型。
在这里插入图片描述

7.1 隐式转换

（1）某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
（2）规则：
① + 号两边只要有一个是字符串，都会把另外一个转成字符串
② 除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型
（3）缺点：转换类型不明确，靠经验才能总结
（4）小技巧：
①+号作为正号解析可以转换成数字型

console.log(typeof + '123') // number

②任何数据和字符串相加结果都是字符串

7.2 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。显式转换概念：自己写代码告诉系统该转成什么类型。
（1）转换为数字型
①Number(数据)

转成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
NaN也是number类型的数据，代表非数字

②parseInt(数据)：只保留整数
③parseFloat(数据)：可以保留小数

（2）转换为字符型:
①String(value)
②value.toString()
③"" + value

8.运算符

8.1 赋值运算符

对变量进行赋值的运算符
①= 将等号右边的值赋予给左边, 要求左边必须是一个容器
②其他赋值运算符：+=、 -= 、*=、 /= 、%=

8.2 一元运算符

自增运算符的用法：
在这里插入图片描述

8.3 比较运算符

（1）比较结果为boolean类型，即只会得到 true 或 false
① > ：左边是否大于右边
② <：左边是否小于右边
③ >=：左边是否大于或等于右边
④ <=：左边是否小于或等于右边
⑤ ==：左右两边值是否相等
⑥ ===：左右两边是否类型和值都相等
⑦ !==：左右两边是否不全等

（2）字符串比较，是比较的字符对应的ASCII码
① 从左往右依次比较
② 如果第一位一样再比较第二位，以此类推
③ 比较的少，了解即可
（3） NaN不等于任何值，包括它本身
涉及到"NaN“ 都是false
（4）尽量不要比较小数，因为小数有精度问题
（5）不同类型之间比较会发生隐式转换
①最终把数据隐式转换转成number类型再比较
②所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

8.4 逻辑运算符

在这里插入图片描述

8.5 运算符优先级

在这里插入图片描述

9.语句

9.1 表达式和语句

（1）表达式和语句的区别
①表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。
在这里插入图片描述
②语句是一段可以执行的代码。比如：prompt()可以弹出一个输入框，还有if语句 for 循环语句等等

9.2 分支语句

9.2.1 If分支语句

if语句有三种使用：单分支、双分支、多分支
（1）单分支
在这里插入图片描述
（2）双分支：

（3）多分支

9.2.2 三元运算符

（1）使用场景：其实是比 if 双分支更简单的写法，可以使用三元表达式
（2）语法:
在这里插入图片描述

9.2.3 switch 语句

在这里插入图片描述

9.3 循环语句

9.3.1 while 循环

（1）while 循环基本语法
在这里插入图片描述
（2）while 循环三要素：
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
所以，while循环需要具备三要素：

9.3.2 for循环

（1）for循环语法

在这里插入图片描述
（2）for 循环嵌套

10.数组

10.1 数组的基本使用

（1）数组：(Array)是一种可以按顺序保存数据的数据类型
（2）数组的声明语法

在这里插入图片描述
（3）数组是按顺序保存，所以每个数据都有自己的编号。计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推。在数组中，数据的编号也叫索引或下标。数组可以存储任意类型的数据。
（4）取值语法：
在这里插入图片描述

10.2 操作数组

数组本质是数据集合, 操作数据无非就是增删改查语法：
在这里插入图片描述

10.2.1 操作数组-新增

（1）数组.push()
①将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
②语法：
在这里插入图片描述
③例如

（2）arr.unshift(新增的内容)
①将一个或多个元素添加到数组的开头，并返回该数组的新长度
②语法：

③例如：

10.2.2 操作数组-删除

（1）数组. pop() 方法
①从数组中删除最后一个元素，并返回该元素的值
②语法：
在这里插入图片描述
③例如：

（2）数组.shift() 方法
①从数组中删除第一个元素，并返回该元素的值
②语法：

③例如：

（3）数组.splice()方法
①删除指定元素
②语法：

10.2.3 数组排序

（1）数组. sort() 方法可以排序
（2）语法：
在这里插入图片描述

11.函数

11.1 为什么需要函数

（1）函数： function，是被设计为执行特定任务的代码块
（2）说明：
①函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于
精简代码方便复用。
②比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接拿来使用

11.2 函数使用

（1）函数的声明语法
在这里插入图片描述
（2）函数名命名规范
①和变量命名基本一致
②尽量小驼峰式命名法
③前缀应该为动词
④命名建议：常用动词约定
（3）函数的调用语法

（4）函数体
函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函
数的功能代码都要写在函数体当中。
在这里插入图片描述
（5）函数传参
①声明语法：

②调用语法

③形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参

（6）函数传参-参数默认值
①形参：可以看做变量，但是如果一个变量不给值，默认是什么？
undefined
②但是如果做用户不输入实参，刚才的案例，则出现 undefined + undefined 结果是什么？
NaN
③我们可以改进下，用户不输入实参，可以给形参默认值，可以默认为 0, 这样程序更严谨，可以如下操作：
在这里插入图片描述
（7）函数返回值：
①当调用某个函数，这个函数会返回一个结果出来，这就是有返回值的函数
②语法：

11.3 作用域

（1）通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名
字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
在这里插入图片描述
（2）在JavaScript中，根据作用域的不同，变量可以分为：

在这里插入图片描述

在这里插入图片描述
（3）变量有一个坑，特殊情况：
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

11.4 匿名函数

（1）函数可以分为：

在这里插入图片描述

（2）函数表达式：
将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式

在这里插入图片描述

（3）立即执行函数
在这里插入图片描述

12.对象

（1）对象（object）：JavaScript里的一种数据类型
（2）可以理解为是一种无序的数据集合，注意数组是有序的数据集合
（3）用来描述某个事物，例如描述一个人
①人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
②如果用多个变量保存则比较散，用对象比较统一

在这里插入图片描述

12.1 对象的使用

（1）对象声明语法：
在这里插入图片描述
（2）对象有属性和方法组成
①属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…
②方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

12.2 属性

（1）数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
①属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
②多个属性之间使用英文 , 分隔
③属性就是依附在对象上的变量（外面是变量，对象内是属性）
④属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
（2）属性-查
①声明对象，并添加了若干属性后，可以使用 . 获得对象中属性对应的值，我称之为属性访问。
②语法：对象名.属性
③简单理解就是获得对象里面的属性值。
在这里插入图片描述
④对于多词属性或则 - 等属性，点操作就不能用了。我们可以采取：对象[‘属性’] 方式，单引号和双引号都阔以