数组方法的小总结
- 从数组的末尾删除一项，有哪些方法？
- ary.length--
- ary.length-=1
- ary.length = ary.length-1
- ary.pop()
- ary.splice(ary.length-1,1)
- 给数组末尾增加一项
- ary.push()
- ary[ary.length] = XXXX
- ary.splice(ary.length,XXX)
- 数组的克隆
- ary.slice()
- ary.slice(0)
- ary.concat()
- ary.splice(0)
选项卡的封装
- 功能：1) 可以让一个页面中多个容器都有选项卡的功能 2) 通过第二个参数，设置默认亮点项
- 如果参数可有可无 ||的思想 var selectIndex = selectIndex % aBtn.length || 0;
- % 的思想
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.wrap{
width: 600px;
height: 300px;
}
.wrap ul li{
float: left;
border-bottom: 1px solid #555;
box-sizing: border-box;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ccc;
cursor: pointer;
}
.wrap ul li+li{
border-left: 1px solid #555;
}
.wrap ul li.on{
border-bottom: 1px solid transparent;
background-color: #adde85;
}
.wrap div{
display: none;
width: 100%;
height: 100%;
font-size: 30px;
background-color: #adde85;
}
.wrap div.show{
display: block;
}
</style>
<div class="wrap" id="tab1">
<ul>
<li class="on">按钮 1</li>
<li>按钮 2</li>
<li>按钮 3</li>
</ul>
<div class="show">内容 1</div>
<div>内容 2</div>
<div>内容 3</div>
</div>
<script>
function tab(id,selectIndex){
//必须限定取值范围
var oWrap = document.getElementById(id);
var aBtn = oWrap.getElementsByTagName("li");
var aDiv = oWrap.getElementsByTagName("div");
//自动设置最外层容器的宽度
oWrap.style.width = aBtn.length * aBtn[0].offsetWidth + "px";
//设置默认点亮项
selectIndex = selectIndex % aBtn.length || 0;
function show(index){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className = aDiv[i].className = null;
}
aBtn[index].className = "on";
aDiv[index].className = "show"
}
show(selectIndex);
//点击按钮，所有的按钮灭掉，所有的内容框都隐藏，让当前的按钮点亮，并且当前按钮相对应的内容框显示
//当点击事件写在循环中时，为异步执行，所以事件内获取的i值一定是循环最后的值，解决办法 1）自定函数 2）闭包
//1）自定义函数
/*
for(var i=0;i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
//让所有的按钮灭掉，内容框隐藏
for(var i=0;i<aBtn.length;i++){
aBtn[i].className = aDiv[i].className = null;
}
//点亮当前的按钮，让当前按钮对应的内容框显示
aBtn[this.index].className = "on";
aDiv[this.index].className = "show"
}
}
*/
// 2) 闭包
for(var i=0;i<aBtn.length;i++){
(function(index){
aBtn[index].onclick = function(){
show(index);
}
})(i)
}
}
tal("tab1",2)
</script>
数组去重的思路
-
双重循环
//直接让数组的前一项与数组的后一项进行比较相同就删除其中一个 var arr = [2,1,4,3,2,3,3,2,1,3,1,0]; for(var i=0;i<arr.length;i++){ var cur = arr[i]; for(var j=i+1;j<arr.length;j++){ if(cur == arr[j]){ arr.splice(j,1); j--; } } } -
先sort，然后用当前项跟相邻项进行比较
//思路：先用sort进行排序，这样重复的数字会排列在一起，然后让相邻项进行比较，相同删除其中一个 var ary = [2,4,1,2,3,4,4,2,2,0,3,2,0]; ary.sort(function(a,b){return a-b;}) for(var i=0;i<ary.length;i++){ if(ary[i] == ary[i+1]){ ary.splice(i,1); i--;//防止数组塌陷 } } 新数组
//思路：创建一个新数组，查看新数组中是否有原数组的项，没有就添加到新数组，有就删除原数组项
var ary = [4,3,2,4,2,2,3,2,3,4,2,2,1,0];
var newAry = [];
for(var i=0;i<ary.length;i++){
var cur = ary[i];
if(newAry.indexOf(cur) == -1){
newAry.push(cur);
}
}
- 利用对象不重名的特性
//思路：1.创建一个新的对象 2.让数组中的每一项与对象中的项比较，true为重复，原数组删除，false为不重复，添加给对象
var ary = [2,3,4,1,3,2,4,2,1,4,0,1];
var obj = {};
for(var i=0;i<ary.length;i++){
if(obj[ary[i]]){
ary.splice(i,1);
i--;
}else{
obj[ary[i]] = ary[i]
}
}
- 利用对象不重名的特性，实现了重复次数的记录，里面用到两个循环，一个for循环，一个for...in循环
//思路：让数组的每一项与对象中的项进行比较，true为重，让对象value++ ，false为不重复，添加给对象一个新的元素 var ary = [1,2,3,4,2,1,3,2,3,1,3,4,2,1,0]; var obj = {}; for(var i=0;i<ary.length;i++){ if(obj[ary[i]]){//为true则为重复 obj[ary[i]]++; }else{ obj[ary[i]] = 1; } } var newAry = []; for(var attr in obj){ newAry.push(Number(attr)); }
### 对象跟别人不同的特性
1. 不重名的特性
2. 如果对象的属性名是数字，那么打印出来的时候，按照数组的先后顺序排序
## 算法
### 快排
#### 思路
1. 先拿到中间的索引，通过中间的索引找到他对应的项
+ 这个中间项，是从数组中拎出来的，即数组中没有他了，所以，只能用户splice
+ splice的返回值，是被删除的内容以新数组的形式返回，因为我们删除了一项，所以，要取数字必须用[0];
2. 创建两个新数组，left 和 right
3. 用 原始数组 跟 中间项比较，比中间项小，放入left，反之，放入right
4. return qucikSort(left).concat([centerValue],qucikSort(right));
+ 函数自己调用自己，属于“递归”
5. 停止拆分条件 if(ary.length <= 1){ return ary };
+ return 1) 有阻断程序执行的功能 2) 返回值
<script>.
var arr = [1,2,4,3,2,1,3,4,5,6,4,3,2,4,1];
function quickSort(arr){
//在数组都为一项是停止调用quickSort函数
if(arr.length <= 1){
return arr;
}
//现获取数组的中间项
var centerIndex = Math.floor(arr.length/2);
var centerValue = arr.splice(centerIndex,1)[0];
//创建两个新数组
var left = [],right = [];
// 让原数组和获取到centerValue比较，大于centerValue添加到left数组，小于centerValue添加到right数组
for(var i=0;i<arr.length;i++){
//获取比较项的值
var cur = arr[i];
if(cur < centerValue){
left.push(cur);
}else{
right.push(cur);
}
}
//将排序的数组拼接并return出去
return quickSort(left).concat([centerValue],quickSort(right));
}
var res = quickSort(arr);
</script>
### 插排
#### 思路
1. 先从ary中取出一个数字，单独是个数组 方法splice
2. 遍历ary数组，跟left数组，从后往前比较，如果left的数字小，继续往前比，如果比某个值大，就插入到这个值的下一项的前面(必须break，否则会出错，死循环)；如果比所有的都小，那就插入到left数组的第一个位置；
var ary = [4,22,1,2,4,5,63,2,6,7,4,8,0];
function inserSort(ary){
//从原始数组中获取任意一项
var left = ary.splice(0,1);
//遍历原始数组，让其每一项与left从后向前比较
for(var i=0;i<ary.length;i++){
// 用一个变量承接原始数组的比较项
var cur = ary[i];
//遍历left数组，获取left数组中的项
for(var j=left.length-1;j>=0;){
if(cur < left[j]){//小于表示原始数组项继续向前比较
j--;
if(j == -1){ //当 j 为 -1 时，表示原始项已经比较到left数组项的第一位
left.splice(0,0,cur);
}
}else{
left.splice(j+1,0,cur);
break;
}
}
}
return left;
}
var res = insertSort(ary);
### 冒排-冒泡排序
1. 两重循环，第一重循环代表轮数，第二重循环代表比较的次数，比较的次数在一次次的减少
2. 每次比较的时候，都拿当前项跟后一项进行比较，如果比他大，交换位置
var ary = [6,3,7,3,2,1,0];
function maopoSort(ary){
//第一层循环表示，比较的轮数
for(var i=0;i<ary.length;i++){
//第二层循环表示，比较的次数
for(var j=0;j<ary.length-1-i;j++){
if(ary[j] > ary[j+1]){
// 声明了一个空变量来当转接器
var tmp = ary[j];
ary[j] = ary[j+1];
ary[j+1] = tmp;
}
}
}
return ary;
}
var res = maopoSort(ary);
### 验证码
<script>
var strCode='abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ0123456789';
var ary=[];
/*for(var i=0; i<4; i++){
//取随机数
var num=Math.round(Math.random()*61);
if(ary.indexOf(strCode[num])==-1){//说明数组中没有你；
ary.push(strCode[num]);
}else{//证明数组中已经存在，为了不浪费这次机会，我们必须i--;
i--;//这次不算，以后冲抓
}
}
document.write(ary)*/
while(ary.length<4){//只要数组的长度小于4，都可以无限制的抓下去
var num=Math.round(Math.random()*61);
if(ary.indexOf(strCode[num])==-1){//只有不重复，才往数组中放；
ary.push(strCode[num])
}
}
document.write(ary)
</script>
### 循环
- for 和 while 循环
### Math常用的方法
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round() 四舍五入
- Math.random() 取0-1之间的随机数，不包含1；
+ Math.round(Math.random()*(m-n) + n); 取n-m之间的随机数，包含m
- Math.pow() 幂次方
- Math.sqrt() 开平方
- Math.abs() 绝对值
### 跟函数有关
- 阻断函数的执行 return
### 跟循环有关
- break; 循环彻底不执行
- continue; 本次不执行，后面的继续