第二篇 JavaScript 基础入门 2

于 2022-02-17 19:49:24 发布
阅读量331 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript linq 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_66451927/article/details/122977224
版权
本文是 JavaScript 基础入门的第二篇，主要讲解数组的概念、访问与操作，包括数组的定义、访问及取值、与循环的结合使用，以及增删元素的方法。此外，还介绍了对象的基本概念，包括属性、方法的创建和使用，以及如何通过对象创建函数和循环遍历属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

（3）变量 let 和 var

        之前学习 var 关键字是用来声明创建一个变量的，一般使用 var 创建全局变量，使用 let 创建局部变量。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <script>
        var i = 10;
        document.write(i + '<br/>'); // 这里输出 i 为 10
{ 
    let i = 2;
    document.write(i + '<br/>'); // 这里输出 i 为 2
}
    document.write(i + '<br/>'); // 这里输出 i 为 10  
    </script>
</body>
</html>

运行结果：

 代码解析：

      使用 let 关键字来实现块级作用域。let 声明的变量只在 let 命令所在的代码块  { } 内有效，在  { }  之外不能访问。  变量“ let = i ”外面的花括号是让我们更好区分 var 和 let 的区别，let i 遍历创建处就等于一个“局部”，与外面进行隔离

        先创建了一个叫 i 的全局变量，赋值为 10 ，然后输出i ，这时 i 的值为 10，再用关键字 let 创局部变量 i 赋值为 2，在 {} 这个局部里，和全局变量同名的局部变量 i 的值赋为2，在局部 {} 里变量 i 输出的值为2，在 {} 局部外面，再次输出全局变量 i ，结果为10。

三、数组

3.1 数组的概念

        数组就是数据集合，和变量概念类似，变量是储存一个值的容器，这个值的种类可以多种多样，数组就是变量是储存多个值的容器，这些值的种类也可以多种多样。通过一个例子来了解怎么使用数组，数组的格式规范等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
   <!-- way 1 importance 字面 -->
    <script>
        var aaa = ["Dong A","Beijng" ,"Yuzu", 2022];
        document.write(aaa);
    </script>
    <!-- way 2 常规 -->
    <script>
        var bbb = Array ();
        bbb [0] = "Dong A";
        bbb [1] = "Beijng";
        bbb [2] = "Yuzu";
        bbb [3] = 2022;
        document.write(bbb);
    </script>
    <!-- way 3 简洁 -->
    <script>
        var ccc = Array("Dong A","Beijng","Yuzu",2022);
        document.write(ccc);
    </script>

</body>
</html>

 

运行结果：

代码解析：

        上面介绍了3种代码的写法，以第一种为主，用关键字 var +数组名 = [数据1,数据2,...,数据n];数组里有多个值用逗号分隔开。

3.2 数组访问及取值

访问

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>

    <script>
        var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
        document.getElementById("pID").innerHTML = aaa[0];
    </script>
</body>

</html>

运行结果：

                

 代码解析：

        通过 document.getElementById("段落ID").innerHTML = aaa[数组元素位置]; 获取元素。

        注意数组元素从 0 开始。数值不能够超过这个数组内元素的个数（数组长度）。

取值

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>

    <script>
        var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
        aaa[0]="winter";
        document.getElementById("pID").innerHTML = aaa[0];
    </script>
</body>

</html>

运行结果：

        ​​​​​​​        

 代码解析：

        通过索引对数组的值进行更改，代码更改了数组的第1个元素内容，也就是刚刚的 aaa[0] 的内容 “Dong a”，修改成了 “winter”。

3.3 数组与循环

        一般会将数组与循环结合在一起使用，例如做网站时，网页中的一些数据需要后端传递过来，这些数据有时候用数组的格式出现，在前端需要把这些数据进行显示，一个个取很不方便，所以结合上一节的循环，事半功倍。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>

    <script>
        var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
        for (let i = 0;i< aaa.length;i++)
        {
            document.getElementById("pID").innerHTML += aaa[i]+',';
        }
    </script>
