JavaScript基本语法

一、变量

1.变量的赋值与声明

1.变量可以先声明后赋值。

        如：

             声明变量

var boy;

var girl;



console.log(boy);  //undefined(未定义的)

console.log(girl);

             为变量赋值          

 boy="jack";

 girl="lily";



 console.log(boy);  //jack

 console.log(girl); //lily

2.变量可以声明的同时赋值。

        如：

  var myAge = 16;

  var myHeight = 188;



  console.log(myAge);

  console.log(myHeight)

2.let声明变量

let是ES6新引入的关键字，用来替代var关键字。(ES6指2015年推出的ECMAScript语法。)

1.使用var声明的变量，可以多次赋值，但是其结果只与最后一次赋值有关。

如：

   var boyFriend = "魏大勋";

   var boyFriend = "魏晨";

   var boyFriend = "白敬亭";

   console.log(boyFriend);（结果为白敬亭）

2.let不允许在一个代码块里有变量和他取一样的名字，但是允许修改同一个变量值。

如：

 let boyFriend = "吴亦凡";

 boyFriend = "蔡徐坤";

 console.log(girlFriend);（结果为蔡徐坤）

  3. 一个花括号{}就是一个代码块

       如：

let boyFriend = "吴亦凡";

boyFriend = "蔡徐坤";

console.log(girlFriend);（结果为蔡徐坤）

//如此不会报错

3.const声明变量

   let/var声明可以改变

   const声明的变量不能改变，即常量

如：

错误写法：     

   const a = 3.14;

   a = 3.15;

   console.log(a);

 正确写法：

  const a = 3.14;

  console.log(a);

注：const在声明时就赋值。

4.变量声明的区别

        (1)初始化要求不同

                使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

        (2)重复声明不同，

                使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，

         而使用const声明的变量,在整个运行过程中不能修改初值.

         (3)对块级作用域的支持不同。

                (使用一对花括号括起来的代码称为一个代码块所谓块级作用域，  

         就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。  

         使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。)

二、数据类型

1.数据类型分类    

        简单数据类型存储在栈内存中。

        复杂数据类型的内存存储在堆内存中，地址存储在栈内存中。

2.基本数据类型

 (1) [Boolean-布尔型]          

let flag1 = true;

let flag2 = false;

        //True,False,TURE,FALSE等写法都为错误。

   console.log(flag1)

   let flag3 = "true"

   console.log(flag3);

  (2) [number-数字型]

   let age = 18;

   let date = "0306";

   console.log(age);

   console.log(date);



   console.log(Number.MAX_VALUE); //最大值

   console.log(Number.MAX_VALUE*2); //Infinity(无穷大)



   var a = 3-"b";

   console.log(a); //NaN (Not a Number) NaN也属于数字类型

        // isNaN判断是否是一个非数字，

        // 如果是数字类型则为false；

        // 如果非数字类型则为true。                       

 console.log(isNaN(a)); //true

 console.log(isNaN(111)); //false

 console.log(isNaN("abc")); //true

   (3) [string-字符串]             

   let demo1 = "字符串";

   let demo2 = '字符串';

   let demo3 = `字符串`;

   let demo4 = "老师说：'今天晚上不上晚自习'";



   console.log("111\'222");

   (4) [undefined-未定义类型]

        // 表示声明的变量还未赋值               

 let grade;

 console.log(grade); //undefined

   (5) [null-空]             

   var a = null;

   console.log(a); //null

3.数据类型的检测

         （1）isNaN 检验是否是一个非数字

如：              

  console.log(isNaN(111)); //false

  console.log(isNaN("abc")); //true

        （2）typeof() 

如：               

 console.log(typeof("123")); //string

 console.log(typeof(false)); //boolean

 console.log(typeof(NaN)); //number

 console.log(typeof('aaa'*2)); //number (字符串进行计算答案都为NaN）

注：

               布尔类型true，会在运算中转化为数字1

               布尔类型false，会在运算中转化为数字0

        如：               

console.log(2-true); //1

console.log(typeof(2-true)); //number

                加号遇上字符串，做拼接使用

        如：               

 console.log(2+"true"); //2true

 console.log(typeof(2+"true")); //string

4.数据类型转换

        （1）将数据类型转换为布尔类型

                                使用Boolean()进行转换

          1、字符串类型和数字类型都会转化为布尔类型的true             

  var a = Boolean("a")

  console.log(a); //true

  console.log(Boolean(123)); //true

            2、空字符串转化为布尔类型的false，空格字符串转化为布尔类型的true。                

console.log(Boolean("")); //false

