js、jq数组操作

---

一、判断数组中是否包含另一个数组

1. filter与indexOf结合使用

提示：这里可以添加本文要记录的大概内容：

arr1 = [1,2,3]
arr2 = [1,3,2,4]
arr3 = arr1.filter(function(val){
    return arr2.indexOf(val)>-1
})
arr3 =  arr1.filter((val)=>{
    return arr2.indexOf(val)>-1
})
if(arr1.length === arr3.length){
    // true：包含
}

2. 判断两个数组是否有交集

// 判断两个数组是否有交集
arr1 = [1,2,3]
arr2 = [1,3,2,4]
arr3 = _.intersection(arr1,arr2)
if(arr1.length === arr3.length){
    // true：包含
}

3. includes

let a = [1, 2, 3, 4, 5, 6, 7, 8];
let b = [1, 2];
let c = [3, 9];
function includes(arr1, arr2) {
  return arr2.every(val => arr1.includes(val));
}
console.log(includes(a, b));  //true
console.log(includes(a, c));  //false

---

二、删除数组中某一项

Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};
var emp = ['abs','dsf','sdf','fd']
emp.remove('fd');

---

三、获取数组最大值、最小值

$(function() {
  //JS快速获取数组的最大值和最小值
  var a = [1, 2, 3, 5];
  document.write("最大值为：" + Math.max.apply(null, a) + "
  ");
  document.write("最小值为：" + Math.min.apply(null, a) + "
  ");
  //多维数组
  var a = [1, 2, 3, [5, 6],
    [1, 4, 8]
  ];

  var ta = a.join(",").split(","); //转化为一维数组
  document.write("Math.max最大值为：" + Math.max.apply(null, ta) + "
  ");
  document.write("Math.min最小值为：" + Math.min.apply(null, ta) + "
  ");
  $('#maxDiv').html(Math.max.apply(null, ta));
})

---

四、数组拼接

1. 使用for循环

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];
for(var i=0; i<arr2.length; i++){
     arr.push(arr2[i])
}
console.log(arr); // ['tom', 'jerry', 1, 2]

2. concat()

注意concat()生成一个新数组

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];
var newArr = arr.concat(arr2);
console.log(newArr); // ["tom", "jerry", 1, 2]

3. 使用apply劫持数组的push方法

推荐，apply具体使用方法参考MDN

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];
arr.push.apply(arr, arr2);
console.log(arr) // ["tom", "jerry", 1, 2]

4. 使用es6中的 ‘点语法’ 扩展运算符（推荐）

var arr = ['tom', 'jerry'];
var arr2 = [1, 2];
arr.push(...arr2);
console.log(arr) // ["tom", "jerry", 1, 2]

---

五、获取数组中各个元素的数量

1. for循环

var arr = [1,2,1];
var map = {};
for(var i = 0; i < arr.length; i++){
	var ai = arr[i];
	if(!map[ai]){
		map[ai] = 1;
	}else{
		map[ai]++;
	}
}
console.log(map); //{1: 2, 2: 1}

2. reduce

function statisticalFieldNumber(arr) {
	return arr.reduce(function (prev, next) {
		prev[next] = (prev[next] + 1) || 1;
		return prev;
	}, {});
}
var arr = ["apple","orange","apple","orange","pear","orange","yellow"];
console.log(statisticalFieldNumber(arr));  //{apple: 2, orange: 3, pear: 1, yellow: 1}

---

六、获取数组最后一项

1. pop()

var arr = new Array("js","JavaScript","jQuery"); 
var end = arr.pop() 
console.log(end);//jQuery 
console.log(arr);//["js", "JavaScript"]

2. length-1

var arr = new Array("js","JavaScript","jQuery"); 
var end = arr[arr.length-1] 
console.log(end);//jQuery

3. slice(-1)

var arr = new Array("js","JavaScript","jQuery"); 
var end = arr.slice(-1); 
console.log(end);//["jQuery"]

---

七、数组合并

data=[ 
    {name: "安置地上年度在职人员人均工资", firstLetter: "A"}, 
    {name: "八级年增资", firstLetter: "B"}, 
    {name: "八级生活补贴", firstLetter: "B"}
]
合并为
data=[
    {label: "A", name: ["安置地上年度在职人员人均工资"]},
    {label: "B",name: ["八级年增资","八级生活补贴"]}
]

// 处理获取到的数据
changeDataList (data) {
  var initArray = []
  data.forEach(item => {
    var param = {
      label: '',
      name: [],
    }
    param.label = item.firstLetter
    initArray.push(param)
  })
  var newInitArray = this.deteleObject(initArray) // 数组去重
  newInitArray.forEach(list => {
    data.forEach(item => {
      if (list.label === item.firstLetter) {
        list.name.push(item.name)
      }
    })
  })
  return newInitArray
},

---

八、数组去重

1. deteleObject 方法

export function deteleObject(obj) {
  var uniques = [];
  var stringify = {};
  for (var i = 0; i < obj.length; i++) {
    var keys = Object.keys(obj[i]);
    keys.sort(function(a, b) {
      return (Number(a) - Number(b));
    });
    var str = '';
    for (var j = 0; j < keys.length; j++) {
      str += JSON.stringify(keys[j]);
      str += JSON.stringify(obj[i][keys[j]]);
    }
    if (!stringify.hasOwnProperty(str)) {
      uniques.push(obj[i]);
      stringify[str] = true;
    }
  }
  uniques = uniques;
  return uniques;
}

2. $.unique 直接去重

var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);
$.unique(yearArray);
console.log(yearArray);//2009,2010

