常用的js语法
1、提取数组对象中的某个属性值,并返回一个新数组
//实例一:单纯的提取数组对象中的某个属性值,返回一个数组
var detailList = [
{
id:1,
name:'张三'
},
{
id:2,
name:'李四'
},
{
id:3,
name:'王五'
},
]
var result = detailList.map(function(item) {
return item.name;
});
console.log(result, '新数组');//['张三','李四','王五']
//实例二:提取数组对象中的某个属性值,并返回一个带有属性名的新数组
var detailList = [
{
id:1,
name:'张三'
},
{
id:2,
name:'李四'
},
{
id:3,
name:'王五'
},
]
var result = detailList.map(item =>({
bossName:item.name,
bossId:item.id
}))
console.log(result, '新数组');//[{bossName:'张三',bossId:1},{bossName:'李四',bossId:2},{bossName:'王五',bossId:3}]
2、判断数组对象中是否存在某个属性值
var list = [
{
id:1,
name:'张三'
},
{
id:2,
name:'李四'
},
{
id:3,
name:'王五'
},
]
var result = list.some(function (item) {
if(item.name==='李四'){
return true
}
})
console.log(result) //true/false
3、根据数组对象中的某个属性值,取它整个对象
var list = [
{
id:1,
name:'张三'
},
{
id:2,
name:'李四'
},
{
id:3,
name:'王五'
},
]
var result = list.find(item=>item.name==='李四');
var id = result && result.id
console.log(id) //2
//还可以用filter
var result = list.filter(item=>item.name==='李四');
console.log(result ) //[{id:2,name:'李四'}]
4、替换数组对象中的某个属性值
data:[
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
]
data.forEach(item => {
if (item.status === 0) {
// 'status'为属性名,'非活动'为修改后的内容
item.status = '非活动'
} else if (item.status === 1) {
item.status = '活动'
}
})
5、向数组对象中添加属性
//实例:适合做购物车勾选商品的勾选状态
//接口返回的商品列表数据list
let arr = this.list
let curData = []
arr.forEach((item, index) => {
curData.push(Object.assign({}, item, { 'selected': true }))
})
this.list = []
this.list = curData
// console.log(this.list, '新增属性')
6、两个数组对象对比,发现有相同值时,向其中一个数组内添加新属性
//数组1
let arr1=[
{name:'aaa',id:10},
{name:'bbb',id:15},
]
//数组2
let arr2=[
{name:'aaa',id:10},
{name:'bbb',id:15},
{name:'ccc',id:16},
{name:'ddd',id:17},
]
//使用map循环
arr1.map(item=>{
item.age = false
arr2.map(val=>{
if(item.id == val.id){
item.age = true
}
})
})
console.log(arr1)
//[{name:'aaa',id:10,age:true},{name:'bbb',id:15,age:true}]
下面说说理论知识:
value
:必须,代表当前元素,其他四个参数都是可选,index代
表当前索引值,arr
代表当前的数组,thisValue
代表传递给函数的值,一般用this
值,如果这个参数为空,undefined
会传递给this
值
返回值:
返回符合测试条件的第一个数组元素的值,如果没有符合条件的则返回undefined
。
var arr = [1,2,3,4,5,6,7];
var ar = arr.find(function(elem){
return elem>5;
});
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]
find()
方法为数组中的每个元素都调用一次函数执行,当数组中的元素在测试条件时返回true
,find()
返回符合条件的元素,之后的值不会再执行函数。如果没有符合条件的元素则返回undefined
。
filter()
:创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
filter
遍历的元素范围在第一次调用 callback
之前就已经确定了。在调用filter
之后被添加到数组中的元素不会被filter
遍历到。如果已经存在的元素被改变了,则他们传入 callback
的值是 filter
遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
语法:
array.filter(function(value, index, arr),thisValue)
value
:必须,代表当前元素,其他四个参数都是可选,index
代表当前索引值,arr
代表当前的数组,thisValue
代表传递给函数的值,一般用this
值,如果这个参数为空,undefined
会传递给this值
返回值:
返回数组,包含了符合条件的所有元素,如果没有符合条件的则返回空数组
var arr = [1,2,3,4,5,6,7];
var ar = arr.filter(function(elem){
return elem>5;
});
console.log(ar);//[6,7]
console.log(arr);//[1,2,3,4,5,6,7]
map():
返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()
方法按照原始数组元素顺序依次处理元素
map
方法会给原数组中的每个元素都按顺序调用一次callback
函数,callback
每次执行后的返回值(包括undefined
)组合起来形成一个新数组。callback
函数只会在有值的索引上被调用,那些从来没被赋过值或者使用delete
删除的索引则不会被调用。
使用map
方法处理数组时,数组元素的范围是在callback
方法第一次调用之前就已经确定了。在map
方法执行的过程中,原数组中新增加的元素将不会被callback
访问到,若已经存在的元素被改变或删除了,则他们传递到callback
的值是map
方法遍历到他们的那一刻的值,而被删除的元素将不会被访问到。
语法:
array.map(function(value, index, arr),thisValue)
value:
必须,代表当前元素,其他四个参数都是可选,index
代表当前索引值,arr
代表当前的数组,thisValue
代表传递给函数的值,一般用this
值,如果这个参数为空,undefined
会传递给this值
返回值:
返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值
var arr = [1,2,3,4,5,6,7];
var ar = arr.map(function(elem){
return elem*4;
});
console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]
forEach():
用于调用数组每个元素,并将元素传递给回调函数(注意没有办法跳出或终止forEach
语句,除非抛出异常)
forEach
遍历的范围在第一次调用 callback
前就会确定。调用forEach
后添加到数组中的项不会被callback
访问到。如果已经存在的值被改变,则传递给 callback
的值是 forEach
遍历到他们那一刻的值。已删除的项不会被遍历到
语法:
array.forEach(function(value, index, arr),thisValue)
value:
必须,代表当前元素,其他四个参数都是可选,index
代表当前索引值,arr
代表当前的数组,thisValue
代表传递给函数的值,一般用this
值,如果这个参数为空,undefined
会传递给this值
返回值:
undefined
var arr = [1,2,3,4,5,6,7];
var sum = 0;
var ar = arr.forEach(function(elem){
sum+=elem*4;
});
console.log(ar);//undefined
console.log(arr);//[1,2,3,4,5,6,7]
console.log(sum);//112
forEach()
返回值为undefined
,里面即便有return
语句,返回值依然是undefined
嗯、现在总结一下
从上面的内容我们可以看出,上面的四个语法以及参数的意义是一样的,而且都不会对空数组进行检测,也不会改变原始数组
现在说说各自的意义:
find()
方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined)
filter()
方法主要用来筛选数组中符合条件的所有元素,并且放在一个新数组中,如果没有,返回一个空数组
map()
方法主要用来对数组中的元素调用函数进行处理,并且把处理结果放在一个新数组中返回(如果没有返回值,新数组中的每一个元素都为undefined
)
forEach()
方法也是用于对数组中的每一个元素执行一次回调函数,但它没有返回值(或者说它的返回值为undefined
,即便我们在回调函数中写了return
语句,返回值依然为undefined
)