JavaScript笔记总结(三)

港控/mmm° 2023-02-24 11:18 9阅读 0赞

### 文章目录 ###

*   *  事件
     *  运算符
     *   *   *  对字符串和数字进行加法运算
     *  比较与逻辑运算符
     *  条件语句
     *   *   *  if语句
             *  if...else 语句
             *  if...else if...else 语句
     *  switch 语句
     *  循环
     *   *   *  For 循环
             *  for/in 语句循环遍历对象的属性
             *  while 循环
             *  do/while 循环
     *  typeof 操作符
     *  null
     *  undefined
     *  类型转换
     *   *   *  将数字转换为字符串
             *  将字符串转换为数字

## 事件 ##

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

*  HTML 页面完成加载
 *  HTML input 字段改变时
 *  HTML 按钮被点击

JavaScript 可以触发 HTML 页面中的这些事件

<table> 
 <thead> 
  <tr> 
   <th>onchange</th> 
   <th>HTML 元素改变</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onclick</td> 
   <td>用户点击 HTML 元素</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>用户在一个HTML元素上移动鼠标</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>用户从一个HTML元素上移开鼠标</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>用户按下键盘按键</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>浏览器已完成页面的加载</td> 
  </tr> 
 </tbody> 
</table>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
    <p id="demo">123</p>
    // 点击按钮，‘123’会变为现在的时间

<button onclick="this.innerHTML=Date()">现在的时间是?</button>
    //点击按钮，按钮上面的文字会变为现在的时间
    //使用 this.innerHTML 修改自身元素的内容

## 运算符 ##

#### 对字符串和数字进行加法运算 ####

两个数字相加，返回数字相加的和；两个字符串相加，变量会连接成一个字符串；如果数字与字符串相加，返回字符串。

button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
    function myFunction()
    {
    	var x=5+5;
    	var y="5"+5;
    	var z="Hello"+5;
    	test1="hello w";
    	test2="orld day";
    	test3=test1+test2;
    	var demoP=document.getElementById("demo");
    	demoP.innerHTML=x + "<br>" + y + "<br>" + z + "<br>" + test3 ;
    }
    </script>

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

## 比较与逻辑运算符 ##

<table> 
 <thead> 
  <tr> 
   <th>比较</th> 
   <th align="left">运算符</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td align="left">==</td> 
   <td align="left">等于（值相等就行）</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">===</td> 
   <td align="left">绝对等于（值和类型均相等）</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">!=</td> 
   <td align="left">不等于</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">!==</td> 
   <td align="left">不绝对等于（值和类型有一个不相等，或两个都不相等）</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">&gt;</td> 
   <td align="left">大于</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">&lt;</td> 
   <td align="left">小于</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">&gt;=</td> 
   <td align="left">大于或等于</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">&lt;=</td> 
   <td align="left">小于或等于</td> 
  </tr> 
  <tr> 
   <td>逻辑</td> 
   <td align="left">&amp;&amp;</td> 
   <td align="left">and</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">||</td> 
   <td align="left">or</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td align="left">!</td> 
   <td align="left">not</td> 
  </tr> 
 </tbody> 
</table>

## 条件语句 ##

#### if语句 ####

if (condition)
    {
      当条件为 true 时执行的代码
    }

#### if…else 语句 ####

if (condition)
    {
        当条件为 true 时执行的代码
    }
    else
    {
        当条件不为 true 时执行的代码
    }

#### if…else if…else 语句 ####

if (condition1)
    {
        当条件 1 为 true 时执行的代码
    }
    else if (condition2)
    {
        当条件 2 为 true 时执行的代码
    }
    else
    {
      当条件 1 和 条件 2 都不为 true 时执行的代码
    }

## switch 语句 ##

switch(n)
    { 
        case 1:
            执行代码块 1
            break;
        case 2:
            执行代码块 2
            break;
        default:                  //用 default 关键词来规定匹配不存在时做的事情
            与 case 1 和 case 2 不同时执行的代码
    }

## 循环 ##

#### For 循环 ####

for (语句 1; 语句 2; 语句 3)             
    {                                    //语句 1 （代码块）开始前执行
        被执行的代码块                     //语句 2 定义运行循环（代码块）的条件
    }                                    //语句 3 在循环（代码块）已被执行之后执行

#### for/in 语句循环遍历对象的属性 ####

<button onclick="myFunction()">点击这里</button>
    <p id="demo"></p>
    <script>
    function myFunction(){ 
    	var x;
    	var y="";
    	var person={ fname:"Yao",lname:"Ge",age:20}; 
    	for (x in person){ 
    		y=y + person[x];
    	}
    	document.getElementById("demo").innerHTML=y;
    }
    </script>                //输出YaoGe20

#### while 循环 ####

**在指定条件为真（或者伪真）时，会循环执行代码块，不会结束，可能导致浏览器崩溃**

while (条件)
    {
        需要执行的代码
    }

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

#### do/while 循环 ####

是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
     {
      需要执行的代码
     }
    while (条件);

## typeof 操作符 ##

