ES5中的循环方法的使用
在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循环语句
1. ForEach
功能: 遍历数组中的每一个元素, 并且将每一个元素的处理过程交给回调函数
语法: 数组.forEach( callback )
| function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数:
|
例如: 遍历打印数组中的每一个元素与索引号
传统:
var myary = [11,12,13,14,15]
for ( var i = 0; i < myary.length; i++ ) {
console.log( i + ', ' + myary[ i ] ); // 打印, 索引号 与 当前元素
}
forEach:
myary.forEach( function ( value, index ) {
console.log( index + ', ' + value );
} );
JQ中each方法与forEach方法的异同
-> 参数
jq: ( arr, 回调函数 ), 回调函数的参数是 i, v
数组: ( 回调函数 ), 回调函数的参数是 v, i
-> 返回值
jq: 有返回值, 即当前遍历的数组或对象.
数组: 没有返回值
补充: jq 方法可以遍历数组, 伪数组, 对象; 而数组中的方法只能遍历数组.
-> 执行的功能
jq 中 this 指的是当前遍历的对象, 而数组中的 this 默认是 window.
在 jq 中遍历的数据如果是一个基本类型的数据( number, boolean, string ),
this 指其包装对象. 如果需要拿到遍历的基本类型数组的值, 要么使用 valueOf, 要么使用参数 v
数组的 forEach 方法不能停止, 只能全部遍历完毕才会结束.
jq 中直接给回调函数返回 false 即可跳出循环.
2. map
功能: 将一个集合按照特定的规律变成另一个集合..
语法: 数组.map( 回调函数 )
简单的来理解, map也是在遍历数组. 这种理解不准确…
分析: 如果回调函数没有返回值, 注意默认返回了 undefined
例如: 有数字构成的集合, 将其中 的数字扩大一倍.
map 的实现逻辑
1> map 函数要返回一个数组
2> map 返回的这个数组的元素由 回调函数的返回值决定
map 函数也是如此, map 函数中的回调函数来实现我们的规则
var newArr = arr.map( function ( v, i ) {
return v * 2;
});
我们的要求是将数组中的元素转换成另一个东西, 那么这个转换的过程由回调函数来实现
典型的案例:
'a,b,c'.split( ',' ).map(function ( v ) {
return '<td>' + v + '</td>';
});
// [ 'a', 'b', 'c' ] => [ '<td>a</td>', '<td>b</td>', '<td>c</td>' ]
将箭头函数引入 map. 上面的案例就可以改良成
'a,b,c'.split( ',' ).map( v => '<td>' + v + '</td>' );
jq 中map 方法与map的异同
-> 参数
与其回调函数的参数一样
-> 返回值
数组的返回值是一个数组, jq 的返回值也是数组
数组的返回值必须保证每一个回调函数都有返回数据. 如果没有相当于 返回 undefined
jq 中 map 方法的返回值中的元素由 回调函数的返回值决定, 如果没有回调函数返回,则为空数组
其实在 jq 中 map 相当于结合了数组中提供的 map 与 filter 的功能
-> 执行的功能
如果 jq 作为 $.map 来调用, 回调函数中不能使用 this, 其 this 是 window, 参数是 v,i
如果 jq 作为 $( ... ).map() 来调用, 回调函数中的 this 就是当前遍历的元素. 其参数是 i, v
补充:
$.map( arr, function ( v, i ) { ... } )
$( '...' ).map( function () { ... } )
3.4. every 和 some
some 方法, 表示判断数组中的元素只要含有某一个条件即可
every 方法, 表示判断数组中的每一个元素必须含有某个条件
语法: 数组.方法名( 回调函数 ) -> boolean
说明:
1> 回调函数依旧是遍历数组的每一个元素
2> 回调函数的参数依旧是 v, i
3> 回调函数的作用是用来判断数组中的元素, 所以回调函数有返回值, 返回一个 boolean
4> some 方法凡是发现满足了条件的元素就会停止遍历, 并返回 true, 否则返回 false.
5> every 方法凡是发现了一个元素不满足条件就会停止遍历, 并返回 false, 否则返回 true.
该方法与逻辑中断类似 是逻辑中断的升级版.
|| 表达式1 || 表达式2
如果表达式1为假, 才会判断表达式2, 如果表达式1已经真 那么不执行表达式2, 就得到结果
&& 表达式1 && 表达式2
如果表达式1为假, 那么不在判断表达式2, 直接得到结果为假, 如果表达式1为真, 再判断表达式2
5. filter
功能: 将一个数组中符合某要求的所有元素筛选出来, 组成一个新的数组返回.
语法: 数组.filter( 回调函数 ) -> 新数组
回调函数的参数依旧是 v, i
回调函数判断的时候, 判断元素 v 是否符合要求, 如果符合返回 true, 否则返回 false
filter 就会将所有的符合元素组成新的数组
案例: 将所有的数字中奇数取出来.
var arr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ];
arr.filter( v => v % 2 == 1 );
等价于
arr.filter( function ( v ) {
return v % 2 == 1;
} );
filter: 在数组中筛选你需要的数据, 组成一个新数组( MDN 上找案例 ).
类比的案例: 有一个字符串数组, 将其中元素中含有 字符 e 的字符串取出来, 构成新数组
var arr = [ 'e', 'ab', 'abcde', 'abcdf' ];
// 语法:
var newArr = arr.filter(function ( v ) {
return v.indexOf( 'e' ) > -1;
});
尝试使用自己的算法将其功能实现出来
function filter ( arr, callback ) {
var res = [];
for ( var i = 0; i < arr.length; i++ ) {
if ( callback( arr[ i ], i ) ) {
// 如果判断为真才会进入
res.push( arr[ i ] );
}
}
// 返回值? 是一个新数组
return res;
}
6、reduce
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始合并，最终为一个值。
参数
callback
执行数组中每个值的函数，包含四个参数
previousValue
上一次调用回调返回的值，或者是提供的初始值（initialValue）
currentValue
数组中当前被处理的元素
index
当前元素在数组中的索引
array
调用 reduce 的数组
initialValue
作为第一次调用 callback 的第一个参数。
例子:将数组所有项相加
var total = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
});
// total == 6
例子: 数组扁平化
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]
7、some
Array.prototype.every()
概述
every() 方法测试数组的所有元素是否都通过了指定函数的测试。
语法
arr.every(callback[, thisArg])参数
callback
用来测试每个元素的函数。
thisArg
执行 callback 时使用的 this 值。
描述
every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。
callback 被调用时传入三个参数：元素值，元素的索引，原数组。
如果为 every 提供一个 thisArg 参数，在该参数为调用 callback 时的 this 值。如果省略该参数，则callback 被调用时的 this 值，在非严格模式下为全局对象，在严格模式下传入 undefined。
every 不会改变原数组。
every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改，则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。
实例
例子：检测所有数组元素的大小
下例检测数组中的所有元素是否都大于 10。
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
8、some
Array.prototype.some()
概述
some() 方法测试数组中的某些元素是否通过了指定函数的测试。
语法
arr.some(callback[, thisArg])参数
callback
用来测试每个元素的函数。
thisArg
执行 callback 时使用的 this 值。
描述
some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。
callback 被调用时传入三个参数：元素的值，元素的索引，被遍历的数组。
如果为 some 提供了一个 thisArg 参数，将会把它传给被调用的 callback，作为 this 值。否则，在非严格模式下将会是全局对象，严格模式下是 undefined。
some 被调用时不会改变数组。
some 遍历的元素的范围在第一次调用 callback. 时就已经确定了。在调用 some 后被添加到数组中的值不会被callback 访问到。如果数组中存在且还未被访问到的元素被 callback 改变了，则其传递给 callback 的值是some 访问到它那一刻的值。
示例
例子：测试数组元素的值
下面的例子检测在数组中是否有元素大于 10。
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true
9、indexof
indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。
'hello world'.indexOf('o') // 4
'JavaScript'.indexOf('script') // -1
复制代码indexOf方法还可以接受第二个参数，表示从该位置开始（包含该位置）向后匹配（从此搜索的开始位置->字符串尾部，取搜索范围）。
'hello world'.indexOf('o', 6) // 7
10、lastIndexOf
lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
'hello world'.lastIndexOf('o') // 7
复制代码另外，lastIndexOf的第二个参数表示从该位置起向前匹配((从字符串头部->此搜索的开始位置，取搜索范围))。
'hello world'.lastIndexOf('o', 6) // 4es5 indexof 与 es7 includes区别
早es5的时候就有了查找数组中是否包含某个值的API indexOf(); 使用方法很简单，比如有个数组是：
var arr=[2,3,4,"php"]
如果我们想知道数组中有没有"php"这一项，只需要 indexOf("php")
如果存在会返回查找值的位置，找不到会返回-1；但是这有个问题就是，如果查找的值碰巧是NaN呢：
就会返回-1，这不是我们想要的结果，再来看看includes()方法可以做到吗：
includes()方法正确的判断了NaN是否存在，而indexOf()不行。
比较：
1，使用方法基本一样
2，初衷都是查看数组是否包含某个值
3，indexOf没有includes语义化更强
4，includes更加完善
ES6中新增加了一种：
1.for...of循环语句
var a = [1,2,3];
for(var value of a){
console.log(value) // 结果依次为1，2，3
}
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