3. $.unique 排序去重

var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010);  
$.unique(yearArray<strong>.sort()</strong>);  
alert(yearArray);//2009,2010  

---

九、数组拆分

test相同的合并

var a = [
  {name: '222', id: 1, test: '啊啊啊'},
  {name: '44123', id: 5, test: '啊啊啊'},
  {name: '54', id: 1, test: '笑嘻嘻'},
  {name: '45', id: 5, test: '啊啊啊'},
  {name: '431', id: 1, test: '水电费'},
  {name: '62', id: 4, test: '阿萨德'},
  {name: '222', id: 1, test: '啊啊啊'},
  {name: '54', id: 4, test: '的的撒'},
  {name: '76', id: 1, test: '爱迪生'},
];
let result = a.reduce(function (initArray, item, xindex, array) {
  //initArray 初始值 或者是上一次调用返回的值
  //item 数组中当前被处理的元素
  //xindex 当前元素的下标
  //array 被reduce的数组  即上面代码中的数组a
  let index = item.test;
  if (initArray[index]) {
    initArray[index].push(item)
  } else {
    initArray[index] = [item]
  }
  return initArray
}, []);
console.log(result)

---

十、对象数组进行排序

1. 升序

function compare(property) {
  return (firstobj, secondobj) => {
    const firstValue = firstobj[property];
    const secondValue = secondobj[property];
    return firstValue - secondValue ; //升序
  };
}

2. 降序

function compare(property) {
  return (firstobj, secondobj) => {
    const firstValue = firstobj[property];
    const secondValue = secondobj[property];
    return secondValue - firstValue; //降序
  };
}

3. 使用

let arr = [{id:1},{id:2}];
arr = arr.sort(compare("id"));

升序
dataList = dataList.sort(function (a, b) {
  return a.value - b.value
})
降序
dataList = dataList.sort(function (a, b) {
  return b.value - a.value
})

---

十一、jquery清空数组中的空值

var aa = ['12', '34', '', '423', ' ']
console.log($.grep(aa, function (n) {
  return $.trim(n).length > 0
}))
var aaa = aa.filter(item => $.trim(item).length > 0)
console.log(aaa)

var aaa = [{name:'111'},{name:''}]
var aaa =aaa.filter(item => $.trim(item.name).length > 0)

var arr=[
  { name:'黄金', weight:'', number:'' },
  { name:'白银', weight:'', number:'' },
  { name:'翡翠', weight:'', number:''}
]
var filter_res = arr.filter(item => item.weight != '' && item.number != '')
console.log(filter_res.length > 0 ? '通过': '不通过')

---

十二、获取的数组包含 ob: Observer

var data = [116.486409, 39.991489, __ob__: Observer]

var b = JSON.parse(JSON.stringify(data))
console.log(b) // [116.486409, 39.991489]

var data = {'value':116, 'value':39, __ob__: Observer}
var b = JSON.stringify(data)

---

十三、判断数组是否包含某个值

judgeFamily (value) {
  //是否包含该元素 0 4 5
  if ((value.indexOf(0) > -1) || (value.indexOf(4) > -1) || (value.indexOf(5) > -1)) {//则包含该元素 0 4 5 
    this.isSoldier = true
  } else {
    this.isSoldier = false
  }
  //是否包含该元素 1 2 3
  if ((value.indexOf(1) > -1) || (value.indexOf(2) > -1) || (value.indexOf(3) > -1)) {
    this.isFamilies = true
  } else {
    this.isFamilies = false
  }
},