</body>
</html>

运行结果：

        ​​​​​​​        

代码解析

        aaa.length 表示取名为 aaa 的数组的长度；

         document.getElementById("pID").innerHTML += aaa[i]+','; 因为数组一次取一个，但是最后要呈现数组的全部数据，所以用 符号“+=” ，而 aaa[i] 里的 i 值每次都会加1，但是 i 的值不会超过当前数组 aaa 的长度，i 值得变化就是从0加到数组长度。

3.4 数组增删值

（1）在数组 aaa 前面增加元素，用 unshift（）；

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
 <!-- 数组前增加元素，用unshift（）的方法  -->
     
     <script>
        var ddd=["Dong A","Beijng" ,"Yuzu", 2022];
        ddd.unshift("new_1","new_2"); 
        for(let i=0;i<ddd.length;i++){
            document.getElementById("pID").innerHTML += ddd[i]+',';
        }
    </script>
</body>
</html>

运行结果：

        ​​​​​​​        

代码解析：

        用unshift（）的方法，在数组 ddd 前面增加了2个元素，分别是new_1 和 new_2 。

 （2）在数组 aaa 后面增加元素，用 push（）；

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
<!-- 新增元素 -->
    <script>
        var ccc=["Dong A","Beijng" ,"Yuzu", 2022];
        ccc.push("新增元素1","新增元素2"); 
        for(let i=0;i<ccc.length;i++){
            document.getElementById("pID").innerHTML += ccc[i]+',';
        }
    </script> 
</body>
</html>

运行结果：

        ​​​​​​​        

 代码解析：

        用push（）的方法，在数组 aaa 后面增加了2个元素，分别是新增元素1，和新增元素2。

（3）删除第一个元素，用shift（）；

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
 <!-- 删除第一个元素，用shift（）的方法  -->
     
     <script>
        var bbb=["Dong A","Beijng" ,"Yuzu", 2022];
        bbb.shift(); 
        for(let i=0;i<bbb.length;i++){
            document.getElementById("pID").innerHTML += bbb[i]+',';
        }
    </script>
</body>
</html>

运行结果：

 代码解析：

          用 shift（）的方法，删除了数组 bbb 的第一个元素 “Dong a”。

（4）删除最后一个元素，用 pop（）；

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
    <!-- 删除最后一个元素，用pop的方法  -->
    <script>
        var aaa=["Dong A","Beijng" ,"Yuzu", 2022];
        aaa.pop();
        for(let i=0;i<aaa.length;i++)
        {
            document.getElementById("pID").innerHTML += aaa[i]+',';
        }
    </script>
     
</body>
</html>

运行结果：

        ​​​​​​​        

代码解析：

        使用 pop 弹出的方法，删除了数组 aaa 的最后一个值。

四、对象

1、对象基本介绍：

        JavaScript 对象是拥有属性和方法的数据。在 JavaScript中，几乎所有的事物都是对象。

        真实生活中，一台笔记本电脑就是一个对象。对象有它的属性，如重量和颜色等，方法有启动停止等，所有笔记本电脑都有这些属性，但是每款笔记本电脑的属性都不尽相同。所有笔记本电脑都拥有这些方法，但是它们被执行的时间都不尽相同。

        对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
     <script>
        class laptop 
        {
            brand ='';
            color ='';
            storage ='';
            weight = 3;
        }
        var Asus = new laptop();
        Asus.brand='华硕';
        Asus.color='黑';
        Asus.storage='2T';
        Asus.weight = 2;
        document.write(Asus.brand+Asus.color+Asus.storage+Asus.weight);
    </script>
</body>
</html>

运行结果：

