likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 69

数组及其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. 列下标越界，返回undefined
    2. 行下标越界，返回报错，因为行下标越界已经得到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,6
console.log(arr.join())//1,2,3,4,5,6
console.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==》==sort==

    1. 语法：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

  • 何时：判断有没有，不重复！

  • 语法：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
转载自:https://juejin.cn/post/7144277374970888200
评论
请登录