JS基础语法

---

一、JS是什么？

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。目前也是互联网上最流行的脚本语言，是前端学习中需要熟练运用的语言。

二、JS基础语法

1.变量

变量可以用于存储数据，在JS中，变量必需以字母或$、_开头，且区分大小写。

声明变量

JS中，通过var来声明变量，用const来声明常量，用let来声明只在 let 命令所在的代码块内有效的变量。

<script>
        const Pi=3.1415;
        var x=10;
        document.write(x+"<br>");
        {
            let x=2;
            document.write(x+"<br>");
        }
 </script>

在声明变量时，可以一个语句声明多个变量，也可以在声明变量时为其赋值。

<script>
        var x=5;
        var y=6,z;
        z=x+y;
        document.write(x + "<br>");
        document.write(y + "<br>");
        document.write(z + "<br>");
        </script>

在声明变量，但未赋值的情况下，该变量的值默认为undefined。

数据类型

JS中基本数据类型有：字符串型，数字型，布尔型，对空型，未定义型，Symbol型；
引用数据类型有：数组，对象，函数。

数据类型	描述
字符串	可以是任意文本，需加双引号或单引号
数字型	为64位的浮点型，可以加小数点，或者不加
布尔型	即逻辑型，只有true 和 false 两个值
对空型	null，可以清空变量
未定义型	undefined，说明变量没有值
数组	可以存储一系列的值，每个值的类型可以不一样
对象	JS中的所有事物都可以是对象
函数	通过function定义，是一个表达式

对象

一个对象可以包含多个值，每个值以 name：value的形式呈现。

        <script>
        var person={firstname:"Tom ",lastname:"Jerry", age:20};
        </script>

对象包含属性和方法，其中可以通过以下两种方法访问对象的属性：

 <script>
        var person = {
            firstname: "Tom ",
            lastname: "Jerry",
            age: 20
        };
        document.getElementById("demo").innerHTML =
            person["firstName"] + " " + person["lastName"];
    </script>

数组

数组可以一次存放多个值,如下：

    <script>
        var candy=["straberry","orange","apple"];
    </script>

函数

function作为创建函数的标志，通过调用函数，可以重复使用其中的代码块。函数可以带参数，也可以没有，下面是一个没有参数的例子。

    <script>
       function myFunction(){
            alert("Hello world!");
        }
    </script>
    <button onclick="myFunction()">点我试试</button>

在带参数的函数中，==参数不必写出其数据类型，==当然，函数也可以有返回值，例如：

   <script>
        function myAdd(){
            var x = 5;
            return x;
        }
    </script>

typeof, null, 和 undefined

typeof
typeof 可以检测数据的类型

    <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = typeof "car"+"<br>"+
        typeof 1.23+"<br>"+typeof false+"<br>"+typeof [1,2,3]+"<br>";
    </script>

null && undefined
null表示一个空对象，undefined是没有设置值的变量，两者看起来很相似，但是其类型不同，null的类型为object，而undefined的类型为undefined。

类型转换

JS中可以进行类型转换，Number()可以转换为数字型，String()可以转换为字符串，Boolean()可以转换为布尔型。
Number()
Number()方法可以将字符串变为数字,可以将布尔型转化为0、1

<p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML = Number(3.14)+"<br>"+Number(" ")+"<br>"+
        Number("99 1")+"<br>"+Number(false)+"<br>"+Number(true)+"<br>";
    </script>

字符串为数字则返回数字，为空字符则返回0，其他的字符串会转换为 NaN (不是个数字)。

Number()方法中toString()也可以将变量转换成字符串

    <script>
        var y=33;
        document.getElementById("index").innerHTML = y.toString()+"<br>"+
        (123).toString()+"<br>"+false.toString()+"<br>";
    </script>

更多关于Number()

String()
String() 可以将数字,布尔型转换为字符串

   <script>
       var x=133;
        document.getElementById("index").innerHTML = String(123)+"<br>"+
        String(x)+"<br>"+String(100+33)+"<br>"+String(false)+"<br>";
    </script>

一元运算符 +
通过+可以将变量转换为数字
注意+在等号后面

    <script>
        var c="5";
        var d=+c;
        document.getElementById("set").innerHTML = typeof c+"<br>"+
        typeof d+"<br>";

    </script>

2.JS语句

JS语句向浏览器发出命令，各个语句之间用分号隔开，结束语可以没有分号

在这里插入代码片

