文档章节

Ember.js 入门指南——枚举(enumerables)

ubuntuvim
 ubuntuvim
发布于 2015/09/09 23:40
字数 1250
阅读 304
收藏 2

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。


Ember中,枚举是包括若干子对象的对象,并且提供了很多的Ember.Enumerable API获取所包含的子对象。我们常见的枚举都是基于原生的javascript数组实现的,Ember扩展了其中的很多接口。

 Ember提供一个标准化接口处理枚举,并且允许开发者完全改变底层数据存储,而无需修改应用程序的其他部分去访问它。

EmberEnumerable API尽可能的遵照ECMAScript规范。为了减少与其他库不兼容Ember.js允许你使用本地浏览器实现数组。

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

 

标准方法

可被观察方法

说明

pop

popObject

该函数从从数组中删除最后项,并返回该删除项。

push

pushObject

新增元素

reverse

reverseObject

颠倒数组元素

shift

shiftObject

把数组的第一个元素从其中删除,并返回第一个元素的值

unshift

unshiftObject

可向数组的开头添加一个或更多元素,并返回新的长度。

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

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

1,数组迭代器

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

var arr = ['chen', 'ubuntuvm', '1527254027@qq.com', 'i2cao.xyz', 'ubuntuvim.xyz'];
arr.forEach(function(item, index) {
  console.log(index+1 + ", " +item);
});
2,获取数组首尾元素
//  获取头尾的元素,直接调用Ember封装好的firstObject和lastObject方法即可
console.log('The firstItem is ' + arr.get('firstObject'));  // output> chen
console.log('The lastItem is ' + arr.get('lastObject'));  //output> ubuntuvim.xyz
3map方法
//  map方法,转换数组,并且可以在回调函数里添加自己的逻辑
//  map方法会新建一个数组,并且返回被转换数组的元素
var arrMap = arr.map(function(item) {
  return 'map: ' + item;  //  增加自己的所需要的逻辑处理
});
arrMap.forEach(function(item, index) {
  console.log(item);
});
console.log('-----------------------------------------------');
4mapBy方法
// mapBy 方法:返回对象属性的集合,
// 当你的数组元素是一个对象的时候,你可以根据对象的属性名获取对应值
var obj1 = Ember.Object.create({
  username: '123',
  age: 25
});
 
var obj2 = Ember.Object.create({
  username: 'name',
  age: 35
});
var obj3 = Ember.Object.create({
  username: 'user',
  age: 40
});
 
var obj4 = Ember.Object.create({
  age: 40
});
 
var arrObj = [obj1, obj2, obj3, obj4];  //对象数组
var tmp = arrObj.mapBy('username');  // 
 
tmp.forEach(function(item, index) {
  console.log(index+1+", "+item);
});
 
console.log('-----------------------------------------------');
5filter方法
//  filter 过滤器方法,过滤普通数组元素
//  filter方法可以跟你指定的条件过滤掉不匹配的数据,比如下面的代码:过滤了元素大于4的元素
var nums = [1, 2, 3, 4, 5];
//  参数self值数组本身
var numsTmp = nums.filter(function(item, index, self) {
  if (item < 4)
    return true;
 
});
 
numsTmp.forEach(function(item, index) {
  console.log('item = ' + item);  //  1, 2, 3
});
console.log('-----------------------------------------------');
6filterBy方法
//  如果你想根据对象的某个属性过滤数组你需要用filterBy方法,比如下面的代码根据isDone这个对象属性过滤
var o1 = Ember.Object.create({
  name: 'u1',
  isDone: true
});
 
var o2 = Ember.Object.create({
  name: 'u2',
  isDone: false
});
 
var o3 = Ember.Object.create({
  name: 'u3',
  isDone: true
});
 
var o4 = Ember.Object.create({
  name: 'u4',
  isDone: true
});
 
var todos = [o1, o2, o3, o4];
var isDoneArr = todos.filterBy('isDone', true);  //会把o2过滤掉
isDoneArr.forEach(function(item, index) {
  console.log('name = ' + item.get('name') + ', isDone = ' + item.get('isDone'));
  // console.log(item);
});
 
console.log('-----------------------------------------------');
7findfindBy方法
// find和findBy方法,这两个方法都是只返回第一个匹配的元素,与filter和filterBy类似,一个用于返回普通的元素,一个可以用于对象属性判断
var firstNum = nums.find(function(item, index, seft){
  return item < 4;
});
console.log('firstNum = ' + firstNum);
 
var firstObjAttr = todos.findBy('isDone', true);
console.log('name = ' + firstObjAttr.get('name') + ', isDone = ' + firstObjAttr.get('isDone'));
 
