【js】js数组对象字符串的相互转化

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数组存入localstorage中,本来想数组转字符串对象在转字符串可是这样实现不了

正确方式

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方法可能是将字符串转换为字符数组的常用方法,但它不处理采用两个代码单元的字符。

对象转数组

方式一:Object.values
Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

let arr = Object.values(obj); //对象转化为数组
ps:如果只需要返回键作为数组,可以使用Object.keys()的方式,所以结合Map,也可以实现:

let arr=Object.keys(obj).map(function(i){
    
    return obj[i]}); //对象转化为数组

方式二:循环
可以直接利用循环,如for in或者forEach()等:

var arr = []; //定义数组
for (var i in obj) {
    
    
    arr.push(obj[i]); 
}

方式三:Array.from
Array.from() 方法对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

var arr = Array.from(Object.values(obj),x=>x);

猜你喜欢

转载自blog.csdn.net/liqiannan8023/article/details/130269784