vue のオブジェクト、配列、オブジェクト配列

オブジェクト、配列、およびオブジェクト配列

JavaScript では、オブジェクト、配列、およびオブジェクト配列は異なるデータ構造であり、それぞれに特定の特性と用途があります。

物体：

特性: はキーと値のペアで構成され、各キー (属性とも呼ばれます) には値が関連付けられています。
例： { name: 'John', age: 30, city: 'New York' }
目的: 単一のエンティティまたは物を表し、関連情報を保存するために使用されます。

配列：

特徴: 複数の値を保持できる順序付きコレクション。各値は、数値、文字列、オブジェクト、さらにはその他の配列など、任意のデータ型にすることができます。
例： [1, 2, 'apple', { name: 'Alice' }, [5, 6, 7]]
目的: は、一連のデータを保存および操作するために使用され、インデックスを介してその要素にアクセスおよび変更できるようにします。

オブジェクトの配列:

特徴: は、各要素が独自のキーと値のペアを持つオブジェクトである配列です。
例： [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]
使用法: は通常、ユーザー情報や製品リストなどの保存など、複数の関連オブジェクトを保存するために使用されます。

違いはその構造と目的にあります。オブジェクトは単一のエンティティまたは物のプロパティを記述するのに適しており、配列は一連のデータを格納するために使用され、オブジェクト配列は関連オブジェクトのコレクションであり、複数のオブジェクトに関する情報を格納するのに適しています。

vue のオブジェクトの一般的なメソッド

Vue では、いくつかの一般的なメソッドを使用してオブジェクトを操作および処理できます。これらのメソッドは主に、Vue のデータバインディングと応答性の機能を目的としています。

オブジェクトの一般的なメソッド:

