[前端学习] JavaScript 笔记 (一)

Paxlsean

已于 2024-03-27 11:57:11 修改

阅读量1.7k

点赞数 56

文章标签：前端学习 javascript

于 2024-03-13 19:47:48 首次发布

本文链接：https://blog.csdn.net/weixin_49160784/article/details/136689435

版权

本文介绍了JavaScript的基础知识，包括语言组成（ECMAScript和WebAPIs）、DOM和BOM的作用，JavaScript的使用方式（内部、外部和行内），变量的声明、赋值、更新和命名规则，常量的使用，数组的声明与基本操作，以及基本数据类型、运算符和转换。

摘要由CSDN通过智能技术生成

一、JavaScript简介

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

JavaScript的组成
JavaScript由ECMAScript和Web APIs两大部分组成，而Web APIs又包括了DOM和BOM。
- ECMAScript：规定了js基础语法核心知识，例如：变量、分支语句、循环语句、对象等。
- Web APIs
  - DOM（页面文档对象模型）：操作文档，比如对页面元素进行移动、大小变换、添加删除等操作。
  - BOM（浏览器对象模型）：操作浏览器，比如页面弹窗、检测窗口宽度、存储数据到浏览器等。
JavaScript的写法
2.1. JavaScript的使用可分为内部JavaScript、外部JavaScript、行内JavaScript。
- 内部JavaScript：
  
  直接写在html文件中，其具体代码用标签<script></script>包裹住；
  script标签放在</body>上方，也就是写在<body></body>内容中的最后。因为浏览器会按照代码书写顺序加载。
- 外部JavaScript：
  
  js代码写在后缀为.js的文件中；
  在 html 文件中通过标签<script></script>及属性src引入文件使用，如：<script src="./static/js/my.js"></script>。
- 行内JavaScript：
  
  写在标签内部，如<button onclick="alert('test')">点击</button>。
2.2. JavaScript的注释：
- 单行注释：在注释语句前加上双斜杠//，vscode中的快捷键可使用 ctrl + /，例：// 这是注释内容。
- 多行注释：在注释语句的前后分别加上/*和*/，vscode中的快捷键可使用shift + alt + a，例：/* 这是注释内容 */。
2.3. JavaScript的结束符
JavaScript的结束符是英文分号;，在代码中可写可不写，但为了规范所有代码要统一，不要一行写分号，一行不写分号。

2.3. JavaScript的输入输出语法
输入和输出可理解为人和计算机的交互，用户通过键盘、鼠标等将计算机输入信息，计算机通过处理后再展示结果给用户，这就是一次输入和输出的过程。
- 输出语法：
  - 语法一：document.write("输出")，向body输出内容，会直接显示在网页上，如果写的是标签，也会被网页解析。例如：
```
<script>
  // 网页中直接显示文字“输出”
  document.write("输出");

  // 网页中显示一个按钮，按钮中的文字是“输出”
  document.write("<button>输出</button>");
</script>
```
  - 语法二：alert("这是警告框")，页面弹出警告框，不会解析内容中的html标签，例如：
```
  <script>
    // 网页中弹出警告框，里面显示内容“这是警告框”
    alert("这是警告框");

    // 网页中弹出警告框，里面显示内容“<button>这是警告框</button>”
    alert("<button>这是警告框</button>");
  </script>
```
  - 语法三：控制台打印，cosole.log("这里是控制台打印")，可以在浏览器按F12弹出的页面的控制台中(Cosole)看到，一般用于在开发中输出信息调试代码。
```
  <script>
    // 控制台打印内容“这是控制台输出的内容”
    console.log("这是控制台输出的内容");
  </script>
```
- 输入语法：
  - prompt提示框输入
```
  <script>
    // 网页中弹出提示框，里面显示文字“请输入”以及一个输入框，用户可以输入内容
    prompt("请输入");
  </script>
```
2.4. JavaScript的代码执行顺序
按HTML文档流顺序执行JavaScript代码；alert、prompt会跳过首页渲染先被执行。

二、变量

变量是计算机存储数据的容器，用来存放数据。

变量的基本使用
1.1. 声明变量
想使用变量首先要声明变量，也称定义变量，使用let时同一个变量不可重复声明。
- let 变量名：let为声明关键字。

1.2. 变量赋值
声明变量后，就可以初始化变量（给变量赋值），使用符号=。

<script>
  // 方式一
  let a;  // 声明变量a
  a = 1;  // 给变量赋值为1

  // 方式二，一般在声明变量时直接赋值，也叫做变量的初始化
  let a = 1;
</script>

1.3. 更新变量
更新变量即给变量重新赋值。如let a = 1; a = 2;此时a的值为2，

