JS-3

1、Array类型
    ECMAScript数组和其他语言中的数组都是有序列表，但是有以下特性：
    a.每一项都可以保存任何类型的数据。
    b.数组的大小是可以动态调整。
    c.数组的length属性：可读可写，可以通过设置length的值从数组的末尾移除项或向数组中添加新项

    1) 创建方法
       1. 使用Array构造函数
          var arr = new Array();
          var arr = new Array(20);  // 预先指定数组的大小
          var arr = new Array("tom","zs","lisi"); //传入参数
          注意：new 关键字也可以省略，但是尽量不要省略
       2. 使用数组字面量
          由一对包含数组项的方括号表示，多个数组项之间用逗号分隔
          var arr = ["tom","zs","lisi"];
          var arr = []            //空数组

    2) 访问数组元素
       数组变量名[索引]
        1.如果索引小于数组的长度，返回对应项的值
            var arr = ["tom","zs","lisi"];
            arr[0] ;            //访问数组中第一个元素,返回值为tom
        2.如果索引大于数组的长度，数组自动增加到该索引值加1的长度
            var arr = ["tom","zs","lisi"];
            arr[3] ="jacky";    //添加元素,数组长度变为4

        数组最多可以包含4 294 967 295个项

    3) 检查数组
        var arr = [];
        //输出object
        console.log(typeof(arr));    
        //判断arr是否是数组类型
        console.log(Array.isArray(arr));

    4) 转换数组为字符串
        数组继承Object方法，并且对这些方法进行了重写
        toString();        在默认情况下都会以逗号分隔字符串的形式返回数组项
            例如：
            var arr = ["tom","zs","lisi"];    
            arr.toString()        //tom,zs,lisi

        valueOf(); 在默认情况下以数组字面量的方式显示
            console.log(arr.valueOf());
            console.log(arr);
            俩个输出的结果一样:
                ["tom","zs","lisi"];

        join();    使用指定的字符串用来分隔数组字符串
            例如：
            arr.join("||");        //tom||zs||lisi

    5) 栈，队列方法
        1.栈  LIFO (Last-In-First-Out)
            push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度
            pop()     从数组的末尾移除最后一项，减少数组的length值，返回移除的项
        2.队列    FIFO (First-In-First-Out)
            shift()  移除数组中的第一个项并且返回该项，同时将数组的长度减一。
            unshift() 在数组的前端添加任意个项，并返回新数组的长度。

    6) 排序
       reverse()  反转数组项的顺序
       sort()      
         1.默认排序：该方法会调用每个数组项的toString() 转型方法，然后排序
         2.自定义排序：
            a.该方法可以接受一个比较函数作为参数，比较函数有两个参数
            b.如果第一个参数位于第二个参数之前，返回负数
            c.如果第一个参数位于第二个参数之后，返回正数
            var arr = [11,5,23,7,4,1,9,1];
            console.log(arr.sort(compare));

            //该比较函数适合于大多数数据类型
            console.log(arr.sort(function(v1,v2){
                return v1-v2;
            }));

    7) 操作方法
        concat()    :先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，返回副本
            var arr = ["aa","bb","cc","dd"];
            var arr_new = arr.concat("ee","ff");
            // arr_new = ["aa", "bb", "cc", "dd", "ee", "ff"]
            // arr不改变

        slice()    :可接受一个或者两个参数（返回项的起始位置，结束位置）
            当接受一个参数，从该参数指定的位置开始，到当前数组末尾的所有项
            当接受两个参数，起始到结束之间的项，但是不包含结束位置的项
            例如：
            var arr = ["aa","bb","cc","dd"];
            1.接受一个参数时
              var arr_new = arr.slice(1);
                // arr_new = ["bb", "cc", "dd"];
                // arr 不改变
            2.接受两个参数时
              var arr_new = arr.slice(1,2);    
                // arr_new = ["bb"];
                // arr不改变

        splice()    : 向数组的中插入数据并返回一个数组，该数组中包含从原始数组中删除的项。
            删除：指定两个参数(删除的起始位置，要删除的项数)
            插入：指定三个参数(起始位置，0，要插入的项任意数量的项)
            替换：指定三个参数(起始位置，要删除的项，要插入的任意数量的项)

            例如：
            var arr = ["aa","bb","cc","dd"];
            1.删除
              var del_arr = arr.splice(1,2);
                // arr = ["aa","dd"];     在原数组进行了删除操作
                // del_arr = ["bb","cc"];返回删除的元素数组
            2.插入
              var del_arr = arr.splice(1,0,"ee","ff");
                // arr =  ["aa", "ee", "ff", "bb", "cc", "dd"] 将指定项插入到1位置处
                //del_arr = [], 返回空数组
            3.替换
              var del_arr = arr.splice(1,2,"ee","ff");
                // arr =  ["aa", "ee", "ff", "dd"] 将"bb","cc" 替换成了"ee","ff"
                //del_arr = ["bb", "cc"], 返回删除的元素数组

        indexOf()(要查找的项，开始查找的位置(可选)) 从数组开头向后查找，使用全等操作符，找不到该元素返回-1
            var arr = ["22","11","cc","dd","11"];
            arr.indexOf(11); //返回-1，因为内部使用"==="进行匹配
            arr.indexOf("11"); //返回1，默认从下标为0往后匹配，返回第一个匹配元素的位置
            arr.indexOf("11",2); //返回4，从下标为2开始往后匹配，返回第一个匹配元素的位置
        lastIndexOf()(要查找的项，开始查找的位置(可选)) 从数组末尾向前查找，使用全等操作符，找不到该元素返回-1
            var arr = ["22","11","cc","dd","11"];
            arr.lastIndexOf("11"); //返回4，默认从下标为4往前匹配，返回第一个匹配元素的位置
            arr.lastIndexOf("11",2); //返回1，从下标为2往前匹配，返回第一个匹配元素的位置
    
    8) 迭代方法：
        every();对数组中的每一元素运行给定的函数，如果该函数对每一项都返回true,则返回true
            every(回调函数)
            every(function(){})
            every(function(item,index,arr){})
            every(function(遍历的每项,索引,被遍历的数组){})

            var arr = [11,5,23,7,4,1,9,1];
            var result = arr.every(function(item,index,arr){
                return item >2;
            });
            console.log(result); //false

        some(); 对数组中的每一元素运行给定的函数，如果该函数对任意一项返回true,则返回true
            some(回调函数)
            some(function(){})
            some(function(item,index,arr){})
            some(function(遍历的每项,索引,被遍历的数组){})
            
            var arr = [11,5,23,7,4,1,9,1];
            var result = arr.some(function(item,index,arr){
                return item >2;
            });
            console.log(result); //true

        filter();对数组中的每一元素运行给定的函数，会返回满足该函数的项组成的数组
            filter(回调函数)
            filter(function(){})
            filter(function(item,index,arr){})
            filter(function(遍历的每项,索引,被遍历的数组){})

            var result = arr.filter(function(item,index,arr){
                return item >2;
            });
            console.log(result); // [11, 5, 23, 7, 4, 9]

        map();对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组
            map(回调函数)
            map(function(){})
            map(function(item,index,arr){})
            map(function(遍历的每项,索引,被遍历的数组){})

            var result = arr.map(function(item,index,arr){
                return item * 2;
            });
            console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2]

        forEach();对数组中的每一运行给定的函数,没有返回值，常用来遍历元素
            
            forEach(回调函数)
            forEach(function(){})
            forEach(function(item,index,arr){})
            forEach(function(遍历的每项,索引,被遍历的数组){})

            var result = arr.forEach(function(item,index,arr){
                console.log(item);
            });

