【JavaScript】基础语法

Source

变量

  • var定义的变量,没有块的概念,可以跨块访问,不能跨函数访问
  • let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问
  • const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改;同一个变量只能使用—种方式声明
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <script>
   //使用let const 声明的局部变量,只能在当前代码块中被访问
   //在代码块和函数中声明的变量是局部变量
   //在代码块和函数外声明的变量是全局变量

   //var 没有块作用域的概念
   //在函数中使用var定义的变量是局部变量,只能在该函数内部使用
   //在其他未知使用var定义的变量都是全局变量
   {
      
        
     var a = 100;
     let b = 200;
     const  c = 300;
   }
   // console.log(a);//100
   // console.log(b);//报错
   // console.log(c);//报错

   // function test(){
      
        
   //   var aa = 100;
   //   let bb = 200;
   //   const  cc = 300;
   // }
   // test();
   // console.log(a);//aa is not defined
   // console.log(b);//bb is not defined
   // console.log(c);//cc is not defined
   function test2(){
      
        
     aaa = 100;//在方法中声明的变量,如果 不使用 任何修饰符,在函数被调用的时候,该变量自动升级为全局变量
     console.log(aaa);
   }
   test2();
   console.log(aaa);
 </script>
</body>
</html>

数据类型

JavaScript不区分整数和浮点数;

  • NaN表示 Not a Number,当无法计算结果时用NaN表示;
  • Infinity表示无穷大,当数值超过了JavaScript 的数字所能表示的最大值时,就表示为Infinity ;
  • undefined表示引用的变量未定义。

typeof:使用typeof 操作符可以用来检查一个变量的数据类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  // console.log("Hello World");
  // console.log(100);
  // console.log(108.5);
  // console.log(100/0);//Infinity无穷大
  // console.log(100/'a');//NaN无法计算结果
  // console.log(true);
  // let a;
  // console.log(a);//undefined

  let a1 = 'Zh';
  let a2 = 100;
  let a3 = 10.21;
  let a4 = true;
  let a5 = 100/0;
  let a6;
  console.log(typeof a1);//string
  console.log(typeof a2);//number
  console.log(typeof a3);//number
  console.log(typeof a4);//boolean
  console.log(typeof a5);//number
  console.log(typeof a6);//undefined
  console.log(typeof null);//object
  console.log(typeof window);//object


</script>
</body>
</html>

运算符

算术运算符

boolean类型参与算术运算true 会自动转换为数值1,false 会自动转化为数值undefined和NaN参数算术运算,返回值为NaN.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      let a = 10;
      let b = 3;
      console.log(a+b);
      console.log(a-b);
      console.log(a*b);
      console.log(a/b);//3.3333333333333335
      console.log(a%b);

      console.log(++a + a++ - --b);//11+11-2=20
      console.log(a);//12
      console.log(b);//2

      // boolean类型参与算术运算true 会自动转换为数值1,false会自动转化为数值0
      console.log(a+true);//13
      console.log(false-b);//-2

      //undefined 和NaN参数算术运算,返回值为NaN.
      console.log(a+undefined);//NaN
      console.log(b+NaN);//NaN

  </script>
</body>
</html>

比较运算符

==:会发生类型自动转化
=== :不会发生类型的自动转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <script>

     let a = 100;
     let b = '100';
     console.log(a);//number
     console.log(b);//string
     console.log(a==b);//true 变量内容相同
     console.log(a===b);//false 数据类型和值相同
 </script>
</body>
</html>

逻辑运算符和三元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑&三元运算符</title>
</head>
<body>
  <script>
      let a = 100;
      let b = 200;
      //&& 遇假则假
      console.log(true && true);//true
      console.log(true && false);//false
      console.log(false && true);//false
      console.log(false && false);//false

      console.log(true && ++a >100);//ture
      console.log(a);//101
      console.log(false && ++a >100);//false
      console.log(a);//100

      // || 见真则真
      console.log(true || true);//true
      console.log(true || false);//true
      console.log(false || true);//true
      console.log(false || false);//false

      console.log(true || ++a >100);//true
      console.log(a);//101
      console.log(false || ++a >100);//true
      console.log(a);//102
      
      let result = a > b ? 'Hello':'world';
      console.log(result);//world

  </script>
</body>
</html>

数据类型转换

转换为字符串类型

+”运算符除了用来做算术的加法运算,还可以用来做字符串的拼接。
将其它数据类型转换为字符串有三种方式: toString()、String()、字符串拼接。

转换为数值

