logo头像

求知若渴,虚心若愚

jQuery - jQuery源码学习 - jQuery扩展工具方法源码分析(五)

trim()

  • 用于去除字符串两端的空白字符
  • $.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时,它们将被保留,不会被移除。
1
2
3
4
5
6

core_version = "2.0.3",
core_trim = core_version.trim,
trim: function( text ) {
return text == null ? "" : core_trim.call( text );
},
  • core_version是字符串
  • core_trim:是字符串的trim方法

makeArray()

  • 将一个类似数组的对象转换为真正的数组对象
  • 类数组对象具有许多数组的属性(例如length属性,[]数组访问运算符等),不过它毕竟不是数组,缺少从数组的原型对象上继承下来的内置方法(例如:pop()、reverse()等)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// results is for internal usage only
// 第二个参数是给内部用的
makeArray: function( arr, results ) {
// 如果传入了results,就给ret,如果么有就付给一个新建的数组
var ret = results || [];
// 过滤参数array是null、undefined的情况
if ( arr != null ) {
// isArrayLike 判断是否为数组,类数组
// 后面有isArrayLike分析
if ( isArraylike( Object(arr) ) ) {
// 调用方法jQuery.merge()把该参数合并到返回值ret中。
// 如果arr为数字6789,这里会返回false,因为number不是类数组。
// 但是如果是字符串"hello",Object会把它转成具有length的json对象,所以就返回true。
// 因为字符串是有length属性的。
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
);
} else {
// 插入元素时执行的是push.call( ret,array ),而不是ret.push( array )
// 这是因为返回值ret不一定是真正的数组。
// 如果只传入参数array,则返回值ret是真正的数组;
// 如果还传入了第二个参数result,则返回值ret的类型取决于该参数的类型
core_push.call( ret, arr );
}
}
// 返回ret
return ret;

},

inArray()

  • 元素是否在arr数组中,从i位置开始找
  • 找到就返回其下标,未找到则返回-1。
1
2
3
4

inArray: function( elem, arr, i ) {
return arr == null ? -1 : core_indexOf.call( arr, elem, i );
},

merge()

  • 合并两个数组内容到第一个数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

merge: function( first, second ) {
var l = second.length,
i = first.length,
j = 0;

// 如果参数second的属性length是数值类型,则把该参数当作数组处理,把其中的所有元素都添加到参数first中
if ( typeof l === "number" ) {
for ( ; j < l; j++ ) {
first[ i++ ] = second[ j ];
}
} else {
// 把该参数当作含有连续整型(或可以转换为整型)属性的对象,
// 例如,{ 0:'a', 1:'b'},把其中的非undefined元素逐个插入参数first中。
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
// 修正first.length。因为参数first可能不是真正的数组,所以需要手动维护属性length的值。
first.length = i;

return first;
}
  • 参数first:

    • 数组或类数组对象,必须含有整型(或可以转换为整型)属性length,
    • 第二个数组second中的元素会被合并到该参数中。
  • 参数second:

    • 数组、类数组对象或任何含有连续整型属性的对象
    • 其中的元素会被合并到第一个参数first中。

grep()

  • 用指定的函数过滤数组中的元素,并返回过滤后的数组
  • 源数组不会受到影响,过滤结果只反映在返回的结果数组中
参数 描述
array Array类型 将被过滤的数组。
function Function类型 指定的过滤函数。
grep()方法为function提供了两个参数:
其一为当前迭代的数组元素,
其二是当前迭代元素在数组中的索引。
invert 可选。
Boolean类型 默认值为false,指定是否反转过滤结果。
如果参数invert为true,则结果数组将包含function返回false的所有元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

grep: function( elems, callback, inv ) {
var retVal,
ret = [],
i = 0,
length = elems.length;
// 转换成true or false,不传的时候是undefined,就会变成fase
inv = !!inv;

// 遍历数组elems,为每个元素执行过滤函数。
// 如果参数inv为true,把执行结果为false的元素放入结果数组ret;
// 如果inv为false,则把执行结果为true的元素放入结果数组ret。
for ( ; i < length; i++ ) {
retVal = !!callback( elems[ i ], i );// 转换成true or false
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
// 返回结果数组ret
return ret;
},
  • 如果参数invert未传入或是false,元素只有在过滤函数返回true,
  • 或者返回值可以转换为true时,才会被保存在最终的结果数组中,即返回一个满足回调函数的元素数组;
  • 如果参数invert是true,则情况正好相反,返回的是一个不满足回调函数的元素数组

map()

  • 用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回

TIP

  • 在jQuery 1.6 之前,该函数只支持遍历数组;从 1.6 开始,该函数也支持遍历对象。

  • map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。

  • 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

// 支持普通json,数组,类数组,特殊json(jQuery对象形式)
// 第三个参数内部调用
map: function( elems, callback, arg ) {
var value,
i = 0,
length = elems.length,
isArray = isArraylike( elems ),// //数组和类数组都可以,jQuery对象形式也可以
ret = [];

if ( isArray ) {
for ( ; i < length; i++ ) {
value = callback( elems[ i ], i, arg );
// //回调返回的值不是null或者undefined,就存入新数组中
if ( value != null ) {
ret[ ret.length ] = value;
}
}
}
// 普通json就执行这里,比如:{name:"zhangsan",age:18}
else {
for ( i in elems ) {
value = callback( elems[ i ], i, arg );

if ( value != null ) {
ret[ ret.length ] = value;
}
}
}
// core_deletedIds = [],
// core_concat = core_deletedIds.concat,
// 以防回调方法返回的是数组形式,那么就会出现复合数组,比如:ret = [[1],[2],[3]],通过concat([1],[2],[3]),合并,返回[1,2,3]
return core_concat.apply( [], ret );
},
支付宝打赏 微信打赏

赞赏是对我们的肯定!