【零基础JavaScript教程】#10 什么是 JavaScript Array？巧用JavaScript数组存储一系列的值 (陣列的運用) | Intro to JavaScript Array
今天我们来聊聊JavaScript里其中一个很重要的数据类型，那就是数组Array。所有编程语言都会提供数组Array让程序储存数据，所以JavaScript也不例外。Array能让程序储存更多的数据。你可以把Array想象成一长串的数据，Array能同时储存上百上千个数据，比起单一的基础数据类型，像Number或者Boolean, 在同一时间只能储存一个数据，Array的存储功能会比基础数据类型更强大。
☕ ☕ ☕ 如果觉得这些教学对你有用，那就请我喝杯咖啡吧！ 我会继续为你创作更多免费的编程教学视频，让你轻松入门编程。 ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 #javascript数组array #编程入门 #javascript入门
文字版本：
Hi, 大家好，我是文轩
欢迎再次收看文轩解码
如果你想和其他同学一起
学习和讨论JavaScript编程
欢迎扫描这个二维码
去到自学编程社区里和其他同学一起互动
今天我们来聊聊JavaScript里
其中一个很重要的数据类型
那就是数组Array
所有编程语言都会提供数组Array
让程序储存数据
所以JavaScript也不例外
Array能让程序储存更多的数据
你可以把Array想象成一长串的数据
Array能同时储存上百上千个数据
比起单一的基础数据类型
像Number或者Boolean
在同一时间只能储存一个数据
Array的存储功确实会比基础数据类型更强大
我们来看看这张图
这是Array的基本结构
这个Array一共有3个空间可以储存数据
它的长度是3
在JavaScript里
这些空间称之为元素Element
当我们说数组元素的时候
就是代表数组里储存的数据
一般数组里会有好几个元素
为了方便我们读取和管理这些元素
我们需要为这些数据进行编号
在JavaScript里
这些编号称之为索引 index
每一个元素都有各自的索引
索引只能用数字去表示
第一个元素的索引是从0开始
第二个元素是1
第三个元素是2
接下来
我们切换到VS Code尝试创建这张图里的数组
要创建Array，我们可以使用new Array() 语句
又或者是方括号 []
一般在JavaScript里会选用第二种语法
因为用方括号创建Array会更简洁直观
Array创建完后需要将它赋予一个变量
我们先声明一个变量fruits
然后用方括号创建Array
这个Array将用来储存水果的名字
每一个Array元素需要用逗号隔开
我们这里输入Apple字符串
然后逗号
接下来再输入Banana字符串
逗号
然后再输入Orange字符串
最后一个元素的结尾一般都不输入逗号
好的，现在我们来保存刷新页面
看看fruits里的元素
console这里输出3 和 fruits变量里的所有元素
有Apple，Banana和Orange
这个3代表数组里有几个元素
就是我们所说的数组长度
我们还能用.length去验证数组里是不是有3个元素
像这样
嗯，console这里是打印3
因为fruits数组里一共就只有三个元素
接下来，如果我们要读取fruits数组里的元素
那我们该怎么做呢？
如果要读取数组里的元素
我们可以用索引 index，像这样
fruits[0]
这样的话，我们就能读取第一个元素
同学们这里要注意
第一个元素的索引是0
我们现在把全部的元素都打印出来吧
我们保存刷新代码
看看是不是按顺序输出Apple，Banana和Orange
对的，console这里是输出
Apple,Banana和Orange
接下来，我们来看看要怎么更改数组里的数据
假设我们要把Banana替换掉
把它换成Watermelon
我们可以这样表示
这行语句和我们赋予变量数值或者Boolean是一样的
Banana元素是在这个位置
index是1
所以这行代表
请把在fruits数组里索引是1的数据
换成Watermelon字符串
那现在我们来确认一下看看数据是否被更新了
嗯，Banana换成了Watermelon
刚才我们学习了怎么创建Array
怎么读取和更新现有数据
那接下来我们看看要怎么添加和删除数组里的元素
我们先看怎么增加数据吧
一般我们都会把数据添加在数组的尾部
要添加新元素，我们可以使用push
我给你们演示一下
如果要往fruits数组再添加一种水果，我们可以输入
fruits.push()
在小括号这里输入要添加的水果名
我们来添加芒果吧
水果名属于字符串
所以需要把Mango放在双引号里
我们来确认一下Mango有没有被添加到fruits数组里
嗯，是有的，新数据被添加到数组的尾部了
我们现在一共有4种水果
push是可以同时添加好几个元素的，像这样
嗯，这两个新元素也成功被添加到数组里了
除了能在尾部添加数据
我们也能在头部添加
如果想在头部添加数据的话
我们就要使用unshift()
这一次，我们在头部添加cherry吧
接下来我们看看fruit里的数据
嗯, fruits的第一个元素变成了Cherry
虽然push 和 unshift的功能一样
但在性能方面push会比unshift高效
这是因为push在尾部添加新元素时候
不需要大费周章的移动现有的数据
而unshift在头部添加新元素的时候
现有的元素需要往尾部方向移动
腾出空间给新元素
如果数据量很大
像好几万个元素
每unshift一次
就要移动好几万个元素
这样程序的性能肯定会折损
除非有特殊需求
不然初学者还是建议使用push添加新数据
接下来，我们说说怎么从Array删除元素
和添加新元素一样
我们也能从尾部或者是头部删除元素
先来演示怎么从尾部删除
要从尾部删除数据，我们可以使用pop，像这样
fruits.pop()
嗯，最后一个元素Lemon被删除了
如果要从头部删除Cherry的话，我们可以使用shift
fruits.shift()
嗯，Cherry从头部里被删除了
pop和shift都能从数组里删除数据
但shift和unshift一样
需要移动现有数据
在删除头部数据后
需要往头部方向移动现有的数据
填补Cherry腾出的空位
至于pop
它只是从尾部删除数据
不用移动任何的数据
还是那一句话，除非有特殊需求
不然还是建议初学者使用pop删除数组里的元素
数组能让我们储存更多的数据
但这样数据要怎么套用呢？
我给你们举个例子
假设我们有一组数据
数据里储存了7天的产品销量
假设我们要统计这7天的总销量
我门该怎么编写这个程序呢？
首先我们要选用合适的数据类型
去储存这7天的数据
这些销量都是数值
最简单但不建议的方法就是用7个变量储存
let sales1 = 100
let sales2 = 50
这样做的话扩展性实在是太低了
如果要计算一年的数据
那不得声明365个变量？
遇到这种问题，一般都会使用数组Array
这样我们就能用一个变量储存多个数据
那现在我们来声明一个变量sales
然后把数组赋予这个变量
在数组里，我们输入七天的销量
好的，我们的销量现在储存在sales变量里了
接下来，我们就需要从sales数组里读取每一个元素
计算它们的总和
一般我们会用for循环读取这些元素
我们再声明一个变量
用来保存总销量
默认值为0
那接下来我们插入一个for循环
在变量初始化的部分
声明一个变量i
初始化值为0
这里我要重点说一下
为什么这里是0不是1
这是因为数组的索引是从0开始
第一个元素的索引是0
第二个元素的索引是1
从0开始的话
我们的循环就能从数组的头部一直到尾部提取数据
for 循环第二部分是终止条件
sales数组一共有7个元素
最后一个元素的索引是6
一般我们都会这样输入终止条件
i < sales.length
sales.length会返回sales数组的长度
这样我们就不需要手动输入数组的长度
i是从0开始
只要i 小于 7
循环就会一直执行下去
第三部分就是变量递增部分
这里我们直接输入i++
接下来，我们要在循环体里插入计算总销量的语句
totalSales = totalSales + sales[i]
一旦遇到这样的语句
首先我们要计算等号右边的部分
我们来模拟一下这个算法
首先进入第一个循环
totalSales值为0，i值为0
sales[0]指的是sales Array 里索引为0的元素
索引为0的元素的值是100
所以最终这个会演变成0 + 100
0 + 100 等于100
计算完毕后，100会被赋予totalSales变量
然后再i++
完成第一个循环后
现在进入第二个循环
现在totalSales值是100
i值是1
sales数组索引是1的值是50
100加50等于150
150最终赋予totalSales
按这样的演算，最终总销量为830
好的，我们来总结一下今天的分享
我们可以使用方括号创建数组Array
因为这是最简洁，最直观的方式
数组的索引是从0开始
第一个元素的索引是0
第二个元素的索引是1
以此类推
可以使用sales.length（不需要小括号）返回数组的长度
建议初学者使用
.push()和.pop()去添加或删除元素
好的，今天的分享就到这里
有疑问的话欢迎去到自学编程社区里提问
喜欢这个视频就帮忙点赞分享吧
我们下期见，拜拜！
Comments
Post a Comment