欢迎各位兄弟 发布技术文章
这里的技术是共享的
在这一章里,我们学一下 Undersocre 里面跟数组相关的函数。
现在,这里有一个叫 tracks 的数组 ... 如果想得到这个数组里面的头一个,或者头几个项目,可以使用 frist 这个方法。
_.first(tracks)
返回的就是第一个项目,长城 ... 想得到头两个项目,可以给 first 这个方法传递一个数字参数 ... 得到头两个项目,就把这个参数设置成 2 ...
_.first(tracks, 2)
得到的就是,tracks 这个数组里面的头两个项目 ...
last
想得到最后一个或者最后几个项目,用的是 last 这个方法 ...
_.last(tracks)
返回的就是 tracks 数组里面的最后后一个项目,早班火车 .. 要返回后几个项目,可以给这个方法传递一个数字参数 ... 比如要返回后两个项目,就把这个参数的值设置成 2 ..
_.last(tracks, 2)
initial
initial 这个方法返回的是数组里面除了最后一个项目的其它的项目。
_.initial(tracks)
对一个列表进行随机处理,也就是把列表里面的项目的顺序打乱,得到一个新的列表 ... 这个功能我们可以使用 shuffle 。 在一个列表里面,取出几个样本,可以使用 sample 方法。
(#tracks)
先试一下 shuffle ... 把要随机处理的列表交给这个方法 ...
_.shuffle(tracks)
回车 ... 你会发现,新得到的这个列表里面的项目的顺序,跟以前是不一样的 ... 再用这个方法处理一下 tracks 这个数组 ...
又会得到一个新的顺序的列表 ...
sample
下面,我们再去试一下 smaple 这个方法 ... 同样把 tracks 这个数组交给这个方法去处理一下 ...
_.sample(tracks)
这个方法,会随机从指定的列表里面取出一个样本 ... 再执行一次 ..
又会随机取出一个样本 ... 我们也可以去指定每一次取出的样本的数量 ...
_.sample(tracks, 2)
这次会从 tracks 里面,随机取出两个样本 ...
我们可以先对一个列表按照自己设置的标准分一下组,然后得到每个小组里的项目的数量 ... 这就是 countBy 方法的功能。它有点像是前面介绍过的 groupBy ... 不同的是 ... groupBy 返回的是分组以后的项目 ... countBy 返回的是分组之后的项目的数量。
(#albums)
我们可以看一下 albums 这个列表 .. 比如我们想要得到在这个列表里面,artist 这个属性的值是 Beyond 的项目一共有多少个 .. 值是 Coldplay 的项目一共有多少 ...
countBy ... 要分组统计的是 albums ... 再给它一个迭代器 ... 在它里面要返回要分组的属性 ...
_.countBy(albums, function(album){ return album.artist; })
回车 ... 返回的结果是一个对象 ... 这个对象里有两个属性 .. 表示按照 artist 属性的值,把列表分成了两个组 ... 其中值是 Beyond 的项目一共有两个 ... artist 的值是 Colplay 的项目一共有一个。
groupBy 这个方法,可以对一个列表,用某种方式进行分组 ... 比如这里有一个叫 fruits 的数组 ... 里面是一些水果的英文名字 ... 下面,我们可以使用 groupBy ,按照项目的字符数去分一下组 ...
_.groupBy ... 要分组的列表是 fruits ... 然后再指定一下按照什么标准去分组,这里可以使用一个迭代器,也可以直接使用属性的名字 .. 我们用一个 length 属性,它表示项目的字符长度 ...
_.groupBy(fruits, 'length')
返回的是一个对象 ... 这个对象里面有几个属性 ... 属性名是 4 的这个项目里面,包含一个 pear ... 这个数字 4 实际上就是 fruits 这个列表里面的项目的字符串的长度 ... 也就是,在这个列表里面,所有的长度是 4 的项目,都会在这里面 ... 因为在 fruits 里面,只有 pear 是 4 个字符 .. 所以这个小组里面,只有一个 pear ..
下面还有一个 5 .. 里面有 apple 这个项目 ... 最后还有一个 6 ,这里面有两个项目 ... orange ,还有 apple ..
对列表进行排序可以使用 sortBy 这个方法。它的第一个参数是要排序的列表,第二个参数是一个迭代器。最后还有一个 context ,上下文的参数。
现在我这里有一个 numbers 列表 ... 它是一个数组,里面有一些数字,现在项目的顺序,排第一个的是数字 3,然后是,6,最后是,1 .. 下面,我们可以使用 _.sortBy 去对这个列表排下顺序 ... 把 numbers 传递给这个方法 ..
_.sortBy(numbers) // [1, 3, 6]
方法会返回一个排序以后的数组 ... 在这个数组里面,会按数字从小到大排列 ... 排第一个的数字 1 ,然后是 3 ,最后是 6 ..
下面,我们再去排列一个数组 ... (#输入 fruits)
fruits 这个数组里面有一些字符串项目 ... 下面,我们把它交给 sortBy 去处理一下 ...
_.sortBy(fruits) // ["apple", "banana", "orange", "pear"]
得到的结果是按照字母顺序排列的项目。 在用 sortBy 这个方法的时候,我们也可以给它一个迭代器,作为它的第二个参数。这样在这个迭代器里面,可以设置一下排序的方式。
找出列表里面的最大值,还有最小值,可以使用 max 和 min 方法。
比如找到 numbers 这个数组里面最大的数字 .. 可以这样 .. _.max ... 给它指定一个列表参数 ... 这里就是 numbers ...
_.max(numbers) // 6
返回的结果是 6 ... 也就是在 numbers 这个数组里面,最大的数字就是 6 ... 找出最小值,用的是 min .. 把 max 换成 min ..
_.min(numbers) // 1
返回的结果是 1 ,因为 1 是 numbers 里面最小的一个数字 ...
这两个方法还支持一下迭代器或者叫遍历器的参数 ... (#albums)
下面, 我们可以找到在 albums 里面, duration 属性的值最大或者最小的项目 ... 这次要处理的列表是 albums ... 再设置一下 max 方法的第二个参数 .. 用一个匿名函数 ... 用 album 表示列表里面的每一个项目 ... 在这个函数里,返回一个要判断值的属性... return album.duration ...
使用 pluck 这个方法, 我们可以把一个列表对象里的某个特定的属性的值找出来,返回的结果是这个属性的值的数组。比如,albums 这个数组里面有几个对象 ... 每个对象里都有 title 这个属性 ... 现在,我们想把所有这些对象里的 title 属性的值都找出来放在一个数组里 ...
_.pluck ... 指定一下要处理的列表 ... albums ... 第二个参数是要挑选的属性的名字 ... 这里就是 title 这个属性。
_.pluck(albums, 'title') ["继续革命", "海阔天空", "Ghost Story"]
返回的结果是一个数组,在这个数组里面,会包含 albums 这个数组里面的对象的 title 属性的值。
every 这个方法,可以去判断一下一个列表里面,是否全部都符合我们设置的规则,如果是,这个方法就会返回 true ,如果不是,就会返回 false 。
类似的还有一个 some 方法,如果列表里面有一个项目符合我们要判断的规则,就会返回 true ...
contains 这个方法,可以去判断一下列表里是否包含指定的值 ...
下面,我们去看一下这几个方法...
在 albums 里面,有三个对象 ... 我们判断一下这些对象里面是否都有 title 这个属性 ... _.every ... 先指定一下要判断的列表 ... 这里就是 albums ..
再去设置一下要判断的东西 ... 它应该是一个函数 ... 可以给它一个参数 ... 这个参数可以表示列表里面的单个项目 ... 这里我们用 album 来表示 ... 然后在这里面,用一个 return ... 再使用 Underscore 的 has 方法 ... 去判断一下对象里面,是否包含指定的属性 .. 这个对象就是 album ... 要检查的属性是 title ...
如果列表里面的每一个对象里面都有 title 这个属性,它就会返回 true ...
要找出包含某些属性还有对应的值的项目,可以使用 where 这个方法。 现在你看到的 albums 是一个数组,数组里面的每一个项目都是一个对象 ... 对象的内容表示某张音乐专辑 ...
比如我们要找到 artist 属性的值是 Beyond 的项目 ... 输入 _.where ... 指定一下要查找的列表 ... 这里就是 albums ... 第二个参数是要查找的属性还有对应的值 ... 它是一个对象 ... 属性是 artist ... 值是 Beyond ...
_.where(albums, {artist: 'Beyond'})
回车 ... 得到的结果就是包含 artist 这个属性并且它的值是 Beyond 的项目 ... 我们也可以查找多个属性还有对应的值 ... 比如要找到 artist 属性的值是 Beyond ,还有 releaseYear 是 1992 的项目 ...
在这个要找的属性里面,再加上一个 releaseYear ... 值是 1992
_.where(albums, {artist: 'Beyond', releaseYear: 1992})
使用 find 这个方法,可以去找到列表里面第一个符合我们设置的规则的结果。下面,去试一下 ..
比如这个 tracks 数组 .. 找出这个数组里面的元素的字符长度大于 2 的第一个项目 ... _.find ... 要查找的列表是 tracks ... 再设置一下它的第二个参数,是一个函数 ... 在这个函数里面,我们可以去设置一下查找的规则 ...
这里我们让它返回元素字符长度大于 2 的第一个项目 ...
_.find(tracks, function(track){ return track.length > 2; }) // "不可一世"
回车 ... 返回的结果是 不可一世 ... 因为在 tracks 这个数组里面,第一个字符长度大于 2 的项目就是这个 不可一世 ... 如果你想得到所有的符合设置的规则的项目 ...
可以使用 filter 这个方法 ...
_.filter(tracks, function(track){ return track.length > 2; }) // ["不可一世", "温暖的家乡", "无语问苍天", "早班火车"]
Underscore 里面的 reduce 方法,可以把一个列表里面的所有的值,用你想要的方法换算成一个值。比如一个数字列表,你可以得到它们彼此相加的结果。
下面,我们使用这个方法去处理一下 numbers 这个数组 ... 让这个数组里的值彼此相加,返回这个相加之后的结果 ...
这个方法的第一个参数是要处理的列表,第二个参数是遍历器,或者叫迭代器,循环处理器 .. 第三个参数是存储结果的一个初始的状态 ... 最后有一个可选的 context 参数。
_.reduce ... 先指定一下要处理的列表 .. 这里就是 numbers 这个数组 .. 第二个参数是迭代器 ... 用一个匿名函数 ... 第三个参数是存储结果的初始状态 ... 这里我们设置成 0 ...
在这个迭代器函数里面支持几个参数 ... 第一个参数表示当前结果,一般用 memo 来表示,第二个参数表示本次循环的列表里面的值 .. 第三个参数是 index ,如果处理的列表是个对象的话,这个参数就应该是 key ,最后一个参数表示列表本身 ...
这里我们只需要两个参数 .. memo 还有 number ... number 列表 numbers 里面的一个数字。
遍历列表里面的每一个项目映射到一个迭代器里面去处理,然后返回一个新的处理之后的列表。这就是 map 这个方法的功能。它的用法跟上个视频里介绍的 each 方法差不多 ...
下面,我们用 map 再去处理一下 tracks 这个数组 ... 比如我们要给这个数组里面的每一个项目的值都添加一个书名号 ...
_.map ... 指定一下要遍历的列表 ... 这里就是 tracks 这个数组 ... 然后再设置一下,迭代器,或者叫循环处理器 ... 其实就是一个处理列表里面的项目的函数 ... 这里我用一个匿名函数 ...
然后用 track 表示当前要处理的列表里面的项目 ... 你可以根据自己的需求去命名这个参数。
在这个函数里面,返回处理之后的结果 .. . 用一个 return ... 一个书名号 .. 加上 track ... 表示当前这个项目 ... 后面再加上书名号的另一部分 ...
_.map(tracks, function(track) { return '《 ' + track + ' 》';})
回车 ...
会给我们返回处理之后生成的新的列表 ... 在这个数组里面,每一个项目的值的周围都会有一组书名号 ...
如果你想循环去处理一个列表,比如一个数组,或者一个对象。可以使用 Underscore 的 each 方法 ... 这个方法有两个参数,第一个参数是要处理的列表,第二个参数是一个迭代器。each 方法会把列表里面的每一个项目,都交给这个迭代器去处理一下 ...
如果列表是一个数组的话,这个迭代器接收的参数就是 element ,表示当前这次处理的元素 ... 第二个参数是 index,表示这个元素在数组里面的索引号 .. 最后一个参数是 list ,表示这个列表本身。
如果要处理的列表是个对象的话,这个遍历器的第一个参数是对象的值,可以用 value 表示 ... 第二个参数是 key ,表示对象里的属性的名字 .. 最后一个参数是 list ,表示要处理的这个列表对象。
下面, 我们去试一下这个方法 ...
先处理一下 tracks 这个数组 ... 要做的事就是,在控制台上输出这个数组里面的每个项目的索引号,还有对应的值 ... underscore 点 each ,使用 underscore 的 each 这个方法 ... 要处理的列表是 tracks ... 再设置一下处理这个列表的函数,也就是遍历器 ...
下面我们先介绍一下这个课程里用到的东西,你可以在课程的资源包里,找到一个启动项目 ... 用 Bracks 编辑器打开这个项目目录,就是你现在看到的这个样子 ..
index.html 是项目的主页 ... 在这个文档上,用到了 bootstrap 框架的样式表 ... 还有 jquery ... underscore.js ... 这是 underscore 库的文件 ...
下面的 data.js ... 在 js 这个目录的下面 ... 在这个文件里面,事先定义好了一些要在这个课程里面用到的数据 ... 一些数组还有对象 ...
最后的 app.js ,是一个空白的脚本文件 ... 在课程里面,我们可能需要在它里面去输入几行代码 ...
这个课程的大部分的测试,都是在 Chrome 浏览器的控制台上完成的 ...
在浏览器里,打开这个 index.html ...
打开控制台,可以点击 视图 菜单 .. 开发者 ... 选择 JavaScript 控制台 ... 或者也可以直接使用快捷键 alt + command + J 打开控制台。
windows 上应该是 alt + ctrl + J
在 Underscore 里面,提供了非常多,而且非常实用的一些函数去处理数据。比如你可以用一个函数去处理一个数组或对象里面的每一个项目,你可以查找,过滤数据,可以对数据进行排序还有分组,可以找出两组数据之间的不同的地方,或者相交的地方,你可以去掉数据列表里面的重复的东西。
Underscore 还提供了一些跟函数相关的方法,比如我们可以把一些方法跟对象绑定到一起,这样在方法里面,可以使用对象里面的属性,我们还可以延时去执行函数,可以防止滥用函数,可以创建一次性的函数。
最后,我们再看一下 Underscore 里的链式调用。
1)介绍
1) 介绍
这篇文章只是我深入了解移动领域开发过程中的不断整理和总结,其中涉及到很多概念,观点,个人的看法,有不确切的地方,欢迎指正。