零基础学JavaScript（二）ECMAScript 基础

野性酷女 2024-04-22 15:18 117阅读 0赞

## 一、变量 ##

> 1. 我们JavaScript代码写在 script标签里面
> 
> 2. 我们定义一个变量名字为name，它的值是“张三”
> 
> 3. 打开开发者工具的控制台，查看打印结果

![58a4cfa12608412cb677b4f46183955d.png][]

直接下来我们，可以将name的值，修改成18

![d42c32a835014dc6b8112fdb5df41c11.png][]

## 二、数据类型 ##

> 1. 每种编程语言都会定义数据类型，数据类型存在的目的是装对应的数据。
> 
> 2. 目前javascript中有5种简单数据类型，1种复杂数据类型

### 1、看看5种简单数据类型 ###

> undefined --- 未定义
> 
> null --- null
> 
> Boolean --- 布尔类型
> 
> number --- 数字类型
> 
> String --- 字符串类型

###  ###

### 2. 复杂数据类型Object ###

> Object --- 对象类型

###  ###

### 3. 使用typeof操作符，检测数据类型 ###

实践看一下，各种类型的数据，如何定义变量

**(一)、number、string类型**

![2974e52da9b74128b44525cffa9b1c08.png][]

**（二） boolean、undefined、null**

![a721c33521b14c509a9749194c286ba0.png][]

**（三）定义一个object变量**

![ffef1fade108490ea9c4556eecb98b97.png][]

## 三、操作符 ##

> 计算类的操作符： 加、减、乘、除、求余
> 
> 关系操作符：大于>、小于<、大于等于>=、小于等于<=、相等==
> 
> 布尔操作符： 逻辑非！、逻辑与&&、逻辑或||
> 
> 条件运算符：a>b?true:false

### 1. 计算类的操作符： 加、减、乘、除、求余 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>零基础学JavaScript(二) ECMAScript</title>
        <style>
          body{
            background-color: blueviolet;
          }
        </style>
      </head>
    
      <body>
      </body>
      <script>
       //定义两个变量
        let a = 8;
        let b = 4;
        //加法
        console.log("计算a+b的结果",a+b);
        console.log("number类型+字符串类型的数字，会拼接",a+"11");
        console.log("number类型+用Number转化的字符串类型的数字，会执行加法",a+Number("11"));
        //减法
        console.log("计算a-b的结果",a-b);
        //乘法
        console.log("计算a*b的结果",a*b);
        //除法
        console.log("计算a/b的结果",a/b);
        //除法
        console.log("计算a%b的结果",a%b);
      </script>
    </html>

![7cb9bba241094fd5a553ad067119f6cf.png][]

### 2. 关系操作符： 大于>、小于<、大于等于>=、小于等于<=、相等== ###

![154053a2f9024dc784de8a9cd27ce9c0.png][]

### 3. 布尔操作符： 逻辑非！、逻辑与&&、逻辑或|| ###

![ad651eccf9ef4227bfcbc3b088a47cfa.png][]

### 4. 条件运算符：a>b?true:false ###

![c6bdb55aef3444f0a2d99199b4f269b9.png][]

## 四、语句：if 、while、for、switch ##

### 1. if 条件语句 ###

### 2. while语句 ###

while语句属于前测试循环语句，也就是说。在循环体内的代码被执行之前，就会对出口条件求值。因此，循环体内的代码有可能永远不会被执行。

### 3. for语句 ###

for语句也是一种前测试循环语句，但它具有执行循环之前初始化变量和定义循环后要执行代码的能力，以下是for语句的示例。

![820e0b3c9811476eb6ad2126d5138f16.png][]

### 4. switch语句 ###

switch 语句用于基于不同的条件来执行不同的动作。 与if得else if很像，区别是switch性能上更好，不过目前计算机性能已经不是大问题，所以用if还是switch，看具体情况。

这里有个关键字break，它得意义是跳出当前循环。当n=2 命中条件后，直接跳出swith。

##  ##

## 五、函数 ##

函数对于任何语句都是核心概念。它可以封装多条语句统一执行，它用 function这个关键字声明

### 1. 先来感受一下函数 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>零基础学JavaScript(二) ECMAScript</title>
    </head>
    <body>
        
    </body>
    <script>
        //用function 定了一个叫 people的函数
        function people(){
            let name = "张三";
            let age = 18;
            let bodyHeight = 180;
            console.log("姓名=",name);
            console.log("年龄=",age);
            console.log("身高=",bodyHeight);
        }
        //调用函数
        people();
    </script>
    </html>

![9d43d0b014874fd18bb2accbcfb52268.png][]

### 2. 理解函数的参数 ###

通常我们使用函数有时候还需要得到一个计算结果，比如加法函数，代码如下

注意三个点

> return 代表结束语句，同时将结果返回。
> 
> sum1 是形参，代表 1
> 
> sum2 是形参，代表 2

### 3. 加深对参数的理解 ###

> ECMAScript函数的参数与大多数其它语言的函数参数有所不同。它不介意传递进来多少个参数，也不在乎创建来参数是什么数据类型。也就是说即便你定义的函数只接受两个参数，但在调用时未必需要传递两个参数。
> 
> 之所以这样，是因为参数的内部是用数组来表示的。我们可以用arguments来访问参数数组，比如这样
> 
> arguments\[0\] 访问参数数组中第一个元素
> 
> arguments\[1\] 访问参数数组中第二个元素

![208d486fd7d6431f97c6be294208a571.png][]

## 六、结束语 ##

> 初学者要好好将这些案例过一下，最重要的是理解知识的结构，理解知识存在的意义，这样就可以不用记忆和练习全部，而是自己可以通过提问，找出解决方法。

打基础的过程还是有些枯燥，接下是将引用类型数据学习一下，彻底掌握所有数据类型的使用后，就可以真正的开发功能了，再坚持坚持。

[58a4cfa12608412cb677b4f46183955d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7b106acfc26746dfb1aadd119e4bea7a.png
[d42c32a835014dc6b8112fdb5df41c11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/4f81f6041e6d4c6c98e94e73e01d4174.png
[2974e52da9b74128b44525cffa9b1c08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b7486cd455c34a1799547b0287b1b615.png
[a721c33521b14c509a9749194c286ba0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/7cbf96d4b2074a9d9f9cef1f6382fc74.png
[ffef1fade108490ea9c4556eecb98b97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5628f653626044d6b94b10188faf79f4.png
[7cb9bba241094fd5a553ad067119f6cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/70ae73b22974414ca031cf67a5e0f934.png
[154053a2f9024dc784de8a9cd27ce9c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5f2bd0f14efe4956b4975370a227db4f.png
[ad651eccf9ef4227bfcbc3b088a47cfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/82d96802f09e4b9e8a7f68e74939bfbe.png
[c6bdb55aef3444f0a2d99199b4f269b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/9e085c01344b486da5fa4fa0997360eb.png
[820e0b3c9811476eb6ad2126d5138f16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f29de333591c4ac4916b082d875760a2.png
[9d43d0b014874fd18bb2accbcfb52268.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/79a2c5cf0c0341e8befb400f7a057142.png
[208d486fd7d6431f97c6be294208a571.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/c8ee93e086594d089bc7c2a531450665.png