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

一、Array数组

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

 1 /*关于数组的初始化*/
 2 //1.创建 Array 对象--方法1：
 3     var arr1=[];
 4     arr1[0]='aa';//给数组元素赋值
 5     arr1[1]='bb';
 6     arr1[2]='cc';
 7     arr1[3]='dd';
 8     console.log(arr1);//["aa","bb","cc","dd"]
 9 //1.创建 Array 对象--方法2：
10     var arr2=new Array();//构造一个数组对象
11     arr2[0]='11';
12     arr2[1]='22';
13     arr2[2]='33';
14     arr2[3]='44';
15     console.log(arr2);//["11","22","33","44"]
16 //2.创建一个数组并赋值
17     var arr11=['a','b','c','d'];
18     console.log(arr11);//["a","b","c","d"]
19     var arr21=new Array('1','2','3','4');
20     console.log(arr21);//["1","2","3","4"]
21 //3.创建一个数组并指定长度
22     var arr3=new Array(4);//指定数组长度为4
23     arr3[0]='q1';
24     arr3[1]='q2';
25     arr3[2]='q3';
26     arr3[3]='q4';
27     arr3[4]='q5';
28     console.log(arr3.length);//5(数组长度)
29     console.log(arr3);//["q1","q2","q3","q4","q5"]
30 //4.数组类型--object类型
31     console.log(typeof arr3);//object

2、数组常用方法及属性

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

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

 1 /*对数组的排序*/
 2 //1.sort( ) 文字数组从字面上对数组进行排序
 3     var arr1=['ad1','bt3','ca4','ac2','bf3'];
 4     console.log(arr1);
 5     arr1.sort();
 6     console.log(arr1);//['ac2','ad1','bf3','bt3','ca4']
 7     var arr2=['5','21','41','5','18','41','5','75'];
 8     console.log(arr2);
 9     arr2.sort();
10     console.log(arr2);//["18","21","41","41","5","5","5","75"]
11 //2.1 sort(function (a,b){return a-b（升序）}); 数字数组按数值排序
12     var arr3=['5','31','41','5','18','41','5','75'];
13     console.log(arr3);
14     arr3.sort(function(a,b){return a-b});//升序
15     console.log(arr3);//["5","5","5","18","31","41","41","75"]
16     /*arr3.sort(function(a,b){return b-a});//降序
17     console.log(arr3);*/
18 //2.2 按数值排序,删去重复项
19     var newarr=[];
20     for (var i = 0; i < arr3.length; i++) {
21         if (arr3[i]==arr3[i+1]) {
22             continue;
23         } 
24         newarr.push(arr3[i]);//放在新的数组里newarr,push添加到数组末尾
25 
26     }
27     console.log(newarr);
28 //3.封装排序函数 sort();
29     function resetArr(arr){
30         arr.sort(function(a,b){return a-b});
31         var newarr=[];
32         for (var i = 0; i < arr.length; i++) {
33             if (arr[i]==arr[i+1]) {
34                 continue;
35             }
36             newarr.push(arr[i]);
37         };
38         return newarr;
39     }
40     var arr4=[12,45,45,12,2,8,5,85,5,12];
41     console.log(arr4);
42     var arr5=resetArr(arr4);//调用执行函数
43     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 /*字符串转化成数字*/
 2 //1.parseInt(string) ：函数返回一个整数
 3     var h1="105.6px";
 4     var x1=parseInt(h1);
 5     console.log(x1);//105
 6 //2.parseFloat(string) ：函数将字符串转换成浮点数
 7     var x2=parseFloat(h1);
 8     console.log(x2);//105.6
 9 //3.如果解析不到数字，则返回一个NaN 非数字值;可以用isNaN( )函数来检测，返回一个布尔值
10     var h2="a105.6px";
11     var x3=parseInt(h2);
12     console.log(x3);//NaN 
13   /*isNaN( )的应用 */
14     var ipt=document.getElementById('ipt');
15     ipt.onchange=function(){
16         if (isNaN(ipt.value)) {
17             alert('亲，只能输入数字！');
18         } else {
19             alert('恭喜，输入成功！');
20         }
21     }

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

1 /*数字转化成字符串*/
2     var n=12;
3     var str=n.toString();//返回字符串
4     console.log(typeof n);
5     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事件