JS-NO.4
2017-07-12 本文已影响0人
_阳光很暖_
数组方法
- 从数组末尾删除一项，有哪些方法？
- ary.length--
- ary.length-=1; ary.length=ary.lengty-1;
- ary.pop()
- ary.splice(ary.length-1,1)
- 给数组末尾增加一项
- ary[ary.length]=xxx;
- ary.push()
- ary.splice(ary.length,'xxx')
- 数组的克隆
- slice()/ slice(0)
- ary.concat();
- ary.splice(0)
Math常用方法
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.random() 取0～1之间的随机小数，不包含1；
- Math.round(Math.random()*(m-n)+n); 取n~m之间的随机整数，包含m
- Math.round() 四舍五入
- Math.pow(2,3) 幂次方
- Math.sqrt() 开平方
- Math.abs() 取绝对值
算法
快排
- 1：先拿到中间的索引，通过中间索引找到他对应的项
- 这个中间项，是从数组中拎出来，即数组中没有他了，所以，只能用splice；
- splice的返回值，是被删除的内容以新数组的形式返回，因为我们删除了一项，所以，要取数字必须用方括号 [0];
- 2：创建两个新数组left=[]，right=[]；
- 3：用ary数组中每一项跟中间项比较，比他小的放left数组，比他大的放right数组
- 4： return quciksort(left).concat([center],quciksort(right));
- 函数自己调用自己，属于"递归"
- 5：停止拆分的条件 if(ary.length<=1){return ary;}
- return 1）有阻断程序执行的功能 2）返回值；
var ary=[12,2,26,3,1,19,8];
function quickSort(ary) {
//5：停止拆分的条件；
if(ary.length<=1){
return ary;//return后面的语句都不会执行；
//return有阻断程序执行的作用；
}
//1:先找出中间一项，向下取整
var centerIndex=Math.floor(ary.length/2);
//2:通过中间索引，拿到该索引对应的值；
var centerValue=ary.splice(centerIndex,1)[0];
//3:创建两个新的空数组，left和right
var left=[],
right=[];
//4:用ary中的每一项跟centerValue比较，比他小的放left数组，比他大的放right数组；
for(var i=0; i<ary.length; i++){
var cur=ary[i];
if(cur<centerValue){
left.push(cur)
}else{
right.push(cur);
}
}
return quickSort(left).concat([centerValue],quickSort(right));
}
var res=quickSort(ary);
插排
1、先从ary中取出来一个数字，单独成为数组 使用splice方法
2、遍历ary的数组，跟left数组，从后往前的比较，如果比left的数字小，继续往前比，如果比某个值大，就插入到这个值的下一项的前面；重点(必须break，否则就会出错) ；如果比所有的都小，那就插入到left数组的第一个；
var ary=[23,21,12,6,1,32,8];
/*
* 1:从ary数组中，随意抽取一张牌，放入left数组;比如：[23]
* 2：遍历ary中的每一个，用其跟left数组进行比对，如果比left的某个值小，继续往前比对，如果比到头还小的话，插入left数组的第一项，unshift；
* 如果比left数组中的某个值大，插入到这个值的下一项的前面；一定阻断程序的执行；
* */
function insertSort(ary){
var left=ary.splice(0,1); //[23]
//遍历ary，用ary中的每一个，跟left从后往前的比较；
for(var i=0; i<ary.length; i++){
var cur=ary[i];
//跟left从后往前的比较
for(var j=left.length-1; j>=0;){
if(cur<left[j]){//如果当前项，比left的最后一个小的话，继续往前比，j--
j--;
if(j==-1){//代表比到头，还小的话，就插入到left的第一个位置；
left.unshift(cur);
}
}else{
left.splice(j+1,0,cur);
break; //break跳出循环
}
}
}
return left;
}
var res=insertSort(ary);
冒排
1、两重循环，第一重循环代表的是轮数，第二重循环代表的次数，比较的次数在一次次的减少；
2、 每次比较的时候，都拿当前项跟后一项进行比较，如果比他大，交换位置；
var ary=[23,21,12,6,1,32,8];
/*
*第一轮 最多可以比6次 已经把最大值放在最后了
* [21,23,12,6,1,32,8]
* [21,12,23,6,1,32,8]
* [21,12,6,23,1,32,8]
* [21,12,6,1,23,32,8]
* [21,12,6,1,23,32,8]
* [21,12,6,1,23,8,32]
*第二轮 最多可以比5次， 可以把次大值和最大值，放在后面
* [12,21,6,1,23,8,32]
* [12,6,21,1,23,8,32]
* [12,6,1,21,23,8,32]
* [12,6,1,21,23,8,32]
* [12,6,1,21,8,23,32]
*第三轮 最多可以比4次 已经把最大的三个值放在后面
* [6,12,1,21,8,23,32]
* [6,1,12,21,8,23,32]
* [6,1,12,21,8,23,32]
* [6,1,12,8,21,23,32]
*第四轮 最多可以比3次 已经最大的四个值放在侯民啊
*[1,6,12,8,21,23,32]
*[1,6,12,8,21,23,32]
*[1,6,8,12,21,23,32]
*第五轮 最多可以比2次
* [1,6,8,12,21,23,32]
* 第六轮 最多可以1次；
* 第七轮 最多可以比0次；
*
* */
//外面的循环应该是比较的"轮数"
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;
}
}
}
数组去重的思路：
1、 双重循环
2、 先sort，然后用当前项跟相邻项进行比较
3、 新数组
4、 利用不重名的特性
5、 利用对象不重名的特性，实现了重复次数的记录，里面用到两个循环，一个for循环，for..in循环
思路1：双重循环
for(var i=0; i<ary.length; i++){
var cur=ary[i];
//要跟后面每一项进行比对
for(var j=i+1; j<ary.length; j++){
if(cur==ary[j]){
//删除数组中间项，只能用splice；
ary.splice(j,1);
j--;//为了防止数组塌陷
}
}
}
思路2：创建新数组
var newAry=[];
for(var i=0; i<ary.length; i++){
//如何判断新数组中是否有某个值 indexOf
if(newAry.indexOf(ary[i])==-1){//如果新数组中没有的话
newAry.push(ary[i]);//把这个数放入新数组
}
}
思路3：sort排序
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--;//防止数组塌陷
}
}
思路4：利用对象不重名的特性
var obj={};
//遍历数组中的每一项，如果对象中没有，把这一项赋值一份给对象，如果对像中已经有了，说明这是重复项，我们就删除数组中的这一项；
for(var i=0; i<ary.length; i++){
if(obj[ary[i]]){//走if说明重复了；
ary.splice(i,1);
i--;
}else{//走else说明对象中没有这个数；那么就给obj添加属性
obj[ary[i]]=ary[i];
}
}
思路5：利用对象
var obj={};
for(var i=0; i<ary.length; i++){
if(obj[ary[i]]){
obj[ary[i]]++; //++ +=1
}else{//走else一定是对象没有；给这个属性名贴个1的标签
obj[ary[i]]=1;
}
}
//通过for..in拿到每个属性名；
var newAry=[];
for(var attr in obj){
newAry.push(Number(attr));
}
验证码1
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)
验证码2
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)
选项卡 闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
height: 300px;
float: left;
margin: 10px;
}
.wrap li{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
background: #cccccc;
border-bottom:1px solid #333;
box-sizing: border-box;
}
.wrap li+li{
border-left:1px solid #333;
}
.wrap li.on{
background: #ADD8E6;
border-bottom: none;
}
.wrap div{
height: 100%;
display: none;
background: #add8e6;
}
.wrap div.show{
display: block;
}
</style>
</head>
<body>
<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>
<div class="wrap" id="tab2">
<ul>
<li class="on">按钮1</li>
<li>按钮2</li>
</ul>
<div class="show">内容1</div>
<div>内容2</div>
</div>
<div class="wrap" id="tab3">
<ul>
<li class="on">按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
</ul>
<div class="show">内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</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*200+'px';
//思路：点击每个按钮的时候，让所有的按钮都变灭，就让当前按钮点亮，让所有的内容框都隐藏，就让当前按钮对应的内容框显示；
//事件属于异步，异步就会有时间差，所以，外面循环中的i值等到事件触发的时候，早都已经循环结束，我们只能拿到最大的i值；而这个i值一定是错误的；
//解决方式有两种：1）自定义属性 2）闭包
//设置默认的 点亮项
selectIndex=selectIndex%aBtn.length||0;//传了按照传的来，没穿默认设置索引0;
function show(showIndex) {
for(var i=0; i<aBtn.length; i++){
aBtn[i].className=null;
aDiv[i].className=null;
}
aBtn[showIndex].className='on';
aDiv[showIndex].className='show';
}
show(selectIndex)
for(var i=0; i<aBtn.length; i++){
(function (index) {
aBtn[index].onclick=function () {
show(index)
}
})(i);
}
}
tab('tab1')
tab('tab2',1)
tab('tab3',103)
</script>
</body>
</html>
选项卡 自定义属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆梦源：勿忘初心，方得始终</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.wrap{
width: 600px;
height: 300px;
float: left;
margin: 10px;
}
.wrap li{
width: 200px;
height: 50px;
line-height: 50px;
background: #cccccc;
text-align: center;
float: left;
border-bottom:1px solid #333;
box-sizing: border-box;
}
.wrap li.on{
border-bottom: none;
background: #ADD8E6;
}
.wrap li+li{
border-left:1px solid #333;
}
.wrap div{
height: 100%;
background: #add8e6;
display: none;
text-align: left;
}
.wrap div.show{
display: block;
}
</style>
</head>
<body>
<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>
<div class="wrap" id="tab2">
<ul>
<li class="on">按钮1</li>
<li>按钮2</li>
</ul>
<div class="show">内容1</div>
<div>内容2</div>
</div>
<script>
function tab(id,selectIndex) {
//1:获取需要的元素：需要所有的按钮+所有的内容框;一定要限制范围的获取元素；
var oWrap=document.getElementById(id);
var aBtn=oWrap.getElementsByTagName('li');
var aDiv=oWrap.getElementsByTagName('div');
//动态计算wrap容器的宽度
oWrap.style.width=aBtn.length*200+'px';
//在点击事件触发前，就要设置默认选中项；
selectIndex=selectIndex%aBtn.length||0;
function select(showIndex) {
for(var i=0; i<aBtn.length; i++){
aBtn[i].className='';
aDiv[i].className='';
}
aBtn[showIndex].className='on';
aDiv[showIndex].className='show';
}
select(selectIndex);
//2:给每个元素添加事件
for(var i=0; i<aBtn.length; i++){
//思路1：自定义属性
aBtn[i].index=i; //对象的设置；我们设置了自定义属性index，对应的值分别是0，1，2
//当元素身上的事件被触发的时候，会执行一个函数，函数中的this指向当前这个元素；
aBtn[i].onclick=function () {
//3：点击事件发生的时候，想做什么事？
select(this.index)
}
}
}
tab('tab1',1);
tab('tab2');
</script>
</body>
</html>
