欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

underscore

Underscore.js (1.9.1) 中文文档 手册 有大用

普通分类: 

underscore.js的排序扩展。 倒序和多列排序 有大用

underscore.js的排序扩展。

普通分类: 

宁皓 Underscore 基础

处理数据的类库,比如数组,对象等等。

来自 https://ninghao.net/course/1479#info


1)介绍

普通分类: 

链式调用 - chain《 Underscore 基础 》

使用 Underscore 的 chain 方法,可以返回一个包装的对象,这个对象里面包含着 Underscore 里面的所有的方法,也就是我们可以直接调用这些方法,完成以后,还会返回这个包装后的对象,这样我们可以继续去调用 Underscore 的方法,这就是链式调用。

现在这里有一个 albums 数组 ... 下面,我们先用  chain 方法去包装一下它 ...

_.chain(albums)

给我们返回来一个包装后的对象 ... 在 _wrapped 属性里面,就是包装的原来的数据 ...   __proto__ 里面就是 Underscore 的方法 ...

下面,我们先调用一个 sortBy 这个方法,去给包装后的数据排下顺序,排序的条件,可以使用 releaseYear 这个属性的值 ...

_.chain(albums).sortBy('releaseYear')

回车 .. 返回的还是一个包装后的数据  ...   我们可以继续去调用方法处理它 ...

这里,再用一个 first() 方法,得到排序后的第一个结果 ...

现在,_wrapped 里面,就只剩下 继续革命 这个专辑项目了 ...   因为它是排序之后的第一个结果 ...

普通分类: 

对象 - keys, values, pick, omit《 Underscore 基础 》

下面我们学习几个在 Underscore 里面跟对象相关的一些方法。

keys 这方法可以得到一个对象里面的所有的属性的名字 ...  比如要得到 album 这个对象里的属性名称列表 ..  可以把这个对象作为 keys 方法的一个参数 ...

_.keys(album)

返回的结果是一个数组,数组里面的项目就是在 album 这个对象里面的每个属性的名字 ...

values

如果你想要的是对象里面的所有的属性的值,可以使用 values 方法 ...

_.values(album)

它也会返回一个数组,数组里面的项目就是在 albums 这个对象里面的属性的值 ...

pick

如果你只想要对象里面的指定的几个属性 ...  可以使用 pick 方法去挑选一下 ...  要挑选的是 album 这个对象 ...  然后再去指定一个想要的属性的列表 ..  这里我们只想要的是 title ,还有 artist 这两个属性 ..

_.pick(album, 'title', 'artist')

返回的结果是一个对象,在这个对象里面,会包含我们挑选的几个属性 ...

omit

普通分类: 

只能执行一次的函数 - once《 Underscore 基础 》

有时候,我们可能需要有的函数只能被执行一次,比如用这样的函数去初始化一些东西。

创建这样的函数,可以使用 Underscore 的 once 这个方法。

现在我们这里有一个函数叫 fireIntheHole  ...   想让它只能被执行一回 ...   用 once 去处理一下 ...  可以给这个一次性的版本的函数起个新名字 .. 叫它 fire  ...

var fire = _.once(fireIntheHole)

保存 ...  回到浏览器 .

在控制台上,先执行一次 fire  ...

会显示 bomm ...

然后再执行一下它 ...

会返回 undefined  ...   再执行 ... 还是会返回 undefined  ...

因为 fire 是一次性的函数,才能被执行一回 ...

普通分类: 

防止滥用- throttle《 Underscore 基础 》

一个函数在执行以后,再次执行它的时候,你可以设置一下两次执行间隔的时间。这就是 Undersocre 的 throttle 的功能。

比如这里我们有一个函数 ...  fireIntheHole  ...  我们打算让程序在每次执行这个函数的时候,必须间隔一段时间才行 ...   可以使用 throttle 去处理一下它 ...

可以给这个防止滥用版本的函数起个新名字 ...  叫它 fire   ...   然后用 throttle  ...  第一个参数是要处理的函数的名字 ... 这里就是 fireIntheHole  ... 第二个参数是等待的时间,也就是两次执行这个函数中间隔的时间 ... 单位是毫秒 ...  这里设置成  3000 毫秒 ...

