Ember.js Ember.NativeArray 类

Ember.js 是一个开源的JavaScript框架，用于开发基于模型-视图-控制器（MVC）架构的大型客户端Web应用程序。Ember.js 是最广泛使用的前端应用程序框架之一。它旨在加快开发速度并提高生产力。目前，它被许多网站使用，包括Square、Discourse、Groupon、Linked In、Live Nation、Twitch和Chipotle。

Ember.NativeArray 类： NativeArray 类提供支持 MutableArray 类及其相关API的属性。它使原生数组能够实现它们。

方法： 以下是该类的方法列表：

addObject:新增对象: 如果对象不是当前数组中的一个元素，则将该对象推送到数组的末尾。
addObjects:新增多个对象: 用于将多个对象添加到数组中。
addObserver:添加观察者: 用于为属性注册观察者。
any:任意: 用于检查目标中是否有任何符合回调函数条件的对象。
cacheFor:获取缓存: 如果已存在，则用于获取已计算属性的缓存值。
clear:清除: 此方法会删除数组中的所有元素。
compact:压缩: 这个方法用于复制一个数组，但是不包括null和undefined的元素。
decrementProperty： 这个方法用于将属性的值减去某个数值。
every： 这个方法用于检查数组中的所有对象是否都通过了特定的回调函数。
filter： 这个方法用于根据特定条件过滤数组中的对象。
filterBy： 这个方法用于返回一个只包含与匹配属性相对应的项目的数组。
find： 这个方法用于找到与给定回调函数匹配的元素。
findBy： 这个方法用于获取第一个具有与传递的值匹配的属性的项。
forEach: 此方法用于在数组的每个项上运行一个函数。
get: 此方法用于从对象中检索属性的值。
getEach: 此方法用于获取数组中给定键的所有值。
getProperties: 此方法用于一次获取多个属性的值。
includes: 此方法用于检查给定对象是否存在于数组中。
incrementProperty: 此方法用于将属性的值设置为当前值加上一些数值。
indexOf: 此方法用于查找给定对象在数组中的索引。
insertAt: 该方法用于将对象插入数组的特定位置。
invoke: 该方法用于调用传递的方法，并在接收器中实现该方法的每个对象上调用。
isAny: 该方法用于检查数组中的任何一个元素是否满足传递的属性值。
isEvery: 该方法用于检查数组中的每个元素是否都满足传递的属性值。
lastIndexOf: 该方法用于找到数组中对象的最后一个索引。
map: 该方法用于将数组中的所有项映射到特定函数。
mapBy: 该方法用于获取列表中所有项的指定属性的值。
notifyPropertyChange: 该方法用于通知观察者系统已经发生了属性变化。
objectAt: 该方法用于获取给定索引处的对象。
objectsAt: 该方法用于获取给定索引数组对应的对象。
popObject: 该方法用于从数组中弹出对象。
pushObject: 该方法用于将对象添加到数组中。
pushObjects: 该方法用于将多个对象添加到数组中。
reduce: 此方法用于将数组的值合并为一个值。
reject: 此方法列出所有满足给定函数返回false的枚举元素。
rejectBy: 此方法返回一个数组，其中包含给定键的值为false的对象。
removeAt: 此方法用于删除给定索引上的元素。
removeObject: 此方法从数组中移除所有对于对象的实例。
removeObjects: 此方法从给定数组中移除每个提供的项。
removeObserver: 此方法从此对象中删除您之前注册的任何观察者。
replace: 该方法用于将数组中的某些元素替换成给定的对象。
reverseObjects: 该方法将数组中的元素顺序反转。
set: 该方法用于将键和值设置给对象。
setEach: 该方法对每个成员，设置命名属性的值。
setObjects: 该方法用参数的内容替换接收者的内容。
setProperties: 该方法一次设置多个属性。
shiftObject: 该方法从数组的开头移除nil（如果没有）或对象。
slice: 该方法用于返回接收者的一部分的新数组。
sortBy: 该方法用于按指定键对数组进行排序。
toArray: 该方法只是将对象转换为真实数组。
toggleProperty: 该方法用于将布尔属性的值设置为其当前值的相反值。
uniq: 该方法返回一个只包含唯一值的全新数组。
uniqBy: 该方法用于获取具有给定键的唯一值的对象。
unshiftObject: 该方法用于将单个对象添加到数组的开头。
unshiftObjects: 该方法用于将对象添加到数组的前面。
without: 该方法返回一个不包含给定值的新数组。

属性： 以下是该类的属性列表：

[]: 此属性用于获取或设置数组的内容。
firstObject: 此属性用于检索数组的第一个对象。
lastObject: 此属性用于检索数组的最后一个对象。
length: 此属性用于检索数组的长度。

步骤1： 要运行以下示例，您需要先拥有一个ember项目。要创建一个项目，您需要首先安装ember-cli。在终端中输入以下代码：

npm install ember-cli

步骤2： 现在您可以通过键入以下代码来创建项目：

ember new <project-name> --lang en

启动服务器的方法如下：

ember serve

示例1：

在这个示例中，我将演示以下函数的使用：without、toArray、unshiftObject、unshiftObjects、removeAt、objectAt、find、replace和uniq。

输入以下代码来生成此示例的路由：

ember generate route party

app/routes/party.js

import Route from '@ember/routing/route'; 
  
