错过你一定会后悔的数组及其api总结

最新推荐文章于 2024-07-18 11:48:33 发布

AIGC小陈

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量129

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_53312997/article/details/127261981

版权

数组及其api的总结

1.为什么要用数组？

当我们要保存很多数据的时候，我们不可能每一个数据都重新创建一个变量来接收他。变量其实就是我们所谓的内存，变量创建的越多，内存空间消耗就越大，网站的性能就会越差。
解决：使用数组==》是创建一个变量就可以保存【多个数据】的集合

2.数组的特性

数组都是线性排列，除了第一个元素，每个元素都有唯一的前驱元素
除了最后一个元素，每个元素都有唯一的后继元素
==每个元素都有一个自己的位置，叫做下标，下标是从0开始的，到最大长度-1==

3.数组具有三大不限制

1.不限制元素的个数
2.不限制元素的类型
3.不限制元素的下标越界 - 不是一个好东西了* 如果获取元素，下标越界，返回的一个undefined* 如果添加元素，下标越界，会得到一个稀疏数组，导致下标不再连续，如果搭配上循环去遍历每一个元素的话，我们会得到很多很多的undefined

4.创建数组大方式（2种）

==直接量方式：==var arr=[];//空数组var arr=[数据1,....];//例如var arr1=[1,2,3]; * 构造函数方式：var arr=new Array();//空数组var arr=new Array(数据1,....);//而且这个方法还有一个坑//例如：var arr2=new Array("金花婆婆","灭绝师太","紫衫龙王"); console.log(arr2);//['金花婆婆', '灭绝师太', '紫衫龙王'] #### 5.数组的种类
索引数组：* 下标都是数字组成的数组 - 默认
关联（hash）数组：* 下标是可以自定义的数组* ***JS中除了undefined和null不是一个对象，万物皆对象，而【一切对象的底层都是hash数组】* 为什么要自定义下标：索引数组的下标无具体的意义，不便于我们查找#### 6.获取数组中的数据
数组名[下标];

7.添加或替换数组中的数据

数组名[下标]=新值;
下标处有没有元素，如果没有则为添加，如果有了就为替换

8.数组length的三大固定套路

获取倒数第n个元素：arr[arr.length-n]
始终向末尾添加元素：arr[arr.length]=新值;
缩容：删除倒数n个元素：arr.length-=n

9.二维数组

