// 在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三种数组循环示例如下: // 示例1------------------------------>>>>>>>>>>>>
// 原始for循环语句 Example1
// var a = [1,2,3];
// for (var i=0;i<a.length;i++){
// console.log(a[i]);
// }
//代码解读:原始for循环的优点在于大家都比较熟悉,容易理解,劣势是写起来比较繁琐,
// 需要定义额外更多的变量,所以一下是针对于原始for循环的改良的两种写法: // Example1 写法改良版
// var a = [1,2,3];
// for (var i = a.length; i--;) {
// console.log(a[i]); //结果依次为3,2,1
// } // Example1 性能改良版
// var a = [1, 2, 3];
// for (var i = 0, len = a.length; i < len; i++) {
// console.log(a[i]);
// } // 示例2------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.forEach
// var a = [1, 2, 3];
// a.forEach(function (value, index) {
// console.log(value); // 结果依次为1,2,3
// });
// a.forEach(function (value, index) {
// console.log(index); // 结尾依次为0,1,2
// }); // 代码解读:forEach方法最大的好处就是便于使用,而且不用定义额外的参数变量,
// 但是从效率以及性能角度来说它是劣于原始for循环的,而且也不能强制return结束循环,原因如下:
// **forEach循环**一看就是通过**回调函数**来提供参数的,而回调函数在JS中是**闭包**的一种,
// 闭包的作用是用来生成**私有作用域**的,所以,每一个回调函数都是一个**独立的作用域**,
// 都拥有自己独立的存储空间,互不影响,而且内部变量还不及时释放,这也就是为什么在能不用闭包的情况下就不要用闭包的原因,
// 而在闭包中return的话,也只是在当前回调函数中返回了,可是forEach中的其他的回调函数(闭包)仍然存在,
// 所以,导致return是没办法结束循环的。下面写一个forEach循环实现例子供大家参考理解: // Array.prototype.forEachCopy = function (callback) {
// var arr = this;
// for(var i=0;i<arr.length;i++){
// callback(arr[i],i,this);
// }
// }
// var a =[1,2,3];
// a.forEachCopy(function(value,key,arr){
// console.log(value);
// console.log(key);
// console.log(arr);
// }) // 示例3------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.map
// var a = [1, 2, 3];
// var b = a.map(function (value) {
// console.log(value); // 结果依次为1,2,3
// return value * 2;
// });
// console.log(b); //结果为[ 2, 4, 6 ];
// 代码解读: map和forEach不同, 在forEach中return语句是没有任何效果的,
// 而map则可以改变当前循环的值, 并且最终会返回一个新的被改变过值之后的数组( map如果不用return就和forEach一样了),
// 由于这个特性, map一般用来处理需要修改某一个数组的值。 map和forEach在其他的方面都是一样的,
// 也不能return结束循环等特性, 下面写一个map循环实现的例子供大家参考理解:
// Array.prototype.mapCopy = function (callback) {
// var arr = this;
// var arrCopy = [];
// for (var i = 0; i < arr.length; i++) {
// var cbValue = callback(arr[i], i, this);
// arrCopy.push(cbValue);
// }
// return arrCopy;
// };
// var a = [1, 2, 3];
// var b = a.mapCopy(function (value, key, arr) {
// console.log(value);
// console.log(key);
// console.log(arr);
// }); // 示例4------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.filter
// var a=[1,2,3];
// var b = a.filter(function(value,key,arr){
// if(value > 2){
// return true;
// }
// });
// console.log(b);
// 代码解读:filter和map不同,map目的是为了改变值,而filter目的是为了去掉不要的值,
// 在循环的时候如果返回的是false那么就表示本次循环的不添加该值,返回true则相反是表示要添加到新建的数组中,
// 下面写一个filter循环实现例子供大家参考: // Array.prototype.filterCopy = function (callback) {
// var arr = this;
// var arrCopy = [];
// for (var i = 0; i < arr.length; i++) {
// var cbValue = callback(arr[i], i, this);
// if (cbValue) {
// arrCopy.push(arr[i]);
// }
// }
// return arrCopy;
// }
// var a = [1, 2, 3];
// var b = a.filterCopy(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 ] // 示例5------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.reduce // 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循环实现例子供大家参考: // Array.prototype.reduceCopy = function (callback, countInit) {
// var arr = this;
// for (var i = 0; i < arr.length; i++) {
// var cbValue = callback(countInit, arr[i], i, this);
// countInit = cbValue;
// }
// return countInit;
// }
// var a = [1, 2, 3];
// var b = a.reduceCopy(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 // 示例6------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.some // var a=[1,2,3];
// var b = a.some(function(value){
// return value ==2;
// });
// console.log(b); // 代码解读:some的不同之处在它返回的布尔值,它的作用有点像filter,不过它的目的不是为了筛选返回数组,
// 而是为了筛选该数组是否有满足你要的值,而且找到符合条件的值返回了一次true之后就不会再继续执行了,下面写一个some循环实现例子供大家参考: // Array.prototype.someCopy = function (callback, countInit) {
// var arr = this;
// var isBool = false;
// for (var i = 0; i < arr.length; i++) {
// var cbValue = callback(arr[i], i, this);
// if (cbValue) {
// isBool = true;
// return isBool
// }
// }
// return isBool;
// }
// var a = [1, 2, 3];
// var b = a.someCopy(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 // 示例7------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.every // 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循环实现例子供大家参考: // Array.prototype.everyCopy = function (callback) {
// var arr = this;
// var isBool = true;
// for (var i = 0; i < arr.length; i++) {
// var cbValue = callback(arr[i], i, this);
// if (cbValue) {
// isBool = false;
// return isBool
// }
// }
// return isBool;
// }
// var a = [1, 2, 3];
// var b = a.everyCopy(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 // 示例8------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.indexOf // var a = [1, 2, 3];
// var b = a.indexOf(1);
// console.log(b);
// 码解读:对于indexOf方法来说,在数组循环过程中会和传入的参数比对,如果是比对成功,那么终止循环,
// 返回对比成功的下标,下面写一个indexOf循环实现例子供大家参考:
// 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 // 示例9------------------------------>>>>>>>>>>>>
// 数组内置方法Array.prototype.lastIndexOf
// 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循环实现例子供大家参考:
// 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方法相当于你告诉它你要找什么值, 找到之后立马返回给你它的门牌号。 // 示例10------------------------------>>>>>>>>>>>>
// var a=[1,2,3];
// for(var k in a){
// console.log(k);
// } // var b ={
// 0:1,
// 1:2,
// 2:3,
// };
// for(var k in b ){
// console.log(k);
// }
// 代码解读:从结果得知,for...in遍历数组的时候是遍历数组的下标值,而在遍历对象的时候遍历的是key值,
// 所以猜想,数组在JS中,本质上也是一个以键值对形式存在的对象,而为了证明这点,我们做如下一个例子的实验: // var a = [];
// a['b'] = 2;
// a['c'] = 3;
// console.log(a);
// console.log(a[0]); // 我们发现数组的下标不在对应相应位置的值了,由此可以证明在JS中数组其实本质上就是一个以下标为key值的对象。
// 当然对于for...in循环语句本身而言, 它是一个浅度遍历对象的循环语句, 值遍历第一层节点( 当然对象中设置不可枚举的属性的除外)。
// var a={
// b:{
// c:2,
// },
// d:{
// e:3,
// }
// };
// for (var k in a){
// console.log(k);
// } // ES6循环for...of语句
// var a = [1,2,3];
// for (var value of a){
// console.log(value);
// }
// 代码解读:for...of语句看着有点像for...in语句,但是和for...in语句不同的是它不可以循环对象,只能循环数组。

