<center>js中数组迭代的方法</center>

博客介绍了数组的迭代方法,包括every、some、filter、map和forEach。详细说明了各方法的作用,如every对数组每项运行函数,全为true则返回true;some任一项为true就返回true;filter返回函数返回true的项组成的数组;map返回每次调用结果组成的数组;forEach无返回值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则最终结果返回true;

2.some():对数组中的每一项运行给定函数,如果该函数对任一项都返回true,则最终结果返回true;

3.filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组;

4.map():对数组中的每一项运行给定函数,返回每次调用的结果组成的数组;

5.forEach:对数组中的每一项运行给定函数。这个方法没有返回值。

数组迭代方法:every、some、map、filter、forEach

有返回值的方法:every、some、map、filter

返回数组的方法:map、filter

返回true、false的方法every、some

every()

作用:对数组中每一项运行给定的函数,如果每一项都返回true,则返回true。
代码段:

//every()
var array=[1,2,3,4,5];
var ret=array.every(function(item,index,array){
   //return item >3; //false
   return item <8;  //true
});
console.log(ret); 

some()
作用:与every()相反。对数组中每一项运行给定的函数,只要其中有一项返回true,则返回true。
代码段:

//some()与every()作用相反
var array=[1,2,3,4,5];
var ret=array.some(function(item,index,array){
    //return item >3; //true
    return item >8;  //false
});
console.log(ret); 

filter()

作用:对数组中的每一项运行给定函数,返回该函数返回true的项组成的 数组。
代码段:

 //filter()
 var array=[1,2,3,4,5];
 var ret=array.filter(function(item,index,array){
     return item <8;  
 });S
 console.log(ret); //[1,2,3,4,5]

map()

作用:对数组中的每一项运行给定函数,返回每次函数调用的结果组成的 数组。
代码段:

//map()
var array=[1,2,3,4,5];
var ret=array.map(function(item,index,array){
    //return item >3; //false
    return item *2;  
});
console.log(ret); //[2,4,6,8,10]

forEach()
作用:对数组中的每一项运行给定函数,没有返回值。
代码段:

 //forEach()
 var array=[1,2,3,4,5];
