Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Ember enumerumer


May 09, 2021 Ember.js Reference documents


Table of contents


In Ember enumerants are objects that contain multiple sub-objects and provide a rich API (Ember.Enumerable API) to get the contained sub-objects. Ember enumerals are javascript arrays, Ember many of these interfaces. Ember a standardized interface to handle enumerity and allows developers to completely change the underlying data store without modifying the application's data access code. Ember Enumerable API ECMAScript To reduce incompatibility with other libraries, Ember you to implement arrays using a local browser.

Here's a list of API used APIs;

Standard method Methods that can be observed Description
pop popObject The function removes the last item from the array and returns the deleted item
push pushObject New elements
reverse reverseObject Upside down array elements
shift shiftObject Remove the first element of the array from it and return the value of the first element
unshift unshiftObject You can add one or more elements to the beginning of the array and return a new length

For more documentation, see: http://emberjs.com/api/classes/Ember.Enumerable.html

The method on the right side Ember overrides the standard JavaScript method, and the biggest difference is that arrays operated using normal methods (left section) do not automatically update in your application (it does not trigger observers), Ember can Ember observe and update to the template.

Common APIs

1, array iterator

Traversing array elements uses forEach method.

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

2, get the first and last elements of the array

  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 method

  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 method

  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 method

  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 method returns all elements that true to be true and filters false that are judged to be false or undefined

6, filterBy method

  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('-----------------------------------------------');

filter between filterBy is that the former can customize the filtering logic and the latter can be used directly.

7, every, some method

  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 method

  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

The above methods are basically the same as those provided by normal JavaScript I t's not hard to learn... Knock on both sides yourself and you'll understand!

These methods are very important, be sure to learn how to use !!!
The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit of a github project for you, give me star Yours is definitely the biggest motivation for me!!