Ember 枚舉

在Ember中，枚舉是包含多個子對象的對象，并且提供了豐富的API（Ember.Enumerable API）去獲取所包含的子對象。Ember的枚舉都是基于原生的javascript數(shù)組實現(xiàn)的，Ember擴(kuò)展了其中的很多接口。 Ember提供一個標(biāo)準(zhǔn)化接口處理枚舉，并且允許開發(fā)者完全改變底層數(shù)據(jù)存儲，而無需修改應(yīng)用程序的數(shù)據(jù)訪問代碼。 Ember的Enumerable API盡可能的遵照ECMAScript規(guī)范。為了減少與其他庫不兼容，Ember允許你使用本地瀏覽器實現(xiàn)數(shù)組。

下面是一些重要而常用的API列表；請注意左右兩列的不同。

詳細(xì)文檔請看：http://emberjs.com/api/classes/Ember.Enumerable.html

在列表上右側(cè)的方法是Ember重寫標(biāo)準(zhǔn)的JavaScript方法而得的，他們最大的不同之處是使用普通的方法（左邊部分）操作的數(shù)組不會在你的應(yīng)用程序中自動更新（不會觸發(fā)觀察者），而使用Ember重寫過的方法則可以觸發(fā)觀察者，只要你的數(shù)據(jù)有變化Ember就可以觀察到，并且更新到模板上。

常用API

1，數(shù)組迭代器

遍歷數(shù)組元素使用forEach方法。

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

2，獲取數(shù)組首尾元素

//  獲取頭尾的元素，直接調(diào)用Ember封裝好的firstObject和lastObject方法即可
console.log('The firstItem is ' + arr.get('firstObject'));  // output> chen
console.log('The lastItem is ' + arr.get('lastObject'));  //output> ubuntuvim.xyz

3，map方法

//  map方法，轉(zhuǎn)換數(shù)組，并且可以在回調(diào)函數(shù)里添加自己的邏輯
//  map方法會新建一個數(shù)組，并且返回被轉(zhuǎn)換數(shù)組的元素
var arrMap = arr.map(function(item) {
  return 'map: ' + item;  //  增加自己的所需要的邏輯處理
});
arrMap.forEach(function(item, index) {
  console.log(item);
});
console.log('-----------------------------------------------');

4，mapBy方法

// mapBy 方法：返回對象屬性的集合，
// 當(dāng)你的數(shù)組元素是一個對象的時候，你可以根據(jù)對象的屬性名獲取對應(yīng)值
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];  //對象數(shù)組
var tmp = arrObj.mapBy('username');  // 

 
tmp.forEach(function(item, index) {
  console.log(index+1+", "+item);
});

 
console.log('-----------------------------------------------');

5，filter方法

//  filter 過濾器方法，過濾普通數(shù)組元素
//  filter方法可以跟你指定的條件過濾掉不匹配的數(shù)據(jù)，比如下面的代碼：過濾了元素大于4的元素
var nums = [1, 2, 3, 4, 5];
//  參數(shù)self值數(shù)組本身
var numsTmp = nums.filter(function(item, index, self) {
    return item < 4;
});

 
numsTmp.forEach(function(item, index) {
  console.log('item = ' + item);  //  1， 2， 3
});
console.log('-----------------------------------------------');

filter方法會返回所有判斷為true的元素，會把判斷結(jié)果為false或者undefined的元素過濾掉。

6，filterBy方法

//  如果你想根據(jù)對象的某個屬性過濾數(shù)組你需要用filterBy方法，比如下面的代碼根據(jù)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('-----------------------------------------------');

filter和filterBy不同的地方是前者可以自定義過濾邏輯，后者可以直接使用。

7，every、some方法

// every、some 方法
// every 用于判斷數(shù)組的所有元素是否符合條件，如果所有元素都符合指定的判斷條件則返回true，否則返回false
// some 用于判斷數(shù)組的所有元素只要有一個元素符合條件就返回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);

8，isEvery、isAny方法

//  與every、some類似的方法還有isEvery、isAny 
console.log('isEvery = ' + people.isEvery('isHappy', true));  //  全部都為true，返回結(jié)果才是true
console.log('isAny = ' + people.isAny('isHappy', true));  //只要有一個為true，返回結(jié)果就是true

上述方法的使用與普通JavaScript提供的方法基本一致。學(xué)習(xí)難度不大……自己敲兩邊就懂了！

這些方法非常重要，請一定要學(xué)會如何使用！?。?
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。绻阌X得博文對你有點用在github項目上給我個star吧。您的肯定對我來說是最大的動力??！