专栏首页全沾开发(huā)学习zepto.js(原型方法)[2]

学习zepto.js(原型方法)[2]

学习zepto.js(原型方法)[2]

接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复);

$.grep():

作用与Array.filter类似(其实就是调用的filter方法- -)

通过传入两个参数,第一个为类数组的对象,第二个为用来执行判断的函数;

var array =[1,2,3,4,5];
var even = $.grep(array, function (value) {
  return value % 2 === 0;
});
console.log(even); // --> [2,4]

函数可以接收到三个传递来的参数,上边只接收了一个,第二个是当前item在array中的下标,从0开始- -,第三个是array本身;

//filter的值为 [].filter

$.inArray():

接收两到三个参数,第一个是item(中文不知道该如何形容,子项?就是),第二个是一个数组对象,第三个是可选的开始下标,该方法用来检查第一个参数是否存在与自身.返回值是一个下标,从0开始的.

如果没有找到,就会返回-1;

$.inArray("aaa", ["aaa", "bbb", "ccc"]);// -->0
$.inArray("aaa", ["aaa", "bbb", "ccc", "ccc", "aaa"], 3) // -->4

inArray方法也是直接调用了Array的idnexOf方法,这些都是ES5的新方法,在zepto里边是没有做兼容处理的,只是简单的call方法,毕竟是为了移动端而生的;

//jQuery1.x的版本是做了兼容的处理,2.x以后也是直接调用的indexOf方法.

$.isArray():

该方法只接收一个参数,一个对象,用来判断该对象是否为Array,返回一个boolean值,

$.isArray([]);// --> true

该方法是做了一个兼容处理的,如果Array存在isArray方法,则直接调用,否则赋值为自定义的一个函数:

$.isFunction():

方法只接收一个参数,一个对象,判断是否为function对象,别看这方法只是用来检查参数是否为function,里边衍生出的几个变量和方法还是挺有意思的.

用法如下:

function test1 (){}
var test2 = function () {};
console.log($.isFunction(test1)); // -->true
console.log($.isFunction(test2)); // -->true

贴上几块代码:

首先在isFunction函数内部调用了type函数,type函数返回一个字符串,

type函数通过一个三元运算符来判断是否为空,然后调用对象的toString方法,返回一个类似[object Array]这种格式的字符串,

再放入一个Mapping中,就是class2type(class to type),在zepto自执行函数中通过each函数将一个数组,就是第三张图那一串类型,循环放入class2type对象中,

现在回到第一张图,这样的调用应该能清楚了吧.

放一张class2type的内容截图

$.isPlainObject():

该方法判断传入对象是否为一个纯洁粹的对象,就是一个通过”{}”或者 new Object 来创建的对象.

$.isPlainObject({}); // ..> true
$.isPlainObject(new Object()); // --> true
$.isPlainObject(1); // --> false

zepto不认为window对象是一个纯粹的Object,但是通过typeof来看的话,window确实是一个object- -,所以在代码中添加了对window对象的处理

首先判断传入参数为一个对象,并且不是一个window对象,getPrototypeOf方法返回参数的构造方法的prototype.有兴趣的可以移步MDN

$.map():

该函数返回一个数组,传入两个参数,第一个是要遍历的对象,可以使一个类数组,也可以是一个对象,第二个参数是一个回调函数,在回调函数返回的值,会被存入集合并通过$.map来返回,返回的是一个数组;

$.map({
  name: 'niko',
  age: 18
}, function (value, key) {
  if (key === 'age')
    return value;
}) // --> [18]
$.map([1,2,3,4], function (item, index) {
  return item * 2;
}) // --> [2,4,6,8]

方法逻辑不算复杂,在最后返回时,调用的函数用来将传入的类数组对象转换为一个数组,代码如下:

剩下两个 $.trim,以及$.parseJSON,这两个就不说了,因为都属于原生函数的别名而已.

今天先说到了这里,zepto里边的原型方法出了ajax模块的就都已经说完了- -,读源码真的是最快的学习方式.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何编写 Typescript 声明文件

    使用TypeScript已经有了一段时间,这的确是一个好东西,虽说在使用的过程中也发现了一些bug,不过都是些小问题,所以整体体验还是很不错的。

    贾顺名
  • 使用JSDoc提高代码的可读性

    首先,JSDoc 并不会对源码产生任何的影响,所有的内容都是写在注释里边的。 所以并不需要担心 JSDoc 会对你的程序造成什么负面影响。

    贾顺名
  • 柯里化与反柯里化

    一个柯里化函数的简单应用,我们有一个进行三个参数求和的函数。 我们可以调用currying传入sum获得sum1,一个固定了第一个参数为10的求和函数 然后我们...

    贾顺名
  • 【译】《Understanding ECMAScript6》- 第二章-函数

    函数在任何一门编程语言中都是很重要的一个环节。JavaScript至今已有多年的历史,但是它的函数仍然停留在很初级的阶段。函数问题的大量堆积,以及某些函数非常微...

    寒月十八
  • 九、函数与函数式编程

    纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学时最容易忽视的知识点。可能会有很多人、很多文章告诉你面向对象很重要,原型很重要,可是却很...

    用户6901603
  • 一篇文章带你了解JavaScript中的函数表达式,递归,闭包,变量,this对象,模块作用域

    它的一个重要特点就是:函数声明提升,就是在执行代码前先读取函数声明,可以把函数声明放在调用它的语句后。

    达达前端
  • javascript两种声明函数的方式的一次深入解析

    javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码:

    他叫自己MR.张
  • JS中的柯里化

    柯里化(Currying),又称部分求值(Partial Evaluation),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并...

    前端下午茶
  • Scheme语言实例入门--怎样写一个“新型冠状病毒感染风险检测程序” 1,表达式2,原子3,表(list) 4,点对(pair)5,向量(vector)6,变量7,

    2020的春季中小学受疫情影响,一直还没有开学,孩子宅在家说想做一个学校要求的研究项目,我就说你做一个怎么样通过编程来学习数学的小项目吧,用最简单的计算...

    用户1177503
  • 强化学习读书笔记(10)| On-policy Prediction with Approximation(下)

    本讲将继续学习使用on-policy的数据对状态值函数进行逼近,也就是在策略π下估计值函数vπ。

    用户1621951

扫码关注云+社区

领取腾讯云代金券