jQuery中提供的三个函数：map,each,trim
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中提供的三个函数：map,each,trim相关的知识，希望对你有一定的参考价值。
jQuery中提供的三个函数: map,each,trim
$.map(arry,callback(element,index));
对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变。
源码
// arg is for internal usage only
map: function( elems, callback, arg ) {
var length, value,
i = 0,
ret = [];
// Go through the array, translating each of the items to their new values
if ( isArrayLike( elems ) ) {
length = elems.length;
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret.push( value );
}
}
// Go through every key on the object,
} else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg );
if ( value != null ) {
ret.push( value );
}
}
}
// Flatten any nested arrays
return concat.apply( [], ret );
}$.each(array,fn);遍历数组
主要用来遍历数组，不修改数组。对于普通数组或者“键值对”数组都没有问题。
return false来退出循环
在each函数中可以直接使用this,表示当前元素的值。
源码
each: function( obj, callback ) {
var length, i = 0;
if ( isArrayLike( obj ) ) {
length = obj.length;
for ( ; i < length; i++ ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
} else {
for ( i in obj ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}
return obj;
}示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery测试</title> <script type="text/javascript" src="js/jquery-1.12.3.js"></script> <script type="text/javascript"> var msg = {"name":"tom","age":19,"gender":"male"}; $.each(msg,function(key,value){ console.log(key + "===" + value); }); </script> </head> <body> </body> </html>
效果图
案例：利用arguments对象来试探一个方法中需要的参数
测试map方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
var arr = [11,12,13,14,15];
$.map(arr,function(){
var len = arguments.length;
var values = "";
for(var i=0;i<arguments.length;i++)
{
values+="_" + arguments[i];
}
alert(len+values);
});
</script>
</head>
<body>
</body>
</html>效果图
测试each方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
var msg = {"name":"tom","age":19,"gender":"male"};
$.each(msg,function(){
var len = arguments.length;
var values = "";
for(var i=0;i<len;i++)
{
values+="_"+arguments[i];
}
alert(len + values);
});
</script>
</head>
<body>
</body>
</html>效果图
将一个数组中的元素翻倍，并返回一个新数组
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
var arr = [11,12,13,14,15];
var newArr = $.map(arr,function(element,index){
return element*2;
});
alert(newArr);
</script>
</head>
<body>
</body>
</html>效果图
将一个数组中索引大于3的元素的值翻倍，其余值不变，并返回数组
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery测试</title>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
var arr = [11,12,13,14,15];
var newArr = $.map(arr,function(element,index){
return index>3?element*2:element;
});
alert(newArr);
</script>
</head>
<body>
</body>
</html>效果图
$.trim(str);
去掉两端空格，调试查看实现方式
源码
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g
trim: function( text ) {
return text == null ?
"" :
( text + "" ).replace( rtrim, "" );
}本质上类似于str.replace(/^\s+/,‘‘);
trimLeft=/^[\s\xA0]/;
trimRight=/[\s\xA0]+$/;
IE一些版本不支持\s空格，\xA0也表示空格
以上是关于jQuery中提供的三个函数：map,each,trim的主要内容，如果未能解决你的问题，请参考以下文章