js 数据分析 插件 js做数据分析

js 一些处理数据的方法

• 一、遍历数组arr

• 1、for循环遍历
• 2、for of
• 3、forEach遍历
• 4、map映射
• 5、filter
• 6、reduce高阶函数（迭代（累加器））
• 7、every
• 8、some
• 9、find（返回符合条件的第一项）
• 10、findIndex（返回符合条件的第一项的下标）

• 二、遍历对象obj

• 1、for in
• 2、for of
• 3、Object.keys

• 三、合并数组（去重）
• 四、数组去重
• 五、取出对象值
• 六、数组中属性名的替换
• 7、向数组中添加对象
• 8、截取（splice、slice、substr、substring）

• 1、splice（数组）（接受负值）
• 2、slice（数组、字符串）（接受负值）

• 数组
• 字符串

• 3、substring（字符串）（与slice类似，不接受负值）
• 4、substr（字符串）（接受负值）

• 参考文章

---

一、遍历数组arr

1、for循环遍历

for( let i; i < arr.length; i++ ) {
	...
}

2、for of

for( let item of arr ) {
	item：数组的元素
}

keys，values，entries
它们都返回一个遍历器对象，可以用 for…of 循环进行遍历

• keys – 返回元素索引
• values – 返回元素本身
• entries – 返回元素和下标

const arr = ['a', 'b', 'c'];
// keys
for (let index of arr.keys()) {
    console.log(index);
   	// 0
    // 1
    // 2
}

// values
for (let ele of arr.values()) {
    console.log(ele);
    // a
    // b
    // c
}

//entries
for (let [index, ele] of arr.entries()) {
    console.log(idnex, ele);
    // 0 "a"
    // 1 "b"
    // 2 "c"
}

3、forEach遍历

遍历数组，和for循环功能一致

arr.forEach((item,index,self)=>{
	item：数组的每一个元素
	index：元素下标
	self：数组本身
	// 无返回值
})

4、map映射

数组的所有项
语法：

arr.map((item,index,self)=>{
	item：数组的每一个元素
	index：元素的下标
	self：数组本身
	// 有返回值
	// 返回满足某个条件的元素构成的数组
})

例子：

let arr = [1,2,3]
// 完整写法
let res = arr.map((item,index)=>{
	return item* 2
})
// 简写
let res = arr.map(item=>item*2) // 返回数组[2,4,6]
let res = arr.map(item=>item*2).join(',')  // 返回拼接后的字符串'2,4,6'

5、filter

筛选数组；将符合条件的元素放入新数组
例子：找出偶数

let arr = [1,2,3,4,5]
// 完整写法
let res = arr.filter((item,index)=>{
	if(item % 2 == 0){
		return true
	}
})
// 简写
let res = arr.filter(item=>item % 2 == 0) // [2,4]

6、reduce高阶函数（迭代（累加器））

arr.reduce((total,item,index,self)=>{
	total：初始值或计算结束后的返回值
	item：数组的每一个元素
	index：元素的下标
	self：数组本身
	// 有返回值
	// 返回计算结束后的total
},0) // 初始值，不写0 遇到空数组会报错

例子

let arr = [1,2,3,4,5]
// 累加
let res = arr.reduce((prev,cur)=>prev+cur,0) // 15
// 求最大值
let max = arr.reduce((prev,cur)=>prev>cur ? prev: cur,0)  // 5

7、every

判断数组中是否所有元素都符合条件

arr.every((item,inedx, self)=>{
	item：数组的每一个元素
	index：元素的下标
	self：数组本身
	// 有返回值
	// 检测数组里的每一个值是否满足条件，如果有一个值不满足，则返回false，剩余的值不在进行检测
	// 如果所有的值都满足，则返回true	
})

例子

let arr = [1,2,-1]
// 完整写法
let res=arr.every((item,index)=>{
	if(item>0){
		return true
	}
})
// 简写
let res = arr.every(item=>item>0) // false

8、some

判断数组中是否有符合条件的元素；非空判断

arr.some((item,inedx, self)=>{
	item：数组的每一个元素
	index：元素的下标
	self：数组本身
	// 有返回值
	// 检测数组里的每一个值是否满足条件，如果有一个值满足，则返回true，剩余的值不在进行检测
	// 如果所有的值都不满足条件，则返回false
})

