JavaScript语法基础（变量，数据类型，运算符，程序控制语句）

冰冻果冻

已于 2024-11-01 23:50:48 修改

阅读量1.1k

点赞数 30

文章标签： javascript 开发语言 ecmascript

于 2024-11-01 19:37:17 首次发布

本文链接：https://blog.youkuaiyun.com/2401_85545586/article/details/143375947

版权

JavaScript介绍：

JavaScript是一种脚本编程语言，被广泛用于网页开发。它可以与HTML和CSS结合使用，添加交互性和动态效果。JavaScript最初是为了在网页上进行简单的客户端验证和小型功能而创建的，但现在已经发展成一种功能强大的语言，可以用于开发复杂的网页应用、移动应用和服务器端应用。

JavaScript由ECMAScript标准规范定义，它提供了语法、数据类型、控制结构和函数等基本元素。JavaScript还有一套内置的对象和方法，用于处理字符串、数组、日期、数学计算等常见操作。此外，JavaScript还支持面向对象编程，可以创建和使用自定义对象。

JavaScript可以通过嵌入式方式直接写在HTML文件中，或者作为外部文件被引用。它可以被所有现代的网页浏览器解析和执行，因此成为了网页开发中的重要组成部分。JavaScript还有一些流行的框架和库，如jQuery、React和Vue.js，可以简化开发过程并提供更多的功能。

JavaScript主要输出方式：

  <title>JS的输出方式</title>
</head>
<body>


    <!-- 在现代Web前端开发中已经不推荐使用，因为它会覆盖整个页面的内容 -->
    <script> 
        document.write("第二种：直接在网页页面中进行输出"); 
    </script>

    <!-- 代码调试时，偶尔能用一下 -->
    <script> 
        alert("第一种：通过浏览器弹出框进行输出"); 
    </script>

    <!-- 主要用于代码的调试，强烈推荐这种方式 -->
    <script> 
        console.log("第三种：通过浏览器控制台进行输出！此方法最常用！"); 
    </script>

</body>
</html>

运行结果：

第一种运行方式：

第二种运行方式：

第三运行方式：

JavaScript变量

列如：

</head>
<body>
<script>
var x=7;
var y=6;
var z=x+y;
console.log(z)
    </script>
</script>

控制台输出结果：

在代数中，我们使用字母（比如 x）来保存值（比如 7）。通过上面的表达式 z=x+y，我们能够计算出 z 的值为 13。在 JavaScript 中，这些字母被称为变量。

基本数据类型

JavaScript有4种基本的数据类型。

（1)number(数值)类型：可为整数和浮点数。在JavaScript 程序中没有把整数和实数分开，这两种数据可在程序中自由转换。整数可以为正数、0或者负数；浮点数可以包含小数点，也可以包含一个e(大小写均可，表示10的幂），或者同时包含这两项。

（2)string(字符）类型：字符是用单引号““”或双引号““”来说明的。

（3)boolean（布尔)类型：布尔型的值为true或false。

（4)object(对象)类型：对象也是JavaScript中的重要组成部分，用于说明对象。JavaScript 基本类型中的数据可以是常量，也可以是变量。

运行代码：

  <script>
        // string类型
  var str="Good morning!"; 
  document.write(str + " -> 数据类型："+ typeof str + "<br>"); 

 // 数字 number
 var x1=65.30;
        document.write(x1 + " -> 数据类型："+ typeof x1 + "<br>");
 // 布尔值 boolean
 var x=true;
        document.write(x + " -> 数据类型："+ typeof x + "<br>");
      // 对象 object   （对象类型下的数组类型）
        var persons=new Array("Tom","Jack","Kate");
        document.write(persons + " -> 数据类型："+ typeof persons + "<br>");
  // 未定义类型 undefined
  var person1;
        document.write(person1 + " -> 数据类型："+ typeof person1 + "<br>");
    </script>

运算符：

JavaScript中常用的运算符有：

算术运算符：+（加）、-（减）、*（乘）、/（除）、%（取余）、++（自增）、--（自减）
赋值运算符：=（赋值）、+=（加并赋值）、-=（减并赋值）、*=（乘并赋值）、/=（除并赋值）、%=（取余并赋值）
比较运算符：==（相等）、!=（不相等）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）
逻辑运算符：&&（与）、||（或）、!（非）
位运算符：&（按位与）、|（按位或）、^（按位异或）、~（按位取反）、<<（左移）、>>（带符号右移）、>>>（无符号右移）
条件（三元）运算符：?（条件判断）、:（条件成立返回结果）
typeof运算符：检测数据类型
delete运算符：删除对象的属性
in运算符：判断一个对象是否包含特定的属性
instanceof运算符：判断一个对象是否为指定类型的实例

