javascript - 如何用js从数组中把各项值组成一个特定的词？

Question

var list = [    {        "name": "花",        "index": 10,        "len": 4,        "left": 150,        "bottom": 108    },    {        "name": "花",        "index": 0,        "len": 4,        "left": 150,        "bottom": 0    },    {        "name": "花",        "index": 8,        "len": 4,        "left": 950,        "bottom": 0    },    {        "name": "草",        "index": 14,        "len": 4,        "left": 550,        "bottom": 108    },    {        "name": "草",        "index": 15,        "len": 4,        "left": 650,        "bottom": 108    },    {        "name": "草",        "index": 15,        "len": 4,        "left": 650,        "bottom": 108    }];var aa = '花花草草';

vue中需要写一个通用的方法，当aa这个词跟list中各项的name值相等时，name置空，最后得到的list是

list = [    {        "name": "花",        "index": 10,        "len": 4,        "left": 150,        "bottom": 108    },    {        "name": "",        "index": 0,        "len": 4,        "left": 150,        "bottom": 0    },    {        "name": "",        "index": 8,        "len": 4,        "left": 950,        "bottom": 0    },    {        "name": "",        "index": 14,        "len": 4,        "left": 550,        "bottom": 108    },    {        "name": "",        "index": 15,        "len": 4,        "left": 650,        "bottom": 108    },    {        "name": "草",        "index": 15,        "len": 4,        "left": 650,        "bottom": 108    }];

就是把list中的name值连接起来跟aa值相等时置空的方法

Answer 1

思路：先判断aa是否在定义数组中，存在则进行相连组合，然后通过组合内容获取索引，然后把数据清空。

var list = [  {    name: '花',    index: 10,    len: 4,    left: 150,    bottom: 108,  },  {    name: '花',    index: 0,    len: 4,    left: 150,    bottom: 0,  },  {    name: '花',    index: 8,    len: 4,    left: 950,    bottom: 0,  },  {    name: '草',    index: 14,    len: 4,    left: 550,    bottom: 108,  },  {    name: '草',    index: 15,    len: 4,    left: 650,    bottom: 108,  },  {    name: '草',    index: 15,    len: 4,    left: 650,    bottom: 108,  },];list.map((el, index) => (el.index = index));var aa = '花花草草';const nameStr = list.map((el) => el.name).join('');if (nameStr.includes(aa)) {  const array = generateAdjacentCombinations(list, aa.length);  array.forEach((el) => {    const name = el.map((o) => o.name).join('');    if (aa.includes(name)) {      const indexArr = el.map((m) => m.index);      const newList = list.map((el) => {        return {          ...el,          name: indexArr.includes(el.index) ? '' : el.name,        };      });      newList.map((el) => delete el.index);      console.log(newList);    }  });}function generateAdjacentCombinations(list, groupSize) {  const combinations = [];  for (let i = 0; i <= list.length - groupSize; i++) {    const currentCombination = list.slice(i, i + groupSize);    combinations.push(currentCombination);  }  return combinations;}

Answer 2

let start = list.map(i => i.name).join('').indexOf(aa)if(start > -1){    let end = Math.min(start + aa.length, list.length)    for (let index = start; index < end; index++) {        list[index].name = ''    }}

Answer 3

你可以创建一个方法来遍历list数组，并且对于每一个对象，检查它的name值是否存在于aa字符串中。如果存在，则将其置空。下面是一个通用的方法来实现这个需求：

function emptyNamesIfMatch(list, targetString) {    // 创建一个 Set 来高效地检查 name 是否存在于 targetString 中    const namesInTarget = new Set(targetString.split(''));    return list.map(item => {        // 如果当前项的 name 在 targetString 中存在，则置空        if (namesInTarget.has(item.name)) {            item.name = '';        }        // 返回修改后的项        return item;    });}// 使用示例var list = [    // ... 省略部分数据];var aa = '花花草草';// 调用函数，并打印结果list = emptyNamesIfMatch(list, aa);console.log(list);

当你调用emptyNamesIfMatch(list, aa)函数时，它会返回一个新的数组，其中所有在aa字符串中出现的name值都被置空。需要注意的是，由于我们使用了map方法，它返回的是一个新的数组，并不会修改原始的list数组。如果你想要直接修改原数组，你可以使用forEach方法代替map，但请注意，在这种情况下，原数组会被修改，而函数本身不会返回任何值。

function emptyNamesIfMatchInPlace(list, targetString) {    const namesInTarget = new Set(targetString.split(''));    list.forEach(item => {        if (namesInTarget.has(item.name)) {            item.name = '';        }    });}// 使用示例var list = [    // ... 省略部分数据];var aa = '花花草草';// 调用函数，原数组会被修改emptyNamesIfMatchInPlace(list, aa);console.log(list);

在这个版本中，emptyNamesIfMatchInPlace函数直接修改了传入的list数组，而没有返回任何新数组。