var fire = _.throttle(fireIntheHole, 3000);

这样执行 fire 之后 ... 才次再想去执行 fire ,只有等待 3 秒以后才行。

保存 ...

到浏览器上试试 ...

先执行一次 fire  ...    然后再继续去执行它 ...    你会发现,第一次执行以后,再次执行它的时候,只有等待一会儿,才会起作用。

普通分类: 

你继续,我先等会儿 - defer《 Underscore 基础 》

程序里面可能会有一些函数要做比较复杂的运算,我们可以让这些运算都完成以后再去执行这个函数。这样,不会影响到程序继续去执行其它的代码。

比如这里我们有一个函数 fireIntheHole  ...  它做的事就是在控制台上输出 bomm.. bomm.. boom...

在这个函数的下面, 还有一个叫 run 的参数 ...  它会在控制台上输出 捂上耳朵,狂奔!这几个字儿 ...

在下面,我们先去执行一下 fireIntheHole  .... 接着去执行 run 这个函数 ...

回到浏览器 ....  刷新一下 ..

你会看到,控制台上先会显示在 fireIntheHole 里面的 boom ... bomm... bomm ...

然后才会执行 run ,捂上耳朵,狂奔!

这时候人已经完了,对吧。

下面,我们去改造一下 ...

用 defer 方法,去处理这个 fireIntheHole 这个函数 ...

_.defer(fireIntheHole);

保存  ...  再回到浏览器 ... 刷新一下 ...

这次,你会看到,先会去执行 run 函数 ...  这时候人已经跑远了 ...

普通分类: 

延时执行函数 - delay《 Underscore 基础 》

通常调用函数以后,会立即执行这个函数。使用 Underscore 的 delay 方法, 我们可以延时去执行函数 ...

先在控制台上,直接定义一个函数 .. 可以叫它 fireIntheHole  ...   这个函数能做的事,就是在控制台上输出 Bommmm

var fireIntheHole = function() {
   console.log('Boommm...');
};

先去执行一下这个函数 ...  输入 fireIntheHole  ...

会在控制台上立即输出 Bommmm  ...  人还没跑远呢手雷就炸了 ...

下面,我们可以使用 delay 去延时执行这个函数 ...

_.delay ... 它的第一个参数是要延时执行的函数  ... 这里就是 fireIntheHole  ...  然后第二个参数要延迟的时间 ...  单位是毫秒 .. 1000 毫秒就是 1 秒 ..    这里我们设置成 3000 ,表示三秒以后去执行这个函数 ..

另外,还可以给这个方法添加第三个参数,也就是要传递给函数的参数的值  ...

_.delay(fireIntheHole, 3000)

普通分类: 

把对象里的一些方法绑定到对象上 - bindAll《 Underscore 基础 》

bindAll 这个方法可以把一些方法绑定到一个对象上面,这样在执行这个方法的时候, 在这些方法里面,this 这个关键词表示的就是跟这些方法绑定到一块儿的那个对象。下面,我们再通过一个演示来理解一下 bindAll 的作用。

先打开 index.html 这个文档 ...

div.container>h1.page-header{bindAll}+button.btn.btn-default.btn-lg*2

在这上面添加两个按钮 ..  一个是播放按钮 ... 上面可以添加一个 id 叫做 play  ... 再添加一些其它的 css 类,这些类的样式是在 bootstrap 这个框架里面定义的。

再添加一个 暂停 按钮 .. 上面添加一个叫 pause 的 id  ...

普通分类: 

函数 - 为函数绑定对象 - bind《 Underscore 基础 》

在这一章里,我们去学几个 Underscore 里面的跟函数相关的方法。

bind

先来看一下 bind 这个方法。bind 这个词有绑定的意思,你可能在其它的地方也看到过这个词,比如在 jQuery 里面,它的意思就是去绑定事件。不过在 Underscore 这个上下文里面,bind 的意思是为函数绑定一个对象。这样在调用这个函数的时候,在函数的内部,this 这个关键词表示的就是这个对象。

