JavaScript笔记总结(二)

比眉伴天荒 2023-02-24 08:24 1阅读 0赞

### 文章目录 ###

*   *  
     *   *  语句
         *  JavaScript 代码块
         *  JavaScript 语句标识符
         *  变量
         *  数据类型
         *   *   *  字符串
                 *  数字
         *  布尔
         *  数组
         *  对象
         *   *   *  声明变量类型
         *  函数
         *   *   *  带有返回值的函数
         *  局部 JavaScript 变量
         *  全局 JavaScript 变量
         *  JavaScript 变量的生存期

##  ##

### 语句 ###

JavaScript 语句是发给浏览器的命令，

document.getElementById("123").innerHTML = "你好";
    // 向id="123" 的 HTML 元素输出文本 "你好"

可以用分号分隔 JavaScript 语句。如：

a = 5;
    b = 6;
    c = a + b;

可以写成

a = 5; b = 6; c = a + b;

### JavaScript 代码块 ###

JavaScript 可以分批地组合起来。作用是一并地执行语句序列。以左花括号开始，以右花括号结束。

<h1>我是 Web 页面</h1>
    <p id="myPar">我是段落。</p>
    <div id="myDiv">我是一个div。</div>
    <p><button type="button" onclick="myFunction()">点击这里</button></p>
    <script> function myFunction(){ document.getElementById("myPar").innerHTML="hello"; document.getElementById("myDiv").innerHTML="word"; } </script>
    //当点击上面的按钮时， '我是段落。' 会被 'hello' 替代， '我是一个div。' 会被 'word' 取代 。

### JavaScript 语句标识符 ###

JavaScript 语句通常以一个 **语句标识符** 为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

<table> 
 <thead> 
  <tr> 
   <th align="left">语句</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">break</td> 
   <td align="center">用于跳出循环。</td> 
  </tr> 
  <tr> 
   <td align="left">catch</td> 
   <td align="center">语句块，在 try 语句块执行出错时执行 catch 语句块。</td> 
  </tr> 
  <tr> 
   <td align="left">continue</td> 
   <td align="center">跳过循环中的一个迭代。</td> 
  </tr> 
  <tr> 
   <td align="left">do … while</td> 
   <td align="center">执行一个语句块，在条件语句为 true 时继续执行该语句块。</td> 
  </tr> 
  <tr> 
   <td align="left">for</td> 
   <td align="center">在条件语句为 true 时，可以将代码块执行指定的次数。</td> 
  </tr> 
  <tr> 
   <td align="left">for … in</td> 
   <td align="center">用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。</td> 
  </tr> 
  <tr> 
   <td align="left">function</td> 
   <td align="center">定义一个函数</td> 
  </tr> 
  <tr> 
   <td align="left">if … else</td> 
   <td align="center">用于基于不同的条件来执行不同的动作。</td> 
  </tr> 
  <tr> 
   <td align="left">return</td> 
   <td align="center">退出函数</td> 
  </tr> 
  <tr> 
   <td align="left">switch</td> 
   <td align="center">用于基于不同的条件来执行不同的动作。</td> 
  </tr> 
  <tr> 
   <td align="left">throw</td> 
   <td align="center">抛出（生成）错误 。</td> 
  </tr> 
  <tr> 
   <td align="left">try</td> 
   <td align="center">实现错误处理，与 catch 一同使用。</td> 
  </tr> 
  <tr> 
   <td align="left">var</td> 
   <td align="center">声明一个变量。</td> 
  </tr> 
  <tr> 
   <td align="left">while</td> 
   <td align="center">当条件语句为 true 时，执行语句块。</td> 
  </tr> 
 </tbody> 
</table>

JavaScript 会忽略多余的空格，如

alert   (10);  等效于  	alert(10);

可以在文本字符串中使用反斜杠对代码行进行换行，如

document.write("你好 \  \   \   \
    世界!");

![在这里插入图片描述][2020070820433433.png]

它也是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

### 变量 ###

