『JavaScript』数组的使用与常用方法

简介: 创建数组有两种方法方法一:使用数组字面量,简单来说就是在[]之中列出数组的所有元素:var numberArray = [1,2,3,4,5];//数字数组 var stringArray = ["java","script","edu","coder"];//字符串数组 var mixArray = [1,2,"java",true,6.6];//混合数组 如上,各元素之间用,隔开。JavaScript中数组的元素可以是不同的数据类型,如上面的第三个数组。方法二:新建一个Array对象的实例,如:注意不同于java使用[]方括号,而且数组长度可设置也可以不设置var my

1.数组的创建

创建数组有两种方法

方法一:使用数组字面量,简单来说就是在[]之中列出数组的所有元素:

varnumberArray= [1,2,3,4,5];//数字数组  

varstringArray= ["java","script","edu","coder"];//字符串数组  

varmixArray= [1,2,"java",true,6.6];//混合数组  

如上,各元素之间用,隔开。JavaScript中数组的元素可以是不同的数据类型,如上面的第三个数组。

方法二:新建一个Array对象的实例,如:注意不同于java使用[]方括号,而且数组长度可设置也可以不设置

varmyArray=newArray();//创建一个初始为空的数组  

varlengthMixArray=newArray(6);//创建一个长为6的数组  

2.数组元素的读取和写入

数组元素的读取和写入在形式上相似,都是用赋值符号连接的两个表达式。

读取时,存放读入值的变量在左边,数组元素在右边:

varreadArray= [1,3,"js",true,2.22];  

varread=readArray[0];//读取第一个元素到变量read中  

写入时,数组元素在左边,待写值在右边:

varwriteArray= [1,3,"js",true,2.22];  

writeArray[0] =2;//在第一个元素的位置写入2  

console.log(writeArray[0]);//原来的1已经被覆盖,输出2  

3.数组长度

数组长度指数组中元素的个数,等于最大索引值加1,数组的length属性即数组的长度。

vararrayLength= [1,"js",true];  

console.log(arrayLength.length);//输出3  

数组的长度也可以写入,当写入的值小于数组的实际长度时,数组会被删除一部分。大于实际长度时,数组会在尾部添加一些空的区域。

arrayLength.length=2;  

console.log(arrayLength);//输出[1,"js"]  

4.数组元素的增加

JavaScript中,为数组增加元素可以在数组头部(索引最小处)或者尾部进行,可以使用数组的方法或者直接使用运算符。

4.1在尾部添加元素

第一种方法:直接给当前尾部元素的后一个位置赋值。

varnumberArray= [12,23,34,45];  

numberArray[numberArray.length] =56;  

console.log(numberArray);//输出[12,23,34,45,56]  

第二种方法:使用push()函数,往数组的末尾添加一个或多个元素,参数是要添加的元素,返回数组长度。

//利用push()方法在数组尾部添加元素  

varnumberArray= [12,23,34,45];  

varnewLength=numberArray.push(56);  

console.log(newLength);//输出5  

console.log(numberArray);//输出[12,23,34,45,56]  

4.2.在头部添加元素

unshift()方法在数组的头部添加元素,并返回数组新的长度,其余元素自动向索引大的方向移动。

var sArray = ["ja","va","script"];  

var newLength = sArray.unshift("he","llo");  

console.log(newLength)//输出5  

console.log(sArray);//输出["he","llo","ja","va","script"];  

5.数组元素的删除

删除也能在数组头部(索引值小)或者尾部进行。

5.1在尾部删除元素

第一种方法:直接修改数组长度为更小的值。

var array = [1,2,true,"hello"];  

array.length = 3;//索引最大的元素被删除  

console.log(array);//输出[1,2,true]  

第二种方法:使用delete运算符。delete运算符后接要删除的元素,但是删除后,会有一个空占位符,所以数据的长度保持不变。如:

var dArray = [11,22,33,44,55];  

delete dArray[4];//删除索引最大的元素  

console.log(dArray);//输出[11,22,33,44]  

console.log(dArray.length); //长度为5  

第三种方法:使用pop(),一次删除一个,并返回被删除的元素。

//利用pop()方法在数组尾部删除元素  

var numberArray = [3,4,5,6,7];  

var deletedNumber = numberArray.pop();  

console.log(deletedNumber);//输出被删除的元素7  

console.log(numberArray);//删除后的数组为[3,4,5,6]  

5.2在头部删除元素

unshift(),自然有shift()shift()的作用是删除数组头部一个元素并返回该元素,然后所有元素往索引值小的方向移动一位。

初学者很容易混淆这两个方法,建议记住shift单词的意思是:删除,去掉。

var dArray = [11,22,33,44,55];  

console.log(dArray.shift());//输出11,11被从数组中删除  

console.log(dArray);//输出[22,33,44,55]  

6.数组的遍历

数组的遍历指按顺序访问你数组的每一个元素。有两种方法:  

  • 使用for循环

//依次在浏览器的控制台输出one,two,three,four  

