JS基础——数组排序、[冒泡排序、快排、递归法快排、对象去重等等]以及效果案例解读

最新推荐文章于 2022-09-25 15:17:20 发布

南笙前端工程

最新推荐文章于 2022-09-25 15:17:20 发布

阅读量219

点赞数

分类专栏： js 文章标签： html5 html css javascript css3

本文链接：https://blog.csdn.net/weixin_45729502/article/details/116499855

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

- - 数组排序

数组排序

冒泡排序双for O(n^2)

var ary=[10,2,1,3,4,2,1,2]
for (var j=0;j<ary.length;j++){

for (var i=0;i<ary.length-1;i++){
   var cur=ary[i]
   if (ary[i]>ary[i+1]){
       ary[i]=ary[i+1]
       ary[i+1]=cur
   }
}
}

快速排序递归法 O(nlgn)

function fn(ary) {
   //边界
   if(ary.length<=1){
       return ary;
   }

   var cur=ary.splice(parseInt(ary.length/2,1))[0]
   var right=[]
   var left=[]
   for (var i=0;i<ary.length;i++){
       if(cur>ary[i]){
           left.push(ary[i])
       }else{
           right.push(ary[i])
       }
   }
   return fn(left).concat(cur,fn(right))
}

数组去重双循环法

var ary=[1,2,3,5,3,2,3,1,3,2,2,2,5,4,4,1,1]
for (var i=0;i<ary.length-1;i++){
    var cur=ary[i];
    for (var j=0;j<ary.length;j++){
        if(cur===ary[j]){
            ary.splice(j,1);//数组塌陷问题
            j--;//先减再加，相当于没加没减
        }
    }
}

indexOf处理法

var ary=[1,2,3,5,3,2,3,1,3,2,2,2,5,4,4,1,1]

function uni(n) {
    var ary=[];
for(var i=0;i<n.length;i++){

    if(ar.indexOf(n[i])===-1){
        ar.push(n[i]);
    }
}
return ary;
}

var hui=uni(arr);

对象去重法

分别遍历数组中的每一项，把每一项作为新对象的属性名和属性值存储起来，例如：{1:1}

function uni2(n) {
    var obj={}
    var ary=[]
    for(var i=0;i<n.length;i++){
        obj[n[i]]=1
    }
    for(var k in obj){
        ary.push(Number(k))
    }
    return ary;
}
var hui2=uni2(arr);

Array.prototype.myUnique=function myUnique() {
    var obj={};
    for (var i=0;i<this.length;i++){
        var item = this[i];
        if (typeof obj[item] !== 'undefined'){
            this[i]=this[this.length-1];
            this.length--;
            i--;
            continue;
        }
        obj[item]=item
    }
    obj = null;
    return this;
}
ary.myUnique();
ary.myUnique().sort(function(a,b){
      return a-b;
      //加上排序一起
})

与最后一项交换位置，再删除最后一项

function unique(){
  var obj={}
  for(let i=0;i<this.length;i++){
    if(obj.hasOwnProperty(this[i])){
       this[i]=this[this.length-1];
       this.length--;
       i--;
    }
    obj[this[i]]='';
  }
  return this;
}

利用Set或Map结构

var res = Array.from(new Set(arr));
// 或Array.from(new Map(arr))

console.dir(Math)查看Math的所有操作方法

abs: ƒ abs()
acos: ƒ acos()
acosh: ƒ acosh()
asin: ƒ asin()
asinh: ƒ asinh()
atan: ƒ atan()
atan2: ƒ atan2()
atanh: ƒ atanh()
cbrt: ƒ cbrt()
ceil: ƒ ceil()
clz32: ƒ clz32()
cos: ƒ cos()
cosh: ƒ cosh()
exp: ƒ exp()
expm1: ƒ expm1()
floor: ƒ floor()
fround: ƒ fround()
hypot: ƒ hypot()
imul: ƒ imul()
log: ƒ log()
log1p: ƒ log1p()
log2: ƒ log2()
log10: ƒ log10()
max: ƒ max()
min: ƒ min()
pow: ƒ pow()
random: ƒ random()
round: ƒ round()
sign: ƒ sign()
sin: ƒ sin()
sinh: ƒ sinh()
sqrt: ƒ sqrt()
tan: ƒ tan()
tanh: ƒ tanh()
trunc: ƒ trunc()
基础API此处自己在MDN网站查询，此处不做基本介绍

abs取绝对值

Math.abs(-12)=12
ceil && floor 向上/向下取整
Math.ceil ( ) :向上取整
Math.floor ( ) :向下取整
round 四舍五入

Math.round()

random 获取[0,1)之间的随机小数
获取[n,m]之间的随机整数
Math.round(Math.random()*(m-n)+n)
获取有四个数的，且数是0到61的随机数组
var n=0
var ary=[]
while(n<4){
var n=Math.round(Math.random()*61)
if(ary.indexOf(n)==-1){
ary.push(n);
n++;
}
}