*  变量必须以字母开头
 *  变量也能以 $ 和 \_ 符号开头(不推荐)
 *  变量名称对大小写敏感（y 和 Y 是不同的变量）
    
        var name;   //用 var 关键词来声明变量，变量声明之后，是空的
        name="xiaoming";   //用等号向变量赋值
        var name="xiaoming";  //在声明变量时直接赋值
        var name="zhangsan", age=18, sex="male";  //多个变量用逗号分隔
        var x,y,z=1;     //多个不可以用一条语句赋同一个值，x,y 为 undefined， z 为 1。
    
    如果变量未赋值，那么它的值实际上是undefined

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70]

**重新声明 JavaScript 变量**

如果重新声明 JavaScript 变量，该变量赋值，则为新值（拥有动态类型）；如不赋值，则为旧值，不是undefined

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70 2]

### 数据类型 ###

**值类型(基本类型)**：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

**引用数据类型**：对象(Object)、数组(Array)、函数(Function)

##### 字符串 #####

字符串是存储字符的变量，可以是引号中的任意文本（单引号或双引号都行）

var answer="It's alright";
    var answer="He is called 'Johnny'";
    var answer='He is called "Johnny"';
    var answer='ok';

##### 数字 #####

只有一种数字类型。数字可以带小数点，也可以不带。可以通过科学（指数）计数法来书写

var x1=34.00;   //使用小数点来写
    var x2=34;     //不使用小数点来写
    
    var y=123e5;   // 12300000
    var z=123e-5;   // 0.00123

### 布尔 ###

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
    var y=false;

### 数组 ###

var cars=new Array();    //创建名为 cars 的数组
    cars[0]="Saab";
    cars[1]="Volvo";
    cars[2]="BMW";

![在这里插入图片描述][2020070820460877.png]  
![在这里插入图片描述][20200708204613407.png]

### 对象 ###

可以使用字符来定义和创建 JavaScript 对象，空格跟换行不是必须的

由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，[如下][Link 1]：

var person={
    firstname :  "John",
    lastname  :  "Doe",
    id        :  5566
    };

对象属性有两种寻址方式
    name=person.lastname;
    name=person["lastname"];

##### 声明变量类型 #####

JavaScript 变量均为对象，当声明新变量时，就创建了一个新的对象。

可以使用关键词 “new” 来声明其类型：

var carname=new String;
    var     x  =   new Number;
    var     y  =   new Boolean;
    var  cars  =   new Array;
    var person =   new Object;

参考来源：[https://www.runoob.com/js/js-syntax.html][https_www.runoob.com_js_js-syntax.html]

### 函数 ###

函数就是包裹在花括号中的代码块，前面使用了关键词 function。

myFunction(argument1,argument2)  //可以发送任意多的参数，由逗号 (,) 分隔

function functionname(){// 执行代码}

<p>点击这个按钮，来调用带参数的函数。</p>
    <button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
    <script>
    function myFunction(name,job){
    	alert("Welcome " + name + ", the " + job);
    }
    </script>        //变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值

![在这里插入图片描述][20200708204805898.png]

##### 带有返回值的函数 #####

function myFunction(a,b)
    {
        return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
    //返回12

### 局部 JavaScript 变量 ###

函数内部声明的变量（使用 var）是*局部*变量，所以只能在函数内部访问它。

### 全局 JavaScript 变量 ###

在函数外声明的变量是*全局*变量，网页上的所有脚本和函数都能访问它。

### JavaScript 变量的生存期 ###

JavaScript 变量的生命期从它们被声明的时间开始。
    局部变量会在函数运行以后被删除。
    全局变量会在页面关闭后被删除。

参考来源：[https://www.runoob.com/js/js-syntax.html][https_www.runoob.com_js_js-syntax.html]

[2020070820433433.png]: /images/20230209/adafb2c4bdfe479a93772196b782fc3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70]: /images/20230209/05eab47476f34b43a731c1836e4cb515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200708204417924.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200708204422883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ==,size_16,color_FFFFFF,t_70
[2020070820460877.png]: https://img-blog.csdnimg.cn/2020070820460877.png
[20200708204613407.png]: https://img-blog.csdnimg.cn/20200708204613407.png
[Link 1]: https://www.runoob.com/try/try.php?filename=tryjs_undefined
[https_www.runoob.com_js_js-syntax.html]: https://www.runoob.com/js/js-syntax.html
[20200708204805898.png]: https://img-blog.csdnimg.cn/20200708204805898.png