var stringArray = ["one","two","three","four"];  

for(var i=0,sLength=stringArray.length;i<sLength;i++) {  

   console.log(stringArray[i]);  

}  

  • 使用forEach()方法forEach()方法的参数是一个无名字的函数(匿名函数),函数有三个参数,第一个参数是当前的数组元素,第二个参数是当前的索引,第三个参数是数组对象的索引。与for循环的区别是无法用break中断循环。

var numArr = [10,11,12,13,14];  

numArr.forEach(function(mem,i,arr) {  

   mem *= 10;  

   arr[i] = mem;  

});  

console.log(numArr);//输出[100,110,120,130,140]  

7.多维数组的实现

多维数组实际上就是数组的数组,指数组的每一个元素也是一个数组,这里仅讨论二维数组。

JavaScript中二维数组的列的长度不唯一,第一列可以有4个元素,第二列可以有5个元素,等等。

  • 二维数组的创建创建已知的二维数组:

var multiArr = [[1,2,3,4],[5,6,7],[8,9]];  

创建仅知道长度的二维数组

//创建一个4行6列的二维数组  

var muArr = new Array(4);  

for(var i = 0;i <4;i++) {  

   muArr[i] = new Array(6);  

}  

  • 二维数组的读写二维数组的读写用数组名[][]的方式,第一个中括号内为行数,从0计数,第二个中括号内为列数,也从0计数。以上面的数组multiArr为例:

var multiArr = [[1,2,3,4],[5,6,7],[8,9]];  

console.log(multiArr[1][1]);//读元素,输出6  

multiArr[0][0] = 0;//写元素  

例题:

  • 将一维数组arr转为ab列的二维数组,行优先;
  • 返回该二维数组;
  • 具体请参见后续测试样例。

题解:

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,19,20,21,23,22];

function mainJs(a,b) {

   a = parseInt(a);

   b = parseInt(b);

   //请在此处编写代码

   /*********begin*********/

   var ar=new Array(a);

   for(var i=0;i<a;++i){

       ar[i]=new Array(b);

   }

   for(var i=0;i<a;++i){

       for(var j=0;j<b;++j){

           ar[i][j]=arr.shift();

       }

   }

   return ar;

   /*********end*********/

}


8.查找元素的位置

根据值查找元素的位置,有两个方法:indexOf()lastIndexOf()前者从索引小处往大搜索,后者相反。都返回第一次遇到该元素时的索引。

两者都有两个参数,第一个参数为要查找的元素,第二个参数可选,为搜索的起点索引。如:

var search = ["a","b","a","b","c","d","a","a","b","a"];  

console.log(search.indexOf("a"));//输出0  

console.log(search.lastIndexOf("a"));//输出9  

console.log(search.indexOf("a",2));//输出2,从索引为2处开始搜索

第二个参数可以是负数,-1表示倒数第一个元素,-2表示倒数第二个元素,依次类推。如

var search = ["a","b","a","b"];  

console.log(search.indexOf("a",-3));//输出2  

console.log(search.lastIndexOf("a",-3));//输出0

9.数组的合并

concat()实现数组合并,其形式是数组a.concat(数组b),合并之后返回新数组,新数组为数组a后面连接数组b,但是数组ab不变。

var a = [1,2,3];  

var b = [4,5,6];  

var c = a.concat(b);//合并后返回新数组  

console.log(c);//输出[1,2,3,4,5,6]  

10.数组倒置

reverse()实现数组倒置,无参数,返回倒置后的数组,同时调用该方法的数组也会被倒置。称为就地逆置。

var a = [1,2,3,4];  

var b = a.reverse();  

console.log(a);//输出[4,3,2,1]  

console.log(b);//输出[4,3,2,1]

11.元素合并

join()将数组的所有元素连接起来组成字符串,参数为元素之间的分隔符,默认逗号。

var sArray = ["June","July","August"];  

console.log(sArray.join());//输出June,July,August  

console.log(sArray.join("+"));//输出June+July+August  

12.元素排序

sort()实现数据元素排序,不带该参数表示元素按照ASCII表从小到大排序。如:

var stringArray = ["a","ab","b","aa"];  

stringArray.sort();  

console.log(stringArray);//输出["a","aa","ab","b"]  

需要注意的是数字的排序,例子如下:

var arr = [1,2,10,5,12];  

arr.sort();  

console.log(arr);//输出[1,10,12,2,5];  

带参数的格式如下:相当于自定义一个排序函数

arr.sort(function(a,b){  

           return a-b;  //升序排列  

})  

//或者

arr.sort(function(a,b){  

           return b-a;  //降序排列  

})  

var arr = [1,2,10,5,12];  

arr.sort();  

console.log(arr);//输出[1,10,12,2,5]  

arr.sort(function(a,b){  

    return a-b;  

});  

console.log(arr);//输出[1,2,5,10,12]  

13.提取子数组

slice()返回切割出的子数组,不修改原来的数组。

