JavaScript入门学习笔记（二）

梦里梦外; 2021-12-17 07:59 368阅读 0赞

JavaScript运算符：

算术运算符、赋值运算符和字符串连接运算符。

算法运算符与复制运算符用法参照Java；

**字符串运算符：**

\+运算符用于把文本值或字符串变量连接起来，适用于两个或更多字符串变量连接。数字与字符串进行+运算结果为字符串。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title>just test</title>
     6     </head>
     7     <body>
     8         <p id="test"></p>
     9         
    10         <script>
    11             function myFunction(a,b)
    12             {
    13                 return a+b;
    14             }
    15             document.getElementById("test").innerHTML = myFunction("hello ","edward");
    16             //myFunction函数的返回值作为值向id为test的HTML元素输出文本
    17         </script>
    18         
    19     </body>
    20 </html>

demo

**比较运算符：**

参照Java比较运算符用法，例外：===表示“绝对等于”，即变量的值和类型均相等。

**逻辑运算符：**

&&、||、！

**条件运算符（三元运算）：**

(condition)?value1:value2

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var a = 1,b = 2,c;
    2 c = (a == b)?a:b;

demo

## 流程语句（条件语句）： ##

参照Java语法或C语言语法。

## 循环语句： ##

**for循环：**

for(语句1；语句2；语句3)\{

循环代码块；

语句1开始时执行，语句2为循环条件，语句3在循环代码块执行完一次后执行，执行完语句3后又回过头执行语句2判定循环条件。

执行顺序为：语句1----->语句2------>循环代码块------->语句3------>语句2------->循环代码块------->语句3......

**for/in循环：**

循环遍历对象的属性，还可以用于遍历数组

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var person={fname:"John",lname:"Doe",age:25}; 
    2 
    3 for (x in person) 
    4   { 
    5   txt=txt + person[x]; 
    6   }

demo

**while循环：**

在指定条件为true时循环执行代码块，先判定条件再进行执行，若初始条件为false则循环代码块一次都不会执行。

**do/while循环：**

会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。无论如何循环代码块都被执行一次。

**break和conitnue语句：**

break可用于跳出条件语句switch( ),也可用于跳出循环。

continue语句用于中断循环中的迭代，如果出现了指定的条件，然后继续执行循环中的下一个迭代。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 /****
     2 *break跳出循环，循环结束，不再执行
     3 *例中循环执行到i=3时就跳出循环不再执行
     4 ****/
     5 for (i=0;i<10;i++)
     6   {
     7   if (i==3)
     8     {
     9     break;
    10     }
    11   x=x + "The number is " + i + "<br>";
    12   }
    13 
    14 /*****
    15 *continue中断循环，出现符合循环的条件后继续执行循环
    16 *例中循环执行到i=3时不执行循环体，但是计量单位i会继续自增，当i=4时循环继续执行
    17 *****/
    18 for (i=0;i<=10;i++)
    19  {
    20  if (i==3) continue;
    21   x=x + "The number is " + i + "<br>";
    22   }

比较

**JavaScript标签：**

JS语句可以进行标记，在语句前加上冒号。

continue只能用于循环语句中，break通过标签引用可以跳出任何JS代码块。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 cars=["BMW","Volvo","Saab","Ford"];
     2 list: 
     3 //将一系列写文本语句标记为代码块list
     4 {
     5 document.write(cars[0] + "<br>"); 
     6 document.write(cars[1] + "<br>"); 
     7 document.write(cars[2] + "<br>"); 
     8 break list;
     9 //使用break带标签引用跳出代码块
    10 document.write(cars[3] + "<br>"); 
    11 document.write(cars[4] + "<br>"); 
    12 document.write(cars[5] + "<br>"); 
    13 }

标签

**类型转换：**

（1）5种数据类型：string、number、boolean、object、function

（2）3种对象类型：Object、Date、Array

（3）2两种不包含任何值的数据类型：null、undefined

使用typeof操作符可以查看变量数据类型，日期和数组是例外，返回值都是object，可以用constructor属性返回构造函数来区分是不是数组（返回Array()）。

将number、boolean、Date转化成字符串：全局方法String( )，私有方法toString( )。

其他类型转换方法较为简单，重复性高，需要使用时搜一搜就能知道。

**正则表达式：**

正则表达式是由一个字符序列形成的搜索模式，在搜索数据的时候可以用来描述目标内容，可用于所有文本搜索和替换的操作。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var patt = /w3cschool/i
    2 /******
    3 /w3cschool/i  是一个正则表达式。
    4 
    5 w3cschool  是一个模式 (用于检索)。
    6 
    7 i  是一个修饰符 (搜索不区分大小写)。
    8 *****/

demo

通常用于两个字符串方法：search( )和replace( )

search（）用于检测字符串中指定子串，返回子串的起始位置。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var str = "Visit w3cschool"; 
    2 var n = str.search(/w3cschool/i);
    3 //输出结果为6

replace（）用于在字符串中用一些字符替换一些字符,或者替换一个与正则表达式匹配的子串.

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 var str = "Visit Microsoft!"; 
    2 var res = str.replace(/microsoft/i, "w3cschool");
    3 //输出结果为Visit w3cschool!

demo

**正则表达式修饰符:**

<table style="width:404px;"> 
 <tbody> 
  <tr> 
   <td>修饰符</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>i</td> 
   <td>执行对大小写不敏感的匹配</td> 
  </tr> 
  <tr> 
   <td>g</td> 
   <td>执行全局匹配(查找所有匹配,而不是找到都一个匹配后就停止)</td> 
  </tr> 
  <tr> 
   <td>m</td> 
   <td>执行多行匹配</td> 
  </tr> 
 </tbody> 
</table>

**正则表达式模式:**

表格很繁多,请进入[W3CJS教程正则表达式详细细节][W3CJS]查看.

转载于:https://www.cnblogs.com/edward-life/p/10715826.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211217/740c6d907cfb433296b3e213425d81ee.png
[W3CJS]: https://www.w3cschool.cn/javascript/js-regexp.html