2.基本包装类型
    1)为了便于操作基本类型值，ECMAScript提供了3个特殊的引用类Boolean, Number, String
       每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型对象，从而可以使我们调用一些方法操作这些数据。
            var s = "briup";
            s.substring(2);
      
    2)基本包装类型的实例调用typeof返回"object",从而所有基本包装类型对象转换为布尔类型的时候都会是true.
        String是一个函数
        //显示结果为:function
        console.log(typeof(String));
        
        所以我们可以使用:String(值)把其他类型的值转换为字符串
        console.log(String(123));

        同时String还是一个构造函数,所以可以使用new关键字创建对象
        //注意console中输出对象的话,先显示出大括号的
        console.log(new String(123));

    3) Boolean,Number,不建议直接使用这两种类型


3.javascript中的异常
    1)try-catch

        try{
            alert1("test");
            alert("hello");
        }
        catch(err){
            alert(err);
        }

    注意:如果是语法错误SyntaxError,catch就捕获不到

    2)throw
        
        try{
            var x = 3;
            if(x=="")    throw "empty";
            if(isNaN(x)) throw "not a number";
            if(x>10)     throw "too high";
            if(x<5)      throw "too low";
        }
        catch(err){
            alert(err);
        }

4.void关键字
    javascript:void(0) 是我们经常在超链接中用到的代码.

    href="#"与href="javascript:void(0)"的区别:
        # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
        而javascript:void(0), 仅仅表示一个死链接。
        <a href="javascript:void(0);">点我没有反应的!</a>
        <a href="#pos">点我定位到指定位置!</a>

    href=""表示当前页面,点击之后会刷新页面,href="#"点击之后不会刷新页面