语句标识符
JS语句常以语句标识符开始，一下为部分JS的语句标识符。

标识符	描述
break	用于跳出循环
continue	跳出循环中的某一次循环
var	声明变量
for	在条件语句为 true 时，可以进行循环
while	在条件语句为true时，可以执行循环
function	定义一个函数
return	退出函数

条件语句

1. if语句
2. if…else…语句
3. if…else…if…else…语句
4. switch语句
前三种语句在指定条件为真时，才执行相应代码，如下：

  <script>
        if(x<10)
        {
            document.write("小于10<br>");
        }
        else if(x>=10&&x<20)
        {
            document.write("大于等于10且小于20<br>");
        }
        else
        {
            document.write("未在范围内！<br>");
        }

    </script>

switch语句有多个选择，指定条件符合哪个选择，就执行相应的语句，例如：

  <script>
        switch(x)
        {
            case 10:
                document.write("大小为10<br>");
                break;
            case 11:
                document.write("大小为11<br>");
                break;
        }
    </script>

循环语句

1. for循环
2. while循环
3.do…while循环

for循环：

   <script>
        var ice="vanilla-icecream";
        for(var i=0;i<ice.length;i++){
            document.write(ice[i]+"<br>");
        }
    </script>

while循环 & do…while循环：

        while(i<3)
        {
            document.write(i+"<br>");
            i++;
        }
        do{
            document.write(i+"<br>");
            i++;
        }
        while(i<3)
    </script>

do…while循环比while循环多执行一次代码。

break和continue
break可以跳出循环，执行循环后面的代码；而continue是只跳过本次循环，其后将继续执行下一次循环。

3.注释

注释可以用于解释代码，在JS中， // 为单行注释，/* */ 为多行注释。

    <script>
        //声明变量且赋值
        var a=5;
        var b=6;
        /* 声明了两个变量，a、b
          并且给其赋值 */
    </script>

可以看出，JS的语句标识符与C语言中的语句相类似。

4.运算符

JS运算符分为算术运算符，赋值运算符，逻辑运算符和比较运算符。在此列出了四个类别的一些常用运算符。

算术运算符	描述
+、-- 、* 、/	加减乘除
%	求余/取模
++	自增
–	自减

如果把数字与字符串相加，结果将成为字符串！

   <script>
        var a=5;
        var b="Halo";
        var c=a+b;
        document.write(a+"<br>");
        document.write(b+"<br>");
        document.write(c);
    </script>

赋值运算符	描述
=	赋值：x=y，将y的值赋给x
+=	x+=y，x+y赋值给x
-=	x-=y，x-y赋值给y
*=	x*=y，x*y赋值给x
/=	x/=y，x/y赋值给x
%=	x%=y，x%y赋值给x

逻辑运算符	描述
&&	与
	或
！	非

比较运算符	描述
==	等于
！=	不等于
===	绝对等于（值和类型都相同）
！==	不绝对等于（值和类型有一个不相等，或两个都不相等
> 、<	大于，小于
>= 、<=	大于等于，小于等于

5.正则表达式

正则表达式是由一个字符序列形成的搜索模式，可用于文本搜素和文本替换

/正则表达式主体/修饰符(可选)
var x = /water/i

正则表达式主体	描述
[zbc]	查找[ ]内的任何字符
[0…9]	查找从0到9的数字

修饰符	描述
i	不区分大小写的匹配
g	查找所有匹配且找到第一个匹配后继续查找
m	执行多行匹配

在JS中，正则表达式常用于search()方法和replace()方法中

search()
search()方法可以用于检测字符串中指定的子字符串，或者和正则表达式相匹配的字符串，并且返回该子串的起始位置，如下：

  <script>
        var str="I am kiko!"
        var n=str.search(/kiko/i);
      //var n = str.search("kiko");
        document.write(n);
    </script>

replace()
replace()方法对字符串进行替换

     <p id="get">Be the same. </p>
     <script>
        var str1=document.getElementById("get").innerHTML;
        var txt = str1.replace(/same/i,"one");
        document.getElementById("get").innerHTML = txt;

    </script>

正则表达式了解更多

三、总结

JS基础语法和其它高级编程语言的基础语法类似，像C语言，Java等等，所以有这些语言的基础，学习JS的基础语法会比较简单，以上总结的语法比较零散，且不完善…@#@…（目前我还没学完…），对于知识点的掌握还不熟悉，需要继续练习！！@^@！