FrontEnd——数组、字符串、JSON之间的转换和操作

简介

在开发过程中不可避免的涉及了数组、字符串、JSON之间的转换和操作（增删改查）。这里做一个小结把一些方法做适当的整理。

方案

1 插件或者说第三方库

1.1 flatted

https://github.com/WebReflection/flatted#flatted
安装npm i flatted
使用方法

// ESM
import {parse, stringify} from 'flatted';

// CJS
const {parse, stringify} = require('flatted');

const a = [{}];
a[0].a = a;
a.push(a);

stringify(a); // [["1","0"],{"a":"0"}]

1.2 circular-json(不推荐)

同一个作者已说明不再维护。因为我之前的一个angular项目用的这个，所以也记录一下。
安装：npm install --save circular-json
使用方法如下：

var object = {};
object.arr = [
  object, object
];
object.arr.push(object.arr);
object.obj = object;

var serialized = CircularJSON.stringify(object);
// '{"arr":["~","~","~arr"],"obj":"~"}'
// NOTE: CircularJSON DOES NOT parse JS
// it handles receiver and reviver callbacks

var unserialized = CircularJSON.parse(serialized);
// { arr: [ [Circular], [Circular] ],
// obj: [Circular] }

unserialized.obj === unserialized;
unserialized.arr[0] === unserialized;
unserialized.arr.pop() === unserialized.arr;

1.3 qs参数序列化

Vue中qs插件的使用
axios请求数据,传递参数要将参数序列化。（post，put请求）
qs.parse()是将URL解析成对象的形式
qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

let formData = qs.stringify(data);
return request({
    url: url,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'put',
    data: formData
})

2 原生的方法

2.1 JSON.stringfy()

对象或者数组/对象数组转字符串。（JSON转字符串）
应用场景：post请求的时候要求的数据类型为string，不能以数组的方式直接上传时需要转换成字符串。

var obj= {"name":"iphone","price":666};
var arr = [1,2,3, { a : 1 } ];
var objJson = JSON.stringify(obj);  
var arrJson = JSON.stringify(arr);
console.log(objJson,arrJson );

let contentString = JSON.stringify(data.content);
data.content = contentString;
let formData = qs.stringify(data);
return request({
    url: url,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'put',
    data: formData
})

2.2 JSON.parse

字符串转对象或者数组/对象数组，是上一种情况的解译。（字符串转JSON）
let treeData = JSON.parse(response.data.content);

var arrStr = '[1,2,3,{"a":1}]';
var arr = JSON.parse( arrStr);
var objStr= '{"bar":"property","baz":3}';
var obj= JSON.parse(objStr);  

3 相关操作

3.1 delete和splice区别

在使用el-tree做删除节点的时候，发现用delete不生效，最后用slice解决问题。
var textArr = [‘a’,‘b’,‘b’,‘d’];
这时我想删除这个数组中的b元素：
方法一：delete 删除数组
delete textArr[1] 结果为： [“a”,undefined,“b”,“d”]
注释：该方法数组的大小不变化
只是被删除的元素变成了 undefined 其他的元素的键值还是不变。
方法二：splice删除数组
splice(index,len,[item])
注释：该方法会改变原始数组。
index:数组开始下标
len: 替换/删除的长度 删除长度下坐标发生了改变
item:替换的值，删除操作的话 item为空
textArr.splice(1,1); 结果为：[“a”,“b”,“d”] 直接删除了数组 改变了数组的值。

3.2 对象数组中，删除指定的元素

mozilla社区Array文档
如果确定要删除的值只有一个,除了遍历查找删除之后,还可以使用some方法或者findIndex方法
方法1 使用findIndex
注意: findIndex只找到第一个符合条件的下标,找不到就返回 -1;
arr.findIndex(item => item.id === id) 找到对应的数组元素
结合上述的方法使用如下

//item 只是参数可以写成 i 或者 v 都可以 ， 
//后面的额id是数组的id，是不能随便写的，如果你数组里面写的是id，这里就写id，如果数组里面写的是num，那这里就写num ， 
//=== 后面的id是你想要删除的元素的id号，同理，如果你数组里面写的是num，那这里就是num号 ， 
//1是你要删除1个元素的意思
arr.splice(arr.findIndex(item => item.id === id), 1)

方法2 使用方法some
注意: some方法找到符合条件的值手动返回true之后,不再接着遍历(如果将some替换成forEach,return是不起作用的);

var arr = [1, 2, 3, 4, 5];
arr.some((item, i) => {
  if (item == 2) {
    arr.splice(i, 1);
    return true
  }
})
console.log(`删除之后的数组:${arr}`);

3.3 删除数组中所有指定值

切记：不要用arr.forEach循环来删除，只适合于只有一个重复元素的情况

// 输出的结果中,只删除了一个3,这是因为splice方法删除数组一个指定值之后,数组发生改变,后续的值向前挪动一个位置,在接下来的循环遍历中,后面的3的下标由原本的5变成了4,这就导致删除操作之后,接着找下标为5的值的时候,找不到后面的值3了,而从值为4的元素接着遍历,当要删除的值不确实是1个的时候,这种遍历删除是危险的方式;
var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
	console.log(`原始数组:${arr}`);
	arr.forEach((item, i) => {
		if (item == 3) {
			arr.splice(i, 1); // 从下标 i 开始, 删除 1 个元素
		}
	})
console.log(`删除之后的数组:${arr}`);

方法1 如果使用splice方法循环遍历的方式删除指定值,一种保险的方式是逆向遍历

var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
console.log(`原始数组:${arr}`);
for (let i = arr.length - 1; i > -1; i--) {
  if (arr[i] == 3) {
    arr.splice(i, 1);
  }
}
console.log(`删除之后的数组:${arr}`);

方法2 使用filter方法过滤掉指定值（推荐）
注意: filter方法不改变原数组,只是返回一个新数组;

var arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
arr = arr.filter(item => item != 3); // 过滤掉值不为3,返回新数组
console.log(`filter方法操作之后的数组:${arr}`);

参考文章：https://www.jb51.net/article/188062.htm

3.4 js执行js字符串函数的方法

var jsText = 'return function(){alert(1+1)}'
var jscode = new Function(jsText)();
jscode();

3.5 遍历对象、数组总结

遍历对象总结
1 使用Object.keys()遍历
返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {'0':'a','1':'b','2':'c'};

Object.keys(obj).forEach(function(key){

     console.log(key,obj[key]);

});

2 使用for…in…遍历
循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).

var obj = {'0':'a','1':'b','2':'c'};

for(var i in obj) {
     console.log(i,":",obj[i]);
}

3 使用Object.getOwnPropertyNames(obj)遍历
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){

    console.log(key,obj[key]);

});

4 使用Reflect.ownKeys(obj)遍历
返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){
console.log(key,obj[key]);
});

遍历数组总结
1 使用forEach遍历

var arr=[1,2,3,4];
arr.forEach(function(val, index) {
console.log(val, index);
});

2 使用for…in…遍历

var arr=["张三","李四","王五","赵六"];
for (var i in arr){
	console.log(i,":",arr[i]);
}

3 使用for-of遍历
不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象.
也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历.

var arr=["张三","李四","王五","赵六"];
for (var value of arr){
    console.log(value);
}

3.6 es6判断数组是否包含某个元素

 let layerTypeArr = ["MapServer", "ImageServer", "WMTS", "WMS", "WFS"];
 if (layerTypeArr.includes("WMS")) {
    //执行方法
  }

先写到这里，后续有其他的骚操作，再做记录。