JavaScript中如何从返回数组内提取对象的name属性值并存入变量

• 从浏览器捕获到的返回数组未展开状态如下：

>0: RectangularNode {children: Array(0), position: {…}, size: {…}, strokeWidth: 0, selected: true, …}

• 展开数组第一项后可见完整属性，其中目标属性name的值为"wstchieve"，其余属性包括节点尺寸、位置、id、选中状态等。
• 需求：通过JavaScript提取该数组内对象的name属性值，存储到指定变量中。

基础场景：数组仅包含1个目标节点 #

如果确定返回数组索引为0的项就是目标节点，直接通过数组索引+属性访问的方式取值即可：

// 替换为你实际存储捕获数组的变量名
const capturedNodes = /* 浏览器捕获到的原始数组 */
// 提取name属性存入变量
const nodeName = capturedNodes[0].name
console.log(nodeName) // 输出: wstchieve

容错写法（推荐） #

为了避免数组为空、目标项不存在导致的代码报错，建议使用可选链操作符做兼容处理：

const capturedNodes = /* 浏览器捕获到的原始数组 */
const nodeName = capturedNodes?.[0]?.name
// 若数组为空、0号元素无name属性时，nodeName值为undefined，不会阻断后续代码执行

扩展场景：数组包含多个节点 #

如果返回数组内有多个RectangularNode实例，可根据实际需求选择对应写法：

• 提取所有节点的name，组成新数组：

const allNodeNames = capturedNodes.map(node => node.name)

• 提取符合指定条件的节点name，比如提取选中状态（selected: true）的节点名称：

const selectedNodeName = capturedNodes.find(node => node.selected)?.name

内容的提问来源于stack exchange，提问作者Abhay Tomar