何时使用：你希望在一个数组内再次细分分类* 如何使用：var peoples=[["吴飞华",18,"洪兴"], ["冯伟朕",19,"东英"], ["封永跃",20,"三联"] ]; * 访问：arr[r][c] - r代表行下标，c代表列下标* 注意：1.列下标越界，返回undefined2.行下标越界，返回报错，因为行下标越界已经得到undefined再加[]则报错
如何遍历：固定公式：外层循环遍历行，内层循环遍历列for(var r=0;r<peoples.length;r++){for(var c=0;c<peoples[r].length;c++){ console.log(peoples[r][c]) } } #### 10.遍历数组：for for…in forEach map
定义：把数组中的每个元素拿出来执行相同相似的操作* 语法：1.==for循环==for(var i=0;i<数组名.length;i++){console.log(数组名[i]);//当前次元素，要干什么，看你的}//例如：var arr2=["张三丰","张翠山","张无忌",1,true,null];for(var i=0;i<arr2.length;i++){ console.log(arr2[i])//张三丰张翠山张无忌 1 true null } 2.==for in循环====》既可以遍历hash数组，也可以遍历索引数组for(var i in 数组名){i;//自动得到每一个下标数组名[i];//当前hash数组中的元素了 }//例如：for(var i in arr2){ console.log(arr2[i])//张三丰张翠山张无忌 1 true null } 3.==forEach==:对原数组中每个元素执行相同操作==》直接修改原数组arr.forEach(function(val,i,arr){ 操作});//例如：var arr=[1,2,3,4,5];arr.forEach(function(val,i,arr){ arr[i]*=2; }) console.log(arr);//[2, 4, 6, 8, 10] 4.==map==:取出原数组中每个元素，执行相同操作后，放入一个新数组中返回==》不修改原数组，只返回新数组var 新数组=arr.map(function(val,i,arr){ return 操作;});//例如：var arr=[1,2,3,4,5];var newArr=arr.map(function(val,i,arr){ return arr[i]*2 })console.log(newArr);//[2, 4, 6, 8, 10] #### 11.数组转为字符串:join
语法：var str=arr.join(“自定义连接符”);》**==不会修改原数组，必须拿一个变量去接住结果（返回的一个新数组）*** 注意：1.如果没有传入实参，则和toString效果一致，默认都是用","隔开var arr=[1,2,3,4,5,6];console.log(arr.toString());//1,2,3,4,5,6console.log(arr.join())//1,2,3,4,5,6console.log(arr.join("~"))//1~2~3~4~5~6 2.固定套路:面试鄙视中：完成无缝拼接var arr=["h","e","l","l","o"," ","w","o","r","l","d"];console.log(arr.join("")); 3.==将数组元素拼接为页面元素（数据渲染）==* html中<select id="sel"> </select> * js中var arr = ["-请选择-", "北京", "南京", "西京", "东京"]; var str = "<option>" + arr.join("</option><option>") + "</option>"; sel.innerHTML = str; #### 12.数组的拼接:cocat
意义：添加元素到末尾* 语法：var newArr=arr.concat(值1,arr2…);》**==不会修改原数组，必须拿一个变量去接住结果（返回的一个新数组）*** 注意：哪怕拼接的是一个数组，悄悄的打散数组，单个添加var arr1=[1,2,3];var arr2=[4,5,6,7];var newArr=arr1.concat(8,arr2);console.log(newArr);//[1, 2, 3, 8, 4, 5, 6, 7] #### 13.截取子数组:slice
意义：可能只想拿到数组中的某一部分* 语法：var subArr=arr.slice(starti,endi+1);》**==不会修改原数组，必须拿一个变量去接住结果（返回的一个新数组）**var arr=[1,2,3,4,5];var subArr=arr.splice(1,4);console.log(subArr)//[2,3,4,5] * 注意：1.含头不含尾（左闭右开）2.如果只传入了一个实参，则为从starti开始，到末尾3.如果两个实参都省略，则复制了一份 - 深拷贝！两者互不影响4.支持负数参数，-1代表倒数第一个，-n代表倒数第n个

14.数组的删插替：splice

注意：==会修改原数组，必须拿一个变量去接住结果（返回的一个新数组）==* 删除：1.语法：var dels=arr.splice(starti,n);//从starti位置开始删除n个元素var arr=[1,2,3,4,5];var delsArr=arr.splice(1,4);//从数组中下标为1的地方开始删除4个元素console.log(delsArr)//[2,3,4,5]==》截取的数组console.log(arr)//[1]==》删除后的原数组 2.注意：返回的是你删除的元素组成的数组 - 有可能你删除的正好是你需要的（dels拿到是删除的元素组成的数组）* 插入：1.语法：var dels=arr.splice(starti,0,新值1,…);var arr=[10,20,60,40,50];arr.splice(1,0,30);//从数组中下标为1的地方开始删除0个元素，再增加一个"30"元素console.log(arr);//[10, 30, 20, 60, 40, 50] 2.注意：* 原来starti位置的元素以及后续元素都会被向后移动* 没有删除元素，也有返回值，返回的是一个空数组而已
替换：1.语法：var dels=arr.splice(starti,n,新值1,…);var arr=[10,20,60,40,50];arr.splice(2,1,666);//从数组中下标为2的地方开始删除1个元素，再增加一个"666"元素console.log(arr);//[10, 20, 666, 40, 50] 2.注意：删除的个数和插入的个数不必相同#### 15.翻转数组：reverse
语法：arr.reverse();》**==会修改原数组**var arr=[10,20,60,40,50];arr.reverse();console.log(arr);//[50, 40, 60, 20, 10] * 注意：仅仅只能翻转#### 16.排序：sort
笔试中：手写冒泡排序：从第一个元素开始，依次比较两个相邻的元素，如果前一个>后一个，两者就要交换位置var arr=[3,215,78,111,43]; for(var j=1;j<arr.length;j++){ for(var i=0;i<arr.length-j;i++){ if(arr[i]>arr[i+1]){ var m=arr[i]; arr[i]=arr[i+1]; arr[i+1]=m; } } } console.log(arr);// [3, 43, 78, 111, 215] * 数组提供了一个排序API==》sort1.语法：arr.sort();2.注意：* ==会修改原数组==* 默认转为字符串，按位PK每个字符的unicode（ascii）* 希望按照数字排序 - 升序var arr=[7,5,9,8,4,6,1];arr.sort(function(a,b){return a-b; })console.log(arr);// [1, 4, 5, 6, 7, 8, 9]/* a是后一个数，b是前一个数如果a > b，就会返回一个正数，说明后一个数 > 前一个数如果a < b，就会返回一个负数，说明后一个数 < 前一个数如果a\== b，就会返回一个0，说明后一个数 == 前一个数而sort的底层就能通过你返回的值来判断要不要帮你交换位置 *///这里可以写成箭头函数arr.sort((a,b)=>a-b)console.log(arr);// [1, 4, 5, 6, 7, 8, 9] * 希望按照数字排序 - 降序var arr=[7,5,9,8,4,6,1];arr.sort(function(){return b-a; })console.log(arr);//[9, 8, 7, 6, 5, 4, 1] #### 17.栈和队列：unshift shift push pop
注意：==会修改原数组，必须拿一个变量去接住结果（返回的一个新数组）==* 作用：添加元素和删除元素的新方式* 栈：一端封闭，只能从另一端进出 - 现实生活中较少，何时使用：希望使用到最新的数据的时候1.开头入：arr.unshift(新值,…)var arr=[4,5,6];arr.unshift(1,2,3);console.log(arr);//[1, 2, 3, 4, 5, 6] 2.开头出：var first=arr.shift();//一次只能删除一个，而且一定是删除的第一个元素，有可能删除的东西就是你需要的东西var arr=[4,5,6]; var first=arr.shift();console.log(arr);// [5, 6]console.log(first);//4 3.结尾入：arr.push(新值,…);var arr=[4,5,6];arr.push(7,8,9);console.log(arr);// [4, 5, 6, 7, 8, 9] 4.结尾出：var last=arr.pop();//一次只能删除一个，而且一定是删除的最后一个元素，有可能删除的东西就是你需要的东西var arr=[4,5,6];var last=arr.pop();console.log(arr);// [4, 5, 6, 7, 8, 9]console.log(last)//6 * 队列：只能一端进入，另一端出 - 现实生活中较多，何时使用：按照先来后到的顺序1.将栈的API进行混搭就可以形成队列2.开头入：arr.unshift(新值,…) 结尾出：var last=arr.pop();var arr=[4,5,6];arr.unshift(1,2,3);var last=arr.pop();console.log(arr);// [1, 2, 3, 4, 5]console.log(last);//6 3.结尾入：*arr.push(新值,…); 开头出：var first=arr.shift();var arr=[4,5,6];arr.push(7,8,9);var first=arr.shift();console.log(arr);// [5, 6, 7, 8, 9]console.log(first);//4 #### 18.检索数组元素：indexOf

, 6, 7, 8, 9]console.log(first);//4 ```#### 18.检索数组元素：indexOf

何时：判断有没有，不重复！* 语法：var i=str/arr.indexOf(“关键字”,starti);let arr=[12,32,43,54]console.log(arr.indexOf(32))//1 * 注意：1.starti可以省略，如果省略默认从0位置开始向右查找2.返回：如果找到了，返回关键字的第一个字符的下标。没找到返回-1，重点：我们其实根本不关心下标为几，我们只关心下标为不为-1，为-1说明没有，如果不为-1说明存在let arr=[12,32,43,54]console.log(arr.indexOf(99))//-1