资讯专栏INFORMATION COLUMN

JavaScript中数组排序深度讲解

xbynet / 3408人阅读

摘要:结果为依次为循环语句结果依次为,,代码解读语句看着有点像语句,但是和语句不同的是它不可以循环对象,只能循环数组。

ES5和ES6数组遍历方法详解 在ES5中常用的10种数组遍历方法:

1、原始的for循环语句
2、Array.prototype.forEach数组对象内置方法
3、Array.prototype.map数组对象内置方法
4、Array.prototype.filter数组对象内置方法
5、Array.prototype.reduce数组对象内置方法
6、Array.prototype.some数组对象内置方法
7、Array.prototype.every数组对象内置方法
8、Array.prototype.indexOf数组对象内置方法
9、Array.prototype.lastIndexOf数组对象内置方法
10、for...in循环语句

ES6中新增加了一种:

1.for...of循环语句

ES5三种数组循环示例如下: 原始for循环语句

Example1

var a = [1,2,3];
for(var i=0;i

代码解读:原始for循环的优点在于大家都比较熟悉,容易理解,劣势是写起来比较繁琐,需要定义额外更多的变量,所以一下是针对于原始for循环的改良的两种写法:
Example1:写法改良版

var a = [1,2,3];
for(var i=a.length;i--;){
    console.log(a[i]);  //结果依次为3,2,1
}

Example2:性能改良版

var a = [1,2,3];
for(i = 0,len=a.length; i < len; i++) {
   console.log(a[i]);  //结果依次为1,2,3
}

注意:以上代码可以写成这样呢,如果懵逼了的话接着看原始for循环的解读,我们都知道for循环包含三个语句块——>for(语句1;语句2;语句3){被执行的代码},其中,语句1一般为变量定义语句(不仅可以只定义一个变量哦),在循环开始前执行,而且只执行一次语句2定义循环的是否继续执行的条件,同样也是在循环开始前执行,语句1之后执行,每次重新开始循环都会再次执行语句3则在循环结束之后执行,并且每次结束的时候都会再次执行,这里要注意的是如果被执行的代码中途return出来了那是不会再执行一次语句3的,所以以上代码解释如下:因为i--这个语句在每次循环开始前都会再次先用 i 是true和false来判断是否继续执行,这里同样要注意的是由于i----i的区别,这里由于是i--所以会先判断i的值再去做‘减减’的操作,所以这里最后如果打印 i 的值,会发现其实是-1

数组内置方法Array.prototype.forEach

Example

var a = [1,2,3];
a.forEach(function(value,key,arr){
  console.log(value)    // 结果依次为1,2,3
  console.log(key)      // 结尾依次为0,1,2
  console.log(arr)      // 三次结果都为[1,2,3],该参数貌似没什么用
})

代码解读:forEach方法最大的好处就是便于使用,而且不用定义额外的参数变量,但是从效率以及性能角度来说它是劣于原始for循环的,而且也不能强制return结束循环,原因如下:

**forEach循环**一看就是通过**回调函数**来提供参数的,而回调函数在JS中是**闭包**的一种,闭包的作用是用来生成**私有作用域**的,所以,每一个回调函数都是一个**独立的作用域**,都拥有自己独立的存储空间,互不影响,而且内部变量还不及时释放,这也就是为什么在能不用闭包的情况下就不要用闭包的原因,而在闭包中return的话,也只是在当前回调函数中返回了,可是forEach中的其他的回调函数(闭包)仍然存在,所以,导致return是没办法结束循环的。下面写一个forEach循环实现例子供大家参考理解:

Example

Array.prototype.forEachCopy = function(callback){
    var arr =  this;
    for(var i=0;i
数组内置方法Array.prototype.map

Example

var a = [1,2,3];
var b = a.map(function(value,key,arr){
    console.log(value)    // 结果依次为1,2,3
    console.log(key)      // 结尾依次为0,1,2
    console.log(arr)      // 三次结果都为[1,2,3]
    return value+1;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 2, 3, 4 ]

代码解读:map和forEach不同,在forEach中return语句是没有任何效果的,而map则可以改变当前循环的值,并且最终会返回一个新的被改变过值之后的数组(map如果不用return就和forEach一样了),由于这个特性,map一般用来处理需要修改某一个数组的值。map和forEach在其他的方面都是一样的,也不能return结束循环等特性,下面写一个map循环实现的例子供大家参考理解:
Example

Array.prototype.mapCopy = function(callback){
    var arr =  this;
    var arrCopy = [];
    for(var i=0;i
数组内置方法Array.prototype.filter

Example

var a = [1,2,3];
var b = a.filter(function(value,key,arr){
    console.log(value)    // 结果依次为1,2,3
    console.log(key)      // 结尾依次为0,1,2
    console.log(arr)      // 三次结果都为[1,2,3]
    if(value === 3){
      return false;
    }
    return true;
})
console.log(a); // 结果为[ 1, 2, 3 ]
console.log(b); // 结果为[ 1,2 ]

代码解读:filter和map不同,map目的是为了改变值,而filter目的是为了去掉不要的值,在循环的时候如果返回的是false那么就表示本次循环的不添加该值,返回true则相反是表示要添加到新建的数组中,下面写一个filter循环实现例子供大家参考:
Example

Array.prototype.filterCopy = function(callback){
    var arr =  this;
    var arrCopy = [];
    for(var i=0;i
数组内置方法Array.prototype.reduce

Example

var a = [1,2,3];
var b = a.reduce(function (count, value,key,arry) {
  console.log(count);   // 结果依次为0,1,3
  console.log(value);   // 结果依次为1,2,3
  console.log(key);     // 结果依次为0,1,2
  console.log(arry)     // 三次结果都为[1,2,3]
  return count + value;
},0);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b)          // 结果为6

代码解读:reduce的不同之处在于累加,和其他几个内置方法不同的地方,它的第二个参数不是this对象,而是初始累加值(如果不设置的话数组会乱掉),而且回调函数的的个数也不同,比其他的多了一个,而且还在在开始的多加了一个参数,第一个参数记录的是上一次循环的累加值,下面写一个reduce循环实现例子供大家参考:
Example

Array.prototype.reduceCopy = function(callback,countInit){
    var arr =  this;
    for(var i=0;i
数组内置方法Array.prototype.some

Example

var a = [1,2,3];
var b = a.some(function(value,key,arry){
  console.log(value);   // 结果依次为1,2
  console.log(key);     // 结果依次为0,1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为true

代码解读:some的不同之处在它返回的布尔值,它的作用有点像filter,不过它的目的不是为了筛选返回数组,而是为了筛选该数组是否有满足你要的值,而且找到符合条件的值返回了一次true之后就不会再继续执行了,下面写一个some循环实现例子供大家参考:

Example

Array.prototype.someCopy = function(callback,countInit){
    var arr =  this;
    var isBool = false;
    for(var i=0;i
数组内置方法Array.prototype.every

Example

var a = [1,2,3];
var b = a.every(function(value,key,arry){
  console.log(value);   // 结果依次为1,2
  console.log(key);     // 结果依次为0,1
  console.log(arry);    // 两次次结果都为[1,2,3]
  return value===2;
})
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为false

代码解读:其实从看例子可以看出来,some和every作用是一样的,只不过some当找到之后返回的是true,而every找到之后返回的是false而已,下面写一个every循环实现例子供大家参考:

Example

Array.prototype.everyCopy = function(callback){
    var arr =  this;
    var isBool = true;
    for(var i=0;i
数组内置方法Array.prototype.indexOf

Example

var a = [1,2,3];
var b = a.indexOf(2);
console.log(a);         // 结果为[ 1, 2, 3 ]
console.log(b);         // 结果为1

代码解读:对于indexOf方法来说,在数组循环过程中会和传入的参数比对,如果是比对成功,那么终止循环,返回对比成功的下标,下面写一个indexOf循环实现例子供大家参考:

Example

Array.prototype.indexOfCopy = function(value){
    var arr =  this;
    var index = -1;
    for(var i=0;i
数组内置方法Array.prototype.lastIndexOf

Example

var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a);         // 结果为[ 1, 2, 3, 1 ]
console.log(b);         // 结果为1

代码解读:lastIndexOf方法和indexOf作用一致,但查找方向不同,indexOf是正向查找,lastIndexOf是你像查找,找到之后返回成功的下标,下面写一个lastIndexOf循环实现例子供大家参考:

Example

Array.prototype.lastIndexOf = function(value){
    var arr =  this;
    var index = -1;
    for(var i=arr.length;i--;){
        if(arr[i] === value){
          index = i;
          return index
        }
    }
    return index;
}
var a = [1,2,3,1];
var b = a.lastIndexOf(1);
console.log(a);         // 结果为[ 1, 2, 3 , 1 ]
console.log(b);         // 结果为3

小结:对于以上8个数组的内置方法,forEach方法仅仅只是为了循环,并不可以帮你做额外的事情;map方法相当于在循环的时候你告诉数组当前遍历的这个值需要改成什么样,那么它就会最后给什么样的数组;filter方法相当于在循环的时候数组遍历一个个对象,并问你这个是不是你要找的值,如果你说是,他就会给你返回一个到新的数组中,不是他就会剔除;reduce方法相当于循环遍历对象做统计(累加或者累减之类的);some和every方法相当于在遍历的时候拿着一个个对象问你这个是不是你找的,只要你说了一遍是,那么他就会给你分别返回的是true和false;indexOf和lastIndexOf方法相当于你告诉它你要找什么值,找到之后立马返回给你它的门牌号。

循环语句for...in

Example

var a = [1,2,3];
for(var key in a){
  console.log(key); //结果为依次为0,1,2
}
var b = {0:1,1:2,2:3};
for(var key in b){
  console.log(key); //结果为依次为0,1,2
}

代码解读:从结果得知,for...in遍历数组的时候是遍历数组的下标值,而在遍历对象的时候遍历的是key值,所以猜想,数组在JS中,本质上也是一个以键值对形式存在的对象,而为了证明这点,我们做如下一个例子的实验:

var a = [];
a["b"] = 2;
console.log(a);     //结果为[ b: 2 ]
console.log(a[0]);  //结果为undefined

我们发现数组的下标不在对应相应位置的值了,由此可以证明在JS中数组其实本质上就是一个以下标为key值的对象。
当然对于for...in循环语句本身而言,它是一个浅度遍历对象的循环语句,值遍历第一层节点(当然对象中设置不可枚举的属性的除外)。
Example

var a = {b:{c:2},d:{c:4}};
for(var key in a){
  console.log(key); //结果为依次为b,d
}
ES6循环for...of语句

Example

var a = [1,2,3];
for(var value of a){
  console.log(value)  // 结果依次为1,2,3
}

代码解读:for...of语句看着有点像for...in语句,但是和for...in语句不同的是它不可以循环对象,只能循环数组。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83990.html

相关文章

  • JavasScript重难点知识

    摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...

    forsigner 评论0 收藏0
  • js进阶 - 收藏集 - 掘金

    摘要:很多人可能误认为资源跨域时无法请求,实质上请求是可以正常发起的指通常情况下,部分浏览器存在部分特例,后端也可能正常进行了处理,中文指南调试技巧指南前端掘金作者缉熙简介是推出的一个天挑战。 深入 JavaScript,从对象开始 - 前端 - 掘金入坑前端开发有一段时间了,面对形形色色的JavaScript优秀框架,到底该选择那一款呢?最近在使用Vue.js写一款markdown编辑器插...

    qqlcbb 评论0 收藏0
  • JavaScript专题系列文章

    摘要:专题系列共计篇,主要研究日常开发中一些功能点的实现,比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等,特点是研究专题之函数组合专题系列第十六篇,讲解函数组合,并且使用柯里化和函数组合实现模式需求我们需要写一个函数,输入,返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 ext...

    Maxiye 评论0 收藏0
  • 深度长文】JavaScript数组所有API全解密

    摘要:关于我的博客掘金专栏路易斯专栏原文链接深度长文数组全解密全文共字,系统讲解了数组的各种特性和。构造器构造器用于创建一个新的数组。中声明的数组,它的构造函数是中的对象。 本文首发于CSDN网站,下面的版本又经过进一步的修订。 关于 我的博客:louis blog 掘金专栏:路易斯专栏 原文链接:【深度长文】JavaScript数组全解密 全文共13k+字,系统讲解了JavaScrip...

    Mr_zhang 评论0 收藏0
  • 数据结构以及相关排序

    摘要:桶排序与计数排序的区别桶排序中一个桶可以放一个范围内的多个数据,在各个桶中又可以用其他方法排序,其快速之处在于只用对比同一个桶内的数字而无需与其他桶的数字作对比。与计数排序相比,桶排序需要作二次对比,但可省略桶的个数。 哈希表(Hash Table) 所有符合键值对即key-value的结构就是哈希。数组其实也是一种哈希。 计数排序(复杂度(n+max))无法统计负数和小数,需要一个...

    Brenner 评论0 收藏0

发表评论

0条评论

xbynet

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<