这篇废话文学我们主打数组合并!!!
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的影响