温故而知新之- Javascript 数组类型 (循环遍历)
【摘要】 我们在平时的学习,或者工作项目上,经常会有批量处理一些元素的需求,比如批量删除,批量格式化,批量筛出出符合条件的元素进行特定处理。
这些需求,我们就可以使用到数组的循环遍历,可以大大提高我们的效率。
首页,我们来回顾下for循环:
for可以结合数组的length属性,进行遍历数组:
let info = [
{name: '余人杰',favorite: 'html'},
{name: '余人',favorite: 'css'},
{name: '人杰',favorite: 'js'}
];
for (let i = 0; i < info.length; i++) {
info[i] = `名字: ${info[i].name}`;
}
console.log(info); // ["名字: 余人杰", "名字: 余人", "名字: 人杰"]
forEach()
forEach()也可以遍历数组,它的参数是一个函数,数组的每个元素都被作用在这个参数函数上
回调函数有一至三个函数,第一个参数是正要处理的元素,第二个参数是被处理当前元素的索引,第三个参数是正在操作的数组。
let info = [
{name: '余人杰',favorite: 'html'},
{name: '余人',favorite: 'css'},
{name: '人杰',favorite: 'js'}
];
function addStr(element, index, array) {
console.log(element);
element.name += '是我的名字';
}
info.forEach(addStr);
console.log(info);
/*
[
{name: "余人杰是我的名字", favorite: "html"},
{name: "余人是我的名字", favorite: "css"},
{name: "人杰是我的名字", favorite: "js"}
]
*/
for...in
遍历时, key 值作为数组的索引
let info = [
{name: '余人杰',favorite: 'html'},
{name: '余人',favorite: 'css'},
{name: '人杰',favorite: 'js'}
];
for (const key in info) {
console.log(`名字: ${info[key].name}`);
}
提示: 尽管for ... in可以遍历数组,但for ... in
是为遍历对象属性而构建的,不推荐用于遍历数组,遍历数组建议用forEach(), for ... of
for...of
遍历时,每次循环的是数组中的值,而不是索引
let info = [
{name: '余人杰',favorite: 'html'},
{name: '余人',favorite: 'css'},
{name: '人杰',favorite: 'js'}
];
for (const item of info) {
console.log(`
名字: ${item.name}
爱好: ${item.favorite == "css" ? "前端" : "后端"}
`);
}
心里话:经过这几期的复习资料的编写与整理,我发现,知识点之间右紧密的关联,我们在巩固知识的同时,你要明白各个知识点的实用场景,当我们在使用时,可以快速的定位跟使用它。学无止境,有你我同行,加油。
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)