JavaScript的基本语法

LyyLt1212

已于 2024-04-07 10:37:28 修改

阅读量859

点赞数 5

文章标签： javascript 前端开发语言

于 2024-03-14 07:38:03 首次发布

本文链接：https://blog.csdn.net/LyyLt1212/article/details/136482390

版权

一.变量的声明与赋值

1.先声明后赋值

先给变量命名

后再用变量="XX" （对变量赋值）

console.log(XX) (检查变量)

2.声明的同时并赋值

变量类型变量名=赋值

二.let声明变量

语法

let 变量名=“变量值”

let不允许在一个代码块结束有变量和它一样的名字，但是允许修改同一个变量值

三.var声明变量

语法

var 变量名=“变量值”

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

四.const

const 变量名=变量值

const是常量，不可改变

五.数据类型分布

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

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

六.基本数据类型

1.Boolean数据类型

Boolean数据类型的结果只能为true或false

True False TRUE FALSE这些写法都是错误

2. number数据类型

        let age=18;

        let date ="0306";

        console.log(age); //18

        console.log(date);  //0306



        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("false"));//true

3.String-字符串

        let demo1="字符串";

        let demo2='字符串';

        let demo3='字符串';

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



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

4.undefined--未定义型

表示声明的类型还未赋值

         var myScore;

        console.log(myScore);//undefined

5.null--空

        var a=null;

        console.log(a);

七.数据类型检测

typeof()检测是什么数据类型

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

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

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



        console.log(typeof(undefined));//undefined

        console.log(typeof(null));//object



        console.log(typeof('aaa'*2));//number

        console.log(typeof("aaa"*2));//NaN



        console.log(2-"true");//NaN

        console.log(typeof(2-"true"));

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

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

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

        console.log(typeof(2-true))

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

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

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

八.数据类型转换

1.将数据类型转换为Boolean类型

字符串类型和数字类型都会转化为Boolean类型的true

空字符串为Boolean类型的false，空格字符串转为true

数字0转换为Boolean类型为false

       Bealean()

        var a=Boolean("a")

        console.log(a);//true

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

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

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

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

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

        console.log(Boolean(null));false

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

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

        let num=1;

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

        let num2=String(num);

        console.log(num2);//1字符串类型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

        console.log(Number("123.a"));   //NaN

九.运算符

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

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

++或--在前，先计算后打印，++或--在后，先打印后运算

9.赋值运算

    a+=b;

    a=a+b;



    a-=b;

    a=a-b;

10.比较运算

!= 不等于

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

==等于

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

===全等于

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

!==不全等于

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

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

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

十.逻辑运算符

逻辑与运算符

&&代表逻辑与运算符一假则假

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

以上结果依次为 true false false false

逻辑或运算符

||代表逻辑或运算符一真则真

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

逻辑非运算符

!代表逻辑非运算符真作假假作真

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

三元运算符

格式 : 条件表达式？表达式1 : 表达式2

如果条件表达式的值为true，则返回表达式1

如果条件表达式的值为false，则返回表达式2

运算符优先级

一元运算符 > 比较运算符 > 逻辑运算符（逻辑与运算符>逻辑或运算符） > 赋值运算符

let a = 3>5 && 2<7//false

 let b=3>5 || 2<7 &&3==4//false

十一.流程控制

1.if语句

格式：if(条件表达式){代码块}

if (age>=18) {
   document.write("你可以进入本网站")
}
//你可以进入本网站

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

格式:if(条件表达式){代码块}else{代码块}

if (age>=18) {
             document.write("你可以进入本网站")
   }else{
             document.write("不可以进入")
}//如果满18岁则输入你可以进入本网站 反则不可以进入

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

格式:

if(条件表达式){条件表达式1的结果}else if(条件表达式2){条件表达式2的结果}else if(条件表达式3){条件表达式3的结果 }else{除去123之后的结果}

4.switch语句

switch语句
case--案例   break--跳出语句
switch (表达式) {
     case 1:
     代码段;
     break;
     case 值2:
      代码段;
       break;
       case 值3:
       代码段;
       break;
         ...  
        default;
         代码段n
}

十二.循环结构

1.for语句

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

控制台输出从1~~100的整数

for(var i=1;i<=100;i++){
       console.log(i);
       document.write(i)
        }

控制台输出0~100的偶数

for(var l=0;l<=100;l++){
            if(l%2==0){
            console.log(l);
            document.write(l+" ")
            }
        }

2.while语句

2.while语句
 while(条件表达式){循环体}

3.do...while语句

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

练习用do...while 求2+4+6+....1000的值

var num=0;
var sum=0;
do{
    num++
    if(num%2==0){
    sum+=num
   }
    }while(num<=100);
 console.log(sum);

while和do...while的差别

while语句先判断条件表达式的值，再根据条件表达式的值决定是否执行循环体
do...while语句会无条件执行1次循环体，然后再判断条件表达式的值
再根据判断的值决定是否继续循环

十三.跳转语句

break语句

for(var i=1;i<=5;i++){
         if(i==3){
         console.log("吃到了毒苹果");

                  }break//跳出了整个循环

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

continue语句

 for(var n=0;n<=5;n++){
            if(n==3){
            console.log("吃到了虫苹果");
            continue
            }
           console.log("我吃完了第"+n+"个苹果");
        }
吃完了第一个苹果
吃完了第二个苹果
吃到了虫苹果
吃完了第四个苹果
吃完了第五个苹果

continue和break语句的区别

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

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