5.javascript中的常见的全局函数(window对象中)
    escape()     对字符串进行编码。
    unescape()     对由 escape() 编码的字符串进行解码。
    encodeURI()     把字符串编码为 URI。
    decodeURI()     解码某个编码的 URI。
    encodeURIComponent()     把字符串编码为 URI 组件。
    decodeURIComponent()     解码一个编码的 URI 组件。
    eval()         计算 JavaScript 字符串，并把它作为脚本代码来执行。
    isFinite()     检查某个值是否为有穷大的数。
    isNaN()     检查某个值是否是数字。
    Number()     把对象的值转换为数字。
    parseFloat()     解析一个字符串并返回一个浮点数。
    parseInt()     解析一个字符串并返回一个整数。
    String()     把对象的值转换为字符串。
    
    注意:
    escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。比如"你好"的返回结果是%u4F60%u597D,escape()不对"+"编码 主要用于汉字编码。

    encodeURI()是Javascript中真正用来对URL编码的函数。 编码整个url地址，但对特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。对应的解码函数是：decodeURI()。

    encodeURIComponent() 能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。它与encodeURI()的区别是，它用于对URL的组成【部分】进行个别编码，而不用于对整个URL进行编码。假如要传递带&符号的网址，就可以使用encodeURIComponent()

1.DOM 文档对象模型
    当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
    在页面中用document来表示浏览器创建出来的文件对象模型,document对象是window对象的一个属性，因此可以直接调用
    
    document对象中的常见属性:
        //documentElement属性 始终指向HTML页面中的<html>元素
        console.log(document.documentElement);
        //body属性 直接指向<body>元素
        console.log(document.body);
        //doctype属性 访问<!DOCTYPE>, 浏览器支持不一致，很少使用
        console.log(document.doctype);
        //title属性 获取文档的标题
        console.log(document.title);
        //URL属性 取得完整的URL
        console.log(document.URL);
        //domain属性 取得域名，并且可以进行设置，在跨域访问中经常会用到
        console.log(document.domain);
        //referrer属性 取得链接到当前页面的那个页面的URL，即来源页面的URL
        console.log(document.referrer);
        //images属性 获取所有的img对象，返回HTMLCollection类数组对象
        console.log(document.images);
        //forms属性 获取所有的form对象，返回HTMLCollection类数组对象
        console.log(document.forms);
        //links属性 获取文档中所有带href属性的<a>元素
        console.log(document.links);


    1)查找 HTML 元素
        
        通过 id 找到 HTML 元素
            document.getElementById("...");
            返回某一个元素对象,默认id是唯一的
        通过name找到 HTML 元素
            document.getElementsByName("...");
            返回一个集合
        通过标签名找到 HTML 元素
            document.getElementsByTagName("...");
            返回一个集合
        通过class找到 HTML 元素
            document.getElementsByClassName("...");
            返回一个集合


    2)找到元素之后干什么
            1.改变元素中的内容
                利用innerHTML 或者 value来改变元素中显示的内容    
            2.改变元素的属性
                document.getElementById("image").src="2.jpg";
                <img id="image" src="1.jpg"></img>
            3.改变元素的css样式
                document.getElementById("p1").style.color="blue";
                <p id="p1">今天天气很好.</p>
            4.给元素添加事件处理(覆盖之前的事件)
                document.getElementById("myBtn").onclick=function(){
                    //...
                };

            5.给元素添加事件监听(不覆盖之前的事件)
                document.getElementById("myBtn").addEventListener("click",function(){.....});
            6.添加或删除元素
                添加:
                    //创建新元素对象 <p></p>
                    var para=document.createElement("p");
                    //创建文本节点
                    var node=document.createTextNode("大家好");
                    //把文本节点添加到<p></p>中
                    para.appendChild(node);
                    //获得指定div
                    var element=document.getElementById("div1");
                    //把<p></p>添加到div中
                    element.appendChild(para);
                删除:
                    <div id="div1">
                        <p id="p1">大家好</p>
                        <p id="p2">你们好</p>
                    </div>
                    
                    <script>
                        var parent=document.getElementById("div1");
                        var child=document.getElementById("p1");
                        parent.removeChild(child);
                    </script>


