JS数组合并、数组对象合并、json类型接口数组合并等问题解析、echarts散点数据引入接口变化字段

这篇废话文学我们主打数组合并!!!

1、实例

 $.ajax({
    
    
        url: baseurl+'/big/screen/deviceName',
        type: 'get',
        dataType: 'json',
        cache : false,  // 禁用缓存
        async : false,  // 同步   这里很重要 百度下同步异步吧
        success: function (data){
    
    
            // 拿到接口数组所有的 projectName
            dataProjectName = data.data.map(x => {
    
    return x.projectName})
            // 同理拿dataProjectId 能不var就不var 直接上方便全局引用
            dataProjectId = data.data.map(y => {
    
    return y.projectId})
            // 经纬度 典型的数组内嵌数组案例 eg:{name: '木兰县', value: [128.836131,45.839536]},...
            datalongitude = data.data.map(z1 => {
    
    return z1.longitude})   
            datalatitude = data.data.map(z2 => {
    
    return z2.latitude})

	// -------------------↓↓↓↓↓↓↓↓↓↓↓↓处理方法如下↓↓↓↓↓↓↓↓↓↓↓↓-------------------
            // 处理项目名数组 newDataProjectName
            var newDataProjectName = [];
            newDataProjectName = dataProjectName.map(item => ({
    
    name:item}))
            // 处理经纬度数组 newDataLocation
            var dataLocation = [];
            for(var i=0; i<data.data.length; i++){
    
    
                dataLocation.push([data.data[i].longitude, data.data[i].latitude])
            }
            var newDataLocation = [];
            newDataLocation = dataLocation.map(item => ({
    
    value:item}))
            // 合成新的数组 方便{name: '', value: ''}赋值
            newDataAllGOGOGO = [];
            for(var i=0; i<data.data.length; i++){
    
    
                newDataAllGOGOGO.push($.extend(newDataProjectName[i], newDataLocation[i]))
            }
        },
    })

在这里插入图片描述

打印出来看一看——+++——( •̀ .̫ •́ )✧

在这里插入图片描述

变化展示(对应上述ajax代码中的字段)

在这里插入图片描述

2、方法

①、数组
1.1 concat 方法

var a=[1,2,3],b=[4,5,6];
var c=a.concat(b);
console.log(c);// 1,2,3,4,5,6
console.log(a);// 1,2,3  不改变本身

1.2 循环遍历

var a=[0,1];
var b=[2,3,4];
 
for(var i=0;i<b.length;i++){
    
    
      a.push(b[i]) 
}
console.log(a);//[0,1,2,3,4]

1.3 apply

// ES5 的写法
var a = [0, 1, 2];
var b = [3, 4, 5];
Array.prototype.push.apply(a, b);
或者
a.push.apply(a,b)
//console.log(a);//[0,1,2,3,4,5]

1.4 ES6写法——扩展运算

// ES6 的写法 
var a = [0, 1, 2];
var b = [3, 4, 5];
a.push(...b); 
console.log(a)//[0,1,2,3,4,5]
// 或
var a = [0, 1, 2];
var b = [3, 4, 5];
var c=[...a, ...b]
console.log(c)//[0,1,2,3,4,5]

1.5 ES6写法——使用map()

var arr1 = [1, 2, 3];
var arr2 = ["a","b","c","d","e","f"];
arr1.map(item=>{
    
    
arr2.push(item) 
});
console.log(arr2) // [1, 2, 3, "a", "b", "c", "d", "e", "f"]

②、对象
2.1 $.extend()

var obj1= {
    
    'a': 1};
var obj2= {
    
    'b': 1};
var c = $.extend(obj1, obj2);
console.log(obj1); // {a: 1, b: 1}  obj1已被修改
//或者 <br>var obj3 = $.extend({}, obj1, obj2) <br>console.log(obj3); //{a: 1, b: 1} 不会改变obj1,obj2

2.2 遍历赋值

var obj1={
    
    'a':1};
var obj2={
    
    'b':2,'c':3};
for(var key in obj2){
    
    
     if(obj2.hasOwnProperty(key)===true){
    
    //此处hasOwnProperty是判断自有属性,用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问会避免原型对象扩展带来的干扰
           obj1[key]=obj2[key];
} 
}
console.log(obj1);//{'a':1,'b':2,'c':3};

2.3 Obj.assign()

//a. 复制一个对象<br>var obj = { a: 1 ,b:2};
var copyObj = Object.assign({
    
    }, obj);
console.log(copyObj); // { a: 1,b:2 }<br><br>//b.合并多个对象
var o1 = {
    
     a: 1 };
var o2 = {
    
     b: 2 };
var o3 = {
    
     c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 且目标对象自身也会改变。

2.4 对象的深拷贝和浅拷贝
2.4.1 浅拷贝

var obj1={
    
    'a':1};
var obj2={
    
    'b':{
    
    'b1':22,'b2':33}};
$.extend(obj1, obj2);   //obj1拷贝了obj2的属性
console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1)  // 22
obj2.b.b1=44;   //obj2重新赋值
console.log(obj1.b.b1)  // 44  obj1.b仅拷贝了对象的指引,所以受原obj2的影响

2.4.2 深拷贝

var obj1={
    
    'a':1};
var obj2={
    
    'b':{
    
    'b1':22,'b2':33}};
$.extend(true,obj1, obj2);   //第一个参数设为true表示深复制
console.log(obj1)  // {'a':1,'b'{'b1':22,'b2':33}}
console.log(obj1.b.b1)  // 22
obj2.b.b1=44;   //obj2重新赋值
console.log(obj1.b.b1)  // 22 obj1拷贝了obj2的所有属性以及值,并不受obj2的影响

猜你喜欢

转载自blog.csdn.net/Start_Simple/article/details/128564238
今日推荐