博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端
文章目录
💯前言
- JavaScript 是一种强大而灵活的编程语言，在 Web 开发中得到了广泛应用。学习数组的基本操作是编程入门的重要一步。在这篇文章中，我们将讨论三道关于数组的基础题目，分别涉及数组求和、最大最小值查找以及数组连接的操作。我们不仅会讲解这些题目的基础解法，还会给出优化后的版本，并探讨代码扩展和实现背后的思路，帮助你更深入地理解 JavaScript 的数组操作。希望通过这篇文章，大家能更好地掌握数组的相关知识和技能。 JavaScript
💯题目一：求一数组中的所有数的和和平均值
最初的解法
首先来看一道基础的题目，题目要求我们对数组中的所有数进行求和，然后计算出数组的平均值。以下是原题目以及初始解法：
<body><script>var arr =[1,2,3,4,5,6,7,8,9,10];var sum =0;for(var i =0; i < arr.length; i++){
sum += arr[i];}
console.log("和: "+ sum);
console.log("平均值为: "+(sum / arr.length));</script></body>
解法分析
- 首先定义了一个数组
arr，它包含 1 到 10 的整数。 - 然后通过一个
for循环遍历整个数组，将每个元素累加到变量sum中。 - 最后通过
console.log输出求和的结果和计算平均值。
这是非常基础且常用的方法，代码简单明了，适合入门者理解循环和数组的基本操作。
优化后的解法
使用
Array.prototype.reduce
方法
JavaScript 提供了一些高效的数组方法，比如
reduce
，它可以用来累加数组中的所有元素，使代码更简洁。
var arr =[1,2,3,4,5,6,7,8,9,10];var sum = arr.reduce((acc, current)=> acc + current,0);
console.log("和: "+ sum);
console.log("平均值为: "+(sum / arr.length));
使用箭头函数和模板字符串
使用箭头函数和模板字符串可以让代码更现代化，增加可读性和简洁性：
const arr =[1,2,3,4,5,6,7,8,9,10];const sum = arr.reduce((a, b)=> a + b,0);
console.log(`和: ${sum}`);
console.log(`平均值为: ${sum / arr.length}`);
扩展：封装成函数
对于程序模块化的学习，我们可以把这些操作封装成一个函数，使其具有更好的复用性和扩展性：
functioncalculateSumAndAverage(arr){var sum = arr.reduce((a, b)=> a + b,0);var average = sum / arr.length;return{ sum, average };}var result =calculateSumAndAverage([1,2,3,4,5,6,7,8,9,10]);
console.log("和: "+ result.sum);
console.log("平均值为: "+ result.average);
通过将求和和平均值的逻辑封装成一个函数，代码的复用性得到了极大的提升。如果数组发生变化，只需要调用函数即可，极大减少了代码的重复。模块化的编程方式是编写大规模应用的基础。
💯题目二：求一数组中的最大值和最小值，以及所在位置
最初的解法
第二道题目是找到数组中的最大值和最小值，同时输出它们在数组中的位置。以下是最初的实现：
<script>var arr =[7,6,3,2,4,9,1,8,5,10];var max = arr[0];var min = arr[0];for(var i =0; i < arr.length; i++){if(arr[i]< min){
min = arr[i];}if(arr[i]> max){
max = arr[i];}}
console.log("最大值为: "+ max);
console.log("最小值为: "+ min);</script>
解法分析
这个解法通过
for
循环遍历数组，分别查找出最大值和最小值，将它们赋值给变量
max
和
min
。该方法对于初学者来说非常合适，展示了如何遍历数组并对每个元素进行比较。
优化后的解法
记录最大值和最小值的索引
在原始解法中，只输出了最大值和最小值，但并没有找到它们的位置。以下代码对其进行了改进，增加了索引的记录：
var arr =[7,6,3,2,4,9,1,8,5,10];var max = arr[0], min = arr[0];var maxIndex =0, minIndex =0;for(var i =1; i < arr.length; i++){// 从索引 1 开始，因为索引 0 已经初始化了if(arr[i]> max){
max = arr[i];
maxIndex = i;}if(arr[i]< min){
min = arr[i];
minIndex = i;}}
console.log("最大值: "+ max +", 位置: "+ maxIndex);
console.log("最小值: "+ min +", 位置: "+ minIndex);
使用
Math.max
和
Math.min
使用 JavaScript 的内置函数
Math.max
和
Math.min
可以更快速地找到数组中的最大值和最小值，然后通过
indexOf
获取它们的索引。
var arr =[7,6,3,2,4,9,1,8,5,10];var max = Math.max(...arr);var min = Math.min(...arr);var maxIndex = arr.indexOf(max);var minIndex = arr.indexOf(min);
console.log("最大值: "+ max +", 位置: "+ maxIndex);
console.log("最小值: "+ min +", 位置: "+ minIndex);
Math.max
和
Math.min
使用扩展运算符
...
来将数组的元素作为参数传递，使代码更简洁。
扩展：封装成函数
同样地，我们可以将查找最大值、最小值及其位置的逻辑封装成函数：
functionfindMaxAndMin(arr){var max = arr[0], min = arr[0];var maxIndex =0, minIndex =0;for(var i =1; i < arr.length; i++){if(arr[i]> max){
max = arr[i];
maxIndex = i;}if(arr[i]< min){
min = arr[i];
minIndex = i;}}return{ max, min, maxIndex, minIndex };}var arr =[7,6,3,2,4,9,1,8,5,10];var result =findMaxAndMin(arr);
console.log("最大值: "+ result.max +", 位置: "+ result.maxIndex);
console.log("最小值: "+ result.min +", 位置: "+ result.minIndex);
💯题目三：将字符串数组用|或其他符号拼接
最初的解法
第三道题目要求我们将数组中的元素用指定的符号连接起来。以下是初始的实现：
<body><script>var arr =[7,6,3,2,4,9,1,8,5,10];var arr2 = arr.join("-");
console.log(arr2);</script></body>
解法分析
在这段代码中，我们使用了
Array.prototype.join
方法来将数组中的元素用
-
连接起来，形成一个字符串并输出。
join
方法是数组操作中非常高效且方便的方法。
优化与扩展
使用变量定义分隔符
为了让代码更加灵活，我们可以定义一个变量来存储分隔符，这样在需要更换分隔符的时候只需更改变量的值即可，代码更易于维护：
var arr =[7,6,3,2,4,9,1,8,5,10];var separator ="-";// 定义分隔符var arr2 = arr.join(separator);
console.log(arr2);
扩展功能：用户自定义输入分隔符
如果希望增强用户交互性，可以通过浏览器的
prompt
函数来让用户输入分隔符，从而实现动态控制：
// 用户输入分隔符var separator =prompt("请输入分隔符（例如 '-' 或 '|'）：","-");// 示例数组var arr =[7,6,3,2,4,9,1,8,5,10];// 用 join 方法处理var arr2 = arr.join(separator);// 输出结果
console.log(arr2);
扩展：处理多维数组
在更复杂的场景下，我们可能会遇到多维数组，需要先将其展平，再用特定符号连接。可以使用
Array.prototype.flat()
方法来展平多维数组：
var arr =[[7,6],[3,2],[4,9,1,8],[5,10]];var separator ="-";// 展平数组并用分隔符连接var arr2 = arr.flat().join(separator);
console.log(arr2);// 输出 "7-6-3-2-4-9-1-8-5-10"
在这个示例中，
flat()
方法将二维数组展平成一维，然后使用
join()
方法将元素连接在一起。
封装成函数
将连接数组元素的逻辑封装成一个通用函数：
functionjoinArrayElements(arr, separator){return arr.flat().join(separator);}var arr =[[7,6],[3,2],[4,9,1,8],[5,10]];var result =joinArrayElements(arr,"|");
console.log(result);// 输出 "7|6|3|2|4|9|1|8|5|10"
封装后的函数可以处理多维数组并指定分隔符，使其在不同场景下更具有适应性。
💯题目四：要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组
最初的解法
以下是使用
for
循环遍历数组并手动移除
0
的实现：
var arr1 =[0,6,3,0,4,0,1,8,0,10];var arr2 =[];for(var i =0; i < arr1.length; i++){if(arr1[i]!==0){
arr2.push(arr1[i]);}}
console.log(arr2);
这种方法通过遍历数组，将所有不为
0
的元素加入新数组
arr2
中。这段代码逻辑正确并且相对直观，但稍显冗长且不够现代化。
优化解法
使用
Array.filter()
方法
JavaScript 提供了
filter()
方法，可以对数组中的元素进行条件筛选，从而使代码更加简洁和直观：
var arr1 =[0,6,3,0,4,0,1,8,0,10];var arr2 = arr1.filter(item=> item !==0);
console.log(arr2);
在这段代码中，
filter()
方法会遍历整个数组，将每个元素传入回调函数，如果元素满足条件（即不等于
0
），则保留该元素，形成新的数组。这样一来，我们不仅实现了同样的功能，还使代码更加易读和简洁。
使用
Array.reduce()
方法
我们还可以使用
reduce()
方法来实现相同的效果：
var arr1 =[0,6,3,0,4,0,1,8,0,10];var arr2 = arr1.reduce((acc, curr)=>{if(curr !==0) acc.push(curr);return acc;},[]);
console.log(arr2);
这里的
reduce()
方法用于遍历数组并将不为
0
的元素累加到一个新的数组中，最终返回结果。虽然代码略显复杂，但这种方式展示了
reduce()
的灵活性和强大功能。
思路总结
- 使用
for循环的方式适合对 JavaScript 语法不熟悉的初学者，因为逻辑显式且清晰。 - 使用
filter()可以简化代码，更加现代化并提高可读性，适合在开发中使用。 - 使用
reduce()则适合需要展示 JavaScript 高级技巧的场景。
💯题目五：查找数组[1,2,3,4,1,2,3,4,2,3,1,1,0]中所有值为1的项的下标 输出为新数组
最初的解法
以下是使用
for
循环实现的代码：
var arr =[1,2,3,4,1,2,3,4,2,3,1,1,0];var arr2 =[];for(var i =0; i < arr.length; i++){if(arr[i]==1){
arr2.push(i);}}
console.log(arr2);
这段代码逻辑清晰，通过遍历数组找到所有值为
1
的项，并将它们的下标添加到
arr2
中。
优化解法
使用
Array.forEach()
方法
我们可以使用
forEach()
方法来使代码更加简洁：
var arr =[1,2,3,4,1,2,3,4,2,3,1,1,0];var arr2 =[];
arr.forEach((value, index)=>{if(value ===1){
arr2.push(index);}});
console.log(arr2);
forEach()
方法让我们不再需要显式管理循环变量
i
，直接通过回调函数处理每个元素和它的下标。
使用
Array.reduce()
方法
使用
reduce()
也是一种实现方式：
var arr =[1,2,3,4,1,2,3,4,2,3,1,1,0];var arr2 = arr.reduce((acc, value, index)=>{if(value ===1){
acc.push(index);}return acc;},[]);
console.log(arr2);
通过
reduce()
方法，我们将值为
1
的项的下标累积到
acc
中，最终返回结果。
使用
Array.map()
和
Array.filter()
方法
我们还可以结合
map()
和
filter()
方法：
var arr =[1,2,3,4,1,2,3,4,2,3,1,1,0];var arr2 = arr.map((_, index)=> index).filter(index=> arr[index]===1);
console.log(arr2);
这里先通过
map()
方法生成所有索引，然后使用
filter()
筛选出对应值为
1
的索引。这样也可以避免显式管理循环变量，使代码更加简洁。
思路总结
- 使用
for循环适合初学者和需要显式控制遍历过程的场景。 forEach()方法让代码更为现代化，同时简化了循环逻辑。reduce()和map() + filter()提供了更加灵活和功能强大的实现方式。
💯题目六：翻转数组 [1,2,3,4,5] => [5,4,3,2,1]
最初的解法
以下是使用
for
循环实现的代码：
var arr =[1,2,3,4,5];for(var i =0; i <(arr.length /2); i++){var temp =0;
temp = arr[i];
arr[i]= arr[arr.length -1- i];
arr[arr.length -1- i]= temp;}
console.log(arr);
这段代码使用了双指针方法，交换数组的两端元素，直到中点，从而完成数组反转。
优化解法
使用
Array.reverse()
方法
JavaScript 提供了内置的
reverse()
方法，可以简洁地实现数组反转：
var arr =[1,2,3,4,5];
arr.reverse();
console.log(arr);
reverse()
方法是最直接和简洁的方式，代码更加易读。
使用扩展运算符和
reverse()
如果需要保留原数组并返回反转后的新数组，可以使用扩展运算符：
var arr =[1,2,3,4,5];var reversedArr =[...arr].reverse();
console.log(reversedArr);
这样可以避免直接修改原数组，使代码更加灵活。
使用
for
循环不改变原数组
如果你想手动实现反转，但不想改变原数组，可以这样写：
var arr =[1,2,3,4,5];var reversedArr =[];for(var i = arr.length -1; i >=0; i--){
reversedArr.push(arr[i]);}
console.log(reversedArr);
这种方式与原代码的思路类似，但通过反向遍历的方式创建了一个新数组，避免了对原数组的修改。
思路总结
- 双指针法适合在面试或需要手动实现反转逻辑的场景，展现了对算法的理解。
- 使用
Array.reverse()是最简洁的方式，适合日常开发中使用，快速达成目标。 - 使用扩展运算符和
reverse()可以在保持原数组不变的情况下得到反转结果。
💯双指针方法详解
在数组反转问题中，使用双指针是一种经典的技巧。
什么是双指针？
双指针是一种编程技巧，尤其在处理数组和链表时非常常见。在这个方法中，使用两个指针从不同的位置开始遍历数据结构，直到它们相遇。具体来说：
- 左指针：从数组的开头向右移动。
- 右指针：从数组的末尾向左移动。
在每次迭代中，左右指针所指向的元素会被交换，然后指针向中间移动，直到相遇为止。
使用双指针的优势
- 时间复杂度：双指针法的时间复杂度是
O(n)，因为它只需要遍历数组的一半。 - 空间复杂度：该方法的空间复杂度是
O(1)，因为只使用了常量空间（一个临时变量temp），因此没有额外的内存消耗。
代码实现
在上面的原始解法中，双指针的操作如下：
for(var i =0; i <(arr.length /2); i++){var temp = arr[i];
arr[i]= arr[arr.length -1- i];
arr[arr.length -1- i]= temp;}
- 初始化指针：左指针
i从0开始，右指针arr.length - 1 - i从数组末尾开始。 - 交换元素：用一个临时变量
temp保存左指针的值，然后交换左右指针对应的值。 - 停止条件：当左指针和右指针相遇或交叉时（即
i >= arr.length / 2），数组就已经完全反转。
双指针方法是非常经典和高效的实现方式，在算法面试和开发中常常用于处理类似对称的操作，例如判断回文字符串。
💯小结
通过这些例题，我们不仅学会了如何实现这些常见的操作，还了解了如何利用 JavaScript 中的内置方法和现代编程风格使代码更加简洁、易读和高效。在实际开发中，我们应该选择最适合当前场景的实现方式，综合考虑代码的性能、可读性和维护性。
版权归原作者 小ᶻ☡꙳ᵃⁱᵍᶜ꙳ 所有， 如有侵权，请联系我们删除。