var ret=array.forEach(function(item,index,array){
   console.log(array[index]);//[1,2,3,4,5]
});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue数据插值</title> </head> <body> <div id="app"> <h2>{{name}} 非常酷!</h2> </div> <script src="jslib/vue.global.js"></script> <script> const { createApp, ref, reactive, computed } = Vue const vm=createApp({ setup() { const name = ref('Vue 3 多种选项属性转换') const mark1 =ref(98) const messageArray = ref(['a','b','c']) const items = ref([{ message: '数组值1' }, { message: '数组值2' }]) const datacomplex = reactive({keyname:'复合数据'}) const datacomputedb = ref(name.value + '计算选项转换') const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] }) const usereactive = computed(() => { return author.books.length > 0 ? 'Yes' : 'No' }) } }); vm.mount(‘#app’) </script> </body> </html> 修改以下网页,输出最后表格一行的问答成绩(data属性)、实验成绩(data属性)和平均成绩(属性计算的结果)。 <html> <HEAD><TITLE>表格标记应用</TITLE></HEAD> <BODY> <TABLE border ID="Table1"> <CAPTION> 课表及课内成绩</CAPTION> <TR> <TH> 节次</TH><TH>星期一</TH><TH>星期二</TH> <TH> 星期三</TH><TH>星期四</TH><TH>星期五</TH> </TR> <TR> <TD>1、2</TD> <TD>专业英语</TD> <TD>操作系统</TD> <TD>网络基础</TD> <TD>专业英语</TD> <TD>数据库</TD> </TR> <TR> <TD>3、4</TD> <TD>Java</TD> <TD>数据库</TD> <TD>实验</TD> <TD>Java</TD> <TD>操作系统</TD> </TR> <TR> <TD>5、6</TD> <TD>网络基础</TD> <TD>实验</TD> <TD>实验</TD> <TD>实验</TD> <TD>操作系统</TD> </TR> <TR> <TD>成绩</TD> <TD>XX</TD> <TD>XX</TD> <TD>XX</TD> <TD>XX</TD> <TD>平均成绩YY</TD> </TR> <TR> <TD>权值</TD> <TD>XX</TD> <TD>XX</TD> <TD>XX</TD> <TD>XX</TD> <TD>加权平均成绩YY</TD> </TR> </TABLE> </BODY> </html>
05-26
<view class="augment" style="margin-bottom: 25rpx;" v-for="(item, index) in addList" > <view class="swell">{{index + 1}}</view> <view class="enter" style="margin-left: 35rpx;"> <input class="record" v-model.trim="item.activeName" type="text" placeholder="内容名称,如鸡蛋、水果等"/> </view> <view v-show="delFalg == false" style="color: #000333;font-size: 24rpx;display: flex;width: 70rpx;margin-left: 20rpx;" @click="doPut(item,index)"> <view v-if="item.num">{{ item.num }} 次</view> <view v-else>不限</view> <view style="width: 10rpx;height: 18rpx;"> <image src="../../static/solitaire/back.png" mode="aspectFill" style="width: 10rpx;height: 18rpx;margin-left: 12rpx;"></image> </view> <u-picker :show="show" :columns="columns" @cancel="show = false" @confirm="showTime"></u-picker> </view> <view class="" v-show="delFalg == true" style="width: 70rpx;height: 30rpx;margin-left: 20rpx;"> <image @click="putFalg = true" src="../../static/solitaire/prohibit.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image> <view style="width: 10rpx;height: 18rpx;"></view> </view> <u-modal :show="putFalg" :closeOnClickOverlay="true" @confirm="delSubmit(item,index)" @cancel="putFalg = false" :showCancelButton="true" confirmColor="#FC5260"> <view style="width: 300rpx;height: 300rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;"> <image src="/static/tanhao.png" class="tanhao" style="width: 114rpx;height: 114rpx;margin: 0 auto;"></image> <view class="" style="margin-top: 30rpx;"> 是否删除此接龙? </view> </view> </u-modal> </view>为什么delSubmit传递的index是数组的最后一个下标
07-04
<template> <view class="container"> <!-- 顶部信息展示 --> <view class="header"> <view class="title">{{ formData.dcWjTitle }}</view> <view class="info"> <text>被测评人员:{{ formData.dcName }}</text> <text style="margin-left: 20rpx;">部门:{{ formData.dcDept }}</text> </view> </view> <!-- 其他页面内容 --> </view> </template> <script> export default { data() { return { formData: { dcWjTitle: '加载中...', dcName: '加载中...', dcDept: '加载中...' }, token: '' } }, onLoad(options) { const wjId = options.id console.log('接收到的问卷ID:', wjId) this.getTokenAndLoadData(wjId) }, methods: { async getTokenAndLoadData(id) { try { this.token = uni.getStorageSync('token') if (!this.token) { throw new Error('未找到认证令牌,请重新登录') } await this.loadQuestionnaireData(id) } catch (error) { console.error('获取token失败:', error) uni.showToast({ title: error.message || '请先登录', icon: 'none', duration: 3000 }) setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }) }, 1500) } }, async loadQuestionnaireData(id) { try { console.log('开始请求问卷数据,ID:', id) // 修复1: 使用正确的URL路径 const response = await uni.request({ url: `http://172.26.26.43/dev-api/wjdc/wj/${id}`, // 注意路径大小写 method: 'GET', header: { 'Authorization': `Bearer ${this.token}` }, timeout: 10000 // 添加超时设置 }) // 修复2: 正确处理uni.request返回结构 const [error, result] = response; if (error) { console.error('请求错误:', error) throw new Error(`网络请求失败: ${error.errMsg}`) } // 修复3: 检查状态码和业务码 if (result.statusCode !== 200) { throw new Error(`服务器返回错误状态: ${result.statusCode}`) } // 修复4: 根据接口格式获取数据 const responseData = result.data; if (responseData.code !== 200) { throw new Error(`接口错误: ${responseData.msg || '未知错误'}`) } // 修复5: 正确提取数据 const data = responseData.data console.log('接口返回数据:', data) // 更新表单数据 - 使用实际字段名 this.formData = { dcWjTitle: data.dcWjTitle || '无标题', dcName: data.dcName || '未知人员', dcDept: data.dcDept || '未知部门' } } catch (error) { console.error('请求失败:', error) // 显示错误信息 uni.showToast({ title: error.message || '数据加载失败', icon: 'none', duration: 3000 }) // 更新为错误状态 this.formData = { dcWjTitle: '数据加载失败', dcName: error.message || '请检查网络', dcDept: '或联系管理员' } // 认证错误处理 if (error.message.includes('401') || error.message.includes('认证')) { uni.removeStorageSync('token') setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }) }, 1500) } } } } } </script> <style scoped> .container { padding: 20rpx; } .header { padding: 30rpx; background-color: #f8f8f8; border-radius: 12rpx; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); margin-bottom: 30rpx; } .title { font-size: 36rpx; font-weight: bold; margin-bottom: 20rpx; color: #333; text-align: center; } .info { display: flex; justify-content: center; font-size: 28rpx; color: #666; } .info text { margin: 0 10rpx; padding: 5rpx 15rpx; background-color: #eef7ff; border-radius: 8rpx; } </style> 报错:17:26:02.824 请求失败:, TypeError: response is not iterable at pages/operation/operation.vue:103
最新发布
07-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值