它有两个整数参数aba表示切割的起点,该点属于子数组;b可选,表示切割的终点,该点不属于子数组。(左闭右开的区间)

ab都可以为负数,如-1表示倒数第一个位置,依次类推。

var arr = ["a","b","c","d","e"];  

console.log(arr.slice(0,3));//["a","b","c"]  

console.log(arr.slice(0,-2));//["a","b","c"]  

console.log(arr.slice(4));//["e"]  

console.log(arr.slice(-4));//["b","c","d","e"]  

编程要求

  • 获取字符串a在数组myArray的所有位置并组成一个位置数组;
  • 获取字符串b在数组myArray的所有位置并组成一个位置数组;
  • 合并这两个数组然后返回合并后的数组。

题解

function mainJs(myArray) {

   myArray = myArray.split(",");

   //请在此处编写代码

   /*********begin*********/


   var arr=new Array();

   var brr=new Array();

   for(var i=0;i<myArray.length;++i){

       if(myArray[i]=="a"){

           arr.push(i);

       }

       if(myArray[i]=="b"){

           brr.push(i);

       }

   }

   return arr.concat(brr);

   /*********end*********/

}


14.冒泡排序

//冒泡排序  

var arr = [9,5,8,0,2,6];  

var aLength = arr.length;  

var temp;  

var flag = 0;//元素交换的标志位  

for(var i = 1;i < aLength;i++) {//共进行n-1次冒泡  

   flag = 0;  

   for(var j = 0;j < aLength-i;j++) {//一次冒泡  

       if(arr[j]>arr[j+1]) {//交换元素  

           temp = arr[j];  

           arr[j] = arr[j+1];  

           arr[j+1] = temp;  

           flag = 1;  

       }  

   }  

   if(flag == 0) break;//本次冒泡没有元素交换  

}  

console.log(arr);  

冒泡排序关键在于这两个循环的控制,外层循环控制冒泡的次数,一般是n-1次,n表示数组长度。

内循环j的初值为0,因为不论是第几趟冒泡,都是从arr[0]开始遍历数组,j的上限设置为arr.length-i,因为随着冒泡的进行,越往后需要比较的数组的索引上限越小。

15.选择排序

原理:遍历数组,记录下最大元素的索引值,将最大的元素与数组最后一个元素交换,这样最大的元素到了索引值最大的地方,称为一趟选择排序。与冒泡不同的是,只会发生一次交换。

//选择排序  

var arr = [6,12,3,34,1,56,77,0,2,43];  

var aLength = arr.length;  

var temp;  

var max = arr[0];  

var maxIndex = 0;  

for(var i = 0;i < aLength-1;i++) {//共进行n-1次选择  

   for(var j = 1;j < aLength-i;j++) {//一次选择  

       if(arr[j] > max) {  

           max = arr[j];  

           maxIndex = j;  

       }  

   }  

   //将本次选出的最大元素移动到最终的位置上  

   temp = arr[aLength-i-1];  

   arr[aLength-i-1] = arr[maxIndex];  

   arr[maxIndex] = temp;  

   var max = arr[0];  

   var maxIndex = 0;  

}  

console.log(arr);  

这里也有两个大循环,第一个循环控制总的排序趟数,第二个循环求本次选择出的最大元素的索引值,第二个循环结束后将本次的最大值与最终位置上的元素交换。

16.编程练习

本关的编程任务是补全右侧代码片段中beginend中间的代码,具体要求如下:

  • 函数mainJs(a)中的变量arr是一个数组,你需要对该数组进行选择排序;
  • 返回选择排序进行过程中,在每一趟交换前,待排序子数组的最大元素的位置组成的数组;
  • 比如对于上面相关知识中的数组[9,5,8,0,2,6],第一次交换前,最大的元素9的索引是0,第二次交换前,最大元素8的索引是2,第三次交换前最大元素6的索引是0,第四次交换前最大元素5的索引是1,第五次交换前最大元素2的索引是1,第六次交换前最大元素0的索引是0。索引需要返回的数组是[0,2,0,1,1,0]
  • 具体请参见后续测试样例。

题解:

function mainJs(a) {

   var arr = a.split(",");

   for(var i = 0;i < arr.length;i++) {

       arr[i] = parseInt(arr[i]);

   }

   //请在此处编写代码

   /*********begin*********/

   var k=0;

   var indexArr=new Array();

   for(var i=0;i<arr.length-1;++i){

       k=0;

       var j=0;

       for(j=1;j<arr.length-i;++j){

           if(arr[j]>arr[k]){

               k=j;

           }

       }

       indexArr.push(k);

       var temp=arr[k];

       arr[k]=arr[j-1];

       arr[j-1]=temp;

   }

   return indexArr;

   /*********end*********/

}


相关文章
|
13天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
22小时前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
6天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
17天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
19天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
16 2
|
18天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
38 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
23天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
19 3
|
22小时前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
22小时前
|
JavaScript 前端开发 开发者
|
18天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
32 0