let a = 1; let a = 2; 这种写法是错误的，会报错a已经被声明。

1.4. 声明多个变量
在同时声明多个变量时，变量之间用逗号隔开，但不提倡，可读性不好。

  <script>
    // 声明多个变量，但不提倡
    let a, b;
    let c, d = 1;
    let m = 1, n = 2;

    // 变量声明了但未初始化且后续没有赋值时，变量输出为`undefined`
    console.log(a, b, c, d, m, n);  // 在控制台打印可以看到输出结果为`undefined undefined undefined 1 1 2`

    // 给a赋值后再打印
    a = 1;
    console.log(a, b, c, d, m, n);// 此时输出结果为`1 undefined undefined 1 1 2`
  </script>

1.5. 案例

  <script>
    // prompt()方法有两个可选值，一个是对话框提示信息，一个是输入框中的默认值；
    // prompt(message, defaultValue)，有一个返回值会返回用户输出的结果或null。
    let a = prompt("请输入");
    document.write(a);
  </script>

变量的命名规则和规范

规则：
- 不能用关键字；
- 只能由字母、数字、下划线、$组成，且不能数字开头
- 严格区分大小写，如a和A是两个不同的变量
规范：
- 变量名要有意义；
- 遵守小驼峰命名法，即第一个单词首字母小写，后面其他单词首字符大写，如tableData

let和var的区别：
在之前的JavaScript中，使用关键字var来声明变量，而不是let。现在开发一般不再使用var，但在老版程序中会看到。
var的特点：
- 可以重复声明；
- 会发生变量提升；
- 具有全局对象属性；
- 作用域是函数级别，即在整个函数内都是可见的。

三、常量

使用const声明的变量成为“常量”，本质还是变量。
当某个变量使用时不需要改变的时候，就可以使用const来声明。
命名规则规范和变量一致。

常量在声明时必须初始化，不允许重新赋值。

// const name; // 未初始化报错，这一行报错代码需要注释掉其他js代码才会正常执行
const age = 18;
console.log(age); // 输出：18
age = 19; // 报错，上面打印的age会正常输出，但是这一行代码控制台会报错，下面的代码不会执行
console.log(age); // 这一行代码不会执行

四、数组

数组可以将一组数据存储在单个变量下，这一组数据可以是任意类型的数据。

数组的声明
声明语法：let arr = [数据1, 数据2, 数据3, ..., 数据n]，数组的内容用中括号[]包裹起来，多个数据之间用逗号隔开；let arr = []表示声明数组变量时初始化为空数组。
数组基本使用

数组中的每个数据都叫做数组元素；
数组是有序的，每一个数据都有一个编号，也叫数组的下标或是索引号，从0开始，使用时按照数组名[下标]；

数组中数据的个数也就是数组的长度，可通过属性length获得。

  let arr = ["语文", "数学", "英语"]; // 其下标依次为：0，1，2
  console.log(arr[0]);  // 输出结果为：语文
  console.log(arr[2]);  // 输出结果为：英语
  console.log(arr[3]);  // 超出数组长度，输出为：undefined
  console.log(arr.length);  // 输出数组长度为：3

五、数据类型

基本数据类型

number 数字型：可以是整数、小数、正数、负数。
- 可以用算术运算符进行加减乘除等操作+、-、*（乘）、/（除）、%（取余、求模）。
- 在计算错误时会得到一个NaN，是一个不正确或未定义的数学操作得到的结果，NaN是粘性的，任何对NaN的操作都会返回NaN。
string 字符串型：通过单引号''、双引号""、或反引号``包裹的数据都叫字符串。
- 引号必须成对出现；
- 单引号和双引号可以互相嵌套，但是不能自己套自己；
- 必要时可以使用转义符\输出单引号或双引号。
- 字符串拼接：
  - 使用加号+进行拼接；
  - 模板字符串：拼接字符串和变量，整体字符串用反引号``包裹，字符串中的变量用${}包裹。
```
  <script>
    // 加号`+`拼接字符串
    let age = 18;
    document.wriite('今年' + age + '岁');  // 输出：今年18岁

    // 模板字符串
    let year = 2024;
    document.write(`今年是${year}年`);  // 输出：今年是2024年
  </script>
```
boolean 布尔型：有两个固定的值true和false。
undefined 未定义型：只有一个值undefined，在声明变量但是未赋值时就是undefined。
null 空类型：代表无、空、值未知的特殊值，作为尚未创建的对象。与undefined的区别是：null表示赋值了，但是内容为空。
```
  console.log(undefined + 1);  // 输出：NaN
  console.log(null + 1);  // 输出：1
```

算术运算符优先级：