2.javascript中的事件
    1)事件三要素：
        事件目标（event target）    
            发生的事件与之相关联或与之相关的对象
        事件处理（event handler）
            处理或相应事件的函数
        事件对象（event object）     
            与特定事件相关且包含有关该事件详细信息的对象。
    
    
    2)事件处理
        给页面元素添加事件的三种方式
        1. 在元素标签中使用事件属性
            页面中的大都数元素都有事件处理属性,这些属性的名字都是以on开头的,例如onclick onload等等
            
            例如1:
            <input type="button" value="clickMe" onclick="javascript:alert('clicked');">
            或者
            <script type="text/javascript">
                function showMsg(){
                    alert("clicked");
                }
            </script>
            <input type="button" value="clickMe" onclick="showMsg()">
            
            
            例如2:
            <script type="text/javascript">
                function showMsg(obj){
                    console.log(obj);
                }
            </script>
            <input type="button" value="clickMe" onclick="showMsg(this)">
            注意:调用showMsg(this)的时候把this当做参数传给了该函数,因为showMsg函数的调用是写在onclick属性值中的,而且这个onclick属性又是这个input标签中的,所以这个this代表的是当前input元素对象,在函数中输出即可知道

            例如3:
            <script type="text/javascript">
                function showMsg(obj){
                    console.log(obj);
                    console.log(this);
                    console.log(this==window);//true
                }
            </script>
            <input type="button" value="clickMe" onclick="showMsg(this)">
            注意:每个函数中有一个this,用来表示当前函数是由哪个对象来调用,就是java中所描述的当前对象


        2. 在js中访问元素的事件属性并且赋值
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                console.log(this);
                console.log(this == btn);//true
            }
            
            //删除事件处理程序
            btn.onclick = null;  

            注意:这里函数中的this代表当前btn对象,因为函数是作为btn对象中的一个属性值出现的,所以这个函数就属于btn对象,那么函数中的this就代表这个btn对象

            注意:如果之前btn对象中已经有了onclick事件处理了,那么这种方式会覆盖之前的事件


        3. 使用指定函数给元素添加事件处理
            事件绑定使用addEventListener函数
                var btn = document.getElementById("btn");
                btn.addEventListener("click",function(){
                    console.log(this);
                    console.log(this == btn);//true
                });
                注意函数中this代表的含义
                注意第一个参数所写的事件名称中不带on
                注意这种方式【不会】覆盖之前的事件


            事件删除使用removeEventListener函数
                var btn = document.getElementById("btn");
                var handler = function(){
                    console.log(this);
                    console.log(this == btn);//true
                }
                btn.addEventListener("click",handler);
                //移除事件
                btn.removeEventListener("click",handler);

                注意:可以添加多个事件处理程序，并且按照添加她们的顺序触发。添加事件时如果使用匿名函数将无法删除
                
                注意:这个时候使用btn.onclick=null是【不能】移除事件处理的


        4. IE事件处理
            在低版本的IE中绑定事件和解除事件可以分别使用attachEvent()函数和detachEvent()函数
            

    3)事件对象
        1. DOM中的事件对象
            在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中
            element.onclick = function(event){
                 console.log(event);
            }
            element.addEventListener("click",function(event){
                 console.log(event);      
            });

        2. 事件对象event的特殊属性
            1)客户区坐标位置
                  clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标
            2)页面坐标位置
                  pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
            3)屏幕坐标位置
                  screenX,screenY

    4)事件类型
        1. UI事件
            onload    
                在浏览器完成对象的装载后立即触发        
            onunload    
                在浏览器完成对象的卸载后立即触发(有些情况需要浏览器支持)
            onselect
                当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
            onresize
                当浏览器窗口被调整到一个新的高度或者宽度时，会触发
        2. 焦点事件
            onfocus
                元素获得焦点的时候触发
            onblur
                元素失去焦点的时候触发

            //IE支持
            onfocusin    
                与onfocus等价
            onfocusout
                与onblur等价
        3. 鼠标与滚轮事件
            onclick         
                在用户用鼠标左键单击对象时触发。只有在一个元素上相继发生onmousedown,onmouseup事件，才会触发click事件
            ondblclick
                当用户双击对象时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
            onmousedown
                任意鼠标按钮按下时触发
            onmouseup
                释放鼠标按钮触发
            onmousemove
                鼠标在元素内部移动的时候重发触发
            onmousewheel
                滚轮事件
                火狐浏览器中需要以下方式来添加该事件
                div.addEventListener("DOMMouseScroll",function(event){
                    //如果是负值说明滚轮是向上滚动，如果是正值说明滚轮是向下滚动；返回的值，均为 3 的倍数
                    console.log(event.detail);
                });
            onmouseover
                鼠标位于元素外部，将其首次移入另一个元素边界之内时触发
            onmouseenter
                鼠标光标从元素外部首次移动到元素范围内激发
            onmouseout  
                在位于元素中的鼠标光标移入到另外一个元素中
            onmouseleave
                在位于元素中的鼠标光标移动到元素范围之外时触发
        
        4. 鼠标按钮
            onmousedown,onmouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。

            例如:
            function test(event){
                //event.button=0 左键
                //event.button=1 中键
                //event.button=2 右键
            }
            <input type="button" value="点击" onmousedown="test(event)" />
        
        5. 键盘事件
            onkeydown  当用户按下键盘【任意】按键时触发。
            onkeypress 当用户按下【字母数字】键时触发。
            onkeyup    当用户按下并释放键盘按键时触发
        6. 表单事件
            onsubmit 当表单将要被提交时触发。
            onreset  当用户重置表单时触发
            onchange 当对象或选中区的内容改变时触发。