JavaScript学习笔记之一（ECMAScript: 基础语法部分）

缺乏、安全感 2023-09-27 10:39 121阅读 0赞

**目录**

1. JS基础

1.1 JS 组成

1.2 JS的几种书写形式

1.3 输入输出

2. 变量的使用

3. 基本数据类型

4. 运算符

5. 数组

6. 函数（function）

7. 对象

--------------------

## 1. JS基础 ##

### 1.1 JS 组成 ###

谈JS组成，先了解一下 **浏览器引擎**

> **渲染引擎（解析html和CSS，也叫做“内核”）+JS引擎（JS解释器，比如Chrome中的V8，JS引擎逐行读取JS代码，解析为二进制指令，然后再执行）**
> 
> 需要注意的是
> 
> **JS引擎都需要遵守这个标准来实现：ECMAScript**

对于在浏览器上执行的JS来说，可以视作3部分

> **1.JS核心语法**
> 
> **2.DOM API: 页面文档对象模型, 对页面中的元素进行操作** 
> 
> **3.BOM API: 浏览器对象模型, 对浏览器窗口进行操作**
> 
> JS语法，只能写一些基础的逻辑
> 
> 而要想完成更复杂的任务，比如完成和浏览器以及页面进行交互，就需要DOM API和BOM API；如果是运行在服务器端的JS，就需要使用node.js的API了。

### 1.2 JS的几种书写形式 ###

> （1） 内嵌式，把JS写到script标签中
> 
> ![490a8b3de6684c7ab4280624acbeca67.png][]
> 
> （2）行内式，把JS写到html元素的内部
> 
> ![f3a024e6267d4635881de102efa58a5c.png][]
> 
> （**3）外部式，把JS写到单独的.js文件中,在html里面通过script来引入**
> 
> ![232c8d1f36dc47029b4990825b2bd576.png][]
> 
> ![2e0db44040f74a19b1515b0e1dde7df4.png][]

### 1.3 输入输出 ###

> （1）输入：**prompt** 弹出一个输入框
> 
> ![033bc0d61dc641e38e41f2af33f42acb.png][]
> 
> （2）输出：**alert** 弹出一个警示对话框, 输出结果
> 
> ![44bc00c5ac4c446696db8132141e9584.png][]
> 
> （3）**输出****: console.log** 在控制台打印一个日志(供程序员看) 
> 
> ![4fa65c1b7fec4b9cacd05c9b95101d86.png][]

## 2. 变量的使用 ##

**（1）基本用法**

> a） 定义一个变量：
> 
> **var 变量名 = 初始值;**
> 
> ![ce370305979c4312a07b0c57ae01407b.png][]
> 
> 不论创建的变量是啥类型，此时统一都是使用var这个关键字来表示的
> 
> 至于想要创建变量具体的类型，这取决于初始化的值，是啥类型
> 
> 也可以不初始化，不初始化的时候，变量的值是一个特殊的值 undefined
> 
> 类型也就是undefined
> 
> b）使用变量： 读取/修改
> 
> ![614c14b8342345bd9f70fdc119cc6c42.png][]

**（2）动态类型**

> 如果本来a是一个数字类型，在赋值的时候可以给它赋一个数字类型，也可以赋一个字符串类型，也可以是赋任意类型，这个时候a变量的类型，也就是随之改变
> 
> ![4c36c64f1f4e43649c0752a9aa204efa.png][]
> 
>  **变量的类型，可以在运行过程中，随着赋值而发生改变，这种行为称为“动态类型”**

> 而现在更倾向于使用let，来代替var，因为var不受作用域约束
> 
> ![107ae5f4035842f490a39caf21332214.png][]

## 3. 基本数据类型 ##

> **number: 数字. 不区分整数和小数.** 
> 
> **boolean: true 真, false 假.** 
> 
> **string: 字符串类型.** 
> 
> **undefined: 只有唯一的值 undefined. 表示未定义的值.** 
> 
> **null: 只有唯一的值 null. 表示空值**

**（1）数字类型：number**

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

特殊的数字值

> Infinity：无穷大，大于任何数字，表示数字已经超过了JS能表示的范围
> 
> \-Infinity：负无穷大，小于任何数字、表示数字已经超过了JS能表示的范围
> 
> **NaN：表示当前的结果不是一个数字**
> 
> ![ca3919b1c69046fbae82c77559561145.png][]