代码解析：

        class 表示一个类开始创建，其后接着的是一个类名 laptop，把类的属性写在类名名后面的花括号中，属性用 “； ” 分隔；

       var Asus = new laptop();从右边往左看，表示创建了一个新的 （用关键词 new ）类，叫 laptop 赋值给左边叫 Asus 的变量，使得 Asus 这个变量拥有 laptop 的属性。使用小数点对其属性进行调用，并且赋值，最后进行了输出。

还有另外一种表示方式：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
    <body>
        <p id="pID"></p>
        <script>
            var laptop = {brand:"Asus", color:"break", Storage:"2T"};
            for(let i in laptop){
                document.write(i+':'+laptop[i]+' ');
            }
        </script>
    </body>
</html>

运行结果：

代码解析： 在类的花括号里使用键值对，也就是，name：value 的方式，注意在name 和 value 之间用冒号分隔，输出结果里会有索引，使得值表示的内容更清晰明确。

 2、同时创建多个对象

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
     <script>
        class laptop 
        {
            brand ='';
            color ='';
            storage ='';
            weight = 3;
        }
        var Asus = new laptop();
        Asus.brand='华硕';
        Asus.color='黑';
        Asus.storage='2T';
        Asus.weight = 2;

        var HP = new laptop();
        HP.brand='惠普';
        HP.color='银';
        HP.storage='1.5 T';
        HP.weight = 1;
        
        document.write(Asus.brand+Asus.color+Asus.storage+Asus.weight +'<br/>');
        document.write(HP.brand+HP.color+HP.storage+HP.weight+'<br/>');
    </script>
</body>
</html>

运行结果：

        ​​​​​​​        

 代码解析：创建了同个类 laptop 的两个对象，分别是 Asus 和 HP

（3）用对象的方法创建函数     

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
     <script>
        class laptop 
        {
            brand ='';
            color ='';
            storage ='';
            weight = 3;
            greeting()
         {
             document.getElementById("pID").innerHTML += '我们会帮助您登录、联网、配置电脑，您很快就能开始使用了';
         }
        }
        var Asus = new laptop();
        Asus.brand='华硕';
        Asus.color='黑';
        Asus.storage='2T';
        Asus.weight = 2;
        Asus.greeting();

        var HP = new laptop();
        HP.brand='惠普';
        HP.color='银';
        HP.storage='1.5 T';
        HP.weight = 1;
        HP.greeting();

        
        document.write(Asus.brand+','+Asus.color+','+Asus.storage+','+Asus.weight +'<br/>');
        document.write(HP.brand+','+HP.color+','+HP.storage+','+HP.weight+'<br/>');
    </script>
</body>
</html>

运行结果：

 代码解析：在类里添加了函数 greeting() ，函数作用是输出 一段提示的话

（4）循环遍历对属性

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript base</title>
</head>
<body>
    <p id="pID"></p>
     <script>
        class laptop 
        {
            brand ='';
            color ='';
            storage ='';
            weight = 3;
            greeting()
         {
            document.getElementById("pID").innerHTML += 'Hi';
           
         }
        }
        var Asus = new laptop();
        Asus.brand='华硕';
        Asus.color='黑';
        Asus.storage='2T';
        Asus.weight = 2;
        Asus.greeting();

        for(let i in Asus)
        {
            document.write(i+':'+Asus[i]+' ');
        }
    </script>
</body>
</html>

运行结果：

 代码解析：

for(let i in Asus)
        {
            document.write(i+':'+Asus[i]+' ');
        }

        主要看上面的代码，ini 值进去 Asus 这个对象里面去找到对应的属性值，而 Asus[i] 表示数组里的元素，里面的 i 会依次表示属性 brand、color 、storage、weight 和 greeting，Asus[i] 会依次等于Asus[brand]、Asus[color]、Asus[storage]、Asus[weight] 和  Asus[greeting()],便可以取代对应的值。

参考自：【前端就业课 第一阶段】HTML5 零基础到实战（十）JavaScript基础一篇入门_1_bit 的博客-优快云博客

 Python3 简介 | 菜鸟教程

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值