console.log(Boolean(" ")); //true

             3、 数字0转为布尔类型的false。

console.log(Boolean(0)); //false

              4、NaN,undefined,null转化为布尔类型的false。              

  console.log(Boolean(NaN)); //false

  console.log(Boolean(undefined)); //false

  console.log(Boolean(null)); //false

        （2）将数据转化为字符串类型

                                使用String()或者toString()进行转换

       如：                 

let num = 1;

console.log(num); //数字类型的1

let num2 = String(num);

console.log(num2); //字符串类型的1

        （3）将数据转化为数字类型

                        使用Number()进行转换

如：                

console.log(Number(123)); // 数字类型的123

console.log(Number("123")); //数字类型的123

console.log(Number("")); // 0(空字符)

console.log(Number(" ")); // 0(空格字符)

console.log(Number(null)); // 0

console.log(Number(undefined)); // NaN

console.log(Number(false)); // 0

console.log(Number(true)); // 1

console.log(Number("true")); //NaN

console.log(Number("123.1")); //123.1

三、运算符

（1）算术运算符

若：         

let a = 10;

let b = 20;

     1.加法运算符 

 console.log(a+b); //30

      2. 减法运算符

 let c = b-a;

 console.log(c); //10

       3. 乘法运算符

console.log(c*b); //200

       4. 除法运算符 

b = b/a;

console.log(b); //2

        5. 取模运算 取余运算符

  console.log(26%5); //1

        6. 幂运算符

console.log(2**10); //1024

// 2*2*2*2*2*2*2*2*2*2

         7. 自增运算

  m = 5;

  n = ++m;

  console.log(m); //6

  console.log(n); //6



  m = 5;

  n = m ++;  

  console.log(m); //6

  console.log(n); //5



  var x =1; y = 2;

  console.log(++x); //2

  console.log(x); //2

  console.log(y++); //2

  onsole.log(y); //3

注： ++在前，先计算完再访问打印；++在后，先访问打印再计算。

         8.自减运算

  q = 2;

  p = q--;

  console.log(q); //1

  console.log(p); //2



  var d = 10;

  console.log(++d); //11

  console.log(d); //11

  console.log(d--); //11

  console.log(d); //10

注：如++符一样，--在前，先计算完再访问打印；--在后，先访问打印再计算。

（2）字符串运算符&隐式转换

<!--

        隐式转换：当两个数据类型不同时，JavaScript会按照既定的规则进行转换。 

        字符串运算符：+遇上字符串做拼接使用

-->

如：               

 console.log(1 + 1); //2

 console.log(1 + null); //1

 console.log(1 + true); //2

 console.log(1 + false); //1



 console.log("12" - 0); //12

 console.log(undefined * null); //NaN



 console.log(1 + "1"); //11(字符串)

 console.log(1 + "null"); //1null(字符串)

 console.log(null + "undefined"); //nullundefined(字符串)

（3）赋值运算符

若：                 

 let a = 10;

 let b = 20;

        1. 赋值

let c = a+b;

        2. 加等于/加并赋值 +=

   a += b;（加）  等于 a = a+b;

   console.log(a); //30

   console.log(b); //20



   a -= b;（减）

   console.log(a); //10

   console.log(b); //20

   // a = a - b;



    a*=b;（乘）

    a/=b;（除）

    a%=b;（取余）

    a**=b;（幂）

