AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript---网络编程(2)-函数与数组-2

2022-04-14 106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript---网络编程(2)-函数与数组

5.数组

方便操作多元素的容器，可以对其中的元素进行编号。

特点：可以存任意元素，长度是可变的。

格式：


var arr = new Array();
    arr[0] = “hello”;
    arr[1] = 123;
    var arr = [‘hello’,123,true,”abc”];


通过遍历即可对数组进行基本操作。


for(var x=0; x<arr.length; x++)
    {
        alert(arr[x]);
    }


代码演示：

<html>
  <head>
    <title>javascript数组用法演示</title>
  </head>
  <body>
     <script type="text/javascript">
        //数组定义的方式1: 定义时直接赋初值
        var arr =[12,34,2,-3,90,12];
        document.write( typeof(arr) );
        //object
        document.write("<br/>");
        document.write("len:" + arr.length);
        document.write("<br/>");
        //遍历数组
        for(var x=0;x<arr.length;x++){
            document.write("arr["+x+"]="+ arr[x]+"&nbsp;");
        }
        document.write("<br/>");
        arr[0]=-10;
        arr[7]=66;//数组可以自动增长，且arr[6]没有赋值则是undefined
        document.write("len:"+arr.length+" 数组长度自动加长");
        document.write("<br/>");
        for(var x=0;x<arr.length;x++){
            document.write("arr["+x+"]="+ arr[x]+"&nbsp;");
        }
        document.write("<br/>");
        document.write("<hr/>");
        var arr2=[];
        document.write("arr2.length="+arr2.length);//0
        document.write("<br/>");
        arr2[1]=10;
        for(var x=0;x<arr2.length;x++){
            document.write("arr2["+x+"]="+ arr2[x]+"&nbsp;");
        }
        document.write("<br/>");
        //※※错误的声明方式--数组
        //int[] arr3 ={1,2,3};
        //var[] arr3 = [1,2,3];//错的，[]代表的是数组类型，而js中，所有数据类型只有一个var声明，不存在“var[]”这种类型
        document.write("同一个数组的元素可以是不同类型！！！<br/>");
        var arr4=[1,2,3,100];
        arr4[0]="abc";
        arr4[1]=true;
        for(var x=0;x<arr4.length;x++){
            document.write("arr4["+x+"]="+ arr4[x]+"&nbsp;");
        }
        document.write("<br/>");
        //※※综上,js数组的两个特点：
        //1,长度是可变的
        //2,元素的类型是任意的
     </script>
     <hr/>
    <script type="text/javascript">
       //数组定义的方式2: 使用js中的Array对象来定义
       var arr10 = new Array(); //※ 空参
       for(var x=0;x<arr10.length;x++){
        document.write("arr10["+x+"]="+ arr10[x]+"&nbsp;");
       }//什么都没有,因为长度是0
       document.write("arr10.length="+arr10.length);//0
       document.write("<br/>");
       var arr11 = new Array(8); //※ 一个参数，代表的是数组的长度
       arr11[2]=12;
       arr11[3]="abc";
       for(var x=0;x<arr11.length;x++){
           if(x==2||x==3){
                document.write("<font color=red >arr11["+x+"]="+ arr11[x]+"&nbsp;</font>");
           }else{
                document.write("arr11["+x+"]="+ arr11[x]+"&nbsp;");
           }
       }
       document.write("<br/>");
       var arr12 = new Array(10,11,12); //※ 多个参数，代表的是数组元素值
       arr12[5]="aaa";
       for(var x=0;x<arr12.length;x++){
        document.write("arr12["+x+"]="+ arr12[x]+"&nbsp;");
       }
       document.write("<br/>");
    </script>
  </body>
</html>

360浏览器8.1 演示结果：

image.png

接下来将函数和数组结合起来用用，写个排序和二分查找。

<html>
  <head>
    <title>javascript数组与函数练习</title>
  </head>
  <body>
  <script type="text/javascript">
    //写一个获取数组中元素最大值的函数
    //若有多个，返回第一个
    function getMax(arr){
        var max=0;//最大值的下标
        for(var x=1;x<arr.length;x++){
            if(arr[x]>arr[max]){
                max = x;
            }
        }
        return arr[max];
    }
    //调用
    var arr=[23,-3,45,0,-100,47,22];
    var v = getMax(arr);
    document.write("数组最大值的下标："+v);
    document.write("<br/>");
    document.write("数组最大值:"+v);
    document.write("<br/>");
    //数组选择排序
    function sortArray(arr){
        for(var x=0;x<arr.length-1;x++){
            var min=x;
            for( var y=x+1;y<arr.length;y++){
                if(arr[min]>arr[y]){
                    min=y;
                }
            }
            if(min!=x){
                swap(arr,x,min);
            }
        }
    }
    function swap(arr,x,y){
        var temp = arr[x];
        arr[x] = arr[y];
        arr[y] = temp;
    }
    document.write("<hr/>");
    document.write("排序前："+arr+"<br/>");
    sortArray(arr);
    document.write("排序后："+arr+"<br/>");
    //我们的输出函数---把内容输出到页面且换行
    function println(str){
         document.write(str+"<br/>");
    }
    println(arr);
    sortArray(arr);
    println(arr);
    //到数组当中查找元素
    function searchElement(arr,key){
        for(var x=0;x<arr.length;x++){
            if(arr[x]==key){
                return x;
            }
        }
        return -1;
    }
    println( searchElement(arr,0) );
    println( searchElement(arr,123) );
  </script>
  <script type="text/javascript">
    //二分查找
    function binarySearch(arr,key){
        var max,min,mid;
        min=0;
        max=arr.length-1;
        while(min<=max){
            mid = (max+min)>>1;
            if(key>arr[mid]){//落在右边
                min = mid+1;                
            }else if(key<arr[mid]){//落在左边
                max = mid-1;
            }else{
                return mid;
            }
        }
        return -1;
    }
    println("二分查找结果：");
    println( binarySearch(arr,0) );
    println( binarySearch(arr,123) );
    //数组反转
    function reverseArray(arr){
        for(var start=0,end=arr.length-1; start<end; start++,end--){
            swap(arr,start,end);
        }
    }
    reverseArray(arr);
    println("反转之后:"+arr);
  </script>
  </body>
