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);//(添加后数组长度)
     console.log(arr3);//["q1","q2","q3","q4","q5","q6","q7"]
 //2. arr. unshift(el1),将新元素添加到数组开始,并返回数组的新长度
     var newlen2=arr3.unshift('q0');
     console.log(newlen2);//
     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]);//
    console.log(b);//2 与上面引用结果相同
    console.log(arguments[3]);//4，获得第四个实参，只能通过arguments引用
    console.log(arguments.length);//
    return a+b+c;//
}
console.log(test(1,2,3,4,5,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);//
 //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事件