javaScript数组

Posted 2020-10-13 小Cai先森

一、js数组

　　1、创建数组：

1 var arr = new Array();//创建没有元素空数组
2 var arr1 = new Array("value1","valeu2","value3");//初始化一个具有3个元素的数组
3 var arr2 = new Array(10);//初始化一个有10个空元素的数组
4 
5 var arr3 = [];//初始化一个空数组
6 var arr4 = [10];//初始化一个只有一个元素的数组
7 var arr5 = ["value1","valeu2","value3"];//初始化一个有三个元素的数组

 　　其实js创建数组是可变的，一开始创建的数组大小只是一个初始化的空间大小，如果想往数组中添加更多的内容可以直接添加，形如：

1 var arr3 = [];//初始化一个空数组
2 arr3[4] = "新元素"

　　如上代码，声明了一个空数组，却在第5个位置上添加了一个新元素，那么这个数组的大小现在就变成了5，前面的4个元素全部内容为空【在js中的类型为：undefined】。可以通过typeof()函数查看数据类型

1 document.write("arr3[3]的数据类型: "+typeof(arr3[3])+"<br>")
2 document.write("arr3[4]的数据类型: "+typeof(arr3[4]))

　　结果：

　　

　　2.数组操作方法：

　　2.1 join()

1 var arr = ["value1","valeu2","value3"];
2 var str_ = arr.join(" * ");//将数组内容填整成字符串，并用*分隔开，不会更改数组内容

　　2.2 push() 和 pop() 【进栈和出栈：对数组进行类似堆栈操作，遵守先进后出的原则】push和pop都会改变数组的内容

1 var arr = ["value1","valeu2","value3"];
2 
3 var push_cell = arr.push("123");//返回数组大小（新元素在数组中的位置+1），
4 document.write(push_cell+"<br>");
5 document.write(arr+"<br>");
6 
7 var pop_cell = arr.pop();//取出最后一个元素（栈顶元素出栈）
8 document.write(pop_cell+"<br>");
9 document.write(arr+"<br>")

　　测试结果：

　　

　　2.3 shift() 和 unshift() 【和push()、pop()的操作目的相同（一个添加一个删除），，但是操作位置不同，shift是对数组第一个元素进行操作的】

1 var arr = ["value1","valeu2","value3"];
2 
3     var unshift_cell = arr.unshift("新元素");//返回数组大小，
4     document.write(unshift_cell+"<br>");
5     document.write(arr+"<br><br>");
6 
7     var shift_cell = arr.shift();//取出数组第一个元素
8     document.write(shift_cell+"=>被删除"+"<br>");
9     document.write(arr+"<br>")

　　结果：

　　

　　2.4 sort()升序排序

　　　在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

1 var arr = [1, 11, 12, 5, 23];
2 document.write(arr.sort()+"<br>");

　　测试结果：（sort()会改变数组元素位置）

　　

　　解决办法：自定义一个比较函数

 1 /*比较函数*/
 2 function compare(v1,v2){
 3     if(v1 > v2){
 4         return 1;
 5     }else if(v1 < v2){
 6         return -1;
 7     }else{
 8         return 0;
 9     }
10 }

 

　　　在sort()函数中传入比较函数：

1 var arr = [1, 11, 12, 5, 23];
2 document.write(arr.sort(compare)+"<br>");

 

　　此函数用数值比较代替字符串比较

　　2.5 reverse() 反转数组项顺序

1 var arr = [1, 11, 12, 5, 23];
2 arr.reverse()

 　　2.6 concat() 数组拼接函数

1 var arr = [1, 11, 12, 5, 23];
2 var arrCopy = arr.concat([9,[10,13]]);
3 document.write(arr+"<br>")
4 document.write(arrCopy[6]+"<br>")

 

 　　将数组arr的后面添加一个二维数组，然后将新组成的数组赋给arrCopy，此操作不会影响原数组。

　　2.7 slice() 单词意思切片【函数用于将数组进行切分，然后返回切分结果】