console.log('-----------------------------------------------');
8everysome方法
// every、some 方法
// every 用于判断数组的所有元素是否符合条件,如果所有元素都符合指定的判断条件则返回true,否则返回false
// some 用于判断数组的所有元素只要有一个元素符合条件就返回true,否则返回false
Person = Ember.Object.extend({
  name: null,
  isHappy: true
});
var people = [
  Person.create({ name: 'chen', isHappy: true }),
  Person.create({ name: 'ubuntuvim', isHappy: false }),
  Person.create({ name: 'i2cao.xyz', isHappy: true }),
  Person.create({ name: '123', isHappy: false }),
  Person.create({ name: 'ibeginner.sinaapp.com', isHappy: false })
];
var every = people.every(function(person, index, self) {
  if (person.get('isHappy'))
    return true;
});
console.log('every = ' + every);
 
var some = people.some(function(person, index, self) {
  if (person.get('isHappy'))
    return true;
});
console.log('some = ' + some);
9isEveryisAny方法
//  与every、some类似的方法还有isEvery、isAny 
console.log('isEvery = ' + people.isEvery('isHappy', true));  //  全部都为true,返回结果才是true
console.log('isAny = ' + people.isAny('isHappy', true));  //只要有一个为true,返回结果就是true

    上述方法的条用与其他JS框架提供的方法基本相似的。学习难度不大……

© 著作权归作者所有

ubuntuvim

ubuntuvim

粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
Ember.js 入门指南--目录

本系列文章全部从(http://ibeginner.sinaapp.com/)迁移过来,欢迎访问原网站。 Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,...

ubuntuvim
2015/09/07
396
2
Ember.js 入门指南——总目录

Ember.js 是什么?我想对于想学习它的人应该知道它是个什么东西,如果你想了解那就赶紧去 Google 或者百度,本系列教程是通过学习官网教程然后摘抄个人觉得比较重要的部分,加上学习实例整合...

ubuntuvim
2015/10/25
1K
2
Ember.js 入门指南——模板渲染

路由的另一个重要职责是渲染同名字的模板。 比如下面的路由设置,posts路由渲染模板posts.hbs,路由new渲染模板posts/new.hbs。 Router.map(function() { this.route('posts', function() {...

ubuntuvim
2015/09/25
449
0
Ember.js 入门指南——路由简介

从本文开始,将为大家介绍路由(route),如果你看过前面的《Ember.js 入门指南——{{link-to}} 助手》这篇文章应该初步了解了route。不过在这篇文章中只是简单介绍了路由是定义、路由层次,...

ubuntuvim
2015/09/22
478
0
从服务器获取数据,引入组件

博文原址:http://blog.ddlisting.com/2016/04/21/yin-ru-zu-jian/ 接着前面四篇: 环境搭建以及使用Ember.js创建第一个静态页面 引入计算属性、action、动态内容 模型,保存数据到数据库 发...

ubuntuvim
2016/04/26
75
0

没有更多内容

加载失败,请刷新页面

加载更多

链表中环的入口节点

给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null。 思路: public ListNode EntryNodeOfLoop(ListNode pHead) { if (pHead == null || pHead.next == null) ...

Garphy
11分钟前
2
0
Spring5 源码分析-容器刷新-invokeBeanFactoryPostProcessors()方法

上一篇:Spring5 源码分析-容器刷新-prepareBeanFactory()方法 该方法主要完成以下功能: 1.实例化ConfigurationClassPostProcessor,并调用ConfigurationClassPostProcessor.postProcessBe...

特拉仔
11分钟前
3
0
为什么MySQL用B+树做索引

索引这个词,相信大多数人已经相当熟悉了,很多人都知道MySQL的索引主要以B+树为主,但是要问到为什么用B+树,恐怕很少有人能把前因后果讲述的很完整。本文就来从头到尾介绍下数据库的索引。...

小致Daddy
36分钟前
4
0
网站前台的三级联动数据封装

我在进行项目时候遇到了一个进行数据封装的一个功能,进行数据的封装的功能也挺复杂,来回试了好几十种方法.最后使用的是这种方法. 使用一个pojo进行封装两个数据,一个是list一个是实体类. 具体...

小天丶羽
39分钟前
4
0
创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA的SPI FLASH、硬件加密芯片

TL437xF-EVM是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA设计的开发板,底板采用沉金无铅工艺的4层板设计,尺寸为240mm*130mm,它为用户提供了SOM-TL437xF核心板的测...

Tronlong创龙
41分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部