一、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事件
时间： 2024-10-17 23:45:02