1 /*数组操作：slice()剪切函数*/
2 var arr = [1, 11, 12, 5, 23];
3 var arrCopy1 = arr.slice(1, 3);//右边的参数是闭区间，以该参数为下标的值不会被取到
4 var arrCopy2 = arr.slice(0, 3);//取下标为0，1，2的参数的值
5 var arrCopy3 = arr.slice(-3, -2);//取下标倒数第三个到倒数第2个的值
6 document.write(arrCopy1+"<br>")
7 document.write(arrCopy2+"<br>")
8 document.write(arrCopy3+"<br>")

 　　2.8 splice() 

 1 var arr = [1,2,3,4,5,6];
 2 var arrRemoved = arr.splice(0,2);//表示从下标为0的位置开始删除两个数，将删除的内容以数组的形式赋值给新数组，
 3 console.log(\'=======\')
 4 console.log(arr); 
 5 console.log(arrRemoved); 
 6 var arrRemoved2 = arr.splice(2,0,\'a\',\'b\');//表示将从下标为2的位置开始删除0个数（也就是不删除），然后从下标为2的位置开始第3个参数（含第三个参数）以后的数添加到arr数组中。
 7 console.log(\'=======\')
 8 console.log(arr); 
 9 console.log(arrRemoved2); 
10 var arrRemoved3 = arr.splice(1,1,\'a\',\'b\');//跟上一条类似，表示从下标为1的位置开始删除1位数，然后把剩下的参数添加到新数组中，删除的内容以数组的形式作为返回值返回
11 console.log(\'=======\')
12 console.log(arr); 
13 console.log(arrRemoved3); 

　　执行结果：

　　

　　2.9 lastIndexOf( ) 和 Indexof()

1 var arr = [1,2,3,4,5,6];
2 console.log(arr.lastIndexOf(5, 5));//从下标为5的位置开始，从后向前查找元素为5的值，并返回元素为5的值的数组下标
3 console.log(arr.indexOf(5, 4));//从下标为4的位置开始，从前往后查找元素为5的值，并返回元素为5的值的数组下标，找不到则返回-1

 　　2.10 forEach() 遍历数组的每个值并进行相应的函数操作

1 var arr = [1, 2, 3, 4, 5];
2     /*forEach默认给传入的函数三个参数：
3       1.遍历数组的每个值
4       2.每个值对应的下标
5       3.数组本身*/
6     arr.forEach(function(value, index, arrCopy){
7         console.log(value + \'|\' + index + \'|\' + (arrCopy === arr));
8     });

　　执行结果：

　　

　　2.11 map()数组映射函数

 1 var arr = [1, 2, 3, 5, 5];
 2 /*map传入一个回掉函数：返回结果为一个数组传入的参数
 3     1.数组的值
 4     2.数组的下标
 5     当只传入一个参数的时候默认是数组每个值*/
 6 var arrMapResult = arr.map(function(value,index){
 7     console.log(index);
 8     return value*value;
 9 })
10 console.log(arrMapResult)

　　运行结果：

　　

　　2.12 filter()过滤函数

 1 var arr = [1, 2, 3, 4, 5];
 2 /*filter传入一个回掉函数：返回结果为一个满足过滤条件的数组
 3     传入的参数：
 4         1.数组的值
 5         2.数组的下标
 6         当只传入一个参数的时候默认是数组每个值*/
 7 var arrFilterResult = arr.filter(function(value,index){
 8     console.log(index)
 9     return value>3;
10 })
11 console.log(arrFiltResult)

　　测试结果：

　　

　　2.13 every()判断数组所有值是否符合给定条件

 1 var arr = [1, 2, 3, 4, 5];
 2     /*every传入一个回掉函数：返回结果为bool型，当数组所有参数符合条件的时候返回true，否则返回false，一旦有一个值不符合，就会结束遍历
 3         传入的参数：
 4             1.数组的值
 5             2.数组的下标
 6             当只传入一个参数的时候默认是数组每个值*/
 7     var result = arr.every(function(value,index){
 8         console.log(index)
 9         return value>0;
10     })
11     console.log(result)

 

　　2.14 some（）判断数组中是否有符合条件的值有的话则返回true,与every相反

 1 var arr = [1, 2, 3, 4, 5];
 2     /*every传入一个回掉函数：返回结果为bool型，当数组中有一个值符合给定条件的时候返回true，否则返回false，一旦有一个值符合，就会结束遍历
 3         传入的参数：
 4             1.数组的值
 5             2.数组的下标
 6             当只传入一个参数的时候默认是数组每个值*/
 7     var result = arr.some(function(value,index){
 8         console.log(index)
 9         return value>0;
10     })
11     console.log(result)

　　2.15  reduce() 和reduceRight()

 1 var values = [1,2,3,4,5];
 2 /*reduceRight表示从数组的右边（也就是数组最后一个值）开始遍历，返回结果是对数组所有操作的规整结果。该函数可以传入两个参数，一个是回掉函数一个是初始值。
 3     参数介绍：
 4         1 prev:表示遍历的上一个数，当给定初始值的时候，priev一开始的值就是初始值，没给定初始值的时候默认是遍历数组的第一个值（从那开始哪里就是第一个值）
 5         2 cur:表示遍历表示当前遍历的值
 6         3 index:表示档期那遍历值的下标
 7         4 array：表示数组本身
 8     reduce函数除了遍历方向相反外，其余的和reduceRight一样*/
 9 var sum = values.reduceRight(function(prev, cur, index, array){
10     console.log(prev+" "+cur + " "+index)
11     return prev + cur;
12 },0);
13 console.log(sum); 
14 
15 console.log(\'======分割线===========\')
16 
17 var sum2 = values.reduce(function(prev, cur, index, array){
18     console.log(prev+" "+cur + " "+index)
19     return prev + cur;
20 },0);
21 console.log(sum2); 

　　测试结果：

　　

 

 

 

 

 

 

 

　　　　

 

 

 

========分割线=========