javascript高级程序设计 第五章引用类型 迭代方法

最近在看javascript高级程序设计,下面都是跟引用类型 迭代方法相关的内容：javascript高级程序设计 第五章引用类型里面讲到了迭代方法 ，梳理一下。书中介绍总共有五个迭代方法： every() : 对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true

some() : 对数组中的每一项运行给定函数，如果该函数对任一项返回true,则返回true filter() : 对数组中的每一项运行给定函数，返回该函数会返回true的成员 forEach() : 对数组中的每一项运行给定函数，这个方法没有返回值 map() : 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组以上方法都不会修改原数组中的值。每个方法接受两个参数，第一个参数是函数，函数内部接受三个参数，数组项的值，该项在数组中的位置，和数组对象本身。第二个参数是运行该函数的作用域对象，可选。

every()var arr = [1,2,3,4,5];var result = arr.every((item,index)=>{ return item>0 })result; //truevar arr = [1,2,3,4,5];var result = arr.every((item,index)=>{ return item>2 })result; //false 1 2 3 4 5 6 7 8 9 10 11浏览器内部实现Array.prototype.every=function(callbackfn,thisArg){ var T,K; var me=this; // 判断第一个参数是否为函数 if(typeof callbackfn !== 'function'){ throw new TypeError() } // 判断是否存在第二个参数

if(arguments.length>1){ T=thisArg; } K=0; while(k{ return item>4 })result; //truevar arr = [1,2,3,4,5];var result = arr.some((item,index)=>{ return item>5 })result; //false 1 2 3 4 5 6 7 8 9 10 11浏览器内部实现Array.prototype.some=function(callback,thisArg){ var me=this; if(typeof callback !== 'function'){ throw new TypeError(); } var len=this.length; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; for(var i=0;i{ return item>2 })result; //[3,4,5]var arr = [1,2,3,4,5];var result = arr.filter((item,index)=>{ return item>5 })result; //[] 1 2 3 4 5 6 7 8 9 10 11

浏览器内部实现Array.prototype.filter=function(callback,thisArg){ var me=this; if(typeof callback !== 'function'){ throw new TypeError(); } var len=this.length; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; var res=[]; for(var i=0;i{ console.log(item)})//纯操作，不带返回值//1 2 3 4 5 1 2 3 4 5 6

浏览器内部实现Array.prototype.forEach=function(callback,thisArg){ var T,K; var me=this; // 判断第一个参数是否为函数 if(typeof callbackfn !== 'function'){ throw new TypeError() } // 判断是否存在第二个参数 if(arguments.length>1){ T=thisArg; } K=0; while(k{ return item+1})//[2,3,4,5,6] 1 2 3 4 5 6

浏览器内部实现Array.prototype.map=function(callback,thisArg){ var k; var me=this; var thisArg = arguments.length >= 2 ? arguments[1] : void 0; if (typeof callback !== 'function') { throw new TypeError(callback + ' is not a function'); } k=0; var arr=new Array(me.length); while (k<me.length){ var kValue, mappedValue; if(k in me){ kValue=me[k]; mappedValue=callback.call(thisArg,kValue,k,me); arr[k]=mappedValue } } return arr;}

1.js 提供了一些迭代的方法，包括every,some,filter,map，forEach.

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。
filter()：对数组中的每一项运行给定函数，返回该函数会返回true 的项组成的数组。
forEach()：对数组中的每一项运行给定函数。这个方法没有返回值。
map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true.
every主要是用于判断一个素组中的值是否符合某个标准。必须是每个值都符合才会返回true。否则返回false.
而some()函数只需要有一个值返回的是true就会返回true.
例子如下：
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index, array){
return (item > 2);
});
alert(everyResult); //false
var someResult = numbers.some(function(item, index, array){
return (item > 2);
});
alert(someResult); //true

2.filter，filter返回的是一个符合某种条件的数组。
例如：数组number = [1,2，1,3,5,3,4,9,6,9];
var result = number.filter(function(item,index,array){
return (item>5);
});
alert(result); /[9,6,9];
3.map,map和filter函数类似，同样是hi返回的是一个数组。不过，这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。例如：
var numbers = [1,2,3,4,5,6,7];
var mapresult = numbers.map(function(item,index,array){
return item*2;
});
alert(mapresult);//[2,4,6,8,10,12,14];

**4.**forEach()
顾名思义，是一个循环数组的方法。

5.归并
5.1reduce()，reduceRight()。
迭代i数组中的所有值，返回一个按条件计算的最终值。
reduce是从数组的逐个遍历
到最后。而reduceRight()则从数组的最后一项开始，向前遍历到第一项。
例如：
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
return prev + cur;
});
alert(sum); //15

第一次执行回调函数，prev 是1，cur 是2。第二次，prev 是3（1 加2 的结果），cur 是3（数组
的第三项）。这个过程会持续到把数组中的每一项都访问一遍，最后返回结果。
resuceRight()函数和reduce类似，不过是倒序。

1.链式编程

[javascript] view plain copy print?