max && min 取最大最小值

方法一
var ary = [2,5,4,3,6,9,9,558,11]

var res = eval(`Math.max(${ary.toString()})`)

方法二
//ES6中…表示把数组中括号去掉
Math.max(…ary)

方法三
Math.max.apply(Math,ary)

PI 获取圆周率

pow && sqrt 取一个数的多少次幂/开平方
Math.pow 取一个数的多少次幂
Math.sqrt 开平方

Date方法

var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-???)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间戳(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

效果案例

数组求和

var ary=[1,2,3,5,6]
var a=0;
for(var i=0;i<ary.lenght;i++){
   a+=ary[i];
}

选项卡效果

var tab=document.getElementsByClassName('table')[0];
var olist=tab.getElementsByTagName('li');
var odiv=tab.getElementsByTagName('div');
//创建函数实现页卡切换功能
   function change(index) {
       for (var i=0;i<olist.length;i++){
           olist[i].className='';
           odiv[i].className='';
       }
       olist[index].className='select';
       odiv[index].className='select';
   }

//=>使用自定义属性
   for(var i=0;i<olist.length;i++){
       olist[i].myIndex=i;
       olist[i].onclick=function(){
           change(this.myIndex);//this指向绑定时间的DOM元素
       }
}

//=>使用闭包原理实现
// for(var i=0;i<olist.length;i++){
//     olist[i].onclick=(function(i){
//         return function () {
//             change(i);
//         }
//     })(i);
// }

// for(var i=0;i<olist.length;i++){
//  ~function(i){
//     olist[i].onclick = function () {
//             change(i);
//         }
//     }(i);
// }
// for(let i=0;i<olist.length;i++){
//     olist[i].onclick=function(){
//         change(i);
//     }
// }

递归累加求和

function sum(n) {
if(n<0){
return 0
}
return n+=fn(n-1)
}
var s=sum(100)//=>5050

字符串案例

var str='https://www.souyidai.com/soeasy/invest/fulllist?productType=0&pageNo=0'
//obj={productType:0,pageNo:0}

//方案一：随机

function getQues(str) {
   var questionIndex=str.indexOf('?');
   str = str.substring(questionIndex+1);
 var arr=str.split('&')
   var obj={}
   for(var i=0;i<arr.length;i++){
       var arr2=arr[i].split('=');
       obj[arr2[0]]=arr2[1]*1
   }
   return obj;
}
var n=getQues(str)
随机生成验证码
//得到n位不同的数
function getAry(n) {
   n = n||4;
   var ary4=[];
   while(ary4.length<n){
       var m=Math.round(Math.random()*61);
       if(ary4.indexOf(m)==-1){
           ary4.push(m);
       }
   }
   return ary4;
}

//验证码
function getStr(n) {
   n=n||5;
   var str='qwertyuiopasdfghjklzxcvbnm1234567890ASDFGHJKLQWERTYUIOPZXCVBNM';
   var arr=getAry(n);
   var s='';
   console.log(arr);
   for(var i=0;i<arr.length;i++){
       s+=str[arr[i]];
   }
   return s;
}

var btn=document.getElementById('btn');
var box=document.getElementById('box');
btn.onclick=function () {
   var code = getStr();
   box.innerHTML = code;
}

定时器案例

function getTime() {
   //1、获取目标时间
   var target = new Date('2018-11-28 18:30:00').getTime();

   //2、获取当前时间
   var now = new Date().getTime();

   //3、获取时间差
   var time = target-now;
   //time小于等于零时，清除定时器
  if(time<=0){
      clearInterval(timer2);
      return ;
  }
   //4、把时间差转成时分秒
   var h=parseInt(time/(3600*1000));
   var m=parseInt((time-(h*3600*1000))/(60*1000));
   var s=parseInt((time-(h*3600*1000)-m*(60*1000))/1000);

   var str = `距离上班还有${h<10?'0'+h:h}小时${m<10?'0'+m:m}分钟${s<10?'0'+s:s}秒`
   timeBox.innerText=str;
}
var timer2 = setInterval(getTime,1000);

南笙前端工程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS基础——数组排序、[冒泡排序、快排、递归法快排、对象去重等等]以及效果案例解读

文章目录数组排序冒泡排序双for O(n^2)快速排序递归法 O(nlgn)数组去重双循环法indexOf处理法对象去重法利用Set或Map结构console.dir(Math)查看Math的所有操作方法abs取绝对值Math.round()max && min 取最大最小值PI 获取圆周率Date方法效果案例数组求和选项卡效果递归累加求和字符串案例定时器案例数组排序冒泡排序双for O(n^2)var ary=[10,2,1,3,4,2,1,2]for (var j=0;j
复制链接

扫一扫