1、将数组中的指定元素筛选出来,放入新数组
原数据arr:[ {id:1,name:'123',age:'0'},
{id:2,name:'234',age:'0'},
{id:1,name:'456',age:'0'},
{id:2,name:'789',age:'0'} ]指定数据newArr:[
{id:1,
children:[{name:'123',age:'0'},
{name:'456',age:'0'} ]
}
{id:2,
children:[{name:'234',age:'0'},
{name:'789',age:'0'} ]
}
]
let newArr = [];
this.arr.forEach((item) => {
let newId = newArr.find((i) => i.id ===item.id);
if(!newId){
newArr.push({ id:item.id, children: [ { name:item.name,age:item.age } ] });
}else{
newId.children.push({ name:item.name,age:item.age });
}
})
console.log(newArr)
2、根据数组统一字段(如id)求两个数组中相同字段的时间差值
let arr = [ {id:'1', time:'11:24:59.132'},{id:'2', time:'11:24:59.132'},]
let arr2 = [ {id:'1',time:'11:25:59.150'}, {id:'2', time:'11:28:33.132'},]
arr.map((m)=>{
arr2.map((x)=>{
if(m.id == x.id){
let arrsplit = m.time.split('.')[0].split(":");
console.log(arrsplit);
let num = Number(arrsplit[0])*3600 + Number(arrsplit[1])*60 + Number(arrsplit[2])
console.log(num);
let arrsplit2 = x.time.split('.')[0].split(":")
let num2 = Number(arrsplit2[0])*3600 + Number(arrsplit2[1])*60 + Number(arrsplit2[2])
console.log(num2);
let timeDifference = num2 - num;
console.log(timeDifference);
m['timeDifference'] = timeDifference
}
})
})
3、js遍历循环的几种方法
3.1 for...in 循环
fo…in循环一般用于对象的遍历
var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
console.log('键名:', i);
console.log('键值:', obj[i]);
}
// 键名: a // 键值: 1 // 键名: b // 键值: 2
// 其中 obj为循环的对象, i 为对象中的“键名”。如果对象是数组,那么i就是坐标。
for...in遍历无规律json数组
var json = [
{dd:'SB',AA:'东东',re1:123},
{cccc:'dd',lk:'1qw'}
];
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
alert(key+’:'+json[i][key]);
}
}
for...in遍历有规律的json数组
packJson = [
{"name": "nikita", "password": "1111"},
{"name": "tony", "password": "2222"}
];
for (var p in packJson) {//遍历json数组时,这么写p为索引,0,1
alert(packJson[p].name + " " + packJson[p].password);
}
3.2 map循环
map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。是返回一个新数组,而不会改变原数组
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n + 1;
});
// [2, 3, 4]
numbers // [1, 2, 3]
map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
3.3 forEach 循环
forEach方法与map方法很相似,但是,forEach方法不返回值,只用来操作数据。如果数组遍历的目的是为了得到返回值,那么使用map方法,否则使用forEach方法。forEach的用法与map方法一致,参数是一个函数,该函数同样接受三个参数:当前值、当前位置、整个数组。
function log(element, index, array) {
console.log('[' + index + '] = ' + element);
} ;
[2, 5, 9].forEach(log);
// [0] = 2 // [1] = 5 // [2] = 9
3.4 filter过滤循环
filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
}) // [4, 5]
filter方法的参数函数也可以接受三个参数:当前成员,当前位置和整个数组。
[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
return index % 2 === 0;
}); // [1, 3, 5]
此外,filter方法也可以接受第二个参数,用来绑定参数函数内部的this变量。
var obj = { MAX: 3 };
var myFilter = function (item) {
if (item > this.MAX) return true;
};
var arr = [2, 8, 3, 4, 1, 3, 2, 9];
arr.filter(myFilter, obj) // [8, 4, 9]
3.5 some(),every()循环遍历,统计数组是否满足某个条件
返回一个布尔值,表示判断数组成员是否符合某种条件
some方法是只要一个成员的返回值是true,则整个some方法的返回值就是true,否则返回false。
var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
return elem >= 3;
});// true
every方法则相反,所有成员的返回值都是true,整个every方法才返回true,否则返回false。
var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
return elem >= 3;
});// false
some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.
3.6 reduce(),reduceRight()方法可依次处理数组的每个成员
reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。它们的差别是,reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。
[1, 2, 3, 4, 5].reduce(function (a, b) {
console.log(a, b);
return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15
3.7 Object,keys遍历对象的属性
Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。
var obj = {
p1: 123,
p2: 456
};
Object.keys(obj) // ["p1", "p2"]
4、this指向相关知识
function f1(){
console.log(this)
}
function f2(){
'use strict'
console.log(this)
}
f1() // window
f2() // undefined
###########################################################
const foo={
bar:10,
fn:function(){
console.log(this.bar)
console.log(this)
}
}
const fn1 = foo.fn
fn1() // undefined和window,这里this仍然指向window,虽然foo中的fn方法赋值给
// fn1,但是fn1仍然是在window全局环境中执行的
修改
const foo={
bar:10,
fn:function(){
console.log(this.bar)
console.log(this)
}
}
foo.fn() // this指向最后调用它的对象
#############call方法改变this指向##############################################
const foo={
name:'Lucas',
logName:function(){
console.log(this.name) // mike
console.log(this)
}
}
const bar={
name:'mike'
}
console.log(foo.logName().call(bar))
##############构造函数和this################################################
function Foo(){
this.bar = 'Lucas'
}
const instance =new Foo()
console.log(instance.bar) // Lucas
//创建一个新对象,将构造函数的this指向这个新对象,为新对象添加属性和方法等,最终返回新对象
#############构造函数中出现了显式return的情况############################
#场景1
function Foo(){
this.user='Lucas'
const o ={}
return o
}
const instance =new Foo()
console.log(instance.user) // undefined
#场景2
function Foo(){
this.user = 'lucas'
return 1
}
const instance = new Foo()
console.log(instance.user) //Lucas
#场景3
function Foo(){
this.user = 'Lucas'
const o={user:'admin'}
return o
}
const instance =new Foo()
console.log(instance.user) // admin
#总结:如果构造函数中显式返回了一个复杂数据类型(object,array,Date),
那么this就指向这个复杂数据类型,如果返回的是基本数据类型(string,number,
Boolean,undefined,null),那么this仍然指向实例