一、for-of循环
遍历各种数组和伪数组；
示例1
const arr = [1, 2, 4, 4, 5];
for (const item of arr) {
console.log(item);
}
示例2
const elements = document.querySelectorAll(".item");
for (const elem of elements) {
console.log(elem);
}
二、新增API
1. Array.isArray(target))：判断target是否为一个数组
const arr = Array(5);
console.log(Array.isArray(arr)); //true
2. Array.from(source)：将某个伪数组source转换为一个真数组进行返回
const links = document.querySelectorAll("a");
const arr = Array.from(links)
console.log(Array.isArray(arr));
3. Array.prototype.fill(n)：将数组的某些项设置为n
const arr = Array(5);
arr.fill(123);
console.log(arr); // [ 123, 123, 123, 123, 123 ]
4. Array.prototype.forEach(fn)：遍历数组，传入一个函数，每次遍历会运行该函数
const arr = [113, 1, 24, 6];
arr.forEach((item, index, arr) => {
console.log(item, index, arr);
// 113 0 [ 113, 1, 24, 6 ]
// 1 1 [ 113, 1, 24, 6 ]
// 24 2 [ 113, 1, 24, 6 ]
// 6 3 [ 113, 1, 24, 6 ]
});
5. Array.prototype.map(fn)：数组映射，传入一个函数，映射数组中的每一项
const arr = [113, 1, 24, 6];
const newArr = arr.map((item) => {
return {
n: item,
doubleN: item * 2,
};
});
console.log(newArr);
// [
// { n: 113, doubleN: 226 },
// { n: 1, doubleN: 2 },
// { n: 24, doubleN: 48 },
// { n: 6, doubleN: 12 }
// ]
6. Array.prototype.filter(fn): 数组筛选，传入一个函数，仅保留满足条件的项
const arr = [113, 1, 24, 6, 12, 45];
const newArr = arr.filter((item) => {
return item % 2 !== 0;
});
console.log(newArr); //留下只有奇数的数组[ 113, 1, 45 ]
7. Array.prototype.reduce(fn): 数组聚合，传入一个函数，对数组每项按照该函数的返回聚合
const init = 0;
const arr = [1, 2, 3, 4];
const sum = arr.reduce((a, b) => {
return a + b;
}, init);
console.log(sum); // 10
// 第二个参数init是起始值，result: 0
// 参数a是上一轮返回的结果，参数b是这一轮遍历的item
// 第一轮: 参数a是起始值init 0，b是传进来的1 0 + 1 = 1，result: 1
// 第二轮: 参数a是result 1，b是传进来的2 1 + 2 = 3，result: 3
// 第三轮: 参数a是result 3，b是传进来的3 3 + 3 = 6，result: 6
// 第四轮: 参数a是result 6，b是传进来的4 6 + 4 = 10，result: 10
// 将最后的result返回得到求和结果为10
8. Array.prototype.some(fn): 传入一个函数，判断数组中是否有至少一个通过该函数测试的项，返回true或者false
const arr = [113, 123, 24, 6];
const result = arr.some((item) => {
return item > 114; // 是否有一项大于114
});
console.log(result); // true
9. Array.prototype.every(fn): 传入一个函数，判断数组中是否所有项都能通过该函数的测试，返回true或者false
const arr = [113, 123, 24, 6];
const result = arr.every((item) => {
return item > 114; // 是否所有的项都大于114
});
console.log(result); // false
10. Array.prototype.find(fn): 传入一个函数，找到数组中第一个能通过该函数测试的项
const arr = [12, 1, 4, 113, 123, 24, 6];
const result = arr.find((item) => {
return item > 14; // 找到数组中第一个满足大于14的数
});
console.log(result); // 113
11. Array.prototype.includes(item): 判断数组中是否存在item，判定规则使用的是 Object.is
const arr = [12, 1, 4, 113, 123, 24, 6];
const result1 = arr.includes(14); //数组中是否包含14的那一项
const result2 = arr.includes(123); //数组中是否包含123的那一项
const result3 = arr.includes("123"); //数组中是否包含"123"的那一项
console.log(result1); // false
console.log(result2); // true
console.log(result3); // false
三、练习题
练习题1
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<button>按钮8</button>
<button>按钮9</button>
<button>按钮10</button>
<script>
// 使用 for-of 循环遍历所有按钮，为其注册点击事件，每次点击输出其内容即可
const btns = document.querySelectorAll("button");
for (const btn of btns) {
btn.onclick = () => {
console.log(btn.innerText);
};
}
</script>
</body>
</html>
练习题2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>Lorem.</button>
<button>Explicabo!</button>
<button>Saepe.</button>
<button>Sit?</button>
<button>Reprehenderit.</button>
<button>Facere!</button>
<button>Debitis.</button>
<button>Sit?</button>
<button>Rem?</button>
<button>Possimus.</button>
<script>
// 得到所有按钮文本形成的数组 ["Lorem.", "Explicabo!", ...]
const btns = document.querySelectorAll("button");
const newArr = Array.from(btns).map((item) => {
return item.innerText;
});
console.log(newArr);
</script>
</body>
</html>
练习题3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>Lorem.</button>
<button>Explicabo!</button>
<button>Saepe.</button>
<button>Sit?</button>
<button>Reprehenderit.</button>
<button>Facere!</button>
<button>Debitis.</button>
<button>Sit?</button>
<button>Rem?</button>
<button>Possimus.</button>
<script>
// 得到所有按钮文本形成的数组 [ {index:0, text:'Lorem.'}, {index:1, text:'Explicabo!'}, ...]
const btns = document.querySelectorAll("button");
const newArr = Array.from(btns).map((item, i) => {
return {
index: i,
text: item.innerText,
};
});
console.log(newArr);
</script>
</body>
</html>
练习题4
// 得到一个随机数组成的数组，数组长度为10，随机数的范围在0-1之间
// 结果类似于：[0.262, 0.167, 0.841, ...]
const arr1 = new Array(10).fill(0).map((item) => {
return Math.random();
});
console.log(arr1);
// 得到一个随机数组成的数组，数组长度为10，随机数的范围在10-100之间
// 结果类似于：[35, 66, 45, ...]
const arr2 = new Array(10).fill(0).map((item) => {
return Math.random() * 90 + 10;
});
console.log(arr2);
// 判断某个字符串s是否为 .jpg、.png、.bmp、.gif 中的一个
const validArr = [".jpg", ".png", ".bmp", ".gif"];
const inputValidate = ".jpg";
const result = validArr.includes(inputValidate);
console.log(result);
练习题5
const students = [
{
id: 988985,
name: "梁平",
sex: "女",
age: 15,
address: "安徽省 淮南市",
tel: "12957961008",
},
{
id: 299422,
name: "邱杰",
sex: "男",
age: 25,
address: "辽宁省 本溪市",
tel: "12685726676",
},
{
id: 723972,
name: "王超",
sex: "女",
age: 14,
address: "新疆维吾尔自治区 阿克苏地区",
tel: "15277794541",
},
{
id: 723768,
name: "冯秀兰",
sex: "女",
age: 29,
address: "辽宁省 丹东市",
tel: "13014888148",
},
{
id: 536273,
name: "赖军",
sex: "男",
age: 19,
address: "重庆 重庆市",
tel: "15152658611",
},
{
id: 940136,
name: "顾强",
sex: "男",
age: 20,
address: "吉林省 松原市",
tel: "18562759588",
},
{
id: 489462,
name: "戴敏",
sex: "男",
age: 25,
address: "湖南省 长沙市",
tel: "11513562318",
},
{
id: 863594,
name: "吕涛",
sex: "女",
age: 16,
address: "湖北省 襄阳市",
tel: "16246419558",
},
{
id: 718313,
name: "冯静",
sex: "女",
age: 28,
address: "黑龙江省 牡丹江市",
tel: "18243767800",
},
{
id: 262068,
name: "蔡明",
sex: "男",
age: 20,
address: "黑龙江省 七台河市",
tel: "14185862227",
},
{
id: 900366,
name: "廖磊",
sex: "女",
age: 23,
address: "青海省 海南藏族自治州",
tel: "19469661693",
},
{
id: 316019,
name: "冯洋",
sex: "男",
age: 16,
address: "江西省 新余市",
tel: "18842832768",
},
{
id: 773536,
name: "韩杰",
sex: "男",
age: 23,
address: "云南省 丽江市",
tel: "18560747335",
},
{
id: 494398,
name: "江涛",
sex: "男",
age: 24,
address: "山西省 大同市",
tel: "12774658592",
},
{
id: 177459,
name: "文艳",
sex: "男",
age: 27,
address: "山东省 青岛市",
tel: "16233511417",
},
{
id: 979439,
name: "杜秀英",
sex: "男",
age: 22,
address: "甘肃省 张掖市",
tel: "14723781356",
},
{
id: 142762,
name: "丁艳",
sex: "男",
age: 28,
address: "澳门特别行政区 澳门半岛",
tel: "13157638539",
},
{
id: 157141,
name: "邓静",
sex: "女",
age: 19,
address: "海南省 三亚市",
tel: "17658672240",
},
{
id: 243063,
name: "江刚",
sex: "女",
age: 15,
address: "安徽省 六安市",
tel: "18205383748",
},
{
id: 351709,
name: "乔刚",
sex: "女",
age: 12,
address: "安徽省 蚌埠市",
tel: "14143838021",
},
{
id: 236140,
name: "史平",
sex: "男",
age: 24,
address: "广西壮族自治区 百色市",
tel: "11895866733",
},
{
id: 254260,
name: "康娜",
sex: "男",
age: 29,
address: "辽宁省 铁岭市",
tel: "18783219853",
},
{
id: 387769,
name: "袁磊",
sex: "男",
age: 28,
address: "重庆 重庆市",
tel: "15243676922",
},
{
id: 692436,
name: "龙秀英",
sex: "男",
age: 18,
address: "吉林省 延边朝鲜族自治州",
tel: "18667285569",
},
{
id: 304202,
name: "姚静",
sex: "男",
age: 21,
address: "吉林省 松原市",
tel: "17962179634",
},
{
id: 533032,
name: "潘娜",
sex: "男",
age: 13,
address: "湖北省 孝感市",
tel: "14132684173",
},
{
id: 773792,
name: "萧磊",
sex: "男",
age: 29,
address: "河南省 焦作市",
tel: "13865617456",
},
{
id: 171440,
name: "邵勇",
sex: "男",
age: 16,
address: "宁夏回族自治区 固原市",
tel: "19454444332",
},
{
id: 428587,
name: "李芳",
sex: "男",
age: 29,
address: "四川省 宜宾市",
tel: "14751601674",
},
{
id: 926156,
name: "谭芳",
sex: "女",
age: 27,
address: "湖南省 长沙市",
tel: "18683429563",
},
{
id: 171494,
name: "夏秀英",
sex: "男",
age: 14,
address: "陕西省 安康市",
tel: "17732967642",
},
{
id: 549517,
name: "程娜",
sex: "女",
age: 24,
address: "内蒙古自治区 锡林郭勒盟",
tel: "18927839708",
},
{
id: 999121,
name: "武杰",
sex: "女",
age: 21,
address: "新疆维吾尔自治区 博尔塔拉蒙古自治州",
tel: "15349698338",
},
{
id: 440785,
name: "崔军",
sex: "男",
age: 26,
address: "山西省 临汾市",
tel: "14863312346",
},
{
id: 113636,
name: "廖勇",
sex: "女",
age: 19,
address: "重庆 重庆市",
tel: "18152536541",
},
{
id: 109280,
name: "崔强",
sex: "女",
age: 25,
address: "河南省 安阳市",
tel: "12838860122",
},
{
id: 988885,
name: "康秀英",
sex: "女",
age: 29,
address: "广东省 佛山市",
tel: "12637161150",
},
{
id: 751542,
name: "余磊",
sex: "女",
age: 15,
address: "香港特别行政区 九龙",
tel: "16716667565",
},
{
id: 821693,
name: "邵勇",
sex: "女",
age: 27,
address: "内蒙古自治区 鄂尔多斯市",
tel: "11869733772",
},
{
id: 595152,
name: "贺涛",
sex: "女",
age: 12,
address: "吉林省 通化市",
tel: "18172684836",
},
{
id: 209059,
name: "万勇",
sex: "男",
age: 27,
address: "江苏省 淮安市",
tel: "13523350881",
},
{
id: 331199,
name: "江艳",
sex: "男",
age: 29,
address: "内蒙古自治区 包头市",
tel: "14357786637",
},
{
id: 597029,
name: "廖磊",
sex: "女",
age: 22,
address: "新疆维吾尔自治区 伊犁哈萨克自治州",
tel: "14343812715",
},
{
id: 243965,
name: "马芳",
sex: "女",
age: 29,
address: "湖南省 长沙市",
tel: "12226278003",
},
{
id: 796997,
name: "郝霞",
sex: "女",
age: 29,
address: "辽宁省 锦州市",
tel: "15734778439",
},
{
id: 735045,
name: "吴娜",
sex: "男",
age: 18,
address: "江西省 鹰潭市",
tel: "12550200851",
},
{
id: 858934,
name: "石秀英",
sex: "男",
age: 21,
address: "福建省 南平市",
tel: "14296454005",
},
{
id: 646003,
name: "苏静",
sex: "女",
age: 17,
address: "澳门特别行政区 澳门半岛",
tel: "11456865751",
},
{
id: 607537,
name: "于磊",
sex: "女",
age: 25,
address: "海南省 海口市",
tel: "14742847575",
},
{
id: 817410,
name: "胡超",
sex: "女",
age: 19,
address: "海外 海外",
tel: "16875962137",
},
{
id: 985064,
name: "任杰",
sex: "男",
age: 17,
address: "云南省 迪庆藏族自治州",
tel: "17548787335",
},
{
id: 644060,
name: "汪秀英",
sex: "男",
age: 19,
address: "香港特别行政区 九龙",
tel: "10278533538",
},
{
id: 755803,
name: "徐磊",
sex: "女",
age: 26,
address: "江苏省 徐州市",
tel: "18721465794",
},
{
id: 538130,
name: "熊洋",
sex: "男",
age: 13,
address: "吉林省 白城市",
tel: "13491345641",
},
{
id: 977696,
name: "孟磊",
sex: "男",
age: 24,
address: "香港特别行政区 香港岛",
tel: "10541964547",
},
{
id: 683438,
name: "赵霞",
sex: "男",
age: 28,
address: "重庆 重庆市",
tel: "13085741830",
},
{
id: 342123,
name: "曾芳",
sex: "女",
age: 15,
address: "湖南省 邵阳市",
tel: "11645124878",
},
{
id: 261733,
name: "马芳",
sex: "女",
age: 22,
address: "台湾 新北市",
tel: "10255722846",
},
{
id: 303578,
name: "姜杰",
sex: "女",
age: 17,
address: "黑龙江省 齐齐哈尔市",
tel: "12581543256",
},
{
id: 907392,
name: "熊杰",
sex: "男",
age: 16,
address: "广西壮族自治区 北海市",
tel: "18941398494",
},
];
// {
// id: 988985,
// name: '梁平',
// sex: '女',
// age: 15,
// address: '安徽省 淮南市',
// tel: '12957961008',
// },
// 遍历输出学生的姓名
// students.forEach((item) => {
// console.log(item.name);
// });
// 得到所有女生
// const femaleStudentsArr = students.filter((item) => item.sex === "女");
// console.log(femaleStudentsArr);
// 得到所有年龄在25岁以下的女生
// const femaleYongStudentsArr = students.filter((item) => {
// return item.sex === "女" && item.age < 25;
// });
// console.log(femaleYongStudentsArr);
// 得到所有姓陈的学生
// const chenStudentArr = students.filter((item) => {
// return item.name.charAt(0) === "马";
// });
// console.log(chenStudentArr);
// 得到所有电话号码以1结尾的学生
// const numnerZeroStudentArr = students.filter((item) => {
// const numberStr = item.tel;
// return +numberStr.substring(numberStr.length - 1) === 1;
// });
// console.log(numnerZeroStudentArr);
// 得到所有学生姓名组成的数组
// const allNameArr = students.map((item) => {
// return item.name;
// });
// console.log(allNameArr);
// 得到所有学生姓名组成的字符串，以逗号分割
// const allNameStr = students
// .map((item) => {
// return item.name;
// })
// .join(",");
// console.log(allNameStr);
// 把所有学生姓名以p元素包起来，形成一个html片段
// const htmlStr = students.map((item) => {
// return `<p>${item.name}</p>`;
// });
// console.log(htmlStr);
// 得到所有学生的年龄的总和
// const ageSum = students.reduce((a, b) => {
// return a + b.age;
// }, 0);
// console.log(ageSum);
// 得到所有学生的平均年龄
// const averageAge =
// students.reduce((a, b) => {
// return a + b.age;
// }, 0) / students.length;
// console.log(averageAge);
// 得到一个对象： {name:['张三', '李四', ...], age: [17, 25, ...]}
// const createObj = {
// name: students.map((item) => item.name),
// age: students.map((item) => item.age),
// };
// console.log(createObj);
// 找到id为796997的学生对象
// const idEq796997Stu = students.find((item) => item.id === 796997);
// console.log(idEq796997Stu);
// 是否包含年龄大于28岁的男生
// const isIncludeAgeMoreThan28 = students.some((item) => item.age > 28);
// console.log(isIncludeAgeMoreThan28);
// 是否所有的女生年龄都在28岁以内
const isAllFemaleAgeLessThan28 = students
.filter((item) => item.sex === "女")
.every((item) => item < 28);
console.log(isAllFemaleAgeLessThan28);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。