数组的高级应用含ES6 for of 用法的更多相关文章

  1. JQuery数组详解(含实例)

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  2. JS的prototype和__proto__(含es6的class)

    JS的prototype和__proto__(含es6的class) 一.prototype和__proto__的概念 prototype是函数的一个属性(每个函数都有一个prototype属性),这 ...

  3. Jquery判断数组中是否包含某个元素$.inArray()的用法

    判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时,返回该元素在数组的下标,不存在时返回 -1 示例代码 ...

  4. ES6语法 promise用法

    ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...

  5. es6的promise用法详解

    es6的promise用法详解 promise 原理 promise是es6的异步编程解决方案, 是es6封装好的对象: 一个promise有三种状态:Pending(进行中).Resolved(已完 ...

  6. javaScript高级含Es6

    JavaScript高级第01天笔记 1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 1.2 ...

  7. 遍历数组中的元素(含es6方法)

    假如有这样一个数组.arr = [12,34,45,46,36,58,36,59],现在要遍历该数组. 方法1:以前我们可能会这样做: for(var i=0;i<arr.length;i++) ...

  8. JavaScript this 总结(含 ES6)

    本文主要总结自<JavaScript 语言精粹>.部分总结自<JavaScript 高级程序设计>以及自己的经验 四种调用模式 在 JavaScript 中,this 的值取决 ...

  9. JS正则表达式语法(含ES6)(表格简要总结)

    文章目录 JS正则表达式 1. JS中正则表达式定义 2. 直接量字符 3. 字符类 4. 重复字符 5. 选择,分组和引用 6. 指定匹配位置 7. 修饰符 8. String 方法 9. RegE ...

随机推荐

  1. 我的T440p出现怪事情了

    装上系统后,再稍微装些软件,或是打补丁,升级驱动什么的,再重启就起不来了. 也就是说,装一次系统只能好一次,关机或是重启就启动不了了,现象是在黑屏界面转两下就转不动了. 鼓捣一个周末也无效,昨天上系统 ...

  2. Java网络通信 —— 序列化问题

    Java序列化的目的主要有两个: 1.网络传输 2.对象持久化 当选行远程跨迸程服务调用时,需要把被传输的Java对象编码为字节数组或者ByteBuffer对象.而当远程服务读取到ByteBuffer ...

  3. 面向对象--有参数的__init__方法

    有参数的__init__()方法 class Hero(object): """定义了一个英雄类,可以移动和攻击""" def __init ...

  4. Java链接db2相关

    端口一般是50000或者60000 后面跟的可能是库名(个人猜测) 还有db2jcc.jar安装db2的可以从相应目录下载未安装的可以…(啥时候有空再传上来)

  5. ajax之---“伪”ajax

    views.py def ajax1(request): ret={'status':'true','message':'successful'} return HttpResponse(json.d ...

  6. [Java并发编程之美]第2章 并发编程的其他基础知识 补充知识

    基本概念 并行与并发 并行:单位时间内多个任务同时执行(多核CPU). 并发:同一时间段内多个任务同时都在执行(CPU时间片轮转). 线程安全性问题 线程安全问题:指多个线程同时读写一个共享资源而没有 ...

  7. [LeetCode] 221. 最大正方形(DP)

    题目 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 0 1 0 1 1 1 1 1 1 1 1 1 0 0 1 0 输出: 4 ...

  8. C语言01

    从问题到C语言程序设计 1.1计算机的问题求解方法 程序设计面向的问题 什么问题可以用程序的方法解决? 打印九九乘法表 图形变换 文件压缩问题 ....... 一切可计算的问题 如何解决? 确定问题可 ...

  9. 关于java基础_数组的学习

    数组的学习 1.数组的概念?作用是什么? 系统中存储多个值, 2.数组的定义? 数据类型[] 数组名; 3.定义好数组以后需要对其进行初始化 数组初始化有两种: 第一种动态初始化,指定数组的长度,长度 ...

  10. Go 里的函数

    1. 关于函数 函数是基于功能或 逻辑进行封装的可复用的代码结构.将一段功能复杂.很长的一段代码封装成多个代码片段(即函数),有助于提高代码可读性和可维护性. 在 Go 语言中,函数可以分为两种: 带 ...