JavaScript学习笔记3之 数组 & arguments（参数对象）& 数字和字符串转换 & innerText/innerHTML & 鼠标事件

一、Array数组

1、数组初始化（Array属于对象类型）

/*关于数组的初始化*/
//1.创建 Array 对象--方法1：
    var arr1=[];
    arr1[0]='aa';//给数组元素赋值
    arr1[1]='bb';
    arr1[2]='cc';
    arr1[3]='dd';
    console.log(arr1);//["aa","bb","cc","dd"]
//1.创建 Array 对象--方法2：
    var arr2=new Array();//构造一个数组对象
    arr2[0]='11';
    arr2[1]='22';
    arr2[2]='33';
    arr2[3]='44';
    console.log(arr2);//["11","22","33","44"]
//2.创建一个数组并赋值
    var arr11=['a','b','c','d'];
    console.log(arr11);//["a","b","c","d"]
    var arr21=new Array('1','2','3','4');
    console.log(arr21);//["1","2","3","4"]
//3.创建一个数组并指定长度
    var arr3=new Array(4);//指定数组长度为4
    arr3[0]='q1';
    arr3[1]='q2';
    arr3[2]='q3';
    arr3[3]='q4';
    arr3[4]='q5';
    console.log(arr3.length);//5(数组长度)
    console.log(arr3);//["q1","q2","q3","q4","q5"]
//4.数组类型--object类型
    console.log(typeof arr3);//object

2、数组常用方法及属性

/*数组常用方法及属性*/
//1.  arr. push(el1..)，将新元素添加到数组末尾,并返回数组的新长度
    var newlen1=arr3.push('q6','q7');
    console.log(newlen1);//7(添加后数组长度)
    console.log(arr3);//["q1","q2","q3","q4","q5","q6","q7"]
//2. arr. unshift(el1),将新元素添加到数组开始,并返回数组的新长度
    var newlen2=arr3.unshift('q0');
    console.log(newlen2);//8
    console.log(arr3);//["q0","q1","q2","q3","q4","q5","q6","q7]
//3.  arr.pop( )  删除数组最后一项，并返回被删除的元素
    var newlen3=arr3.pop();
    console.log(newlen3);//q7
    console.log(arr3);//["q0","q1","q2","q3","q4","q5","q6"]
//4.  arr.shift( )  删除第一个元素，并返回被删除的元素
    var newlen4=arr3.shift();
    console.log(newlen4);//q0
    console.log(arr3);//["q1","q2","q3","q4","q5","q6"]
//5.1 arr.splice(3)从3的位置开始向后删除所有元素，（一个参数）
    var newlen5=arr3.splice(3);
    console.log(newlen5);//[q4","q5","q6"]返回被删元素
    console.log(arr3);//["q1","q2","q3"]
//5.2 arr.splice(1,2) 从1的位置开始(包含1向后删除2个元素，数组形式返回所移除的元素
    var newlen6=arr3.splice(2,1);
    console.log(newlen6);//["q3"]
    console.log(arr3);//["q1","q2"]
//5.3  arr.splice(1,2,w,k)  也可在删除元素的位置添加元素
    var newlen6=arr3.splice(2,1,'a','b');
    console.log(newlen6);//[]在q3位置加入a,b;
    console.log(arr3);//["q1","q2","a","b"]
//6.slice(start,end); 以数组的形式返回数组的一部分，不包括end位置的元素，如果省略end将复制start及之后的所有元素
    var newlen7=arr3.slice(2,4);
    console.log(newlen7);//["a","b"]
    console.log(arr3);//["q1","q2","a","b"]
//7.join(‘分隔符’) 用数组的元素组成字符串 
    var str1=arr3.join();//不加分隔符，默认加',';
    console.log(str1);//q1,q2,a,b
    console.log(typeof str1);//string
    var str2=arr3.join(' ');//空格
    console.log(str2);//q1 q2 a b
    console.log(typeof str2);//string
    var str3=arr3.join(',');//与默认结果相同
    console.log(str3);//q1,q2,a,b
    console.log(typeof str3);//string
//8.concat( ) 方法用于合并数组并返回一个新数组,arr.concat(array1,array2,......,arrayN);
    var arr=[];
    var sum=arr.concat(arr1,arr2,arr3);
    console.log(sum);//["aa","bb","cc","dd","11","22","33","44","q1","q2","a","b"]
//9.arr.reverse( ) 将数组反转 (倒过来显示)
    var arr4=arr3.reverse();
    console.log(arr4);//["b","a","q2","q1"]
//10.for...in声明 用来循环输出数组中的元素
    for (var x in arr1){
        console.log(arr1[x]);//aa bb cc dd
    }

3、对数组的排序（sort（）；）

/*对数组的排序*/
//1.sort( ) 文字数组从字面上对数组进行排序
    var arr1=['ad1','bt3','ca4','ac2','bf3'];
    console.log(arr1);
    arr1.sort();
    console.log(arr1);//['ac2','ad1','bf3','bt3','ca4']
    var arr2=['5','21','41','5','18','41','5','75'];
    console.log(arr2);
    arr2.sort();
    console.log(arr2);//["18","21","41","41","5","5","5","75"]
