JS常用函数和数据处理方法

实用功能函数小结

1.对象数组去重

//###################数据格式#############################
let arr = [{name:'张山',age:12},{name:'李四',age:18},{name:'张山',age:9}]
//###################期待结果###################
// let newArr = [{name:'张山',age:12},{name:'李四',age:18}]
//###################核心方法###################
// 对象数组去重方法，返回去重后的新数组
function arrDistinctByProp(arr,prop){   //arr：待去重对象数组  prop:需要去重的对象属性
     return arr.filter(function(item,index,self){
         return self.findIndex(el=>el[prop]==item[prop])===index
     })
 }
 //###################调用实例###################
 let newArr = arrDistinctByProp(arr,'name')

2.简单数组去重

//简单类型数组去重，返回去重后的新数组
function arrDistinct(arr){
   // ES6中的set数据结构
     const newArr = new Set(arr);
     // ...是ES6中的扩展运算符
     return [...newArr]
 }
 //或者一步到位
let newArray = [...(new Set(this.array.concat(e)))];

3.数组逆序

function reverseArray(arr){
	let newArr = arr.reverse();
}

4.对象键值对遍历

function visitedObj(obj){
	let newArr = [];
	for(let key in obj){
		let e = {
			id:key,
			name:obj[key],
		}
		newArr.push(e);
	}
	return newArr;
}

5.树形结构数据查找并返回指定节点

//############################数据格式###############################################
let tree = [
     {
          id: '1',
          name: '节点1',
          children: [
              {
                  id: '1-1',
                  name: '节点1-1',
                  children: [
                      {
                          id: '1-1-1',
                          name: '节点1-1-1'
                      }
                  ]
              },
          ]
      },
      {
          id: '2',
          name: '节点2',
          children: [
              {
                  id: '2-1',
                  name: '节点2-1'
              }
          ]
      }
  ]


//#####################核心方法#########################################
 function findNode(tree, func) {
     for (const node of tree) {
         if (func(node)) return node
         if (node.children) {
             const res = findNode(node.children, func)
             if (res) return res
         }
     }
     return null
 }
 //#####################调用实例##############################################
 //树结构查找指定节点并返回
 //查找name值为“节点1-2”的节点
 const data = findNode(tree, (node) => {
     return node.name === '节点1-2'
 })

6.树形数据节点遍历重构

**

基础函数

**

1.filter()函数
2.concat VS push
3.slice VS split
4.some()函数
5.findIndex()函数
6.reverse()函数
7.拓展运算符(…)
8.Map对象
9.Object.assign()
10.slice() VS splice()

1.filter()函数

function getFilterArray(arr){
	let newArr = arr.filter((item,index)=>{
		return item.value === 1;
	})
	return newArr;
}
//或者直接简写
let newArr = arr.filter(item=>item.value === 1);

2.concat VS push
3.slice VS split
4.some()函数
5.findIndex()函数

//使用findIndex返回数组中第一个符合条件元素的下标,未找到返回-1
function getIndex(arr){
	let newArr = arr.findIndex((item,index)=>{
		return item.value === 1
	})
}

//或者简写
newArr.findIndex(item=>item.value === 1)

6.reverse()函数
7.拓展运算符(…)

//使用拓展运算符可以进行数组拼接
function concartArray(arr1,arr2){
	let newArr = arr1.push(...arr2)
	return newArr;
}
//或者方法二：
function concartArray(arr1,arr2){
	let newArr = [...arr1,...arr2]
	return newArr;
}

//对象拼接
function concatObj(obj){
	let newObj = {
		id:1,
		name:ddd,
		...obj
	}
	return newObj;
}

8.Map对象

//构建Map对象取代常规遍历查询匹配元素
map.get(key)	//根据key取value

function setMap(arr){
	let map = new Map();
	arr.forEach((item,index)=>{
		map.set(item.id,item.name);
	})
	return map;
}

9.Object.assign()函数

在这里插入代码片

10.数组截取slice() VS 数组切割splice()

顾名思义，
数组截取slice() 只返回截取区域的数组，不改变原数组
数组切割splice()会改变原数组，返回切割区域的数组。
用法：
let arr = [1,2,3,4];
let newArr = arr.slice(0,1);
arr.splice(0,2);

11.instanceof操作符判断一个对象是某个对象的实例

console.log(person1 instanceof Object);		//true
console.log(person1 instanceof Person);		//true