1. // 链式编程代码示例  
2. $(“li”).parent(“ul”).parent().siblings(“div”).children(“div”).html(“内容”);  

链式编程原理：return this;

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this

[javascript] view plain copy print?

1. end(); //结束当前链最近的一次过滤操作，并且返回匹配元素之前的一次状态，返回到当前对象的方法链的上一个对象  

2. 隐式迭代

隐式迭代：在方法的内部会对匹配到的所有元素进行循环遍历，执行相应的方法；无需我们再手动地进行循，方便我们使用。

[javascript] view plain copy print?

1. // 设置操作  
2. $(“div”).css(“color”, “red”);  

如果是获取多个元素的值，大部分情况下返回第一个元素的值。

[javascript] view plain copy print?

1. // 获取操作  
2. $(“div”).css(“color”); // 返回第一个元素的值  

3.each方法

大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。但是如果要对每个元素做不同的处理，这时候就要用each方法了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一次指定函数

[javascript] view plain copy print?

1. // 参数一表示当前元素在所有匹配元素中的索引号  
2. // 参数二表示当前元素（DOM对象）  
3. $(selector).each(function(index,element){});  

 

4.多库共存

此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量名。当在一个页面中引用了jQuery，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量名，这时就有了多库共存的问题。

[javascript] view plain copy print?

1. // 模拟另外的库使用了 $ 这个变量名。此时，就与jQuery库产生了冲突  
2. var $ = { name : “itecast” };  

解决方式：

[javascript] view plain copy print?

1. //让jQuery释放对$的控制权，让其他库能够使用$。此后，只能用jQuery来调用jQuery提供的方法  
2. $.noConflict(); 
   

不太了解JavaScript数组的开发人员，JavaScript的数组有多少种迭代方法，你可能得到的答案为，for/while/do-while...等等，这个是循环中的方法，和我们数组的迭代还是有一些区别的。虽然在数组中我们也可以用这些方法去迭代。但是，为了装逼为了飞，我们就来写一点带有脚本味道的代码吧！    

1、every(): 对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则结果返回true。
2、filter(): 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。
3、forEach(): 对数组中的每一项运行给定函数，这个方法没有返回值。
4、map(): 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
5、some(): 对数组中的每一项运行给定函数，如果该函数任意一项返回true，则返回true。

以上的方法都不会修改数组中包含的值。
在这些方法中，最相似的是every()和some()。他们都用于查询数组中的项是否满足某个条件。对every来说，传入的函数必须对数组中的每一项都返回true，这个方法才返回true；否则，他就返回false。在这里我们总结为有假则假，都真才真。而some()方法则是只要传入的函数对数组中的任何一项返回true，就返回true。请看下面例子:

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

var everyResult = numbers.every(function(item, index, array) {
    return (item > 2);
});

var someResult = numbers.some(function(item) {
    return (item > 2);
});

console.log(everyResult);      //false
console.log(someResult);        //true
  
  
1
2
3
4
5
6
7
8
9
10
11
12

需要提醒的是，在some()方法的函数中我并没有传入三个参数，而是不在函数体内用不到后两个参数，所以我省略了。以上的迭代调用了every()和some()，传入的函数只要给定项大于2就会返回true。对于every()，它返回false，因为数组中只有部分满足条件。对于some()，结果返回true，因为数组中至少有一项是大于2的。

下面再来看看filter()函数，他利用指定的函数确定是否在返回的数组中包含某一项，就是说根据指定的函数来筛选符合条件的项组成新的数组并返回。例如，要返回一个所有值都大于2的数组，可以使用下面的代码：

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var filterResult = numbers.filter(function(item) {
    return (item > 2);
});

console.log(filterResult);  \\[3, 4, 5, 4, 3]
  
  
1
2
3
4
5
6

这里，通过调用filter()方法创建并返回了包含3、4、5、4、3的数组，因为传入的函数对它们每一项都返回true。这个方法对查询符合某些条件的所有数组项非常有用。

map()方法也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。例如，可以给数组中的每一项乘以2，然后返回这些乘积组成的数组，如下所示：

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var mapResult = numbers.map(function(item) {
    return (item * 2);
});

console.log(mapResult);     //[2, 4, 6, 8, 10, 8, 6, 4, 2]
  
  
1
2
3
4
5
6

以上代码返回的数组中包含给每个数乘以2之后的结果。这个方法适合创建包含的项与另一个数组一一对应的数组。

最后一个方法就是forEach()。它只是对数组中的每一项运行传入的函数。这个方法没有返回值，本质上与用for循环迭代数组一样，来看一个例子：

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach(function(item, index, arr) {
    //这里执行一些操作
});
  
  
1
2
3
4

这些数组方法通过执行不同的操作，可以大大方便处理数组的任务。还是那句话，在自己的脚本里面写一些有脚本味道的代码，能够提高代码的质量和可读性，甚至减少代码量。支持这些迭代方法的浏览器有IE9+、FireFox 2+、Safari 3+、Opera 9.5+和chrome。