【vue】vue数组对象存入localstorage中
文章目录
-
- 正确方式
columns:[
{"key":0},
{"key":1},
{"key":2},
{"key":3},
{"key":4},
{"key":5},
{"key":6},
{"key":7},
{"key":8},
{"key":9},
{"key":10},
{"key":11},
{"key":12},
{"key":13},
{"key":14},
{"key":15},
{"key":16},
{"key":17},
{"key":18},
{"key":19},
{"key":20}
]
正确方式
columns:[]实际上实在data中return的对象中,所以可以先转成一个对象{columns:[]},再转成一个字符串
对象转字符串
字符串=JSON.strigify(对象)
字符串转对象
对象=JSON.parse(数组)
数组转字符串
toString() 将数组转换成一个字符串
toLocalString() 把数组转换成本地约定的字符串
join(”分割符“) 将数组元素连接起来以构建一个字符串
字符串转数组
1、split() 方法
常见的转换技术是split字符串方法,但这也是有问题的一种。通过使用空字符串作为split方法的分隔符,我们可以将字符串转换为字符数组。
const text = "abc"; const chars = text.split(''); console.log(chars); //['a', 'b', 'c']
2、扩展运算符
展开运算符 ( …) 允许在需要多个元素(如数组文字)的地方扩展诸如字符串之类的可迭代对象。这是将字符串扩展为字符数组的示例。正确处理采用两个代码单元的字符。
const text = "abc????"; const chars = [ ...text ]; console.log(chars); //["a", "b", "c", "????"]
3、解构赋值
解构赋值语法可以将数组或可迭代对象中的值解包为不同的变量。在解构数组或可迭代对象时,我们可以使用 rest 模式将其剩余部分提取到单个变量中。
const text = "abc????"; const [ ...chars ] = text; console.log(chars); //["a", "b", "c", "????"]
4、Array.from
Array.from辅助创建从阵列状或迭代的对象的新数组。字符串既可迭代又类似于数组,因此,可以成功地将其转换为字符数组。const text = "abc????"; const chars = Array.from(text); console.log(chars); //["a", "b", "c", "????"]
重点说明
该split方法可能是将字符串转换为字符数组的常用方法,但它不处理采用两个代码单元的字符。