首页 > 编程语言 >JavaScript。—关于语法基础的理解—

JavaScript。—关于语法基础的理解—

时间:2024-11-02 18:17:18浏览次数:5  
标签:语句 console log JavaScript 语法 理解 var const now

一、程序控制语句

JavaScript 提供了 if 、if  else  和  switch  3种条件语句,条件语句也可以嵌套。

(一)、条件语句

1、单向判断 :  if...

(1)概述

< if >元素用于在判断该语句是否满足特定条件。如果条件不成立,<if>元素内的语句不会被执行。

(2)语法格式
        if(条件){
            语句1;
            语句2;
            ...;
        }
(3)举例

运行代码如下:

    <script>
        var a = 8;
        if(a > 3){
            console.log("Ture");
        }
    </script>

运行结果如下:

2、双向判断  : if...else...

(1)概述

用于在判断该语句是否满足特定条件。若“条件”为 ture,则执行语句段1,否则,则执行语句段2.

(2、语法格式
        if(条件){
            语句段1;
        }
        else(条件){
            语句段2,前面条件都不满足时执行;

        }
(3)举例

运行代码如下:

    <script>
        var a = 8;
        if(a>10){
            console.log("Ture");
        }else{
            console.log("False")
        }
    </script>

运行结果如下:

3、多向判断语句 : if...else if...else if...

(1)概述

用于在判断该语句是否满足特定条件。如果条件1成立,<if>元素内的语句会被执行,如果条件1不成立,而条件2成立则执行<else if>元素内的语句,两者均不成立则运行<else>元素内的语句。

(2)语法格式
if (条件1) {
   条件表达式 1 满足 时执行
} else if (条件 2) {
  条件表达式 1 不满足,条件表达式2满足时执行
} else {
  前面所有条件都不满足时执行
}
(3)举例

运行代码如下:

    <script>
        var a = 8;
        if(a>10){
            console.log("a>10");
        }else if(a<3){
            console.log("a<3")
        }else{
            console.log("3<a<10")
        }
    </script>

运行结果如下:

4、多向判断语句 :switch...case...
(1)概述

分支语句switch根据变量的取值不同采取不同的处理方法。“变量”要用()括起来。必须用{ }把case括起来。即使语句段是由多个语句组成的,也不能用{ }括起来。

(2)语法格式
switch (语句) {
    case 表达式1:
        语句1;
        break;
    case 表达式2:
        语句2;
        break;
    default:
        语句3;
}
(3)举例

运行代码如下:

        var x = 8;
        switch(x){
            case 1:
                console.log("x=1");
                break;
            case 2:
                console.log("x=2");
                break;
            default:
                console.log("x不等于1和2")
        }

运行结果如下:

(二)、循环语句

在 JavaScript 中,提供了多种循环语句,有 for、while 和 do while语句,还提供了用于跳出循环的 break 语句,用于终止当前循环并继续执行下一轮循环的 continue 语句。

1.for 循环

(1)概述

for实现条件循环,当“条件”成立时,执行语句段;否则跳出循环体,循环结束。

(2)语法格式
for (初始化; 条件; 增量){
    语句段;
}
(3)举例

运行代码如下:

    <script>
        var a;
        for(a=0;a<=10;++a){
            console.log(a)
        }
    </script>

运行结果如下:

2.while 循环

(1)概述

“条件”中应该是关系表达式或逻辑表达式。条件为真时,执行循环体中的语句;条件表达式为假时,跳出循环体,循环结束。

(2)语法格式
while(条件){
    语句段;
}
(3)举例

运行代码如下:

    <script>
        var b=0;
        while(b<8){
            console.log(b);
            b++;
        }
    </script>

运行结果如下:

3. do...while...循环

 (1)概述

 do while语句是while的变体,do while语句的循环体至少执行一次,而while语句的循环体可以一次也不执行。

(2)语法格式
do {
    语句段;
}
while (条件)
(3)举例

运行代码如下:

        var x=1;
        do{
            console.log(x);
            x++;
        }
        while(x<5);

运行结果如下:

注:while 循环结构 和 for循环结构 可以相互替代,但两者各有特点。while 语句适合条件复杂无法预知循环次数的循环for语句适合已知循环次数的循环。

4.break 和 continue 语句

(1)break语句

break语句的功能是无条件跳出循环结构或switch语句。一般break语句是单独使用的,有时也可在其后面加语句标号,以表明跳出该标号所指定的循环体,然后执行循环体后面的代码。

(2)continue语句

continue 语句的功能是结束本轮循环,跳转到循环的开始处,从而开始下一轮循环,但不能出循环体(可能会卡死)

二、函数

(一)概述

将程序中多次要用到的代码块封装起来,就是函数。函数使代码块的重复使用更方便,且功能独立,便于维护。

(二)函数的定义

JavaScript 遵循先定义函数,后调用函数的规则。函数的定义通常放在HTML文档头中,也可以放在其他位置,但最好放在文档头,这样可以确保先定义后使用。

1.语法格式

function 函数名(参数1,参数2)
{
    语句,
    ...
    return 表达式;//return语句指明被返回的值
}

2.变量的作用域

变量分为全局变量和局部变量。全局变量定义在所有函数之外,作用范围是所有函数;
局部变量定义在函数之内,只对该函数可见,对其它函数不可见。

运行代码如下:

    <script>
        var c=1;    //全局变量,即可以作用于所以函数内,与可以作用于函数外
        function calculator(a,b){
            var d=2;    //局部变量,只作用与函数内
            return (a+b+c)*d    //返回值6
        }

        x=calculator(1,1)
        console.log("计算结果:" + x);

        y=c*d   //函数外无法调用局部变量d,控制台报错
        console.log("计算结果:" + y);
    </script>

运行结果如下:

(三)函数的使用

1.在程序中调用(分为有返回值和无返回值调用)

(1)无返回值的调用

如果函数没有返回值或调用程序不关心函数的返回值,可以用下面的格式调用定义的函数。

函数名(实参1,实参2,...);
(2)有返回值的调用
变量名=函数名(实参1,实参2,...);

运行代码如下:

    <script>
        function calculator(a,b){
            return a+b
        }
        console.log("a+b=" + calculator(1,2));
    </script>

运行结果如下:

2.在按钮或超链接被点击时调用(监听点击事件)

(1)在按钮被点击时调用

运行代码如下:

     <script>
        function calculator(a,b){
            c=a+b;
            alert("a+b=" + c);
            return c;
        }
    </script>

    <!-- 2. 在按钮或超链接被点击时调用(监听点击事件) -->
    <!-- 2.1 监听按钮点击 -->
    <input type="submit" value="a+b=" onclick="calculator(1,2)" />

运行结果如下:

(2)在超链接被点击时调用

使用 <a> 标记的 onClick 属性调用函数,其语法是

<a href="#" onclick="函数名(参数表)">文本</a>

运行代码如下:

    <script>
        function calculator(a,b){
            c=a+b;
            alert("a+b=" + c);
            return c;
        }
    </script>

    <!-- 2. 在按钮或超链接被点击时调用(监听点击事件) -->
    <!-- 2.2 监听超链接点击 -->
    <a href="#" onclick="calculator(3,4)">百度一下,你就知道</a>

运行结果如下:

 

三、对象

(一)概念

对象(object)是 JavaScript 中最重要的数据类型,是一组“键值对”的集合体。类似Python中的字典。其中,键可以为变量名(此时称为对象的属性)和函数名(此时称为对象的方法)。

(二)对象的定义与使用

运行代码如下:

    <script>
         //对象的定义
        var person = {
            firstName:"初音",
            lastName:"未来",
            age:16,
            egeColor:"绿色",
            getName: function(){
                //注意this对象的使用(只向自身)
                //没有this,直接用属性名控制台会报错
                allName = this.firstName + this.lastName;
                return allName
            },
            cal: function(a,b){
                return a+b;
            }
        }

        //使用对象的属性
        console.log(person.egeColor);
        //使用对象的方法
        console.log(person.getName());  
        console.log(person.cal(1,2));   
    </script>

运行结果如下:

注:一个对象在被引用前必须已经存在。 

(三)内置对象

利用JS内置的类创建对象(实例化)并使用对象的属性和方法。

1.Array 类

(1)定义一个数组
 var persons = new Array("Tom","Mike","John");
 var persons = ["Tom","Mike","John"];
(2)length方法:返回数组的元素个数(数组长度)
         //1. length属性返回数组的元素个数(数组长度)
        var persons = new Array("Tom","Mike","John");
        console.log(persons.length);     // 3
(3)push方法:在末尾添加元素方法
        //2. push方法用于在数组末端添加一个或多个元素,并返回
        //添加的新元素后的数组长度。注意:该方法会改变原数组!
        var persons = new Array("Tom","Mike","John");
        len = persons.push("Amy");
        console.log("新数组为:" + persons + "->长度为:" + len);    //新数组为:Tom,Mike,John,Amy->长度为:4
       
(4)pop方法:移除元素方法最后一个元素
        //3. pop方法用于删除数组最后一个元素,并返回被删除的那个元素。
        // 注意:该方法会改变原数组!
        var persons = new Array("Tom","Mike","John");
        p = persons.pop("Tom");             //无法指定特定元素,只删除最后一个元素
        console.log("新数组为:" + persons + "->被移除的元素为:" + p);     //新数组为:Tom,Mike->被移除的元素为:John
       

注:无法指定特定元素,只删除最后一个元素 

(5)reverse方法:颠倒数组
        //4. reverse方法用于颠倒排列数组元素,返回改变后的数组。
        // 注意:该方法会改变原数组!
        var persons = new Array("Tom","Mike","John");
        p = persons.reverse();
        console.log(p);         //["John","Mike","Tom"]
(6)indexOf 方法:获取数组中某个元素的索引
        //5. indexOf方法返回给定元素在数组中第一次出现的位置,若未出现返回-1
        var persons = new Array("Tom","Mike","Mike");
        console.log(persons.indexOf("Mike"));   // 1
        console.log(persons.indexOf("Amy"));    //-1

注:若未出现该元素则返回-1

2.String 类

(1)定义一个字符串
 var str="hello"
(2)length方法:返回数组的元素个数(数组长度)
        //1. length属性返回字符串的长度
        var s = "hello";
        console.log(s.length);  // 5
(3)charAt方法:返回指定索引的字符
        //2. charAt方法返回指定位置的字符
        var s = new String("hello");
        console.log(s.charAt(1));               // "e"
        console.log(s.charAt(s.length - 1));    // "o"
        console.log(s.charAt(8));               // "" 索引超出返回空字符串
(3)concat方法:用于顺序连接多个字符串,返回一个新字符串(不改变原字符串)
        //3. concat方法用于顺序连接多个字符串,返回一个新字符串(不改变原字符串)
        var s1 = new String("hello");
        var s2 = new String(" world");
        console.log(s1.concat(s2));         // "hello world"
        console.log(s1.concat(s2), "hi" , "China");    // "hello world hi China"
(4)indexOf 方法:获取数组中某个元素的索引
        //4. indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置,
        //返回结果是匹配开始的位置。如果返回 -1表示不匹配。
        var s = new String("hello world"); 
        console.log(s.indexOf("world"));  //6
        console.log(s.indexOf("hi"));     //-1
(5)split方法:按照指定规则分割字符串
        //5. split方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组
        var s = new String("hello world hi China");
        console.log(s.split(" "));       //按照空格分割["hello","world","hi","China"]

3.math 类

(1)abs方法:返回参数绝对值
        //1. abs方法返回参数绝对值
        console.log(Math.abs(-1));  //输出1
        console.log(Math.abs(3));   //输出3
(2)max 和 min 方法:返回参数的最大值和最小值
        //2. max和min方法返回参数的最大值和最小值
        console.log(Math.max(-1,2,0));     //输出2
        console.log(Math.min(-1,2,-3));    //输出-3
(3)floor 和 ceil 方法:对应参数向下取整和向上取整
        //3. floor和ceil对应参数向下取整和向上取整
        console.log(Math.floor(3.3)); //输出3
        console.log(Math.floor(-1.1));  //输出-2
        console.log(Math.ceil(3.3));  //输出4
        console.log(Math.ceil(-3.3));  //输出-3
(4)random方法:返回(0,1)之间的一个随机数
        //4. random方法返回(0,1)之间的一个随机数
        var randomNumber = Math.random(); // 返回一个介于0和1之间的随机小数
        console.log(randomNumber); // 输出类似于3.3456789
(5) getRandomInRange 方法:随机输出任意范围的某个数(直接当成固定函数使用)
        //5. getRandomInRange方法随机输出任意范围的某个数(直接当成固定函数使用)
        function getRandomInRange(min, max) 
        {  
            return Math.random() * (max - min) + min;  
        }  
        console.log(getRandomInRange(1, 20)); //随机输出1到20的某个数
(6)truncateDecimalPlaces方法:保留小数点指定位数(直接当成固定函数使用)
        //6. truncateDecimalPlaces方法保留小数点指定位数(直接当成固定函数使用)
        function truncateDecimalPlaces(num, decimalPlaces) 
        {  
            let factor = Math.pow(10, decimalPlaces);  
            return Math.floor(num * factor) / factor;  
        }  
        console.log(truncateDecimalPlaces(3.14159, 2)); // 输出 3.14

4.Date 类

(1)创建一个新的 Date 对象,表示当前日期和时间
        //创建一个新的 Date 对象,表示当前日期和时间
        const now = new Date();
(2)获取年份(四位数的年份,比如2024)
        //获取年份(四位数的年份,比如2024)
        const year = now.getFullYear();
(3)获取月份(从0开始,所以0表示1月,11表示12月,需要加1才能得到实际月份)
        //获取月份(从0开始,所以0表示1月,11表示12月,需要加1才能得到实际月份)
        const month = now.getMonth() + 1;
 (4)获取日期(月份中的哪一天)
        //获取日期(月份中的哪一天)
        const day = now.getDay();
(5)获取小时(24小时制)
        //获取小时(24小时制)
        const hours = now.getHours();
(6)获取分钟
        //获取分钟
        const minutes = now.getMinutes();
(7)获取秒
        //获取秒
        const seconds = now.getSeconds();
(8)输出当前未格式化的日期和时间
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDay();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        //输出当前未格式化的日期和时间
        console.log(`当前日期和时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);

运行结果如下:

 

(9)输出当前格式化的日期和时间
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDay();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
 
        // 格式化日期和时间字符串  
        // 如果month小于10,它会在month前面插入一个'0',否则插入一个空字符串''。
        // 这样做的目的是确保月份始终是两位数(例如,1月变为01)。
        // 同理,${day < 10 ? '0' : ''}${day}确保日期也是两位数。
        const formattedDate = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`; 
        const formattedTime = `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        // 输出当前格式化后的日期和时间  
        console.log(`当前日期和时间: ${formattedDate} ${formattedTime}`);

运行结果如下:

要理解其中的内容要自己敲打运行代码,才能加深理解!

标签:语句,console,log,JavaScript,语法,理解,var,const,now
From: https://blog.csdn.net/2401_84309743/article/details/143436461

相关文章

  • Java中“=”克隆理解
    在Java中,对于基本类型可以使用“="来进行克隆,此时两个变量除了相等是没有任何关系的。而对于引用类型却不能简单地使用”=“进行克隆,这与java的内存空间使用有关。Java将内存空间分成两块,即栈和堆。在栈中保存基本类型和引用变量;在堆中保存对象。对于引用变量而言,使用”=“......
  • 【MySQL系列】理解 `utf8mb4` 和 `utf8mb4_unicode_ci`
    ......
  • HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)
    一、......
  • MapReduce理解
    解释下面是转载的一篇程序员给妻子讲解什么是MapReduce的对话,看完能大概明白我问妻子:“你真的想要弄懂什么是MapReduce?”她很坚定的回答说“是的”。因此我问道:我:你是如何准备洋葱辣椒酱的?(以下并非准确食谱,请勿在家尝试)妻子:我会取一个洋葱,把它切碎,然后拌入盐和水,最后放进混......
  • Windows 基础(一):深入理解Windows,掌握命令行与Shell
    内容预览≧∀≦ゞWindows基础(一)声明导语一、Windows和Linux的区别二、Windows的ShellShell和终端的区别1.命令提示符(CMD)2.WindowsPowerShell3.WindowsTerminal4.WindowsSubsystemforLinux(WSL)三、Windows常用命令1.文件与目录操作2.文本处理3.......
  • 图吧垃圾佬理解的早期国产芯片历史(龙芯中科和同行的恩怨解析)
    额……老铁们,我图吧老捡国产芯片垃圾的了。最近有人问咱关于国产芯片发展故事的事,所以咱简单答疑了一下顺带做了个记录的整理,简单看下情况。水友:就是我有个同学,已经魔怔了,现在已经在同学群里说天玑吊打国产芯片了前几天说的是吊打9950x…垃圾佬:吊打国产芯片可能是真的,9950x雀......
  • JavaScript语法基础(函数,对象,常用类Array,String,Math和Date)
    JavaScript函数语法:function functionname(){    //执行代码}functioncalculator(a,b){c=a+b;//alert("a+b="+c);returnc;}console.log(c)</script><inputty......
  • 二十八、Python基础语法(面向对象-下)
    一、self从函数的语法上来看,self是形参,是一个普通的参数,那么在调用的时候,就需要传递实参值。从调用上看,我们没有给self这个形参传递实参值,但是Python解释器会自动的将调用这个方法的对象,作为实参值传递给self。classDog:defeat(self):prin......
  • 二十六、Python基础语法(函数进阶-下)
    一、多值参数多值参数(可变参数、不定长参数):有的函数不确定参数有几个,在一个普通的参数前面加上一个*,这个参数就变为不定参数。可以接收任意多个位置传参的数据,类型为元组。deftest(name,*args,sex='男'):print(name,args,sex)#传递3个参数test('张三',25,se......