运行代码：

 <script>
        //  加减乘除运算符
        console.log(10 + 10);

        // 取余运算符
        console.log(13 % 5);
        // 算术赋值结合运算符
         // 等同于 x = x + y
        var x = 2;
        var y = 1;
        console.log(x += y); 
         // 等同于 x = x - y
         var x = 2;
        var y = 1;
        console.log(x -= y);  //1

        // 等同于 x = x * y
        var x = 2;
        var y = 1;
        console.log(x *= y);  //2

        // 等同于 x = x / y
        var x = 2;
        var y = 1;
        console.log(x /= y);  //2

        // 等同于 x = x % y
        var x = 2;
        var y = 1;
        console.log(x %= y);  //0

        // 比较运算符
        var num1 =  10 ;
        var num2 =  10 ;
        var num3 = "10";
        console.log(num1 == num2);       // true
        console.log(num1 === num2);      // true
        console.log(num1 === num3);  
        // 取反运算符
        console.log(!undefined);         // true
        console.log(!null);              // true
        console.log(!0);
        console.log(!NaN);               // true
        console.log(!"");                // true
          // NaN的意思是“Not a Number”，即“非数值”或“不是一个数值”，
        // 它用于表示一个本来要返回数值的操作数未返回数值的情况。
        // NaN通常出现在数学运算中，以下几种情况可能导致NaN的产生：
        // 除以0：在进行除法运算时，如果除数为0，那么结果就无法定义，通常会被设置为NaN。
        // 非法数学运算：当进行一些非法数学运算时，比如对负数进行平方根运算，结果也会被设置为NaN。
        // 数据类型不匹配：在类型转换时，如果类型转换失败或者转换后的结果不是有效数值，结果也会被设置为NaN。
        // 数值溢出：当进行数值计算时，如果计算结果超出了所能表示的范围，结果也会被设置为NaN。
        // 缺失数据：在某些数据分析任务中，如果数据中存在缺失值，那么在进行数据计算时，结果也会被设置为NaN。

        //  且运算符（&&）
        console.log(10 < 20 && 10 > 5);

        //  或运算符（||） 
        console.log(10 < 20 || 10 > 5); 
//   自增自减运算符 
// 自增和自减运算符有一个需要注意的地方，就是放在变量之后，会  先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会
//   先进行自增/自减操作，再返回变量操作后的值。 
var a = 1;
        var b = 1;
        console.log(++a);  // 2
        console.log(--b);  // 0
        
        var x = 1;
        var y = 1;
        // 放在变量后
        console.log(x++);  // 1  即返回： x
        console.log(x);    // 2 
        // 放在变量前
        console.log(++y);  // 2  即返回： y+1

    </script>




    </script>

运行结果：

程序控制语句

1.if语句

ody>
    <script>
if(条件){
语句1;
语句2;
// ...


}

 // if语句
    var num = 3;
        if (num === 3) 
        {
            num++;
        }
        console.log(num);   // 4

2.if else 语句

  // if...else...语句（及其嵌套使用）
        var eat = true;
        var food = "猪肉炖粉条";
        if (eat) 
        {
            if (food == "双椒鱼头") 
            {
                console.log('就吃：双椒鱼头'); 
            }
            else
            {
                console.log("就吃：猪肉炖粉条");
            }
        } 
        else 
        {
            console.log('还没到饭点');
        }


        //  多向判断语句  if...else if...else...
        var greeting="";
        var time=new Date().getHours();
        if (time<12)
        {  greeting="现在是上午";  }
        else if (time<18)
        {  greeting="现在是下午";  }
        else
        {  greeting="现在是晚上";  }

        console.log(greeting);

3.switch语句

   //  多向判断语句  switch
        var x = 3;
        switch (x)
        {   
            case 0 :  console.log("x为0");  
                      break;
            case 1 :  console.log("x为1");  
                      break;
            default : console.log("x既不是0也不是1");  
        }

循环语句：

4.for循环语句

  // for循环语句
for (初始化;条件;增量);
{
语句段


}

  for(i = 0 ; i<10; i ++)
        {
            if( i % 2 ==1)
            {
                console.log("奇数："+i); 
            }
            else
            {
                console.log("偶数："+i); 
            }
        }

        // 初始化表达式，布尔表达式，迭代因子都不写的话，
        // 就是永久循环（死循环），不推荐这种写法。
        // for ( ; ; )
        // {
        //     console.log('你爱我吗?');
        // }

5.while 循环语句：

var i = 0;
        while (i < 10) 
        {
            console.log('i的值为:' + i);
            i = i + 1;
        }
        // 永久循环（死循环），如果确实需要永久循环，推荐这种写法。
        // while (1) 
        // {
        //     console.log('每天早上对你说一句肉麻话: 我爱你,中国');
        // }

、