JS中的复合类型和事件处理机制

小马的二驴

于 2021-04-01 20:41:58 发布

阅读量246

点赞数

文章标签： js

本文链接：https://blog.csdn.net/lvhezhong123/article/details/115383769

版权

复合类型

复合类型是指由多个基本数据类型或者复合类型构成的数据体。

js中的复合类型有对象Object、数组Array和Function函数三大类

对象

对象是一系列命名变量和函数的集合，对象中的命名变量称为属性,对象中的函数称为方法。对象中访问属性和函数的方法都是通过. 点运算符实现的。例如获取浏览器的版本navigator.appVersion

js是基于对象的脚本语言，所以提供了大量的内置对象供开发者使用

Array数组类
Date日期类
Math数学类
Object对象类
String字符串类
… …
还有一组的DOM对象，例如document.write()；一组BOM对象，例如window.alert()

数组

什么是数组

数组就是一组数据的集合，其表现形式就是内存中的一段连续的内存地址
数组名称其实就是连续内存地址的首地址

数组特点

数组定义时无需指定数据类型，数组定义时可以无需指定数组长度
数组可以存储任何数据类型的数据（比如一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）

<script>
        // var arr=[];//定义数组
        var arr = new Array();
        arr[0] = 123;
        arr[1] = "abcd";
        arr[5] = true;
        alert(arr.length); //6
        for (var k = 0; k < arr.length; k++) {
            console.log(arr[k]);  //没有赋值的元素为undefined
        }
        console.log(arr[100]);  //不会越界异常
    </script>

数组的基本操作

js为数组提供了一个length属性可以获取数组的长度，实际上js的数组长度可以任意变化

数组长度可变，索引值从0开始
同一个数组中的元素类型可以互不相同
访问数组元素时不会产生越界问题，访问并未赋值的数组元素时返回undefined

多维数组

<script>
        //定义数组方法1：  多维数组其实就是数组的元素还是数组
        var a = new Array();
        for (var i = 0; i < 3; i++) {        //一维长度为3
            a[i] = new Array();
            for (var j = 0; j < 5; j++) {    //二维长度为5
                a[i][j] = i + j;  //访问数组中的指定元素
            }
        }
        //定义数组方法2：
        var a = [[1, 2, 3, 5, 6, 7], [2, 3, 4], [3, 9, 0, 10, 12]];
        document.write("<table border=1>");
        for (var i = 0; i < a.length; i++) {
            document.write("<tr>");
            for (var k = 0; k < a[i].length; k++) {
                document.write("<td>" + a[i][k] + "</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>

数组常见方法

 在java中使用List,String;
 list=Arrays.asList(arr);获取一个不可变的集合，
        存储的元素个数不能变化。试图修改结构则一定UnsupportedOperationException
        <hr />
        String ss="adslfkjasldkfjsalkdfjdsafkajsdflksadjflsakd";<br />
        String[] arr=ss.split("a");<br />
        for(String temp:arr)<br />
        System.out.println(temp+":"+temp.length());<br />
        String ss1=String.join("567", arr);<br />
        System.out.println(ss1);<br />

concat(arrayX,arrayX,…,arrayX)方法用于连接两个或多个数组，参数可以是具体的值，也可以是数组对象。可以是任意多个

join(separator)方法用于把数组中的所有元素放入一个字符串，separator可选。

指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符

可以用于模拟实现栈或者队列
pop() 方法用于删除并返回数组的最后一个元素
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值unshift(newelement1,newelement2,…,newelementX)方法可向数组的开头添加一个或更多元素，并返回新的长度

reverse() 方法用于颠倒数组中元素的顺序
slice(start,end)方法可从已有的数组中返回选定的元素
sort(sortby)方法用于对数组的元素进行排序。其中sortby为一个函数

function(a,b){ return a-b}
a-b输出从小到大排序，b-a输出从大到小排序

splice(index,howmany,item1,…,itemX)从数组中添加/删除项目，然后返回被删除的项目

index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目

函数

函数可以包含一段可执行的代码，可以接受调用者传入参数，可以返回处理结果。

函数参数列表可以不需要数据类型声明，函数的返回值也不需要数据类型声明。

语法格式:
function functionName(param1, params2,…){}

调用语法：
functionName(values,value2,…)

<button id="but1" onclick="ff('abc')">点我</button>
   <script>
      function ff(param1){
          alert(param1+"：Click me!");
      }
   </script>
       <script>
           document.getElementById("but1").onclick=function(){
             alert("DOM树");
         }
      </script>
      <script>
          ddd(); 
          function ddd(){
           alert("小张说：'我爱小王'");
       }            
      </script>
      <script>
         
   </script>

事件处理机制

1、发生一件事情即为事件，比如鼠标点击、双击、键盘按钮被按下。
事件句柄event handler如onclick、onload等

2、JavaScript事件注册，就是把控件的事件和处理事件的代码联系起来的方法

3、如何进行事件的注册

直接在控件标签中写代码

<input type="button" value="测试" onclick = "javascript:alert('你好！');"/>

默认utf-8编码显示，编码问题的处理办法

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

事件处理程序

编写一个事件处理程序（函数），在控件标签中将该函数指定给一个事件。

<script> 
        function show() { 
            alert("你好!"); 
        } 
    </script>    
    <input type="button" value="测试" onclick = "show()"/>
    <p>
        在页面加载事件onload中，为控件绑定一个函数。其中onload表示在页面加载完成后回调的处理函数
    </p>
    <body onload="abc()">
        <script>
        function abc() {
            document.getElementById("b").onclick = function(){  //匿名函数
                alert('你好');
            };  
        }
        </script>

另外一种页面加载事件的写法

 <script type="text/javascript">
            window.onload=function(){
                document.getElementsByTagName("input").item(2).onclick=function() {
                    alert('页面加载另一种写法')
                };
            }
            </script>
            
            <input type="button" value="确定"/>

事件对象的使用

在IE10或者chrome浏览器中是window.event，在其他浏览器中, 是事件处理函数的第一个参数

<button onclick="rr(event)">点击</button>
            <script>
                function rr(evt){
                    alert(evt.screenX+"："+evt.screenY);
                    //如果不传递event参数，也可以尝试使用window.event获取事件对象
                }
            </script>