---

十四、判断两个数组属性是否相同

for (var i in Object.keys(data.data)) {
  for (var j in Object.keys(this.enterInfo)) {
    if (Object.keys(data.data)[i] === Object.keys(this.enterInfo)[j]) {
      this.enterInfo[Object.keys(this.enterInfo)[j]] = Object.values(data.data)[i]
    } else {
      // console.log(Object.keys(data.data)[i],Object.keys(this.enterInfo)[j])
    }
  }
}

---

十五、删除两个数组中相同对象

1. splice

let arr1 = [{id:'1',name:'json'},{id:'2',name:'book'} ] //选中数据
let arr2 = [{id:'1',name:'json',age:'15'},{id:'2',name:'book',age:'16'},{id:'3',name:'ani',age:'17'}] //所有数据
for (var i=0; i<arr2.length; i++) {
  for (var j=0; j<arr1.length; j++) {
    if (arr2[i].id == arr1[j].id) {
      arr2.splice(i, 1);
    }
  }
}

2. $.grep

// 已使用
this.opened.forEach((item)=>{
  nameArr.forEach((name)=>{
    if(item === name){
      console.log(item,name)
      // this.opened.splice($.inArray(item,this.opened), 1);
      this.opened = $.grep(this.opened, function(value) {
        return value != item;
      });
    }
  })
})

---

十六、JS深度判断两个数组对象字段相同

1. 判断此对象是否是Object类型

/**
* 判断此对象是否是Object类型
* @param {Object} obj
*/
function  isObject(obj){
  return Object.prototype.toString.call(obj)==='[object Object]';
};

2. 判断此类型是否是Array类型

/**
* 判断此类型是否是Array类型
* @param {Array} arr
*/
function isArray(arr){
  return Object.prototype.toString.call(arr)==='[object Array]';
};

3. 深度比较两个对象是否相同

/**
*  深度比较两个对象是否相同
* @param {Object} oldData
* @param {Object} newData
*/
function equalsObj(oldData,newData){
  // 类型为基本类型时,如果相同,则返回true
  if(oldData === newData) return true;
  if(isObject(oldData)&&isObject(newData)&&Object.keys(oldData).length === Object.keys(newData).length){
    // 类型为对象并且元素个数相同

    // 遍历所有对象中所有属性,判断元素是否相同
    for (const key in oldData) {
      if (oldData.hasOwnProperty(key)) {
        if(!equalsObj(oldData[key],newData[key]))
        // 对象中具有不相同属性 返回false
          return false;
      }
    }
  }else if(isArray(oldData)&&isArray(oldData)&&oldData.length===newData.length){
    // 类型为数组并且数组长度相同

    for (let i = 0,length=oldData.length; i <length; i++) {
      if(!equalsObj(oldData[i],newData[i]))
      // 如果数组元素中具有不相同元素,返回false
        return false;
    }
  }else{
    // 其它类型,均返回false
    return false;
  }

  // 走到这里,说明数组或者对象中所有元素都相同,返回true
  return true;
};


// 使用
　var oldArr = [{
     name: "张三",
     age: 11,
  },{
     name: '李四',
     age: 21,
  }];
  var newArr = [{
     name: "张三",
     age: 11
  },{
     name: '王五',
     age: 21,
 }];
 console.log(equalsObj(oldArr,newArr));// false

---

十七、数组过滤

1. 一维数组过滤 — filter

// 第一种
arr = arr.filter(item => !!item.children);
// 第二种
let textList = arr.filter(item => {
  if (row.id.includes(item.id)) {
    return item
  }
})

2. 复杂数组过滤 — map、filter

/**
* sub.id: 123
* row.id: "id-123"
* 输出sub.id和row.id不同的项
*/
let new_arr = old_arr.map((item, index) => {
  if (!!item.children)
    item.children = item.children.filter(sub => sub.id !== row.id)
  return item;
}).filter(item => item.children && item.children.length > 0);

3. 过滤附件数组 — filter、map、findIndex

/**
* 给fileList数组的url加api前缀
* previewSrcList 过滤fileList的url组成新数组
* Index 附件预览时图片地址在previewSrcList数组中的下标
*/
fileList.filter(item => {
	return item.url = item.url.indexOf('/Api') > -1 ? item.url : '/Api' + item.url
})
previewSrcList = fileList.map(item => item.url)
Index = previewSrcList.findIndex(item => item === file.url);

---