js 匹配后台返回数据实现动态表头字段？

本质就是对列进行过滤，把有效的列选出来。如果每行数据都是规则的，包含所有列的，那只需要拿第一条数据出来作为条件过滤出列就好，如：

const columns = [
    { title: "海区", key: "area", },
    { title: "浪高(m)", key: "waveHeight", },
    { title: "水温(℃)", key: "waterTemperature", }
];

const data = [
    { area: "刁口", waterTemperature: "-0.4 " },
    { area: "黄河口", waterTemperature: "-0.1 " },
    { area: "广利港", waterTemperature: "-0.5 " },
    { area: "东营港", waterTemperature: "0.2 " },
    { area: "新户", waterTemperature: "-0.7 " },
    { area: "埕口", waterTemperature: "-0.4 " }
];


const columnSet = new Set(Object.keys(data[0]));
const validColumn = columns.filter(({ key }) => columnSet.has(key));
console.log(validColumn);

如果数据是不规则的，或者说，每行数据都只是把有效的属性列出来了，那要找所有列就需要遍历全部数据。

这种情况下就是在数据中每一行的 key 找出来，加到 columnSet 中去，可以用一个 flatMap 处理出来：

// const columnSet = new Set(Object.keys(data[0]));
const columnSet = new Set(data.flatMap(it => Object.keys(it)));