<p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML = 
    	typeof 3.14 + " " +
    	typeof false + " " +
    	typeof { name:'john', age:34};
    </script>
    //输出number boolean object
    //数组是一种特殊的对象类型

## null ##

typeof null 返回 object

null是一个只有一个值的特殊类型。表示一个空对象引用

## undefined ##

typeof undefined 返回 undefined

是一个没有设置值的变量

## 类型转换 ##

在 JavaScript 中有 6 种不同的数据类型：

*  string
 *  number
 *  boolean
 *  object
 *  function
 *  symbol

3 种对象类型：

*  Object
 *  Date
 *  Array

2 个不包含任何值的数据类型：

*  null
 *  undefined

#### 将数字转换为字符串 ####

全局方法 **String()** 可以将数字，字母，变量，表达式转换为字符串。

（toString() 也有相同的效果）

String(x)            // 将变量 x 转换为字符串并返回
    String(123)          // 将数字 123 转换为字符串并返回
    String(100 + 23)     // 将数字表达式转换为字符串并返回
    String(false)        // 返回 "false"
    String(true)         // 返回 "true"
    String(new Date())   // 返回此刻的日期时间

#### 将字符串转换为数字 ####

全局方法 **Number()** 可以将字符串、布尔值、日期转换为数字

Number("3.14")    // 返回 3.14 ||字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
    Number(" ")       // 返回 0    
    Number("")        // 返回 0    ||空字符串转换为 0
    Number("99 88")   // 返回 NaN  ||其他的字符串会转换为 NaN (不是个数字)
    Number(d = new Date())   //返回此刻的时间戳

<table> 
 <thead> 
  <tr> 
   <th align="left">原始值</th> 
   <th align="left">转换为数字</th> 
   <th align="left">转换为字符串</th> 
   <th align="left">转换为布尔值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">false</td> 
   <td align="left">0</td> 
   <td align="left">“false”</td> 
   <td align="left">false</td> 
  </tr> 
  <tr> 
   <td align="left">true</td> 
   <td align="left">1</td> 
   <td align="left">“true”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">0</td> 
   <td align="left">0</td> 
   <td align="left">“0”</td> 
   <td align="left">false</td> 
  </tr> 
  <tr> 
   <td align="left">1</td> 
   <td align="left">1</td> 
   <td align="left">“1”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">“0”</td> 
   <td align="left">0</td> 
   <td align="left">“0”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">“000”</td> 
   <td align="left">0</td> 
   <td align="left">“000”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">“1”</td> 
   <td align="left">1</td> 
   <td align="left">“1”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">NaN</td> 
   <td align="left">NaN</td> 
   <td align="left">“NaN”</td> 
   <td align="left">false</td> 
  </tr> 
  <tr> 
   <td align="left">Infinity</td> 
   <td align="left">Infinity</td> 
   <td align="left">“Infinity”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">-Infinity</td> 
   <td align="left">-Infinity</td> 
   <td align="left">“-Infinity”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">“”</td> 
   <td align="left">0</td> 
   <td align="left">“”</td> 
   <td align="left">false</td> 
  </tr> 
  <tr> 
   <td align="left">“20”</td> 
   <td align="left">20</td> 
   <td align="left">“20”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">“Runoob”</td> 
   <td align="left">NaN</td> 
   <td align="left">“Runoob”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">[ ]</td> 
   <td align="left">0</td> 
   <td align="left">“”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">[20]</td> 
   <td align="left">20</td> 
   <td align="left">“20”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">[10,20]</td> 
   <td align="left">NaN</td> 
   <td align="left">“10,20”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">[“Runoob”]</td> 
   <td align="left">NaN</td> 
   <td align="left">“Runoob”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">[“Runoob”,“Google”]</td> 
   <td align="left">NaN</td> 
   <td align="left">“Runoob,Google”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">function(){}</td> 
   <td align="left">NaN</td> 
   <td align="left">“function(){}”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">{ }</td> 
   <td align="left">NaN</td> 
   <td align="left">“[object Object]”</td> 
   <td align="left">true</td> 
  </tr> 
  <tr> 
   <td align="left">null</td> 
   <td align="left">0</td> 
   <td align="left">“null”</td> 
   <td align="left">false</td> 
  </tr> 
  <tr> 
   <td align="left">undefined</td> 
   <td align="left">NaN</td> 
   <td align="left">“undefined”</td> 
   <td align="left">false</td> 
  </tr> 
 </tbody> 
</table>

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

后续参考[https://www.runoob.com/js/js-tutorial.html][https_www.runoob.com_js_js-tutorial.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70]: /images/20230209/346b3c65f0234c17a7c9512b90a1eb00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzkwNQ_size_16_color_FFFFFF_t_70 1]: /images/20230209/97ba109b65584e549ba140381f333478.png
[https_www.runoob.com_js_js-type-conversion.html]: https://www.runoob.com/js/js-type-conversion.html
[https_www.runoob.com_js_js-tutorial.html]: https://www.runoob.com/js/js-tutorial.html