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) // 4
es5 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
}