例子：

let arr = [1,2,3,4,5,-1]
// 完整写法
let res = arr.some((item,index)=>{
	if(item < 0) {
		return true
	}
})
let res = arr.some(item=>item < 0) // true
let res2 = arr.some(item=>item) // true

let arr2 = []
let res3 = arr.some(item=>item ) // false

9、find（返回符合条件的第一项）

没找到返回undefined，对于空数组，是不会执行的，并且不会改变原数组

const arr = [
    {name: 'tony', age: '20'},
    {name: 'jack', age: '18'}
]
const result1 = arr.find(item => {
    return item.name === 'jack';
})
console.log(result1); // {name: 'jack', age: 18}

const result2 = arr.find(item => {
    return item.namee === 'mary';
})
console.log(result2); // undefined

10、findIndex（返回符合条件的第一项的下标）

没有则返回-1，对于空数组，是不会执行的，并且不会改变原数组

const arr = [
    {name:'tony1',age:'20'},
    {name:'tony2',age:'20'},
    {name:'tony3',age:'20'},
    {name:'jack',age:"30"}, // 只管返回第一个满足条件的
    {name:'jack',age:"100"}
];
const result = arr.findIndex(item => {
    return item.name === 'jack';
})
// 简写
const res = arr.findIndex(item=>item.name === 'jack')
console.log(result); // 3

二、遍历对象obj

1、for in

for( let key in obj ) {
	key：属性名
	obj[key]：属性值
}

2、for of

keys，values，entries
它们都返回一个遍历器对象，可以用 for…of 循环进行遍历

• keys – 返回元素索引
• values – 返回元素本身
• entries – 返回元素和下标

const arr = ['a', 'b', 'c'];
// keys
for (let index of arr.keys()) {
    console.log(index);
   	// 0
    // 1
    // 2
}

// values
for (let ele of arr.values()) {
    console.log(ele);
    // a
    // b
    // c
}

//entries
for (let [index, ele] of arr.entries()) {
    console.log(idnex, ele);
    // 0 "a"
    // 1 "b"
    // 2 "c"
}

3、Object.keys

Object.keys：返回对象自身属性名组成的数组
Object.values：返回对象自身属性值组成的数组
Object.entries

Object.keys(obj).forEach((key)=>{
	key：属性名
	obj[key]：属性值
})

三、合并数组（去重）

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

四、数组去重

return Array.from(new Set(arr))

五、取出对象值

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

六、数组中属性名的替换

const arr= JSON.parse( JSON.stringify(data).replace(/title/g, 'text'), ) //data:数组，title：原属性名，text：新属性名

7、向数组中添加对象

this.useraddress.push(
 	Object.assign({}, data.list[i], { fulladdress: fulladdress }),
 )

8、截取（splice、slice、substr、substring）

1、splice（数组）（接受负值）

用于删除数组中的指定元素
改变原数组，返回截取的数组
参数：

• NO1、开始位置的索引
• NO2、删除的数量（不写则默认到数组的尾部）
• NO3及以后，一些新的元素，这些元素会自动插入到开始位置索引之后

let arr = ['a','b','c','d','e']
let result = arr.splice(1,2,'111','222')
console.log(result) //  ['b', 'c']
console.log(arr) // ['a', '111', '222', 'd', 'e']

2、slice（数组、字符串）（接受负值）

返回截取的内容，不影响原数组（字符串）
参数：

• NO1、开始位置的索引（包含）
• NO2、结束位置的索引（不包含）（不写则默认到尾部）

数组

let arr = ['a','b','c','d','e']
let result = arr.slice(1,2)
console.log(result)  // ['b']
console.log(arr)  // ['a', 'b', 'c', 'd', 'e']

字符串

let str = 'abcde'
let res = str.slice(1,2)
console.log(res) // b
console.log(str) // abcde

3、substring（字符串）（与slice类似，不接受负值）

参数：

• NO1、开始位置的索引（包含）
• NO2、结束位置的索引（不包含）

4、substr（字符串）（接受负值）

参数：

• NO1、开始位置索引
• NO2、截取的长度

let str = 'abcde'
let res = str.substr(3,2)
console.log(res) // de
console.log(str) // abcde