May 09, 2021 Ember.js Reference documents
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.
Traversing array elements uses
forEach
method.
var arr = ['chen', 'ubuntuvm', '[email protected]', 'i2cao.xyz', 'ubuntuvim.xyz'];
arr.forEach(function(item, index) {
console.log(index+1 + ", " +item);
});
// 获取头尾的元素,直接调用Ember封装好的firstObject和lastObject方法即可
console.log('The firstItem is ' + arr.get('firstObject')); // output> chen
console.log('The lastItem is ' + arr.get('lastObject')); //output> ubuntuvim.xyz
// map方法,转换数组,并且可以在回调函数里添加自己的逻辑
// map方法会新建一个数组,并且返回被转换数组的元素
var arrMap = arr.map(function(item) {
return 'map: ' + item; // 增加自己的所需要的逻辑处理
});
arrMap.forEach(function(item, index) {
console.log(item);
});
console.log('-----------------------------------------------');
// 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('-----------------------------------------------');
// filter 过滤器方法,过滤普通数组元素
// filter方法可以跟你指定的条件过滤掉不匹配的数据,比如下面的代码:过滤了元素大于4的元素
var nums = [1, 2, 3, 4, 5];
// 参数self值数组本身
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
method returns all elements that
true
to be true and filters
false
that are judged to be false or
undefined
// 如果你想根据对象的某个属性过滤数组你需要用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('-----------------------------------------------');
filter
between
filterBy
is that the former can customize the filtering logic and the latter can be used directly.
// 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);
// 与every、some类似的方法还有isEvery、isAny
console.log('isEvery = ' + people.isEvery('isHappy', true)); // 全部都为true,返回结果才是true
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!!