> 1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity 
> 
> 2. 'hehe' + 10  得到的不是  NaN,  而是  'hehe10',  会把数字隐式转成字符串 ,  再进行字符串拼接 . 
> 
> ![12aed4835e9349ecb825c6ac4d579dd3.png][]
> 
> 3.  可以使用  **isNaN 函数判定是不是一个非数字.** 
> 
> ![905e288398c44bd0b5baef6a8a1a7439.png][]

**（2）字符串类型：String**

> string基本使用和java一样，这里再说明一下
> 
> 如果 **字符串中本来已经包含引号，那就可以使用转义字符或者单双引号搭配使用**
> 
> ![5f69ba5eae1a491aa1845ce0047b4ff7.png][]
> 
> 求字符串长度，使用 String 的 length 属性即可
> 
> ![2573d68af1cf4435bee3ea91345d003d.png][]![1123308f74a644f481209966e5a57dc5.png][]
> 
>  **需要注意这里的长度单位是“字符”，"hehe"是4个字符；"你好"是2个字符**

**（3）布尔类型：Boolean**

> Boolean  参与运算时当做  1  和  0  来看待
> 
> ![fedba015dd5c4de1a48d831056cf21c7.png][]

**（4）未定义数据类型：undefined**

> 如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型（非法情况）
> 
> ![9ab44b089d964159a78a042df40bfed0.png][]
> 
> JS是一个（动态类型+弱类型）
> 
> ![e63d6bd4bb6b4146ae656b1b79d78833.png][]

**（5）空值类型：null**

> **null表示当前这个值属于“没有值”这个概念，属于合法的情况**
> 
> ![a1a08793e00c41f8b5d424ed80697b1f.png][]

## 4. 运算符 ##

