Array - daniel-qa/Vue GitHub Wiki

Array

Array 賦值

noticeForm.data.img = FakeData.value.image ? [FakeData.value.image] : [];

以確保 noticeForm.data.img 一定是陣列，即使 FakeData.value.image 是 null 或 undefined，也能避免錯誤。

some()

检查字符串数组中是否存在特定字符串

const fruits = ['apple', 'banana', 'cherry'];

const hasBanana = fruits.some((fruit) => fruit === 'banana');

console.log(hasBanana); // true，因为数组中存在 'banana'

检查对象数组中是否有某个条件

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' },
];

const hasUserWithId2 = users.some((user) => user.id === 2);

console.log(hasUserWithId2); // true，因为有用户的 id 是 2

直接把值用 push 新增

const geo =[];

// 動態新增資料
listGeo.push({
  countryId: item.countryId,
  provinceId: null,
  cityId: item.cityId || null,
  type: item.type,
});

陣列的賦值

const listArea = [];   // 宣告空陣列
listArea.push(id);  //新增一個 id 字串

在原有資料加入 key value

直接在 item 上新增键值对

 item["type"] = "1";

與 Item 同層，充增鍵值

// 使用中介，增加欄位值 (key-value) 至 Item
const newItem = { item, "type": "1" };

// 将新对象推送到 column3Items
column3Items.value.push(newItem);

資料類型

由 Object {} 包起來的物件; 裡面包含複雜資料類型; 包含 Object, Array

[] 陣陣;代表裡面有許多相同類型的資料

{} 物件;代表裡面是多種複雜的集合

// 定義發送請求的參數
const requestData = ref({
    target: {
        area: ["areaid"],
        geo: [
            {
                countryId: "TW",
                provinceId: null,
                cityId: "30",
            },
        ],
        unit: ["1", "2"],
        school: ["habook", "hbgl"],
        tmid: ["1522758684", "1595321354"],
    },    
});

給值

// 添加 target - area（假设 area 是预定义或动态获取的）
requestData.value.target = {
	area: selectedArea, // 确保 selectedArea 包含选中的区域值
	geo: selectedGeo || null,  // 示例：如果需要其他字段
	unit: selectedUnit || null,
	school: selectedSchool || null,
	tmid: selectedTmid || null,
};

// 僅設定 area
requestData.value.target = {
	area: selectedArea, // 確保 selectedArea 已正確設置值
};

上列等同於下面的寫法

requestData.value.target.area =selectedArea;

宣告結構的陣列

初始化資料：只有在需要特定結構時才加入空資料，否則建議初始化為空陣列。

const action = ref([
    {
        label: "",
        url: "",
    },
]);

這種宣告結構的方式，會多一筆空紀錄。

範例

// 定义按键数组
const action = ref([
  {
    label: "hiteachCC使用說明",
    url: "https://www.youtube.com",
  },
  {
    label: "官方網站",
    url: "https://www.example.com",
  },
]);

// 新增按鈕
const addAction = (label, url) => {
  if (label && url) {
    action.value.push({ label, url });
  } else {
    console.error("請提供按鈕名稱和網址！");
  }
};

// 刪除指定的按鈕
const removeAction = (index) => {
  if (index >= 0 && index < action.value.length) {
    action.value.splice(index, 1); // 根据索引删除
  } else {
    console.error("無效的索引！");
  }
};

// 刪除最後一個按鈕
const removeLastAction = () => {
  if (action.value.length > 0) {
    action.value.pop(); // 删除最后一个元素
  } else {
    console.error("沒有按鈕可以刪除！");
  }
};

// 示例调用
addAction("新按钮", "https://www.newlink.com"); // 增加一个新的按钮
removeAction(1); // 删除索引为1的按钮
removeLastAction(); // 删除最后一个按钮

push

    const addSchool = (school) => {
      // 添加新的学校
      items.value.push(school.name);
      ElMessage({
        message: `已加入 ${school.name}`,
        type: "success",
      });
    };

增加多個數值

items.value.push({ name: school.name, count: school.count });

concat 方法

concat 是数组的方法，用于将一个或多个数组或值合并为一个新数组。它不会改变原数组，而是返回一个新的数组。

语法

newArray = array1.concat(array2, array3, ..., value1, value2, ...);

array1：要合并的原始数组。 array2, array3, ..., value1, value2：要连接到原数组的数组或值。

ex1:

const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];

const result = array1.concat(array2, array3);

console.log(result); // 输出 [1, 2, 3, 4, 5, 6]

ex2:

const array1 = [1, 2];
const result = array1.concat(3, [4, 5]);

console.log(result); // 输出 [1, 2, 3, 4, 5]

reduce 方法

filter() 方法

filter() 方法会返回一个新的数组，而不会修改原数组。

filter() 方法期望回调函数返回一个布尔值。如果你不使用 return，回调函数默认返回 undefined，这会导致 filter() 方法无法正确筛选元素。

如果没有 return，回调函数不会返回任何明确的布尔值，filter() 无法正确判断该元素是否满足条件，因此返回一个空数组。

所以，return 是必要的，用来明确返回一个布尔值，以便 filter() 判断元素是否符合条件。

// 过滤学校列表
const filteredItems = currentSubItems.filter((item) => {
    return  item.name.toLowerCase().includes(query); // 判断 name 是否包含关键字
});

splice() 方法

splice() 用于添加、删除或替换数组中的元素，会直接修改原数组。

語法

array.splice(start, deleteCount, item1, item2, ...)

start：

起始索引，从哪里开始操作。如果为负值，从数组末尾开始计算。

deleteCount：

要删除的元素个数。如果为 0，则不会删除任何元素。

item1, item2, ...：

要插入的新元素（可选）。

如果没有提供这些参数，splice 只会删除元素。

items.value.splice(index, 1)

index 是数组中要移除的元素的索引。

1 表示只移除一个元素。

这个方法会直接修改原数组。

1 . 删除元素

const arr = [1, 2, 3, 4];
arr.splice(1, 2); // 从索引 1 开始删除 2 个元素
console.log(arr); // [1, 4]

2 . 插入元素

const arr = [1, 4];
arr.splice(1, 0, 2, 3); // 从索引 1 开始，不删除元素，插入 2 和 3
console.log(arr); // [1, 2, 3, 4]

3 . 替换元素

const arr = [1, 2, 4];
arr.splice(2, 1, 3); // 从索引 2 开始删除 1 个元素，并插入 3
console.log(arr); // [1, 2, 3]

slice() 方法

slice() 用于提取数组的一部分，返回一个新的数组，不会改变原数组。