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