JavaScript基础第六天
JavaScript 基础第六天
今天我们学习数组的遍历，以及数组的其他用法。
1. 数组遍历
1.1. 古老方法
可以使用 for 循环进行遍历。
let arr = ["a", "b", "d", "g"];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
1.2. forEach
forEach的两个参数，
- item 是当前循环的项。
- index 是当前下标。
let arr = ["a", "b", "d", "g"];
arr.forEach((item, index) => {
console.log(`${item}-${index}`);
item = "c";
});
console.log(arr);
forEach 循环，对原数组没有影响，没有返回值
1.3. map 映射
map 和 forEach 一样接受一个函数作为参数，但map 有返回值，会返回一个数组，返回数组中的值与接受的函数返回的值相关，并不会改变原来的数组。
let arr = [1, 2, 3, 4, 5];
// double将原数组的每一项，都变成两倍
const double = (arr) =>
arr.map((item) => {
return item * 2;
});
const newArr = double(arr);
console.log(newArr); // [2, 4, 6, 8, 10]
console.log(arr); // 原始数组不变[1, 2, 3, 4, 5]
1.4. some
some 只要数组中有一项满足条件，就输出 true:否则输出 false。
let arr = [1, 2, 3, 4, 5];
const res1 = arr.some((item) => {
return item > 3;
});
const res2 = arr.some((item) => {
return item < 0;
});
console.log(res1); // true
console.log(res2); // false
1.5. every
every 数组中的每一项都满足条件，返回 true, 否则返回 false。
let arr = [1, 2, 3, 4, 5];
const res1 = arr.every((item) => {
return item > 0;
});
const res2 = arr.every((item) => {
return item > 3;
});
console.log(res1); //true
console.log(res2); //false
1.6. findIndex
findIndex 找到符合条件的就返回下标，没有就返回-1。
const arr = [
1,
2,
3,
{
name: "钱多多",
},
];
const index = arr.findIndex((item) => {
return item.name === "钱多多";
});
console.log(index); //3
1.7. find
find 返回第一个匹配的元素， 如果没有找到，返回 undefined。
const arr = [
1,
2,
3,
{
name: "钱多多",
},
];
const target = arr.find((item) => {
return item.name === "钱多多";
});
console.log(target);
1.8. filter
filter 过滤返回符合条件的数组，不会改变原数组。
const nums = [1, 2, 3, 4, 5, 6];
const numBig = nums.filter((num) => {
return num > 3;
});
console.log(numBig); // [4, 5, 6]
2. 数组的其他用法
2.1. 翻转数组 reverse
reverse 翻转数组，会改变原来的数组，也会返回一个新数组，都是翻转之后的。
let arr = ["a", "b", "c"];
const reverseArr = arr.reverse();
console.log(arr); // 输出：["c", "b", "a"]
console.log(reverseArr); // 输出：["c", "b", "a"]
2.2. 数组转字符串 join
join 可以将数组转为字符串，可以传入参数，分隔符。
let arr = ["html", "css", "js"]; // 'html,css,js'
const str1 = arr.join(",");
const str2 = arr.join("/");
console.log(str1); // html,css,js
console.log(str2); // html/css/js
2.3. 数组排序 sort
sort 会改变原来的数组，也会返回一个新数组，都是排序之后的。
接受一个函数作为参数，函数有返回值， 且有两个参数，返回第一个参数-第二个参数为升序，反之为降序。
let arr = [1, 4, 5, 3, 2];
arr3.sort((a, b) => {
//升序
return a - b;
});
console.log(arr); //[1,2,3,4,5]
//降序
const res = arr.sort((a, b) => {
return b - a;
});
console.log(arr); //[5,4,3,2,1]
2.4. 求和 reduce
reduce(pre,cur)
- pre 第一个参数是累加器
- cur 第二个参数是我们最后的返回的结果
let arr1 = [1, 2, 3, 4, 5];
const sum1 = arr1.reduce((pre, cur) => {
return pre + cur;
}, 0);
console.log(sum1); //15
let arr1 = [1, 2, 3, 4, 5];
const sum1 = arr1.reduce((pre, cur) => {
return pre + cur;
}, 0);
console.log(sum1); //15