下面,我们去试一下这个方法 ... 先定义一个函数 ... 可以使用函数表达式的方法去定义这个函数 .. (#编辑器) ..

给这个函数起个名字 .. 叫做 nowPlaying  ...  function  ...  在这个函数里面,让它 返回 this 这个关键词 ...

var nowPlaying = function() {
    return this;
}

在下面,我们再去调用这个函数  ...

nowPlaying()

你会发现,这个函数会返回 Window 这个对象 .. 也就是,在这个函数里面,this 这个关键词表示的是 Window 这个对象  ...

我们这里有一个 album 对象  ... (#album)

普通分类: 

测试即将插入到数组里的项目的位置 - sortedIndex《 Underscore 基础 》

sortedIndex 这个方法,可以返回即将要插入到数组里面的项目,在这个数组里面的位置是什么,也就是它的索引号是什么。

foods 是一个数组,我们用 sortBy 对它进行了排序,并且把排序之后的结果交给 sortedFoods 这个变量 ...

下面我们可以用 sortedIndex ,去测试一个要插入到这个数组里的项目的位置。

_.sortedIndex  ...  第一个参数是要测试的数组  ... 这里就是 sortedFoods  ...  第二个参数是要测试的值  ...   我们可以试试 cookie  这个项目如果插入到 sortedFoods 里面它的位置会是什么  ...

_.sortedIndex(sortedFoods, 'cookie')

返回的结果是 2 ,意思就是,如果把 cookie 作为 sortedFoods 里面的一个项目的话,如果保存排序的方式不变,它的位置是 2 ,也就是它会排在 bread 的后面 ...

下面, 我们可以验证一下 ...

先把 cookie push 到 foods 这个数组里面 ...

foods.push('cookie')

然后再对 foods 重新排下顺序  ..

普通分类: 

找出指定值的项目在数组中的位置 - indexOf, lastIndexOf《 Underscore 基础 》

想要得到在一个数组里面,某个值的项目第一次出现的位置,用的是 indexOf 这个方法。找出某个值在数组里面最后一次出现的位置,可以使用 lastIndexOf  ...

这里我们有一个叫 newFoods 的数组 ...  下面,我们用 indexOf 去找出,apple 这个值的项目第一次出现在这个数组里面的位置号。

indexOf  ... 先给它指定一个数组参数 .... newFoods  ... 它的第二个参数是要判断位置的项目的值 .. 这里就是 apple  ...

_.indexOf(newFoods, 'apple')

返回的结果是 2  ....  在 newFoods  这个数组里面,第一次出现 apple 这个项目的位置是 2  ...  这个位置号或者叫索引号是从 0 开始的 ...

如果要找的值不在这个数组里面,这个方法会返回 -1  ...

lastIndexOf

想找出最后一次出现 apple 这个项目的位置号 .. 可以使用 lastIndexOf  ...

_.lastIndexOf(newFoods, 'apple')

普通分类: 

去掉数组里面的重复的项目 - uniq《 Underscore 基础 》

使用 uniq 这个方法,可以去掉在数组里面重复出现的项目。

我们可以先把这里的 fruits 还有 foods 这两个数组合并到一块儿 ...   先合并之后的结果起个名字 ...  可以叫它 newFoods  ...

合并数组可以使用 concat 这个方法 ...  这是 JavaScript 原生自带的一个方法 ...

var newFoods = fruits.concat(foods)

再查看一下这个合并之后的 newFoods  ...

这个数组里面,会出现一个重复的项目,也就是这个 apple   ...    下面再用一个 Underscore 的 uniq 方法,去掉数组里面的重复的项目。

_.uniq(newFoods)

在返回的结果里面,去掉了重复出现的 apple ,只有保留其中的一个。

普通分类: 

并集,交集,差集 - union, intersection, difference《 Underscore 基础 》

把几个数组合并到一块儿,去掉重复的项目,得到的就是两个数组的并集。可以使用 union 这个方法。现在,我们这里有两个数组,fruits,还有 foods  ...   下面用 union 方法,得到这两个数组的并集 ..

union  ...  fruits 逗号 ... foods  .. 如果有其它的数组,可以继续用逗号分隔一下,再添加进来 ..

_.union(fruits, foods)

得到的结果就是,fruits 和 foods 这两个数组的并集 ...  注意这两个数组里面,都有 apple 这个项目  ...  同并集以后,只会保留一个 apple  ...

intersection

如果想要得到的是数组之间的交集 ..  要用的是 intersection 方法 ..

_.intersection(fruits, foods)

返回的结果是 apple  ... 因为在这两个数组里面,共有的项目只有 apple  ...

difference

要得到一个数组跟其它数组的差集,也就是在这个数组里面有的,在其它数组里没有的项目 ...   可以使用 difference ...

_.difference(fruits, foods)

普通分类: 

把数组分割成两部分 - partition《 Underscore 基础 》

我们可以按照自己设置的条件,把一个数组分割成两个部分,一部分是满足条件的项目,另一个部分是不符合条件的项目。要用到的方法是 Underscore 的 partition  ...

现在这里有一个 albums 数组,里面有几个项目 ...  我们可以把这分割成两个部分,一部分是 releaseYear 是 1992 年的专辑 ... 另一部分就是 releaseYear 不是 1992 年的专辑项目 ...

partition  ... 先指定一下要分割的数组 ...  这里就是 albums  ...   然后再设置一下条件,可以用一个函数返回这个条件 ...  用 album 表示数组里面的每个项目 ...  然后 return  ... 返回的是 album 的 releaseYear 属性的值,等于 1992  ...

_.partition(albums, function(album){ return album.releaseYear === 1992; })

返回的结果就是一个大的数组,里面分成了两小部分,第个部分又是一个数组 ...  第一部分是符合条件的项目 ...  你会看到,这个项目的 releaseYear 属性的值是 1992  ...

普通分类: 

数组 - 从数组里挑选项目 - first, last, initial, rest, without《 Underscore 基础 》

在这一章里,我们学一下 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《 Underscore 基础 》

对一个列表进行随机处理,也就是把列表里面的项目的顺序打乱,得到一个新的列表 ...  这个功能我们可以使用 shuffle 。 在一个列表里面,取出几个样本,可以使用 sample 方法。

(#tracks)

先试一下 shuffle  ...  把要随机处理的列表交给这个方法 ...

_.shuffle(tracks)

回车 ...  你会发现,新得到的这个列表里面的项目的顺序,跟以前是不一样的 ...  再用这个方法处理一下 tracks 这个数组 ...

_.shuffle(tracks)

又会得到一个新的顺序的列表 ...

sample

下面,我们再去试一下 smaple 这个方法 ...   同样把 tracks 这个数组交给这个方法去处理一下 ...

_.sample(tracks)

这个方法,会随机从指定的列表里面取出一个样本 ...  再执行一次 ..

_.sample(tracks)

又会随机取出一个样本  ...    我们也可以去指定每一次取出的样本的数量 ...

_.sample(tracks, 2)

这次会从 tracks 里面,随机取出两个样本 ...

普通分类: 

分组计数 - countBy《 Underscore 基础 》

我们可以先对一个列表按照自己设置的标准分一下组,然后得到每个小组里的项目的数量 ... 这就是 countBy 方法的功能。它有点像是前面介绍过的 groupBy  ... 不同的是 ...  groupBy 返回的是分组以后的项目  ...  countBy 返回的是分组之后的项目的数量。

(#albums)

我们可以看一下 albums 这个列表 .. 比如我们想要得到在这个列表里面,artist 这个属性的值是 Beyond 的项目一共有多少个 ..  值是 Coldplay 的项目一共有多少 ...

countBy  ... 要分组统计的是 albums   ...  再给它一个迭代器 ... 在它里面要返回要分组的属性 ...

_.countBy(albums, function(album){ return album.artist; })

回车 ... 返回的结果是一个对象  ...   这个对象里有两个属性 .. 表示按照 artist 属性的值,把列表分成了两个组 ... 其中值是 Beyond 的项目一共有两个 ...   artist 的值是 Colplay 的项目一共有一个。

普通分类: 

分组 - groupBy《 Underscore 基础 》

groupBy 这个方法,可以对一个列表,用某种方式进行分组 ...    比如这里有一个叫 fruits 的数组 ...  里面是一些水果的英文名字 ...  下面,我们可以使用 groupBy ,按照项目的字符数去分一下组 ...

_.groupBy  ... 要分组的列表是 fruits  ...  然后再指定一下按照什么标准去分组,这里可以使用一个迭代器,也可以直接使用属性的名字 ..   我们用一个 length 属性,它表示项目的字符长度 ...

_.groupBy(fruits, 'length')

返回的是一个对象 ...  这个对象里面有几个属性 ...  属性名是 4 的这个项目里面,包含一个 pear  ...  这个数字 4 实际上就是 fruits 这个列表里面的项目的字符串的长度  ...  也就是,在这个列表里面,所有的长度是 4 的项目,都会在这里面 ...  因为在 fruits 里面,只有 pear 是 4 个字符 .. 所以这个小组里面,只有一个 pear  ..

下面还有一个 5  ..  里面有 apple 这个项目 ...  最后还有一个 6 ,这里面有两个项目 ...  orange ,还有 apple  ..

普通分类: 

排序 - sortBy《 Underscore 基础 》

对列表进行排序可以使用 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《 Underscore 基础 》

找出列表里面的最大值,还有最小值,可以使用 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《 Underscore 基础 》

使用 pluck 这个方法, 我们可以把一个列表对象里的某个特定的属性的值找出来,返回的结果是这个属性的值的数组。比如,albums 这个数组里面有几个对象 ... 每个对象里都有 title 这个属性  ... 现在,我们想把所有这些对象里的 title 属性的值都找出来放在一个数组里 ...

_.pluck ... 指定一下要处理的列表 ...  albums  ...  第二个参数是要挑选的属性的名字 ...  这里就是 title 这个属性。

_.pluck(albums, 'title')
["继续革命", "海阔天空", "Ghost Story"]

返回的结果是一个数组,在这个数组里面,会包含 albums 这个数组里面的对象的 title 属性的值。

普通分类: 

判断列表里的项目 - every, some, contains《 Underscore 基础 》

every 这个方法,可以去判断一下一个列表里面,是否全部都符合我们设置的规则,如果是,这个方法就会返回 true ,如果不是,就会返回 false 。

类似的还有一个 some 方法,如果列表里面有一个项目符合我们要判断的规则,就会返回 true  ...

contains 这个方法,可以去判断一下列表里是否包含指定的值  ...

下面,我们去看一下这几个方法...

在 albums 里面,有三个对象  ... 我们判断一下这些对象里面是否都有 title 这个属性 ... _.every  ... 先指定一下要判断的列表 ... 这里就是 albums ..

再去设置一下要判断的东西 ...  它应该是一个函数 ...  可以给它一个参数 ... 这个参数可以表示列表里面的单个项目 ...  这里我们用 album 来表示  ...  然后在这里面,用一个 return  ... 再使用 Underscore 的 has 方法 ... 去判断一下对象里面,是否包含指定的属性 ..  这个对象就是 album  ...  要检查的属性是 title  ...

如果列表里面的每一个对象里面都有 title 这个属性,它就会返回 true  ...

普通分类: 

找到包含特定属性和值的项目 - where, findWhere《 Underscore 基础 》

要找出包含某些属性还有对应的值的项目,可以使用 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, filter, reject《 Underscore 基础 》

使用 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; })
// ["不可一世", "温暖的家乡", "无语问苍天", "早班火车"]

普通分类: 

把列表里的所有值转换成一个值 - reduce《 Underscore 基础 》

Underscore 里面的 reduce 方法,可以把一个列表里面的所有的值,用你想要的方法换算成一个值。比如一个数字列表,你可以得到它们彼此相加的结果。

下面,我们使用这个方法去处理一下 numbers 这个数组 ...  让这个数组里的值彼此相加,返回这个相加之后的结果 ...

这个方法的第一个参数是要处理的列表,第二个参数是遍历器,或者叫迭代器,循环处理器 .. 第三个参数是存储结果的一个初始的状态 ... 最后有一个可选的 context 参数。

_.reduce  ...  先指定一下要处理的列表 .. 这里就是 numbers 这个数组 .. 第二个参数是迭代器 ... 用一个匿名函数 ...  第三个参数是存储结果的初始状态 ... 这里我们设置成 0  ...

在这个迭代器函数里面支持几个参数  ... 第一个参数表示当前结果,一般用 memo 来表示,第二个参数表示本次循环的列表里面的值 .. 第三个参数是 index ,如果处理的列表是个对象的话,这个参数就应该是 key ,最后一个参数表示列表本身 ...

这里我们只需要两个参数 .. memo 还有 number ...  number 列表 numbers 里面的一个数字。

普通分类: 

遍历列表项目生成新的处理之后的列表 - map《 Underscore 基础 》

遍历列表里面的每一个项目映射到一个迭代器里面去处理,然后返回一个新的处理之后的列表。这就是 map 这个方法的功能。它的用法跟上个视频里介绍的 each 方法差不多 ...

下面,我们用 map 再去处理一下 tracks 这个数组 ...  比如我们要给这个数组里面的每一个项目的值都添加一个书名号 ...

_.map  ...  指定一下要遍历的列表  ... 这里就是 tracks 这个数组 ... 然后再设置一下,迭代器,或者叫循环处理器 ... 其实就是一个处理列表里面的项目的函数  ...  这里我用一个匿名函数 ...

然后用 track 表示当前要处理的列表里面的项目 ...  你可以根据自己的需求去命名这个参数。

在这个函数里面,返回处理之后的结果  .. . 用一个 return  ...   一个书名号 ..  加上 track ... 表示当前这个项目 ... 后面再加上书名号的另一部分 ...

_.map(tracks, function(track) { return '《 ' + track + ' 》';})

回车 ...

会给我们返回处理之后生成的新的列表  ...  在这个数组里面,每一个项目的值的周围都会有一组书名号 ...

普通分类: 

集合 - 循环处理列表中的每一个项目 - each《 Underscore 基础 》

如果你想循环去处理一个列表,比如一个数组,或者一个对象。可以使用 Underscore 的 each 方法 ...  这个方法有两个参数,第一个参数是要处理的列表,第二个参数是一个迭代器。each 方法会把列表里面的每一个项目,都交给这个迭代器去处理一下 ...

如果列表是一个数组的话,这个迭代器接收的参数就是 element ,表示当前这次处理的元素 ... 第二个参数是 index,表示这个元素在数组里面的索引号 .. 最后一个参数是 list ,表示这个列表本身。

如果要处理的列表是个对象的话,这个遍历器的第一个参数是对象的值,可以用 value 表示 ... 第二个参数是 key ,表示对象里的属性的名字 ..  最后一个参数是 list ,表示要处理的这个列表对象。

下面, 我们去试一下这个方法 ...

先处理一下 tracks 这个数组  ...  要做的事就是,在控制台上输出这个数组里面的每个项目的索引号,还有对应的值 ...  underscore 点 each ,使用 underscore 的 each 这个方法 ...  要处理的列表是 tracks  ... 再设置一下处理这个列表的函数,也就是遍历器 ...

普通分类: 

准备《 Underscore 基础 》

下面我们先介绍一下这个课程里用到的东西,你可以在课程的资源包里,找到一个启动项目 ...  用 Bracks 编辑器打开这个项目目录,就是你现在看到的这个样子 ..

index.html 是项目的主页 ...  在这个文档上,用到了 bootstrap 框架的样式表 ...  还有 jquery  ... underscore.js  ...  这是 underscore 库的文件 ...

下面的 data.js ... 在 js 这个目录的下面 ... 在这个文件里面,事先定义好了一些要在这个课程里面用到的数据  ...  一些数组还有对象 ...

最后的 app.js ,是一个空白的脚本文件 ... 在课程里面,我们可能需要在它里面去输入几行代码  ...

这个课程的大部分的测试,都是在 Chrome 浏览器的控制台上完成的 ...

在浏览器里,打开这个 index.html  ...

打开控制台,可以点击 视图 菜单 .. 开发者 ... 选择 JavaScript 控制台 ...   或者也可以直接使用快捷键 alt + command + J 打开控制台。

windows 上应该是 alt + ctrl + J

普通分类: 

页面

Subscribe to RSS - underscore