乘、除、取余优先于相同，加、减优先级相同，乘、除、取余优先于高于加、减；
优先级高的先执行，相同的按从左往右依次执行；
使用括号()时先算括号里的。

引用数据类型（复杂数据类型）
只有 object对象一种。包括我们常用的对象(Object)、数组(Array)、函数(Function)，以及特殊类型正则（RegExp）和日期（Date）等。
检测数据类型
通过typeof检测数据类型，有两种语法，两种语法结果一样。

作为运算符：typeof x;
作为函数：typeof(x)。

  let num = 2024;
  console.log(typeof num);  //输出：number
  let str = 'hello';
  console.log(typeof str);  //输出：string
  let str1 = '2024';
  console.log(typeof str1); //输出：string
  let loading = true;
  console.log(typeof loading);  //输出：boolean
  let obj = null;
  console.log(typeof obj);  //输出：object
  let un;
  console.log(typeof un);  //输出：undefined

数字类型转换
在开发中，使用表单、prompt获取的数据默认都是字符串类型的，在有些情况下不能直接使用进行运算等操作，就需要进行数据转换。

隐式转换：某些运算符执行时，系统内部会自动将数据类型进行转换。
- +号两边只要有一个字符串，都会把另一个转成字符串，即任何数据和字符串相加都是字符串。
- 除了+以外的算术运算符，比如-、*、/等都会把数据转换成数字类型。
- +作为正号解析可以转换成数字型，例如console.log(typeof +'123')的结果为number。
显示转换
- 转为数字型：
  - Number()，如果字符串里有非数字，则转换失败结果为NaN，NaN也是number类型的数据，代表非数字。
  - parseInt()，提取字符串中以数字开头的数字，只保留整数，若不是数字开头，则返回结果为NaN。
  - parseFloat()，提取字符串中以数字开头的数字，若不是数字开头，则返回结果为NaN。

  // 隐式转换
  console.log('123' + 456);  //输出：123456
  console.log('123' - 456);  //输出：-333
  console.log(typeof +'123');  //输出：number

  // 显式转换
  console.log(Number('123'), typeof Number('123'));  //输出：123 'number'
  console.log(Number('s123'), Number('123s'));  //输出：NaN NaN
  console.log(parseInt('123.456'), parseInt('s123.456'), parseInt('123.456s'));  //输出：123 NaN 123
  console.log(parseFloat('123.456'), parseFloat('s123.456'), parseFloat('123.456s'));  //输出：123.456 NaN 123.456

六、运算符

赋值运算符
对变量进行赋值的运算符。

运算符	用法
`=`	左边为变量，右边为值，将右边的值赋值给左边
`+=`	例如`a += b`相当于`a = a + b`
`-=`	例如`a -= b`相当于`a = a - b`
`*=`	例如`a = b`相当于`a = a b`
`/=`	例如`a /= b`相当于`a = a / b`
`%=`	例如`a %= b`相当于`a = a % b`

一元运算符

运算符	用法
`+`	正号
`-`	负号
`++`	自增，在自身的基础上加`1`；前置自增：`++a`；后置自增：`a++`；区别：前者先加`1`再进行其他操作，后者先进行其他操作再加`1`。
`--`	自减，在自身的基础上减`1`，其他和自增一样

比较运算符
运算符用法
> 大于
< 小于
>= 大于等于
<= 小于等于
== 判断左右两边值是否相等
=== 判断左右两边类型和值是否都相等
!== 左右两边是否全不等
- 比较结果为boolean类型，值为true或false
- NaN不等于任何值，包括它本身，设计NaN的比较都是false
- 尽量不比较小数，因为小数有精度问题
- 不同类型之间的比较会有隐式转换，所以更准确的比较推荐用===和!==
逻辑运算符
运算符用法
&& 逻辑与(并且)，符号两边都为true，结果为true
|| 逻辑或(或者)，符号两边有一个为true，结果为true
！ 逻辑非(取反)，true变false，false变true

运算符	用法
`>`	大于
`<`	小于
`>=`	大于等于
`<=`	小于等于
`==`	判断左右两边值是否相等
`===`	判断左右两边类型和值是否都相等
`!==`	左右两边是否全不等

运算符	用法
`&&`	逻辑与(并且)，符号两边都为true，结果为true
\|\|	逻辑或(或者)，符号两边有一个为true，结果为true
`！`	逻辑非(取反)，true变false，false变true

运算符优先级

优先级别	运算符	顺序
1	小括号	`()`
2	一元运算符和逻辑非	`++ -- !`
3	算数运算符	`先* / % 后 + -`
4	关系运算符	`> >= < <=`
5	相等运算符	`== != === !==`
6	逻辑运算符	先 && 后 \|\|
7	赋值运算符	`=`
8	逗号运算符	`,`