首页 > 代码库 > jQuery中提供的三个函数：map,each,trim
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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。