Vue.js中如何将数组转为对象并提取指定name属性值？

直接适配现有LocalStorage数据的代码修改 #

LocalStorage中存储的是数组格式的JSON字符串，JSON.parse()解析后得到的是数组而非单个对象，必须先提取数组里的第一个元素，再获取name属性：

let userData = localStorage.getItem('user-info');
// 解析数组并取第一个元素，可选链操作符避免数组为空时报错
let user = JSON.parse(userData)[0];
this.name = user?.name || '';

优化存储逻辑（后续直接存对象） #

如果想后续用你原本的代码直接获取name，可以在存储数据时直接存入单个对象而非数组：

// 定义用户对象
const userObj = {"id":"56b5","name":"Willy","email":"willy@test","password":"1234"};
// 将对象转为JSON字符串存入LocalStorage
localStorage.setItem('user-info', JSON.stringify(userObj));

// 之后就能用你原本的代码获取name
let user = localStorage.getItem('user-info');
this.name = JSON.parse(user).name;

问题原因说明 #

你原本的代码无法得到预期结果，是因为JSON.parse(user)返回的是数组，数组本身没有name属性，必须先通过索引（这里是[0]）拿到数组内部的用户对象，再读取其name属性。

内容的提问来源于stack exchange，提问作者Willy R. W.