JS 的 Array()内置对象

简介: 一文掌握 JS 的 Array()内置对象

一:数组的两种创建方式

数组的创建有两种方式,分别是利用数组字面量创键 和 利用 new Array() 创建。


1.利用数组字面量创建:

vararr=[1,2,3,4,5,6];

2.利用 new Array() 创建:


括号里无参数,即创建了一个空的数组

vararr1=newArray();
console.log(arr1);  //结果为创建了一个空的数组[]


括号里有一个数字 n,则这个数字代表了数组的长度为 n,里面有 n 个空的元素

vararr2=newArray(2);  //2代表数组长度为2,里面有2个空的数组元素console.log(arr2);

括号里有两个或两个以上数字时,就代表了数组元素,不再代表数组长度

vararr3=newArray(1,2);  //代表数组元素为1,2,等同于字面量创建[1,2]console.log(arr3);


二:判断是否为数组

判断是否为数组有两种方式,instanceof Array.isArray( 参数 ),两者判断方法均为如果是数组则返回 true,不是数组则返回 false,其中第二个方法为H5新增加的方法

vararr=[];
varobj={};
console.log(arrinstanceofArray);  //trueconsole.log(objinstanceofArray);  //falseconsole.log(Array.isArray(arr));  //trueconsole.log(Array.isArray(obj));  //false



三:数组元素的增加和删除

数组元素的增加和删除分别有两个方法,增加有 push(),unshift(),删除有 pop(),shift(),下面对这四个方法一一讲解


push( 参数1,参数2...... ):有参数,在数组的最后一个位置添加,参数为新添加的元素(可以为多个元素),如果返回该方法,返回值为新数组的长度


var arr=[1,2,3,4,5,6];

console.log(arr.push(7,8,9,'小明','小华'));  //返回值为新数组的长度

console.log(arr);  



unshift( 参数1,参数2......):有参数,在数组最前面的位置添加新元素,参数为新添加的元素(可以为多个元素),如果返回该方法,返回值为新数组的长度


var arr=[1,2,3,4,5,6];

console.log(arr.unshift(0,'小明','小华'));  //返回值为新数组的长度

console.log(arr);



pop():无参数,删除数组的最后一个元素,一次只能删一个元素,数组长度减1,如果返回该方法,返回值为被删掉的元素


var arr=[1,2,3,4,5,6];

console.log(arr.pop());  //返回值为被删掉的元素

console.log(arr);



shift():无参数,删除数组的第一个元素,一次只能删一个元素,数组长度减1,如果返回该方法,返回值为被删掉的元素


var arr=[1,2,3,4,5,6];

console.log(arr.shift());  //返回被删掉的元素

console.log(arr);



四:筛选数组的改进

在之前学习数组时,我们经常会遇到一些筛选数组的案例,但是学习了上面的四种方法,对于这类问题又可以得到一个升华。


例如:要求我们筛选出一个数组中大于100的数,删掉小于100的数


在以前的数组基础中,我们可以得到这样的代码:


var arr=[102,98,65,152,34,99,187,256,139,74,112,35];

var newarr=[];

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

   if(arr[i]>100){

       newarr[newarr.length]=arr[i];  //这是我们常规的写法

   }

}

console.log(newarr);


但是学过了 push() 方法,我们就可以利用此方法解决上述问题,更为直观:


var arr=[102,98,65,152,34,99,187,256,139,74,112,35];

var newarr=[];

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

   if(arr[i]>100){

       newarr.push(arr[i]);  //改进代码,更为直观清晰

   }

}

console.log(newarr);


五:数组的翻转与排序

对于数组的翻转与排序,我们都知道可以通过 for循环,冒泡排序,选择排序 来实现,但是在Array对象中,给好了方法可以直接使用,分别是反转数组的方法 reverse() 和排序的方法 sort()


reverse():无参数,数组可直接使用


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

console.log(arr.reverse());  //结果为9,8,7,6,5,4,3,2,1

sort():这个的情况略微有些复杂,如果直接使用的话只能排序数组内10以内的数,要想自定义升序排序并且不受数字大小限制,需要在该方法中写入一个函数作为参数(*固定使用牢记即可*)


升序的参数:


         function(a,b){


         return   a-b ;}


var arr=[1,23,46,9,68,35,7,11];

arr.sort(function(a,b){

   return a-b;  //返回a-b为升序

})

console.log(arr);



降序的参数:


         function(a,b){


         return   b-a ;}


var arr=[1,23,46,9,68,35,7,11];

arr.sort(function(a,b){

   return b-a;  //返回b-a为降序

})

console.log(arr);



此参数牢记即可


六:数组的元素索引

数组的索引有两种查询方式,从第一个开始查询的 indexOf() 和从最后开始查询的 lastIndexOf()


indexOf( 参数 ):参数为要查询的数组元素,从第一个元素开始查找,并且返回查询到的第一个元素,如果存在的话返回该元素出现的第一次的索引位置,如果不存在返回 -1


var arr=[1,2,3,4,5,3,6];

console.log(arr.indexOf(3));  //有此元素 返回其第一个索引位置

console.log(arr.indexOf(9));  //没有此元素,返回-1



lastIndexOf( 参数 ):参数为要查询的数组元素,从最后一个元素开始查找,并且返回查询到的第一个元素,如果存在的话返回该元素出现的第一次的索引位置,如果不存在返回 -1


var arr=[1,2,3,4,5,3,6];

console.log(arr.lastIndexOf(3));   //有此元素 返回从最后一个元素起第一次查询到的索引

console.log(arr.indexOf(9));  //无此元素,返回-1



七:数组去重案例(重点)

有这样一个案例很重要,在一个数组中有很多对相同的数组元素,我们怎么操作才能使新数组中的元素没有重复的


大致思路:遍历旧的数组,用旧的数组去查询新的数组,如果有这个元素就不添加进新数组,没有的话就添加进去。


但是我们怎么测能知道新数组中有没有呢,这就用到了刚才提到过的数组元素的索引如果查询不到,则返回-1,对此我们只要判断是不是-1 就可以知道新数组中有没有该元素


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

var newarr=[];

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

   if(newarr.indexOf(arr[i])==-1){  //判断新元素中有没有该元素

    newarr.push(arr[i]);

   }

}

newarr.sort(function(a,b){  //升序排序

   return a-b;

})

console.log(newarr);




八:数组转字符串

之前学过数字型转换为字符串型,我们用到了 toString() 和 String() ,在数组转换为字符串时我们也有两个方法,toString() 和 join()


toString():无参数


var arr=[1,2,3,4,5,6];

console.log(arr.toString());



join( 分隔符 ):有参数,参数为自己想要设置的分隔符


var arr=[1,2,3,4,5,6];

console.log(arr.join('--'));



九:连接数组

concat():用于拼接两个或多个数组


var arr1=[1,2,3];

var arr2=[4,5,6];

var arr3=[7,8,9];

var newarr=arr1.concat(arr2).concat(arr3);

console.log(newarr);

有问题请指正,谢谢!  


相关文章
|
9月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
9月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 开发者
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
JavaScript 前端开发 算法
javascript 内置对象Math总结及其案例
前言 今天总结一下javascript 内置对象Math中的函数用法,顺带写一下常见的案例。
221 0
javascript 内置对象Math总结及其案例
|
JavaScript 前端开发
JavaScript——内置对象(Math,Date)
JavaScript——内置对象(Math,Date)
153 0