export default class PartyRoute extends Route { 
    partyItems = [ 
        'Digital Camera', 
        'Jugs, cups & straws', 
        'Balloons', 
        'Scissors', 
        'Cold Drink', 
        'Table Confetti', 
        'Party Hats', 
        'Wine', 
        'Napkins', 
        'Party Plates', 
        'Speakers', 
        'Music System', 
        'Cups', 
    ]; 
    item; 
    itemString; 
    itemList; 
    start; 
    end; 
    idx; 
    model() { 
        return this.partyItems; 
    } 
    setupController(controller, model) { 
        this._super(controller, model); 
        controller.set('partyItems', this.partyItems); 
        controller.set('item', this.item); 
        controller.set('itemString', this.itemString); 
        controller.set('itemList', this.itemList); 
        controller.set('start', this.start); 
        controller.set('end', this.end); 
        controller.set('idx', this.idx); 
    } 
}

app/controllers/party.js

import Ember from 'ember'; 
import { 
    without, toArray, unshiftObject, unshiftObjects, 
    removeAt, objectAt, find, replace, uniq 
} 
    from '@ember/array'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        withoutItem(item) { 
            console.log(item) 
            let tempItems; 
            tempItems = this.partyItems.without(item); 
            let str = ''; 
            for (let i = 0; i < tempItems.length; i++) 
                str += tempItems[i] + '\n'; 
            alert(str); 
            this.set('item', ''); 
        }, 
        addItems(itemString) { 
            this.itemList = itemString.split(',').toArray(); 
            if (this.itemList.length == 1) 
                this.partyItems.unshiftObject(this.itemList[0]); 
            else
                this.partyItems.unshiftObjects(this.itemList); 
            this.set('itemString', ''); 
        }, 
        removeItems(start, end) { 
            this.partyItems.removeAt(start, end); 
        }, 
        getObject(idx) { 
            alert(`The item at index {idx} is  
            {this.partyItems.objectAt(idx)}`); 
        }, 
        findMultipleWordItems() { 
            let reqItem = this.partyItems.find((item) => 
                item.split(' ').toArray().length > 1); 
            alert(reqItem); 
        }, 
        replaceItem(itemString) { 
            this.itemList = itemString.split(',').toArray(); 
            if (this.itemList.length > this.partyItems.length) 
                alert('Error'); 
            this.partyItems.replace(0, this.itemList.length, 
                this.itemList); 
        }, 
        getUniqueItems() { 
            let tempItems = this.partyItems.uniq(); 
            let str = ''; 
            for (let i = 0; i < tempItems.length; i++) 
                str += tempItems[i] + '\n'; 
            alert(str); 
            this.set('item', ''); 
        }, 
    }, 
});

app/template/party.hbs

{{page-title "Party"}} 
<h3>Here is a list of items: </h3> 
<ul> 
    {{#each @model as |party|}} 
        <li>{{party}}</li> 
      {{/each}} 
</ul> 
<br /><br /> 
<div> 
    <label>Enter Item: </label> 
      {{input value=this.item}} 
</div> 
<div> 
    <input
        type="button"
        id="remove-item"
        value="Remove Item"
        {{action "withoutItem" this.item}} 
      /> 
</div> 
<br /><br /> 
<div> 
    <label>Enter Items: </label> 
      {{input value=this.itemString}} 
</div> 
<div> 
    <input
        type="button"
        id="add-item"
        value="Add Items"
        {{action "addItems" this.itemString}} 
      /> 
</div> 
<br /><br /> 
<div> 
    <label>Enter Start Index: </label> 
      {{input value=this.start}} 
</div> 
<div> 
    <label>Enter End Index: </label> 
      {{input value=this.end}} 
</div> 
<div> 
    <input
        type="button"
        id="remove-items"
        value="Remove Items"
        {{action "removeItems" this.start this.end}} 
      /> 
</div> 
<br /><br /> 
<div> 
    <label>Enter Index: </label> 
      {{input value=this.idx}} 
</div> 
<div> 
    <input
        type="button"
        id="get-item"
        value="Get Item"
        {{action "getObject" this.idx}} 
      /> 
</div> 
<br /><br /> 
<div> 
    <label>Enter Items: </label> 
      {{input value=this.itemString}} 
</div> 
<div> 
    <input
        type="button"
        id="replace-item"
        value="Replace Items"
        {{action "replaceItem" this.itemString}} 
      /> 
</div> 
<br /><br /> 
<input
    type="button"
      id="get-multiword"
      value="Get Multiword Items!"
      {{action "findMultipleWordItems"}} 
/> 
<br /><br /> 
<input
    type="button"
      id="get-unique"
      value="Get Unique Items!"
      {{action "getUniqueItems"}} 
/> 
{{outlet}}

输出：

Ember.js Ember.NativeArray 类

示例2： 在这个示例中，我将演示使用popObject函数从数组中弹出项的用法。

输入以下代码以生成此示例的路线：

ember generate route notepad

app/routes/notepad.js

import Route from '@ember/routing/route'; 
  
export default class NotepadRoute extends Route { 
    items = ['Bread', 'Facewash', 'Egg', 'Pen', 'Medicine']; 
    model() { 
        return this.items; 
    } 
    setupController(controller, model) { 
        this._super(controller, model); 
        controller.set('items', this.items); 
    } 
}

app/controllers/notepad.js

import Ember from 'ember'; 
import { popObject } from '@ember/array'; 
  
export default Ember.Controller.extend({ 
    actions: { 
        removeItem() { 
            if (this.items.length == 0) 
                alert('Item List is Empty'); 
            this.items.popObject(); 
        } 
    } 
})

app/template/notepad.hbs

{{page-title "Notepad"}} 
<h2>Your Items</h2> 
<ul> 
    {{#each @model as |i|}} 
        <li>{{i}}</li> 
      {{/each}} 
</ul> 
<br /><br /> 
<div> 
    <input
        type="button"
        id="remove-item"
        value="Remove Item"
        {{action "removeItem"}} 
      /> 
</div> 
{{outlet}}