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

最新推荐文章于 2022-05-27 11:10:23 发布

前端史塔克

最新推荐文章于 2022-05-27 11:10:23 发布

阅读量946

点赞数 3

分类专栏： javascript 基础文章标签：前端 javascript 数组 es6 html

本文链接：https://blog.csdn.net/qq_42799488/article/details/121388913

版权

javascript 基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

回顾

上一篇中我们学习了 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 = 0
var average = 0

for (var i = 0; i < arr.length; i++) {
  sum += arr[i]
}
average = sum / arr.length
console.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 = 0
for (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);

在这里插入图片描述