（4）比较运算符

         1. != (不等于）              

console.log(4 != 5); //true

console.log(4 != 4); //false

        2. !==(不全等)              

console.log(5 !== "5"); //true

        3. == (等于,不拘小节）         

 console.log(4 == "4"); //true

        4. === (全等，一丝不苟)             

console.log(4 === "4"); //false

注：

                ==和!=在比较不同数据类型时，会将比较的数据转化为相同的数据类型。

                ===和!==则不会进行数据类型的转换。

     （5）逻辑运算符

                1. && 逻辑与运算符，一假则假

如：                                 

console.log(true && true); //true

console.log(false && true); //false

console.log(false && false); //false

                2.|| 逻辑或运算符，一真则真

如：

console.log(true || true); //true

console.log(true || false); //true

console.log(false || false); //false

                3.! 逻辑非运算符，真作假来假作真

如：

console.log(!true); //false
console.log(!false); //true

(6)三元运算符

        三元运算符公式：条件表达式 ？ 表达式1 ： 表达式2

        // 如果条件表达式的值为true，则返回表达式1的执行结果。

        // 如果条件表达式的值为false，则返回表达式2的执行结果。

如：

var age = prompt("请输入你的年龄")
console.log(age);
var res = age >=18 ? "欢迎来到成年世界" : "小孩禁止访问"
document.write(res)

（7）运算符优先级

 // 一元运算符 > 比较运算符 > 逻辑运算符(逻辑与>逻辑或) > 赋值运算符

1.比较运算符 > 逻辑运算符

let a = 3>5 && 2<7 && 3==4
console.log(a); //false

2.逻辑与运算符 > 逻辑或运算符

 let b = 3<5 || 2>7 && 3=="3"
 // true || false && true
 console.log(b);

3.比较运算符 > 赋值预算符

 let c = 2 == "2"
 console.log(c); //true

4.小括号内优先运算

 let d = !c && (b || a)
 console.log(d); //false

四、流程控制

(1)选择结构

 1.if语句

表达式：

         if (条件表达式) {代码段}



             let age = prompt("请输入您的年龄")

             if (age>=18){

                 document.write("欢迎进入本网站")

         }

  2.if...else语句(双分支)

 表达式：

if (条件表达式) {代码段1} else {代码段2}



        let age = prompt("请输入您的年龄")

        if (age>=18){

            document.write("欢迎进入本网站")

        } else{

            document.write("小孩请离开")

        }

    3.if..else if..else语句(多分支)    

表达式：

         if(条件表达式1){

             条件表达式1的结果

         }else if (条件表达式2){

            条件表达式2的结果

         }else if (条件表达式3){

             条件表达式3的结果

         }else{

            除去表达式123之外的结果

         }

        let cj = prompt("输入成绩")
        if (cj==100){
            document.write("恭喜获得奖学金")
        }else if(cj<100 && cj>80){
            document.write("优秀")
        }else if(cj<=80 && cj>=60){
            document.write("合格")
        }else if(cj<=60 && cj>=40){
            document.write("有补考机会")
        }else if(cj<=40 && cj>=20){
            document.write("挂科")
        }else {
            document.write("留级")
        }

4.switch语句

条件表达式：

        // case-情况;break-跳出语句。
        // switch(表达式){
        //     case 值1:
        //          代码段
        //     break;

        //     case 值2:
        //          代码段
        //     break;

        //     case 值3:
        //          代码段
        //     break;

        //     ....

        //     default:
        //          代码段n;
        // }

示例：

 let subject = +prompt('请输入你想想选择的专业：1-区块链专业；2-UI专业；3-土木专业；4-农林专业')
        console.log(subject);
        switch(subject){
            case 1:
            document.write('恭喜你，开始坐牢了');
            break;
            case 2:
            document.write('恭喜你，开始和AI开卷');
            break;
            case 3:
            document.write('恭喜你，去打灰吧');
            break;
            case 4:
            document.write('恭喜你，回家养猪咯');
            break;
            default:
                document.write('请输入你的专业')
            break;
        }

（2）循环结构

1.for循环

条件表达式：

        for(初始化变量;条件表达式;操作表达式){
             循环体
         }

示例：

       需求：在控制台输入1~100的整数
        for(var i=1;i<=100;i++){
            console.log(i);
        }

2.while语句

条件表达式：

 while(条件表达式){循环体}

示例：

    // 初始化变量
    var c=1;
    while(c<=1){
        console.log(c);
        c++
    }

3.do...while语句

条件表达式：

do { 循环体 }while (表达式)

示例：

    var d=1; 
    do{ d++
        console.log(d);
    }while(
        d<=100
    )    

注：while与do...while的区别

         while语句先判断条件表达式的值，再根据条件表达式的值决定是否执行循环体。

         do...while语句会先无条件执行一次循环体，然后在判断条件表达式的值。

         do...while至少会执行一次。

（3）跳转语句

1.break语句

      for(var i = 1; i <= 5 ; i++){

            if(i=3){
                console.log("吃到了毒苹果");
                break; //跳出整个循环
            }

            console.log("我吃完了第"+i+"个苹果");
}

2.continue语句

      for(var n = 1; n <= 5 ; n++){

            if(n == 3){
                console.log("吃到了虫苹果");
                continue;
            }


            console.log("我吃完了第"+n+"个苹果");


        }

注：break语句与continue语句区别

         break语句会立即跳出整个循环，也就是循环结束。

        continue语句用来立即跳出本次循环，也就是跳过continue语句后面的代码，

        继续下一次循环

（4）循环嵌套

  // 需求，在控制台输出四列四行的“*”
        var str=''
        // 成列
        for(var i = 1; i<=4; i++){

            // 成行
            for(var j=0; j<4;j++){
                str += "*"
            }
            str += "\n"
        }
        // "\n"是换行的转义符
        console.log(str);