> JS运算符用法和Java运算符基本一样
> 
> 需要注意的有：
> 
> **（1）比较运算符中**
> 
> **== 和 !=**（只是比较两个变量的值，而不是比较两个变量的类型，如果两个变量能够通过隐式类型转换，转成相同的值，此时就认为，也是相等的）
> 
> **=== 和 !==**（既要比较变量的值，也要比较类型，如果类型不相同，就直接认为不相等）
> 
> ![2f0f6330a18a4791a8fe8734fde6cb08.png][]
> 
> ![6c5a4de503a147fe8cbcd31afa36fa6e.png][]
> 
> **（2）逻辑运算符 && ll，JS中逻辑运算后返回的是 其中的一个表达式**
> 
> c = a||b，
> 
> 如果a的值，为真，此时c的值，就是表达式a的值
> 
> 如果b的值，为假，此时c的值，就是表达式b的值
> 
> c = a&&b也类似
> 
> 所以根据JS逻辑运算符这样的特性，就可以用来
> 
> 判断变量是否为“空值”，如果是空值，则赋予一个默认值
> 
> **（3）算术运算符：/** 
> 
> **JS****中不区分整数和小数，都是number**
> 
> ![38ed46ca860b44cea101075dd6a5c1ed.png][]

## 5. 数组 ##

**（1）创建数组，两种方法**

> **a）使用new关键字创建**
> 
> **b）使用字面量方式创建（JS 的数组不要求元素是相同类型.）**
> 
> ![364399f9706d4976a06de01b56c4ab02.png][]

**（2）打印数组**

![f64fa5afe5f64321a14935d908b0b07c.png][]

**（3）获取数组元素**

> 使用下标的方式访问数组元素(从 0 开始）
> 
> ![0ea02d09da5d4e3b9d38009051184154.png][]
> 
> 如果下标超出范围读取元素, 则结果为 undefined
> 
> ![a692b32504694d819a50b23548563f58.png][]
> 
> 可以看到arr长度变为了101，然后数组的内容，前5个元素还是1,2,3,4,5
> 
> 下标为100的元素是10，中间的空属性\*95，意思就是中间的这些元素仍然是undefined
> 
> ![de832b5dd6a64213861d2c5fe37c4002.png][] 此时-1的下标就是10，也可以说-1这里是一个属性（键值对），它并没有影响到数组长度，
> 
> ![506da5bbe9224bdd805f2e635efab22a.png][]
> 
> JS中的数组，还可以有map的作用（表示键值对）。
> 
> 数组是一个map，也可以说是一个“对象”
> 
> 在JS里，是可以在运行时，给对象新增属性的
> 
> 下面的这两种写法都是一样的效果
> 
> arr\['hello'\]就是给arr这个对象，新增一个属性，属性的名字是hello，属性的值是10；
> 
> ![d230d1a867224c9cbb4e88146e5ccd37.png][]
> 
> ![ec883ce695184b7281145be9820dafd3.png][]

**（4）获取数组长度**

> 通过.length
> 
> ![f86ec37c1c3e4d53bd21bcfdc369058c.png][]
> 
> JS中，length属性是可以修改的
> 
> ![4876e3591cd24c6cafd10b2d17e3e9e2.png][]

**（5）给数组中新增元素**

> 最常见的插入操作，push方法，能够给数组末尾追加一个元素
> 
> ![eaed790493f94d71afcbfaf83a301cd5.png][]

**（6）删除数组中的元素**

> 使用 splice 方法删除元素
> 
> ![411bea0068d44b67ba35d07bb085e204.png][]
> 
> splice方法也可以替换元素
> 
> ![cf842b8bfe1647c696929a614f2358cf.png][]

## 6. 函数（function） ##

**（1）语法格式**

![61ce8795d30e401d8d6c0e7e87aad2f7.png][]

![5a3b14f633de4ab1a31d36385c4a2106.png][]

![bacf520cd430403fa4d61f83ebf8d246.png][]

**（2）函数参数个数**

> 实参和形参之间的个数可以不匹配 .  **但是实际开发一般要求形参和实参个数要匹配**
> 
> a）当实参个数比形参多时，多出来的参数不参与函数运算
> 
> b）当形参个数比实参多时，多出的形参值为undefined

![abcaccd2247f4e1c9a6f604f3c788db4.png][]

如果想让代码，既能支持数组相加，又能支持字符串相加，这个时候就肯定要判断，判定第一个参数，是字符串还是数字

**（3）函数表达式**

> 函数表达式，就是把一个函数赋值给另一个变量了
> 
> ![1fe1a87f2ba7429c8125b3e672a9c409.png][]
> 
> ![b1c06f831d8e4ab49be53240be8095bd.png][]
> 
> 也可以这样，合并上面的操作(既定义了hello这个函数，又把hello赋值给了f)
> 
> ![4cfe94cab4c748858716b4f7f6d7b786.png][]
> 
> 再进一步，就可以把hello省略，此时就是完全依赖f来找到该函数
> 
> **定义了一个没有名字的函数，并且把这个函数赋值给了f变量，后面就可以基于f来调用这个函数了**
> 
> ![dd5a7b963186458da3a843365f8686b2.png][]
> 
> 而这个也叫做“匿名函数”，也叫做lambda表达式

**（4）作用域 & 作用域链**

> 在ES6之前，只是有全局作用域和函数作用域
> 
> 在ES6之后，引入了let，也就有了块级作用域，一个变量在\{\}内部定义，是无法被\{\}访问的
> 
> 在JS中，\{\}内部的代码，是可以访问到\{\}外部的变量的
> 
> ![5ae7fa1dff5640f2aeaa6af8a4c6e45e.png][]
> 
> 函数可以定义在函数内部 
> 
> 内层函数可以访问外层函数的局部变量 . 
> 
> 内部函数可以访问外部函数的变量 .  采取的是链式查找的方式 . 从内到外依次进行查找，一层一层往上找，如果还没找到 ,  就去全局作用域查找，这个也叫做 **“作用域链”**
> 
> 如果在作用域链的不同结点上，存在多个同名的变量上怎么办
> 
> 那就从里往外走，先找到谁就用谁

## 7. 对象 ##

> 对象，就是一些属性和方法的集合
> 
> java中，对象是需要现有类的，然后针对这个类进行实例化才能产生对象
> 
> JS中，对象是不依托于类的，在JS中所有的对象，都只有一个类型Object

**在JS中，直接通过\{\}的方式，就可以创建对象（最常用）**

每个属性和方法，都是通过“键值对”，这样的方式来表达出来

\{\}表示这个是个对象，后续就可以通过student这个属性名 方式来访问了

对象的使用

![6fa1ccaf09ad413eabd145e7fa5456cd.png][]

**也可以通过new Object 创建对象**

![22287912b8334a5eac1665b8599cb739.png][]

**前面的创建对象方式只能创建一个对象. 而使用构造函数可以创建多个对象**

function 构造函数名(形参) {
        this.属性 = 值;
        this.方法 = function...
    }
        
    var obj = new 构造函数名(实参);

new后面的名字，是构造函数的名字，不是“类”的名字

[490a8b3de6684c7ab4280624acbeca67.png]: https://img-blog.csdnimg.cn/490a8b3de6684c7ab4280624acbeca67.png
[f3a024e6267d4635881de102efa58a5c.png]: https://img-blog.csdnimg.cn/f3a024e6267d4635881de102efa58a5c.png
[232c8d1f36dc47029b4990825b2bd576.png]: https://img-blog.csdnimg.cn/232c8d1f36dc47029b4990825b2bd576.png
[2e0db44040f74a19b1515b0e1dde7df4.png]: https://img-blog.csdnimg.cn/2e0db44040f74a19b1515b0e1dde7df4.png
[033bc0d61dc641e38e41f2af33f42acb.png]: https://img-blog.csdnimg.cn/033bc0d61dc641e38e41f2af33f42acb.png
[44bc00c5ac4c446696db8132141e9584.png]: https://img-blog.csdnimg.cn/44bc00c5ac4c446696db8132141e9584.png
[4fa65c1b7fec4b9cacd05c9b95101d86.png]: https://img-blog.csdnimg.cn/4fa65c1b7fec4b9cacd05c9b95101d86.png
[ce370305979c4312a07b0c57ae01407b.png]: https://img-blog.csdnimg.cn/ce370305979c4312a07b0c57ae01407b.png
[614c14b8342345bd9f70fdc119cc6c42.png]: https://img-blog.csdnimg.cn/614c14b8342345bd9f70fdc119cc6c42.png
[4c36c64f1f4e43649c0752a9aa204efa.png]: https://img-blog.csdnimg.cn/4c36c64f1f4e43649c0752a9aa204efa.png
[107ae5f4035842f490a39caf21332214.png]: https://img-blog.csdnimg.cn/107ae5f4035842f490a39caf21332214.png
[ca3919b1c69046fbae82c77559561145.png]: https://img-blog.csdnimg.cn/ca3919b1c69046fbae82c77559561145.png
[12aed4835e9349ecb825c6ac4d579dd3.png]: https://img-blog.csdnimg.cn/12aed4835e9349ecb825c6ac4d579dd3.png
[905e288398c44bd0b5baef6a8a1a7439.png]: https://img-blog.csdnimg.cn/905e288398c44bd0b5baef6a8a1a7439.png
[5f69ba5eae1a491aa1845ce0047b4ff7.png]: https://img-blog.csdnimg.cn/5f69ba5eae1a491aa1845ce0047b4ff7.png
[2573d68af1cf4435bee3ea91345d003d.png]: https://img-blog.csdnimg.cn/2573d68af1cf4435bee3ea91345d003d.png
[1123308f74a644f481209966e5a57dc5.png]: https://img-blog.csdnimg.cn/1123308f74a644f481209966e5a57dc5.png
[fedba015dd5c4de1a48d831056cf21c7.png]: https://img-blog.csdnimg.cn/fedba015dd5c4de1a48d831056cf21c7.png
[9ab44b089d964159a78a042df40bfed0.png]: https://img-blog.csdnimg.cn/9ab44b089d964159a78a042df40bfed0.png
[e63d6bd4bb6b4146ae656b1b79d78833.png]: https://img-blog.csdnimg.cn/e63d6bd4bb6b4146ae656b1b79d78833.png
[a1a08793e00c41f8b5d424ed80697b1f.png]: https://img-blog.csdnimg.cn/a1a08793e00c41f8b5d424ed80697b1f.png
[2f0f6330a18a4791a8fe8734fde6cb08.png]: https://img-blog.csdnimg.cn/2f0f6330a18a4791a8fe8734fde6cb08.png
[6c5a4de503a147fe8cbcd31afa36fa6e.png]: https://img-blog.csdnimg.cn/6c5a4de503a147fe8cbcd31afa36fa6e.png
[38ed46ca860b44cea101075dd6a5c1ed.png]: https://img-blog.csdnimg.cn/38ed46ca860b44cea101075dd6a5c1ed.png
[364399f9706d4976a06de01b56c4ab02.png]: https://img-blog.csdnimg.cn/364399f9706d4976a06de01b56c4ab02.png
[f64fa5afe5f64321a14935d908b0b07c.png]: https://img-blog.csdnimg.cn/f64fa5afe5f64321a14935d908b0b07c.png
[0ea02d09da5d4e3b9d38009051184154.png]: https://img-blog.csdnimg.cn/0ea02d09da5d4e3b9d38009051184154.png
[a692b32504694d819a50b23548563f58.png]: https://img-blog.csdnimg.cn/a692b32504694d819a50b23548563f58.png
[de832b5dd6a64213861d2c5fe37c4002.png]: https://img-blog.csdnimg.cn/de832b5dd6a64213861d2c5fe37c4002.png
[506da5bbe9224bdd805f2e635efab22a.png]: https://img-blog.csdnimg.cn/506da5bbe9224bdd805f2e635efab22a.png
[d230d1a867224c9cbb4e88146e5ccd37.png]: https://img-blog.csdnimg.cn/d230d1a867224c9cbb4e88146e5ccd37.png
[ec883ce695184b7281145be9820dafd3.png]: https://img-blog.csdnimg.cn/ec883ce695184b7281145be9820dafd3.png
[f86ec37c1c3e4d53bd21bcfdc369058c.png]: https://img-blog.csdnimg.cn/f86ec37c1c3e4d53bd21bcfdc369058c.png
[4876e3591cd24c6cafd10b2d17e3e9e2.png]: https://img-blog.csdnimg.cn/4876e3591cd24c6cafd10b2d17e3e9e2.png
[eaed790493f94d71afcbfaf83a301cd5.png]: https://img-blog.csdnimg.cn/eaed790493f94d71afcbfaf83a301cd5.png
[411bea0068d44b67ba35d07bb085e204.png]: https://img-blog.csdnimg.cn/411bea0068d44b67ba35d07bb085e204.png
[cf842b8bfe1647c696929a614f2358cf.png]: https://img-blog.csdnimg.cn/cf842b8bfe1647c696929a614f2358cf.png
[61ce8795d30e401d8d6c0e7e87aad2f7.png]: https://img-blog.csdnimg.cn/61ce8795d30e401d8d6c0e7e87aad2f7.png
[5a3b14f633de4ab1a31d36385c4a2106.png]: https://img-blog.csdnimg.cn/5a3b14f633de4ab1a31d36385c4a2106.png
[bacf520cd430403fa4d61f83ebf8d246.png]: https://img-blog.csdnimg.cn/bacf520cd430403fa4d61f83ebf8d246.png
[abcaccd2247f4e1c9a6f604f3c788db4.png]: https://img-blog.csdnimg.cn/abcaccd2247f4e1c9a6f604f3c788db4.png
[1fe1a87f2ba7429c8125b3e672a9c409.png]: https://img-blog.csdnimg.cn/1fe1a87f2ba7429c8125b3e672a9c409.png
[b1c06f831d8e4ab49be53240be8095bd.png]: https://img-blog.csdnimg.cn/b1c06f831d8e4ab49be53240be8095bd.png
[4cfe94cab4c748858716b4f7f6d7b786.png]: https://img-blog.csdnimg.cn/4cfe94cab4c748858716b4f7f6d7b786.png
[dd5a7b963186458da3a843365f8686b2.png]: https://img-blog.csdnimg.cn/dd5a7b963186458da3a843365f8686b2.png
[5ae7fa1dff5640f2aeaa6af8a4c6e45e.png]: https://img-blog.csdnimg.cn/5ae7fa1dff5640f2aeaa6af8a4c6e45e.png
[6fa1ccaf09ad413eabd145e7fa5456cd.png]: https://img-blog.csdnimg.cn/6fa1ccaf09ad413eabd145e7fa5456cd.png
[22287912b8334a5eac1665b8599cb739.png]: https://img-blog.csdnimg.cn/22287912b8334a5eac1665b8599cb739.png