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也表示空格
转载于:https://blog.51cto.com/lsieun/1845010