js数组一些方法的使用，map()，find()，filter()，join()

原创已于 2025-01-07 12:48:58 修改 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2025-01-05 18:00:33 首次发布

数组map()方法，方法会创建一个新数组

fileList: [
        {
          name: "",
          uid: "",
          size: "",
          status: "",
          url: "",
        },
      ];
accidentImg: []

让accidentImg等于fileList，并且只取fileList中部分字段

this.accidentImg = fileList.map((item) => {
  return {
    uid: item.uid,
    name: item.name,
    url: item.url || "", // 初始时没有上传的文件可能没有 URL
  };
});

数组find方法，找到第一个满足条件的元素，并返回该元素的值，如果没有找到满足条件的元素则返回 undefined。

让this.accidentImg数组对象中的url等于response.url

const target = this.accidentImg.find((item) => item.uid === file.uid);
if (target) {
   target.url = response.url;
}

filter()方法，用于过滤数组中的元素，并返回一个新数组，其中包含满足特定条件的元素。‌ 该方法不会改变原始数组，而是创建一个新的数组。

从 accidentImg 中移除被删除的文件，file是被删除的

file: {
          name: "",
          uid: "",
          size: "",
          status: "",
          url: "",
        }

this.accidentImg = this.accidentImg.filter(
   (item) => item.uid !== file.uid
);

join()方法，join()将数组每个元素都转成字符串，join(",")将数组元素以逗号分割

将this.accidentImg数组对象改成字符串，只取数组对象中的url，并以逗号分隔

accidentImg: [
        {
          name: "",
          uid: "",
          url: "",
        },
      ];

this.formData.img = this.accidentImg.map((item) => item.url).join(",");

最终this.formData.img: "http://localhost/0aa03,http://localhost/0aa03"