JavaScript基础语法

Posted 2021-06-27 栗栗本栗

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础语法相关的知识，希望对你有一定的参考价值。

基础语法

变量

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<arr1JavaScript基础语法
 JavaScript基础语法+数据类型
 JavaScript：基础语法
 javascript基础加固3—-语法2
 JavaScript的一些基础语法和常用方法（附代码）
 javascript基础语法