Vue.set(): Vue インスタンスのリアクティブオブジェクトに新しいプロパティを追加しても、新しいプロパティはビューの更新をトリガーしません。 Vue.set(object, key, value) を使用して応答性属性を追加し、新しく追加された属性によってもビューの更新がトリガーされるようにします。
```
Vue.set(this.myObject, 'newProperty', 'value');
```
**this. $せ t () ： * * 在 V u e 组件中，可以使用 ‘ t hi s .$ set()`方法同样达到上述效果。
```
this.$set(this.myObject, 'newProperty', 'value');
```
Vue.delete(): は、オブジェクトのプロパティを削除するために使用されます。プロパティの削除によってビューの更新もトリガーされることを確認してください。
```
Vue.delete(this.myObject, 'propertyToDelete');
```

これらのメソッドはすべて、Vue でオブジェクトを処理するときに応答性が維持されるように設計されています。これらのメソッドを使用すると、Vue インスタンス内のオブジェクトをより効率的に操作でき、変更がビューレイヤーの更新に正しく影響するようになります。

例

Vue リアクティブオブジェクトの場合は、Vue.set() または this.$set() を使用して、属性の追加後にビューの更新がトリガーされるようにします。同様に、Vue.delete() は、属性の削除後にビューがそれに応じて更新されることを保証できます。これらのメソッドを使用した例を示します。

<template>
  <div>
    <p v-for="(value, key) in myObject" :key="key">{
   
   { key }}: {
   
   { value }}</p>
    <button @click="addProperty">添加属性</button>
    <button @click="deleteProperty">删除属性</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {
        property1: 'Value 1',
        property2: 'Value 2'
      }
    };
  },
  methods: {
    addProperty() {
      // 添加新属性并确保触发视图更新
      this.$set(this.myObject, 'newProperty', 'New Value');
    },
    deleteProperty() {
      // 删除属性并确保触发视图更新
      Vue.delete(this.myObject, 'property2');
    }
  }
};
</script>

この例には、いくつかのプロパティを含む myObject オブジェクトがあります。 addProperty() メソッドと deleteProperty() メソッドは、オブジェクトのプロパティを追加および削除する 2 つのボタンによってトリガーされます。 this.$set() と Vue.delete() は、オブジェクトへの変更がビューへの更新を正しくトリガーすることを保証します。

オブジェクトのすべてのプロパティを表示するには、テンプレートの使用v-for ディレクティブ。ボタンをクリックして新しいプロパティを追加したり、既存のプロパティを削除したりできます。これらの変更を反映してビューが更新されます。。

vue の配列の一般的なメソッド

Vue では配列も応答性があるため、JavaScript で配列メソッドを使用できます。また、Vue が提供するいくつかのメソッドを使用して配列を操作および処理することもできます。

Vue の配列の一般的なメソッド:

push(): 1 つ以上の要素を配列の末尾に追加し、ビューの更新をトリガーします。
```
this.myArray.push('newItem');
```
pop(): 配列の末尾の要素を削除し、ビューの更新をトリガーします。
```
this.myArray.pop();
```
splice(): 配列内の要素を挿入、削除、または置換し、ビューの更新をトリガーします。
```
this.myArray.splice(index, countToDelete, item1, item2, ...);
```
shift(): 配列の最初の要素を削除し、ビューの更新をトリガーします。
```
this.myArray.shift();
```
unshift(): 1 つ以上の要素を配列の先頭に追加し、ビューの更新をトリガーします。
```
this.myArray.unshift('newItem');
```

Vue.set() と Vue.delete(): 前述のメソッドは配列にも適用できます。

Vue.set(this.myArray, indexOfItem, 'newValue');
Vue.delete(this.myArray, indexOfItem);

concat(): 2 つの配列を連結し、新しい配列を返します。
```
const newArray = this.myArray.concat(['item1', 'item2']);
```
slice(): 元の配列を変更せずに配列の一部を返します。
```
const newArray = this.myArray.slice(startIndex, endIndex);
```

これらのメソッドを使用すると、Vue で配列を操作し、ビューが配列内の変更に確実に応答できるようになります。 Vue が提供するリアクティブメソッドを使用して配列を操作すると、Vue のビューのメンテナンスと更新が容易になることに注意してください。

例

Vue の配列の一般的なメソッドを組み合わせてデータを操作する簡単な例を示します。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in myArray" :key="index">
        {
   
   { item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="newItem">
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myArray: ['Apple', 'Banana', 'Orange'],
      newItem: ''
    };
  },
  methods: {
    addItem() {
      if (this.newItem) {
        this.myArray.push(this.newItem); // 在数组末尾添加新元素
        this.newItem = ''; // 清空输入框
      }
    },
    removeItem(index) {
      this.myArray.splice(index, 1); // 根据索引移除元素
    }
  }
};
</script>

この例には、いくつかのフルーツを含む配列myArrayがあります。この配列内の要素のリストがページに表示され、要素ごとに削除ボタンが生成されます。下部には入力ボックスと「追加」ボタンがあり、配列に新しいフルーツを追加できます。

addItem() メソッドはpush() を使用して、入力された新しいフルーツを配列の末尾に追加し、入力ボックスをクリアします。
removeItem(index) メソッドはsplice() を使用して、インデックスに基づいて配列から要素を削除します。

このようにして、ページ上で新しいフルーツを追加したり、既存のフルーツを削除したりすることができ、配列内の変更に基づいてビューが更新されます。

vue のオブジェクト配列の一般的なメソッド

オブジェクト配列は JavaScript で非常に一般的なデータ構造であり、この構造を操作および処理するための一般的なメソッドがいくつかあります。

map(): 指定された関数に従って各要素を処理した結果を含む新しい配列を作成します。

const originalArray = [{
    
     id: 1, name: 'Alice' }, {
    
     id: 2, name: 'Bob' }];
const newArray = originalArray.map(item => item.name);
// newArray 现在为 ['Alice', 'Bob']

filter(): 関数のテストに合格したすべての要素を含む新しい配列を作成します。

const originalArray = [{
    
     id: 1, name: 'Alice' }, {
    
     id: 2, name: 'Bob' }];
const filteredArray = originalArray.filter(item => item.id === 1);
// filteredArray 现在为 [{ id: 1, name: 'Alice' }]

find(): 指定されたテスト関数を満たす配列内の最初の要素の値を返します。見つからない場合は、undefined が返されます。

const originalArray = [{
    
     id: 1, name: 'Alice' }, {
    
     id: 2, name: 'Bob' }];
const foundItem = originalArray.find(item => item.id === 2);
// foundItem 现在为 { id: 2, name: 'Bob' }

forEach(): 配列内の各要素に対して指定された関数を実行します。

const originalArray = [{
    
     id: 1, name: 'Alice' }, {
    
     id: 2, name: 'Bob' }];
originalArray.forEach(item => console.log(item.name));
// 输出 'Alice' 和 'Bob'

reduce(): 配列内の各要素に対してアキュムレータ関数を実行し、要素を 1 つの値に減らします。

const originalArray = [1, 2, 3, 4, 5];
const sum = originalArray.reduce((acc, curr) => acc + curr, 0);
// sum 现在为 15 (1 + 2 + 3 + 4 + 5)

push(): 新しいオブジェクトをオブジェクト配列に追加します

// 原始对象数组
let originalArray = [{
    
     id: 1, name: 'Alice' }, {
    
     id: 2, name: 'Bob' }];

// 新对象
const newObj = {
    
     id: 3, name: 'Charlie' };

// 添加新对象到原始对象数组
originalArray.push(newObj);
console.log(originalArray);

splice(): オブジェクト配列への要素の挿入、削除、または置換

// 在索引1处插入新对象
originalArray.splice(1, 0, {
    
     id: 4, name: 'David' });
console.log(originalArray);

// 删除索引为0的对象
originalArray.splice(0, 1);
console.log(originalArray);

// 替换索引为0的对象的属性
originalArray.splice(0, 1, {
    
     ...originalArray[0], name: 'Eve' });
console.log(originalArray);

Vue.set() および Vue.delete() オブジェクト配列内のプロパティを操作する

// 使用 Vue.set() 添加新属性到对象数组中的对象
Vue.set(originalArray[0], 'age', 25);
console.log(originalArray[0]);

// 使用 Vue.delete() 删除对象数组中的属性
Vue.delete(originalArray[1], 'name');
console.log(originalArray[1]);