写点什么

javaScript 基础篇之数组是怎样锻炼你的逻辑能力

作者:前端史塔克
  • 2021 年 11 月 17 日
  • 本文字数:2317 字

    阅读完需:约 8 分钟

javaScript基础篇之数组是怎样锻炼你的逻辑能力

回顾

上一篇中我们学习了 js 的第三篇循环应该怎么用,在循环中学习了最常用的 for 循环,也顺带熟悉了 while 循环和 do..while 循环,以及 break 和 continue 的区别。在循环中再搭配上运算符和表达式成为了日常工作中的大部分场景应用。往后的工作中基本上都是围绕循环和表达式这一部分基础内容展开。


这一篇中我们会围绕数组展开讨论,但是主体内容并不是数组,而是处理数组的一些逻辑能力。这些也是未来迈向工作中一些必不可少的能力。会运用到之前说到的循环、判断、表达式等内容,可以在之前先自己思考一些,能解开多少题。

数组

数组的概念

数组指的是一组 数据的集合,其中的每个数据被称之为:元素,在数据中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的优雅方式。

创建数组

js 中两种创建数组的方式


  • 利用 new 创建数组


// 1. 数组(Array):就是一组数据的集合 存储在单个变量下的优雅方式// 2. 利用 new 创建数组var arr = new Array(); // 创建了一个空数组
var arr4 = new Array(1,2,3,4,5);console.log(arr4[3])
复制代码


  • 利用数组字面量创建数组


// 利用数组字面量创建数组元素var arr2 = []; // 创建了一个空数组var arr3 = [1, 2, 3, '大', true]console.log(arr3)// 在数组中数组中间一定需要 逗号分隔// 数组中的数据 比如 1,2,3 我们称之为 数组元素
复制代码



获取数组中的元素

在数组中可以定义任何类型 —— 字符串、数字、布尔类型等都可以


注意:这个值得注意的一个地方就是数组中的下标是从 0 开始的,也叫做索引


// 数组中是从 0 开始
var arr = [9, 8, 7, ,6]
console.log(arr[0]) // 获取的元素是 9
复制代码

遍历数组

遍历数组是最常用也是最基本的技能,可以先来看看怎么遍历数组(如下图所示),在图中,i 表示从 0 开始遍历拿到了整个数组的长度开始。然后 arr[i] 表示每一项的下标,console.log 将它们全部输出出来。


// 遍历数组var arr = ['李煜', '李景', '李典', '典韦', '刘备']for (var i = 0; i < arr.length; i++) {  console.log(arr[i])}
复制代码



数组案例

在看到题之后可以自己先思考思考,尽量动手敲一敲,因为你不最终输出出来就不会知道中间发生了什么情况。一定需要敲一敲才能印象深刻。如果实在想不起来可以再看答案。

案例 1:求数组的和 和 平均数

1:求数组 [2, 6, 1, 7, 4] 里面所有元素的和和平均数


// 求数组 [2, 6, 1, 7, 4] 里面所有元素的和和平均数var arr = [2, 6, 1, 7, 4]var sum = 0var average = 0
for (var i = 0; i < arr.length; i++) { sum += arr[i]}average = sum / arr.lengthconsole.log(sum, average) // 20 4
复制代码



案例 2:求数组中的最大值

2:求数组 [2, 6, 1, 77, 52, 25, 7] 中的最大值


// 求数组最大值// 1. 求数组 [2, 6, 1, 77, 52, 25, 7] 中的最大值var arr = [2, 6, 1, 77, 52, 25, 7]var max = 0for (var i = 0; i < arr.length; i++) {  if (arr[i] > max) {    max = arr[i]  }}console.log(max);
复制代码



案例 3:数组转换为分割字符串

3:要求将数组 ['red', 'blue', 'green', 'pink'] 转换为字符串,并且用 | 或者其他符号分割


// 1. 要求将数组 ['red', 'blue', 'green', 'pink'] 转换为字符串,并且用 | 或者其他符号分割var arr = ['red', 'blue', 'green', 'pink']var str = ''for (var i = 0; i < arr.length; i++) {  str += arr[i] + '|'}console.log(str)
复制代码



案例 4:筛选数组

4:要求:将数组 [11, 2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 100] 中大于等于 10 的元素选出来,放入到新数组中。


// 1.要求:将数组 [11, 2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 100] 中大于等于10的元素选出来,放入到新数组中。var arr =  [11, 2, 0, 6, 1, 77, 0, 52, 0, 25, 7, 100]var newArr = []for (var i = 0; i < arr.length; i++) {  if (arr[i] >= 10) {    newArr[newArr.length] = arr[i]  }}console.log(newArr);
复制代码



案例 5:删除指定的数组元素

5:要求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后,形成一个不包括 0 的新数组


// 要求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的0 去掉后,形成一个不包括0的新数组var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]var newArr = []for (var i = 0; i < arr.length; i++) {  if (arr[i] !== 0) {    newArr[newArr.length] = arr[i]  }}console.log(newArr);
复制代码



案例 6:翻转数组

6:要求:将数组 ['red', 'green', 'blue', 'pink', 'purple'] 进行翻转


// 要求:将数组['red', 'green', 'blue', 'pink', 'purple']var arr = ['red', 'green', 'blue', 'pink', 'purple']var newArr = []for (var i = arr.length - 1; i >= 0; i--) {  newArr[newArr.length] = arr[i]}console.log(newArr);
复制代码



冒泡排序

关于最后一个冒泡排序仅作了解部分,对于新手来讲。先把基础打好,往后有兴趣可以慢慢深入到算法中,当然其实代码是不重要的,代码仅仅是你逻辑思想实现的一个工具而已,重要的还是你的思想。需要好好思考思考才能更好的解决每一个问题。


// 冒泡排序// 双层 for 循环var arr = [11, 2, 9, 4, 7, 6, 8, 10, 1]// 第一个 for 循环意思是外层循环多少次,也就是整个数组循环多少次for (var i = 0; i < arr.length - 1; i++) {  // 内层 for 循环意思是 每一个数得换多少次  for (var j = 0; j <= arr.length - i - 1; j++) {    if (arr[j] > arr[j+1]) {      var change = arr[j]      arr[j] = arr[j+1]      arr[j+1] = change    }  }}console.log(arr);
复制代码



好了,今天关于数组的处理还有各种案例就说完了,尽量自己在编辑器中尝试的打印一下。这部分的基础在未来的工作中特别常用,需要熟练掌握。有什么问题欢迎留言~

发布于: 2 小时前阅读数: 5
用户头像

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变,更高效学习前端知识及后续发展趋向,更好快速的融入到工作中 关注公号:前端史塔克

评论

发布
暂无评论
javaScript基础篇之数组是怎样锻炼你的逻辑能力