Ember 枚舉

2018-01-06 16:48 更新

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

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

標準方法 可被觀察方法 說明
pop popObject 該函數(shù)從從數(shù)組中刪除最后項,并返回該刪除項
push pushObject 新增元素
reverse reverseObject 顛倒數(shù)組元素
shift shiftObject 把數(shù)組的第一個元素從其中刪除,并返回第一個元素的值
unshift unshiftObject 可向數(shù)組的開頭添加一個或更多元素,并返回新的長度

詳細文檔請看:http://emberjs.com/api/classes/Ember.Enumerable.html

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

常用API

1,數(shù)組迭代器

遍歷數(shù)組元素使用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,獲取數(shù)組首尾元素

  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方法,轉換數(shù)組,并且可以在回調函數(shù)里添加自己的邏輯
  2. // map方法會新建一個數(shù)組,并且返回被轉換數(shù)組的元素
  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. // 當你的數(shù)組元素是一個對象的時候,你可以根據(jù)對象的屬性名獲取對應值
  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]; //對象數(shù)組
  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 過濾器方法,過濾普通數(shù)組元素
  2. // filter方法可以跟你指定的條件過濾掉不匹配的數(shù)據(jù),比如下面的代碼:過濾了元素大于4的元素
  3. var nums = [1, 2, 3, 4, 5];
  4. // 參數(shù)self值數(shù)組本身
  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. // 如果你想根據(jù)對象的某個屬性過濾數(shù)組你需要用filterBy方法,比如下面的代碼根據(jù)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 用于判斷數(shù)組的所有元素是否符合條件,如果所有元素都符合指定的判斷條件則返回true,否則返回false
  3. // some 用于判斷數(shù)組的所有元素只要有一個元素符合條件就返回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(博文經(jīng)過多次修改,博文上的代碼與github代碼可能又出入,不過影響不大?。?,如果你覺得博文對你有點用在github項目上給我個star吧。您的肯定對我來說是最大的動力??!

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號