//2.1 sort(function (a,b){return a-b（升序）}); 数字数组按数值排序
    var arr3=['5','31','41','5','18','41','5','75'];
    console.log(arr3);
    arr3.sort(function(a,b){return a-b});//升序
    console.log(arr3);//["5","5","5","18","31","41","41","75"]
    /*arr3.sort(function(a,b){return b-a});//降序
    console.log(arr3);*/
//2.2 按数值排序,删去重复项
    var newarr=[];
    for (var i = 0; i < arr3.length; i++) {
        if (arr3[i]==arr3[i+1]) {
            continue;
        } 
        newarr.push(arr3[i]);//放在新的数组里newarr,push添加到数组末尾

    }
    console.log(newarr);
//3.封装排序函数 sort();
    function resetArr(arr){
        arr.sort(function(a,b){return a-b});
        var newarr=[];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i]==arr[i+1]) {
                continue;
            }
            newarr.push(arr[i]);
        };
        return newarr;
    }
    var arr4=[12,45,45,12,2,8,5,85,5,12];
    console.log(arr4);
    var arr5=resetArr(arr4);//调用执行函数
    console.log(arr5);

4.数组Tab切换

var tab=document.getElementById('tab');
        var spans=tab.getElementsByTagName('span');
        var img=tab.getElementsByTagName('img')[0];
        var h2=tab.getElementsByTagName('h2')[0];
        var arr=[['01.jpg','02.jpg','03.jpg'],['战狼','速度与激情8','暴疯语']];
        for (var i = 0; i < spans.length; i++) {
            spans[i].onclick=function(){
                for (var j = 0; j < spans.length; j++) {
                    if(spans[j]==this){
                        this.className='show';
                        img.src=arr[0][j];//通过数组传递数据
                        h2.innerHTML=arr[1][j];
                    }else{
                        spans[j].className='';
                    };
                };
            };
        };

二、参数对象arguments

参数对象arguments是指向实参对象的引用
arguments并不是真正的数组（用法跟数组相同），它是一个实参对象
实参对象包含以数字为索引的一组元素以及length属性

function test(a,b,c){
    console.log(arguments[1]);//2
    console.log(b);//2 与上面引用结果相同
    console.log(arguments[3]);//4，获得第四个实参，只能通过arguments引用
    console.log(arguments.length);//6
    return a+b+c;//6
}
console.log(test(1,2,3,4,5,6));//6

三、 数字和字符串转换

1、字符串转换成数字
parseInt(string) ： 函数返回一个整数
parseFloat(string) ：函数将字符串转换成浮点数
举例：parseInt('20.5px') : 返回 20
举例：parseFloat('31.24abc') : 返回 31.24
如果解析不到数字，则返回一个NaN 非数字值
可以用isNaN( )函数来检测，返回一个布尔值。

/*字符串转化成数字*/
//1.parseInt(string) ：函数返回一个整数
    var h1="105.6px";
    var x1=parseInt(h1);
    console.log(x1);//105
//2.parseFloat(string) ：函数将字符串转换成浮点数
    var x2=parseFloat(h1);
    console.log(x2);//105.6
//3.如果解析不到数字，则返回一个NaN 非数字值;可以用isNaN( )函数来检测，返回一个布尔值
    var h2="a105.6px";
    var x3=parseInt(h2);
    console.log(x3);//NaN 
  /*isNaN( )的应用 */
    var ipt=document.getElementById('ipt');
    ipt.onchange=function(){
        if (isNaN(ipt.value)) {
            alert('亲，只能输入数字！');
        } else {
            alert('恭喜，输入成功！');
        }
    }

2、数字转换成字符串
toString()方法将数字转换成字符串返回

/*数字转化成字符串*/
    var n=12;
    var str=n.toString();//返回字符串
    console.log(typeof n);
    console.log(typeof str);

3、数字+ 与 字符串+ 的区别
数字的加法与字符串的连接都是 + 符号
是加法运算还是字符串的连接，取决于变量的类型
var a = 'abc' + 'xyz'; //a的值为：abcxyz,字符串与字符串是连接
var a = 10 + 5; //a的值为：15，都是数字即相加
var a = 'abc' + 10; //a的值为：abc10，字符串与数字，自动将数字转换成字符串了
var a = 'abc' + 10 + 20 + 'cd'; //a的值为:abc1020cd
var a = 10 + 20 + 'abc' + 'cd'; //a的值为:30abccd，先数字相加，然后再与字符串连接

四、获取标签的值（innerText/innerHTML）

innerText就是标签中所有包含的代码内容(包括标签)
innerHTML 就是标签中所有包含的代码解释出来之后显示的内容(不包括标签)
value 获取表单元素的值，如input, textarea, select
实例：
<p id="p1">内容1<span>内容2</span></p>
p1.innerText的值是：内容1<span>内容2</span>
p1.innerHTML的值是：内容1 内容2

五、鼠标事件（mouseenter/mouseleave）

鼠标指针进入被选元素或其子元素，都会触发mouseover事件
鼠标指针离开被选元素或其子元素，都会触发mouseout事件

鼠标指针进入被选元素时，会触发mouseenter事件
鼠标指针离开被选元素时，会触发mouseleave事件