</html>


360浏览器8.1 演示结果：

image.png

JS中的全局变量和局部变量解答：

代码演示：

<html>
  <head>
    <title>javascript中的全局变量与局部变量</title>
  </head>
  <body>
    <!-- 
            全局变量: js中，直接在脚本当中定义的变量全都是全局变量。
            局部变量: 在函数中定义的变量是局部的。
     -->
      <script type="text/javascript">
         function println(str){
             document.write(str+"<br/>");
         }
         var a=100;
         println("遍历输出0-9：");
         for(var x=0;x<10;x++){
             println("x="+x);
         }
      </script> 
      <script type="text/javascript">
         println("aaaa="+a);
         println("xxxx="+x);
         function aa(){
             var y=123;
             document.write("y="+y);
             return;
         }
         aa();
         document.write("<br/>");
         println("yyyy="+y);//不能访问函数内部定义的变量，因为它是局部的
      </script> 
      <!-- 一点小细节 -->
      <script type="text/javascript">
         var n=3;//全局变量n
         function abc(n){//局部变量n---形参是方法内部声明的局部变量，值由arguments[0]在使用n时临时赋给它的
             n=6;
         }
         abc(n);//把x传给方法abc，并在其中试图对该值进行更改--未遂!----本质上实参n是把值传给了函数中的arguments数组了
         println("n="+n);
      </script>
  </body>
</html>


360浏览器8.1 演示结果：

image.png

下一次就学习JS的对象了。毕竟JS是基于对象的语言。



文章标签：
JavaScript
容器
关键词：
JavaScript函数
JavaScript网络
JavaScript数组
网络函数
网络编程函数
谙忆
目录
相关文章
廖小凡
|
2月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
廖小凡
48 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
大树营养快线
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
46 2
游客44yag4ft7nckq
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
32 1
德国都芳最好
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性，但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现，开发者可以更好地编写和维护 JavaScript 代码，避免因不了解这些机制而导致的错误和不一致。同时，不断提高对执行上下文等相关概念的认识，将有助于提升对 JavaScript 语言的整体理解和运用能力。
德国都芳最好
25 1
chnjames
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南：20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧，涵盖了从基本的添加、移除元素，到数组转换和去重等高级操作。强调了不可变性的重要性，提供了清晰的代码示例，帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者，这些技巧都将显著提升您的编码能力，使您在项目中更具竞争力。
chnjames
51 2
神明木佑
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
神明木佑
45 3
神明木佑
|
3月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
神明木佑
56 4
神明木佑
|
3月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
神明木佑
59 4
邹荣乐
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
邹荣乐
57 1
神明木佑
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
神明木佑
31 2

热门文章

最新文章

  • 1
    Python网络编程小示例：生成CIDR表示的IP地址范围
  • 2
    不为人知的网络编程(十九)：能Ping通，TCP就一定能连接和通信吗？
  • 3
    Node.js 的事件驱动机制
  • 4
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 5
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 6
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 7
    js+jquery实现贪吃蛇经典小游戏
  • 8
    在 golang 中执行 javascript 代码的方案详解
  • 9
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 10
    Node.js 的性能
  • 1
    Kubernetes学习-集群搭建篇(二) 部署Node服务，启动JNI网络插件
    349
  • 2
    什么是网络安全等级保护测评（等保测评）？
    292
  • 3
    网络安全与信息安全：保护你的数据，保护你的世界
    56
  • 4
    网络防御前线：洞悉漏洞、加密之盾与安全意识觉醒
    43
  • 5
    探索现代网络安全的多层次防御机制
    236
  • 6
    网络安全与信息安全：防御前线的关键技术与意识觉醒
    48
  • 7
    数字堡垒的构建者：网络安全与信息安全的深层剖析
    65
  • 8
    Linux网络编程 网络基础知识
    78
  • 9
    开发板配置网络ssh登入
    78
  • 10
    网络编程知识点总结（7）
    59

    • 相关课程

    更多
  • Python网络编程
  • JavaScript入门与实战
  • 企业上云攻略-阿里云网络产品应用系列教程
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • JavaScript 自学手册文档教程
  • 网络管理者必知-2分钟了解新出台的《网络安全法》

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