1.はじめに
操作する配列は、それがなどのインターフェースデータ、またはフィルターデータ、または[追加]ボタンの操作権、から取られているかどうか、最も基本的なフロントエンドの作業として記述することができ、物事の配列を中心に開かれていません。私も自分の知識の櫛にとして、1を整理する準備ができて、どこでも情報を収集するように、多くの配列操作は、非常に簡単に混乱初心者に、非常に、簡単に間違った状況で熟練されていません。
2.準備
まず、この劇についてのプレゼンテーションを容易にするために、配列を使用して、簡単なHTMLページを用意します。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="container">
<button @click=init>Click</button>
</div>
</body>
<script>
new Vue({
el: '#container',
methods: {
init () {
const array = [
{ name: 'aa', age: 12 },
{ name: 'bb', age: 14 },
{ name: 'cc', age: 16 },
{ name: 'cc', age: 16 },
]
}
})
</script>
</html>3.取得開始
2.1フィルタ
フィルタフィルタは、必ず資格の新しい配列を返すことができます
フィルタ項目を表す3つのパラメータ（項目、インデックス、自己）を有し：要素のアレイトラバース、インデックスその：インデックス値、自己：自分。
フィルタの最も簡単なアプリケーション、唯一の項目を選択することができ資格
次のコードの実行
const filter = array.filter( item => item.age > 13)console.log（フィルター）は、次のような結果を返すことができます。
(3) [{…}, {…}, {…}]
0: {name: "bb", age: 14}
1: {name: "cc", age: 16}
2: {name: "cc", age: 16}
length: 3あなたは、スクリーニングの条件を満たしていない場合、フィルタは常に、配列を返し、それは空の配列を返します。
項目、インデックスは、自己が同じ時間を過ごす、私たちは巧みな機能の重複排除配列を実装することができます。
const simpleArray = ['a','a','b','c','b','a']
const simpleFilter = simpleArray.filter((item, index, self) => self.indexOf(item) === index)
console.log(simpleFilter)
//结果
(3) ["a", "b", "c"] indexOf（）これは、2つのパラメータ（項目、オフセット）最初の引数は要素であり、第二は、最初から開始位置のインデックスであり、戻り値は、インデックス、のlastIndexOf（ある場合）、最後から正反対を有します前方にスタート。重量に本明細書で使用される場合、フィルタは、同一の第2のインデックス要素は、ケースの順序を返します。
2.2ソート
ソート（）メソッドは非常に簡単です、あなたは配列の要素をソートすることができます
元の使用することを例として、配列、二つの引数にITEM1、ITEM2
const sortArray = array.sort((item1,item2) => item1.age - item2.age)結果は、年齢の昇順で要素を見ることができます
(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "dd", age: 10}
1: {name: "aa", age: 12}
2: {name: "bb", age: 14}
3: {name: "cc", age: 16}
4: {name: "cc", age: 16}
length: 52.3マップ
マップ（）新しい配列に元の配列に基づいて処理した後のリターンを変更することはできません、ES6のための新たな方法で、私はすべての年齢層が+5されたいと言います
const mapArray = array.map( item => {
return {
name: item.name,
age: item.age + 5
}
})結果：
(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "aa", age: 17}
1: {name: "bb", age: 19}
2: {name: "cc", age: 21}
3: {name: "cc", age: 21}
4: {name: "dd", age: 15}
length: 5三つのパラメータ、およびフィルタ同じですが、主に中古品、インデックスがあるマップ。
2.4のforEach
アレイトラバーサルは、高効率化のための逆、Array.lengthとを一時的に記憶するための理論的に使用していますが、forEachのをお勧めしますが、そうでエレガントな文言だけでなく、どのような自転車。
array.forEach((item,index,self) => {})2.5検索
検索（）及びフィルタ（）と同じ、アレイ内の特定の値を見つけるために使用されている点が異なります。例えば、私はCCの名前の値を見つけるしたいと思います。
const findArr = array.find( item => item.name === 'cc')結果は以下のとおりです。
{name: "cc", age: 16}彼らは、今のように、値CCのための多くの名前があるのであれば、資格の要素を発見されたときに注意インデックスの先頭から探し始めます）（見つける、ということは、必要な場合にのみ、最初に返され、trueを返します正確には、あなたがより多くの条件を追加する必要があることを見つけます。
2.6いくつかの＆あらゆる＆含み
2、私は動作しませんが、彼らは非常に特別では、戻り値がfalseの場合、真です。
いくつかの（）の長い種の修飾配列があるとして、それはtrueを返しますが、すべての（）とすると、そうでない場合はfalseのみtrueを返すために、すべての条件を遵守しなければなりません。
真があり、（）配列に基づいて含まれてい要素が含まれています。
2.7削減
非常に特別）（削減、その構造は、メソッドおよびパラメータ組成から成る（funcは、initv）、この方法は、4つのパラメータ（合計、商品、指数、自己）かかり、
関数の初期値をinitv与えられ、合計が最後に計算され結果は、アイテム、要素そのものです。
ここで、我々は再びすべての年齢を合計してみてください+5
const findArr = array.reduce((total,item) => total + item.age, 5)
// 结果为75見ることができる、初期値5は、各サイクルは、合計時間プラス年齢の合計に等しく、そして最終的に結果を得るために、合計に戻ります。
2.8スプライス
スプライス（）は非常に単純であり、二つのパラメータ（インデックス、NUM、...）、最初のパラメータの所定の開始位置があり、第二の数が省略され、後部要素が追加されます。あなたは簡単にこの方法により、元の配列に操作を追加または削除することができます。一方で、その戻り値は、要素が削除されます。
const simpleArray = ['a','a','b','c','b','a']
const spliceArr = simpleArray.splice(1, 2,'b','v')
console.log(simpleArray) //经过更改的原数组 ["a", "b", "v", "c", "b", "a"]
console.log(spliceArr) //移除的部分元素 ["a", "b"]