一、数组的基础
1.基础概念
? ? ?什么是数组:在一个内存(变量名)中保存了多个数据的一个集合结构
2.创建
? ? 1.直接量:var arr=[值1,...]; ? ? ?2.构造函数:var arr=new Array(值1,...); ? ? ? ? ? ?特殊:new Array(只放了一个数字num) - 创建长度为num的一个空数组,相当于设置length
3.访问:数组名[下标]--元素
? ? ?添加:数组名[下标]=新值; ? ? ? 特殊:读取元素,下标越界,返回undefined ? ? ? ? ? ? ? ? ?添加元素,下标越界,下标不再连续导致数组变成一个稀疏数组
4.三不限制
? ? ?1.不限制元素的个数 ? ? ?2.不限制元素的类型 ? ? ?3.不限制下标越界(但是不建议)
5.数组名.length:可以获取数组的长度(长度==最大下标+1)
? ? ? 三个固定套路: ? ? ? ? ? 1.末尾添加元素:arr[arr.length]=新值; ? ? ? ? ? 2.获取倒数第n个:arr[arr.length-n]; ? ? ? ? ? 3.缩容:删除元素:从末尾删除元素:arr.length-=n;
6.遍历数组:将数组中的每个元素都取出来执行相同或者相似的操作
? ? ? ? for(var i=0;i<arr.length;i++){arr[i]//当前次元素}
7. 索引数组:下标都是由数字组成的数组
8.关联数组 - 也称之为hash数组
? ? ? 什么是:下标是可以自定义的 ? ? ? 为什么:索引数组的下标无具体意义,不便于查找 ? ? ? 如何使用: ?? ?1、先创建一个空数组 ?? ??? ?var arr=[]; ?? ? ?? ?2、为数组添加下标添加元素 ?? ??? ?arr["自定义下标"]=新值
?? ?3、访问元素非常简单,不需要数下标,只需要直接写入下标: ?? ??? ?arr["自定义下标"];
?? ?4、强调:hash数组的length永远失效!永远为0!
?? ?遍历hash数组:必须使用for in循环遍历 - for in是专为遍历准备的 ?? ??? ?公式:for(var 下标名 in 数组名){ ?? ??? ??? ??? ?数组名[下标名]; ?? ??? ??? ? ? ? } ?? ??? ?for in :既可以遍历索引数组 也可以 遍历 hash数组
二、数组的API
1.arr 转 string:
? ? ? ?var str=arr.join("连接符"); ? ? 可以自定义连接符,也可以省略不写等效于String(arr); ? ?固定套路 ? ? ? 1.如何将数组里面的内容拼接为一个句话(无缝拼接)? ? ? ? ? ? ? 语法: ?var str=arr.join(""); ? ? ? ?2、将数组拼接为页面元素 ? ? ? ? ? ? ? ?//数据 ?? ?var cities=["-请选择-","北京","南京","重庆","天津","上海"]; ?? ?//数组的API join拼接上了标签 ?? ?var str="<option>"+cities.join("</option><option>")+"</option>"; ?? ?//渲染到页面元素之上 ?? ?sel.innerHTML=str;
?? ?实现:二级联动: ?? ?关键要点:1、两个数组:一个普通数组做一级,一个二维做二级 ?? ??? ? 2、select专属事件onchange ?? ??? ? 3、事件中:this.selectedIndex - 获取到当前选中项的下标
2、拼接数组:添加数组元素的新方式:将concat后面的参数,拼接到arr之后
?? ?var newArr=arr.concat(值1,...); ?? ?强调:1、concat不修改原数组,只能返回一个新数组 ?? ? ? ? ?2、concat可以直接传入数组参数,悄悄的把数组打散为单个元素
3、截取(获取)子数组:将arr从starti位置开始,一直截取到endi - 删除元素的新方式/复制
?? ?var subArr=arr.slice(starti,endi+1); ?? ?强调:1、slice不修改原数组,只能返回一个新数组 ?? ? ? ? ?2、含头不含尾 ?? ? ? ? ?3、endi可以省略,截取到末尾 ?? ? ? ? ?4、两个参数都可以省略,从头到尾复制一份 - 深拷贝(复制了一个副本)
4、arr.splice():删除/添加/替换的新方式
?? ?删除:var dels=arr.splice(starti,n); n - 删除个数? ?? ? ? ? ?强调:其实此方法也有返回值,返回的是你删除的元素组成的一个新数组
?? ?添加:arr.splice(starti,0,值1,...); ?? ? ? ? ?强调:1、原starti位置的元素以及后续元素都会向后移动 ?? ??? ? 2、插入数组也行,但是不推荐,因为不会帮我们打散数组,会导致一些部分是一维,一些部分是二维
?? ?替换:var dels=arr.splice(starti,n,值1,...); ?? ? ? ? ?强调:删除的个数不必等于插入的个数
5、翻转数组:arr.reverse();
6.排序:arr.sort();
? ? ? ?问题1:默认会将元素们转为字符串,按位PK,希望按照数字排序? ?? ? 解决:固定套路: ?? ??? ?arr.sort(function(a,b){//悄悄的带有循环 ?? ??? ??? ?console.log(a);//a是后一个数 ?? ??? ??? ?console.log(b);//b是前一个数 ?? ??? ??? ?return a-b;//如果return 返回的是一个正数,说明后一个数>前一个数 ?? ??? ??? ??? ? ? //如果return 返回的是一个负数,说明后一个数<前一个数 ?? ??? ??? ? ? ? ? ? ? ? ? ? //如果return 返回的是0,两者一样大 ?? ??? ??? ??? ? //而我们的sort方法正好可以根据你返回的正数/负数/0来进行排序 ?? ??? ??? ?})
? ? ? ? ? 问题2:只能升序排列,如何降序: ?? ?解决:arr.sort(function(a,b){return b-a;})
7.栈和队列:其实就是数组,添加元素和删除元素的新方式
?? ?栈:数组,只不过是一端封闭,只能从另一端进出的操作 ?? ??? ?开头进:arr.unshift(新元素,...);//添加元素的新方式,向前添加,缺陷:导致其余元素的下标发生变化 ?? ??? ?开头出:var first=arr.shift();//只会一次调用删除第一个//删除元素的新方式,向前删除,缺陷:导致其余元素的下标发生变化
?? ??? ?结尾进:arr.push(新元素,...);//添加元素的新方式,向后添加 ?? ??? ?结尾出:var last=arr.pop();//只会一次调用删除最后一个//删除元素的新方式,向后删除
?? ?队列:数组,只不过是只能从一端进入,另一端出 ?? ? ? 何时:按照先来后到的顺序 ?? ??? ?依然是以上4个: ?? ??? ?开头进:arr.unshift(新元素,...); ?? ??? ?结尾出:var last=arr.pop();
?? ??? ?结尾进:arr.push(新元素,...); ?? ??? ?开头出:var first=arr.shift();
8.二维数组:数组的元素,又引用着另一个数组
?? ? ?何时:在一个数组内,再次细分每个分类 ?? ? ?创建: ?? ??? ?var arr=[ ?? ??? ??? ?["张三",18,1500], ?? ??? ??? ?["李四",18,2000], ?? ??? ??? ?["王麻子",35,12000] ?? ??? ?]; ?? ? ?? ? ?访问:arr[行下标][列下表]; ?? ? 特殊:列下标越界,返回undefined ?? ??? ?行下标越界,报错!因为undefined没有资格使用[]
?? ? ?遍历二维数组:必然两层循环,外层循环控制行,内存循环控制列 ?? ??? ??? ?for(var r=0;r<arr.length;r++){ ?? ??? ??? ??? ?for(var c=0;c<arr[r].length;c++){ ?? ??? ??? ??? ??? ?console.log(arr[r][c]); ?? ??? ??? ??? ?} ?? ??? ??? ?} ?
|