js 一个由有id,name属性的对象组成的数组,创建一个方法，传入id,返回name

你可以使用 JavaScript 中的 find 方法来实现这个需求。具体做法是：

1. 调用数组的 find 方法，传入一个匿名函数作为参数。
2. 在匿名函数中判断当前元素的 id 是否等于传入的 id。
3. 如果相等，则返回当前元素的 name 属性。
4. 如果没找到，则返回 null 或者其他你认为合适的默认值。

下面是一个示例代码：

const data = [
  { id: '1', name: 'foo' },
  { id: '2', name: 'bar' },
  { id: '3', name: 'baz' },
];

function getNameById(id) {
  const item = data.find((item) => item.id === id);
  return item ? item.name : null;
}

console.log(getNameById('2')); // Output: "bar"
console.log(getNameById('4')); // Output: null

在这个示例中，我们定义了一个 getNameById 函数，它接受一个 id 参数，并返回对应的 name 属性。在函数内部，我们使用 find 方法查找对应的元素，如果找到则返回 name 属性，否则返回 null。

相关问题

js如何用es6的方法查找数组[ { id:1, name:'cui' } ]中id为1的对象并返回true或者false

可以使用`Array.prototype.some()`方法来查找数组中是否存在满足指定条件的元素。具体做法是，在`some()`方法中传入一个回调函数，该回调函数接收一个元素作为参数，返回一个布尔值，表示该元素是否满足指定条件。回调函数中可以使用对象解构来获取元素的`id`属性，并与指定的值进行比较。代码示例如下：

const arr = [{id: 1, name: 'cui'}];
const hasIdOne = arr.some(({id}) => id === 1);
console.log(hasIdOne); // true

上述代码中，`some()`方法返回一个布尔值，表示数组中是否存在满足条件的元素。`({id}) => id === 1`是一个箭头函数，它使用对象解构来获取元素的`id`属性，并与指定的值进行比较。如果某个元素的`id`属性等于1，则该元素满足条件，返回`true`，`some()`方法会立即停止遍历，返回结果为`true`。如果数组中没有满足条件的元素，则返回`false`。

elementui table 使用插槽 将数组中对象的id 转为显示name

可以使用`scoped slot`和`$attrs`来实现将数组中对象的id转为显示name的功能。

首先，在定义表格列时，需要将显示id的列定义为一个 scoped slot，例如：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="城市">
      <template slot-scope="scope">
        {{ getCityName(scope.row.cityId) }}
      </template>
    </el-table-column>
  </el-table>
</template>

在这个例子中，第二列使用了 scoped slot，并且使用 `getCityName` 方法将 cityId 转为了对应的城市名称。

接下来，需要在组件中定义 `getCityName` 方法，例如：

export default {
  data() {
    return {
      cities: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' },
        { id: 3, name: '广州' },
        { id: 4, name: '深圳' },
      ],
      tableData: [
        { name: '张三', cityId: 1 },
        { name: '李四', cityId: 2 },
        { name: '王五', cityId: 3 },
        { name: '赵六', cityId: 4 },
      ],
    };
  },
  methods: {
    getCityName(cityId) {
      const city = this.cities.find((c) => c.id === cityId);
      return city ? city.name : '';
    },
  },
};

在这个例子中，组件的 data 中定义了一个 cities 数组，用于存储城市 id 和名称的对应关系。在 `getCityName` 方法中，根据传入的 cityId 参数，使用 Array.find 方法查找对应的城市对象，并返回城市名称。

最后，需要将 cities 数组传递给组件，可以使用 `$attrs` 来实现：

<template>
  <el-table :data="tableData" style="width: 100%" :attrs="attrs">
    <!-- ... -->
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      cities: [
        { id: 1, name: '北京' },
        { id: 2, name: '上海' },
        { id: 3, name: '广州' },
        { id: 4, name: '深圳' },
      ],
      tableData: [
        { name: '张三', cityId: 1 },
        { name: '李四', cityId: 2 },
        { name: '王五', cityId: 3 },
        { name: '赵六', cityId: 4 },
      ],
    };
  },
  methods: {
    getCityName(cityId) {
      const city = this.cities.find((c) => c.id === cityId);
      return city ? city.name : '';
    },
  },
  computed: {
    attrs() {
      return {
        cities: this.cities,
      };
    },
  },
};
</script>

在这个例子中，将 cities 数组通过计算属性的方式传递给了表格组件。在表格组件中，可以通过 `$attrs` 访问到这个数据，例如在 scoped slot 中使用：

<template>
  <el-table :data="tableData" style="width: 100%" :attrs="attrs">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="城市">
      <template slot-scope="scope">
        {{ $attrs.cities.find((city) => city.id === scope.row.cityId)?.name }}
      </template>
    </el-table-column>
  </el-table>
</template>

在这个例子中，使用了 `$attrs.cities.find` 方法来查找对应的城市对象，并使用 `?.name` 来获取城市名称。需要注意的是，这里使用了可选链操作符，需要确保代码运行的环境支持这个特性。如果不支持可选链操作符，可以使用类似 `|| ''` 的方式来避免异常。