Ember 枚举

2018-01-06 16:48 更新

Ember中,枚举是包含多个子对象的对象,并且提供了丰富的API(Ember.Enumerable API)去获取所包含的子对象。Ember的枚举都是基于原生的javascript数组实现的,Ember扩展了其中的很多接口。 Ember提供一个标准化接口处理枚举,并且允许开发者完全改变底层数据存储,而无需修改应用程序的数据访问代码。 EmberEnumerable API尽可能的遵照ECMAScript规范。为了减少与其他库不兼容,Ember允许你使用本地浏览器实现数组。

下面是一些重要而常用的API列表;请注意左右两列的不同。

标准方法 可被观察方法 说明
pop popObject 该函数从从数组中删除最后项,并返回该删除项
push pushObject 新增元素
reverse reverseObject 颠倒数组元素
shift shiftObject 把数组的第一个元素从其中删除,并返回第一个元素的值
unshift unshiftObject 可向数组的开头添加一个或更多元素,并返回新的长度

详细文档请看:http://emberjs.com/api/classes/Ember.Enumerable.html

在列表上右侧的方法是Ember重写标准的JavaScript方法而得的,他们最大的不同之处是使用普通的方法(左边部分)操作的数组不会在你的应用程序中自动更新(不会触发观察者),而使用Ember重写过的方法则可以触发观察者,只要你的数据有变化Ember就可以观察到,并且更新到模板上。

常用API

1,数组迭代器

遍历数组元素使用forEach方法。

  1. var arr = ['chen', 'ubuntuvm', '1527254027@qq.com', 'i2cao.xyz', 'ubuntuvim.xyz'];
  2. arr.forEach(function(item, index) {
  3. console.log(index+1 + ", " +item);
  4. });

2,获取数组首尾元素

  1. // 获取头尾的元素,直接调用Ember封装好的firstObject和lastObject方法即可
  2. console.log('The firstItem is ' + arr.get('firstObject')); // output> chen
  3. console.log('The lastItem is ' + arr.get('lastObject')); //output> ubuntuvim.xyz

3,map方法

  1. // map方法,转换数组,并且可以在回调函数里添加自己的逻辑
  2. // map方法会新建一个数组,并且返回被转换数组的元素
  3. var arrMap = arr.map(function(item) {
  4. return 'map: ' + item; // 增加自己的所需要的逻辑处理
  5. });
  6. arrMap.forEach(function(item, index) {
  7. console.log(item);
  8. });
  9. console.log('-----------------------------------------------');

4,mapBy方法

  1. // mapBy 方法:返回对象属性的集合,
  2. // 当你的数组元素是一个对象的时候,你可以根据对象的属性名获取对应值
  3. var obj1 = Ember.Object.create({
  4. username: '123',
  5. age: 25
  6. });
  7. var obj2 = Ember.Object.create({
  8. username: 'name',
  9. age: 35
  10. });
  11. var obj3 = Ember.Object.create({
  12. username: 'user',
  13. age: 40
  14. });
  15. var obj4 = Ember.Object.create({
  16. age: 40
  17. });
  18. var arrObj = [obj1, obj2, obj3, obj4]; //对象数组
  19. var tmp = arrObj.mapBy('username'); //
  20. tmp.forEach(function(item, index) {
  21. console.log(index+1+", "+item);
  22. });
  23. console.log('-----------------------------------------------');

5,filter方法

  1. // filter 过滤器方法,过滤普通数组元素
  2. // filter方法可以跟你指定的条件过滤掉不匹配的数据,比如下面的代码:过滤了元素大于4的元素
  3. var nums = [1, 2, 3, 4, 5];
  4. // 参数self值数组本身
  5. var numsTmp = nums.filter(function(item, index, self) {
  6. return item < 4;
  7. });
  8. numsTmp.forEach(function(item, index) {
  9. console.log('item = ' + item); // 1, 2, 3
  10. });
  11. console.log('-----------------------------------------------');

filter方法会返回所有判断为true的元素,会把判断结果为false或者undefined的元素过滤掉。

6,filterBy方法

  1. // 如果你想根据对象的某个属性过滤数组你需要用filterBy方法,比如下面的代码根据isDone这个对象属性过滤
  2. var o1 = Ember.Object.create({
  3. name: 'u1',
  4. isDone: true
  5. });
  6. var o2 = Ember.Object.create({
  7. name: 'u2',
  8. isDone: false
  9. });
  10. var o3 = Ember.Object.create({
  11. name: 'u3',
  12. isDone: true
  13. });
  14. var o4 = Ember.Object.create({
  15. name: 'u4',
  16. isDone: true
  17. });
  18. var todos = [o1, o2, o3, o4];
  19. var isDoneArr = todos.filterBy('isDone', true); //会把o2过滤掉
  20. isDoneArr.forEach(function(item, index) {
  21. console.log('name = ' + item.get('name') + ', isDone = ' + item.get('isDone'));
  22. // console.log(item);
  23. });
  24. console.log('-----------------------------------------------');

filterfilterBy不同的地方是前者可以自定义过滤逻辑,后者可以直接使用。

7,every、some方法

  1. // every、some 方法
  2. // every 用于判断数组的所有元素是否符合条件,如果所有元素都符合指定的判断条件则返回true,否则返回false
  3. // some 用于判断数组的所有元素只要有一个元素符合条件就返回true,否则返回false
  4. Person = Ember.Object.extend({
  5. name: null,
  6. isHappy: true
  7. });
  8. var people = [
  9. Person.create({ name: 'chen', isHappy: true }),
  10. Person.create({ name: 'ubuntuvim', isHappy: false }),
  11. Person.create({ name: 'i2cao.xyz', isHappy: true }),
  12. Person.create({ name: '123', isHappy: false }),
  13. Person.create({ name: 'ibeginner.sinaapp.com', isHappy: false })
  14. ];
  15. var every = people.every(function(person, index, self) {
  16. if (person.get('isHappy'))
  17. return true;
  18. });
  19. console.log('every = ' + every);
  20. var some = people.some(function(person, index, self) {
  21. if (person.get('isHappy'))
  22. return true;
  23. });
  24. console.log('some = ' + some);

8,isEvery、isAny方法

  1. // 与every、some类似的方法还有isEvery、isAny
  2. console.log('isEvery = ' + people.isEvery('isHappy', true)); // 全部都为true,返回结果才是true
  3. console.log('isAny = ' + people.isAny('isHappy', true)); //只要有一个为true,返回结果就是true

上述方法的使用与普通JavaScript提供的方法基本一致。学习难度不大……自己敲两边就懂了!

这些方法非常重要,请一定要学会如何使用!!!
博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能又出入,不过影响不大!),如果你觉得博文对你有点用在github项目上给我个star吧。您的肯定对我来说是最大的动力!!

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号