有三个函数可以把非数值转换为数值: Number()、parselnt()、parseFloat().

  • Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串
  • parseInt()将字符串转换为整数
  • parseFloat()将字符串转换为浮点数
  • boolean类型参与数学计算可以自动转换为数值
  • 无法完成转换时返回NaN
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //其他数据类型转换为字符串
  //   +     toString()   String()
  // console.log(100+'100');//100100
  // console.log('100'+true);//100true
  // console.log('100'+undefined);
  // console.log('100'+null);
  // console.log('100'+NaN);
  // console.log('100'+Infinity);
  //
  // let a = 100;
  // console.log(a.toString()+100);//100100
  // console.log(typeof new String(a));//object
  // console.log(new String(a)+100);//100100

  //其他数据类型转换为数字
  //Number(),parseInt(),parseFloat()
  let a = '100';
  let b = '3.1415926';
  let c = 'a';
  console.log(typeof Number(a));//number
  console.log(Number(a)+100);//200
  console.log(typeof  parseInt(a));//number
  console.log(parseInt(a)+100);//200

  console.log(parseFloat(b)+100);//103.1415926

  console.log(Number(c));//NaN
  console.log(parseInt(c));//NaN
  console.log(parseFloat(c));//NaN
</script>
</body>
</html>

流程控制语句

分支结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // let age = window.prompt('请输入您的年龄:');
    // console.log(typeof age);
    // console.log(age);
    // if(age<18){
      
        
    //     console.log("未成年");
    // }else if(age<40){
      
        
    //     console.log("有为青年");
    // }else if(age<60){
      
        
    //     console.log("步入中年");
    // }else if(age>=60){
      
        
    //     console.log("进入老年");
    // }else{
      
        
    //     console.log("输入不合法");
    // }

    // let a = Infinity;//true
    // if(a){ //false,0,null,undefine,NaN -> false
    //     console.log('Hello');
    // }

    let num = window.prompt("请输入编码");
    switch (Number(num)) {
      
        
        case 1:
            console.log("春天");
            break;
        case 2:
            console.log("夏天");
            break;
        case 3:
            console.log("秋天");
            break;
        case 4:
            console.log("冬天");
            break;
        default:
            console.log("啥都没有");
    }

</script>
</body>
</html>

循环结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    for (let i = 0; i < 5; i++) {
      
        
        console.log(i);
    }
    //第一次循环执行表达式一,
    // 再执行表达式二,判断是否满足循环条件,满足则进入循环代码
    //执行完循环代码,先执行表达式三,再执行表达式二,再次判断是否满足条件,满足则进入循环代码
    let i = 5;
    while(i<5){
      
        
        console.log(i);
        i++;
    }

    let j = 0;
    do{
      
        
        console.log(j);
        j++;
    }while(j>5);
    console.log(j);//1


    // continue & break
    for(let i = 0;i<5;i++){
      
        
        if(i==3){
      
        
            continue;//继续下次循环
        }
        console.log(i);//0 1 2 4
    }
    console.log('--------------------------------');
    for(let i = 0;i<5;i++){
      
        
        if(i==3){
      
        
            break;//跳出循环
        }
        console.log(i);//0 1 2
    }
</script>
</body>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <script>
       //方式一
       let arr = new Array();
       arr[0] = 'a';
       arr[1] = 100;
       arr[2] = true;
       console.log(arr[0]);
       console.log(arr[1]);
       console.log(arr[2]);
       console.log(arr[3]);//undefined

       //方式二
       //let arr1 = new Array('a',true,200,10.6);

       //方式三
       let arr1 = ['a',true,200,10.5];

       console.log(arr1[0]);
       console.log(arr1[1]);
       console.log(arr1[2]);
       console.log(arr1[3]);


       //数组遍历一
       for(let i = 0;i<arr1.length;i++){
      
        
           console.log(arr1[i]);
       }
       //数组遍历二
       arr1.forEach(function (item,index){
      
        
          // console.log(item);
           console.log(arr1[index]);
       })
   </script>
</body>
</html>

对象

String对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let str1 = '哈哈哈哈哈';
    console.log(typeof  str1);//string
    let str2 = new String("哈哈哈哈哈");
    console.log(typeof  str2);//object
    console.log(str1==str2);//true
    console.log(str1===str2);//false

    let num1 = 100;
    let num2 = new Number(100);
    console.log(typeof  num1);//number
    console.log(typeof  num2);//object
    console.log(typeof  num2.valueOf());//number
    console.log(typeof  num2.toString());//string

    console.log(num2==num1);//true
    console.log(num2===num1);//false


    let b1 = true;
    // 0、null、""、false、undefined、NaN,那么对象的值为false。
    let b2 = new Boolean();

    let s = '';
    if(s){
      
        
        console.log('aa');
    }

</script>


</body>
</html>

日期对象

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let date = new Date();
    console.log(date.getTime());
    //把Date对象转换为字符串
    console.log(date.toString());

    let dateStr1 = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
    console.log(dateStr1);

    let dateStr2 = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    console.log(dateStr1);
</script>
</body>
</html>

自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //{}定义对象   []定义数组
    let stu = {
      
        
        name: '张三',
        age: 18,
        sex: '男',
        love: ['足球', '篮球'],
        cls: {
      
        
            name: '001班',
            num: "001"
        }
    }

    stu.name = "李四";
    console.log(stu.name);
    console.log(stu.love.toString());
    console.log(stu.cls.name);
    console.log(stu.cls.num);
</script>
</body>
</html>