数组的高级应用含ES6 for of 用法

// 在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语句不同的是它不可以循环对象，只能循环数组。