js的.map() 里使用异步方法:
.map()里的处理方法是同步的，若想做异步操作，可以这样写:
let results = await Promise.all(arr.map(async (item) => {
// 等待异步操作完成，返回执行结果
return await asyncWorker(item);
}));
或是:
arr.map( async (item, index) => {//函数使用async关键字
let params = {
//这里是你的传参
}
await yourInterface(params)//接口使用await关键字
.then(res => {
console.log(res)
})
.catch(err =>{})
console.log(err )
})
工作中有这样一个需求：
this.setState({list:dataList}),但是每个item的有个图片集合，item中不仅要显示首张图片的地址，而且要显示图片的总个数，而这两个属性都需要网络异步请求获取，
于是就有了:
let arr = this.state.list;
try{
await Promise.all(arr.map(async (item) => {
return await this.getFileList(item);
}).then((res=>{
this.setState({list:res})
})
));
} catch (e) {
// ToastManager.show('网络异常，请稍后再试11');
console.log(e)
}
getFileList是进行异步请求的:
async getFileList(itemBase) {
this.setState({visible: true});
let res = await postJson({
url: Constants.fetchFileList,
tag:5,
params: {
"account": this.account,
"keyid": this.keyid,
"typecode": itemBase.id,
"uploaduser": this.upLoadUser
}
});
this.setState({visible: false});
if (res.isSuccess) {
if (res.code == 200 && res.message == 'success'){
let dataList = res.result;
if (dataList && dataList.length > 0) {
itemBase.number = dataList.length;
itemBase.imageUrl = dataList[0].fullpath.replace("10.10.128.122", "58.247.11.173");
} else {
itemBase.number = 0;
itemBase.imageUrl = '';
}
return itemBase;
}
return null
} else {
ToastManager.show(res.message);
return null
}
}
这里要写在return之后是因为异步请求的耗时不定，放在return之后，item的顺序不会变；
ES6语法: Opera 11+ Firefox 3.6+ Safari 5+ Chrome 8+ Internet Explorer 9+支持. 可以通过babel转意支持低版本浏览器.
常见的ES6新增的数组集合的操作有：
ES6中在原有数组的方法上又新增了一些好用的方法，比如：forEach、findIndex、find、map、reduce、filter、every、some、fill等
forEach()：
numbers=[1,2,3,4,5] // 案例1打印数组中所有对象
numbers.forEach(number => {
console.log(number) //1 2 3 4 5
});
numbers=[1,2,3,4,5] //案例2将数组中所有数字相加（这里用了函数抽离的方式）
var sum=0
function add(num){
sum+=num
}
numbers.forEach(add)
console.log(sum) //15
.map的用法：
var numbers=[1,2,3,4,5] / /案例1将原数组的每个数字都*2
var doublnumbers=numbers.map(number=>{
return number*2
})
console.log(doublnumbers) //[2,4,6,8,10]
var building=[ //案例2将A对象数组中某个属性存到B数组中
{name:'the Great Wall',location:'BeiJing'},
{name:'Eiffel Tower',location:'Paris '}
]
var citys=building.map(item=>{
return item.location
})
console.log(citys) //["BeiJing", "Paris "]
.filter()的用法：
var products = [ //案例1假定有一个对象数组A,获取数组中指定类型的对象放到B数组中
{name:"cucumber",type:"vegetable"},
{name:"banana",type:"fruit"},
{name:"celery",type:"vegetable"},
{name:"orange",type:"fruit"}
];
var filtered = products.filter((product)=>{
return product.type === "vegetable";
})
console.log(filtered) //[{name:"cucumber",type:"vegetable"},{name:"celery",type:"vegetable"}]
var post = {id:4,title:"Javascript"}; //案例2假定有两个数组(A,B),根据A中id值,过滤掉B数组不等于A中id的数据
var comments = [
{postId:4,content:"Angular4"},
{postId:2,content:"Vue.js"},
{postId:3,content:"Node.js"},
{postId:4,content:"React.js"}
];
function commentsForPost(post,comments){
return comments.filter(function(comment){
return comment.postId === post.id;
})
}
console.log(commentsForPost(post,comments)); //[ {postId:4,content:"Angular4"},{postId:4,content:"React.js"}]
.find()的用法：
var users = [ //案例1假定有一个对象数组(A),找到符合条件的对象
{name:"Jill",id:1},
{name:"Alex",id:2},
{name:"Bill",id:3},
{name:"Alex",id:4}
];
user = users.find(function(user){
return user.name === "Alex";
})
console.log(user); //{name: "Alex", id: 2}
var post = {id:4,title:"Javascript"}; //案例2假定有两个数组(A,B),根据A中id值,找到B数组等于A中id的数据
var comments = [
{postId:4,content:"Angular4"},
{postId:2,content:"Vue.js"},
{postId:3,content:"Node.js"},
{postId:4,content:"React.js"}
];
function commentsForPost(post,comments){
return comments.find(function(comment){
return comment.postId === post.id;
})
}
console.log(commentsForPost(post,comments)); // {postId:4,content:"Angular4"}
.every() .some()
every 若目标数组中每一个对象都符合条件则返回true，否则返回falsesome 若目标数组中有一个或一个以上的对象符合条件的返回true，否则返回false
var users = [
{name:"Jill",age:10},
{name:"Alex",age:18},
{name:"Bill",age:20},
{name:"Tony",age:24}
];
var isAdult_every=users.every(user=>{
return user.age>18;
})
var isAdult_some=users.some(user=>{
return user.age>18;
})
console.log(isAdult_every) //false
console.log(isAdult_some) //true
.reduce() 常用于叠加，可以代替forEach等案例计算数组中所有值的总和
var numbers = [1,2,3,4,5];
var sumValue = numbers.reduce(function(sum,number2){ //第一个参数为叠加总值，需要初始化，第二个参数是当前项
return sum + number2;
},0); //sum的初始化
console.log(sumValue);
网友评论