JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
很多时候,需要按顺序保存一些数据,比如班里的成绩排名。
在 JavaScript 中有一个 Array(数组)可以按顺序保存数据。
语法如下:
let arr = [value1, value2, value3... ]
只需将数据按顺序排列,并且用 ,
(逗号)分隔,左右加上方括号。便能创造一个包含数据的数组。
数组中的数据下标从 0
开始,因此最后一个数据的下标便为数组长度 - 1,数组的下标范围为 0 ~ (长度 - 1)
。
引用数组中元素的语法是 arr[index]
, index
是下标。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
alert(pets[0]) // 小猫
alert(pets[1]) // 小狗
alert(pets[2]) // 小螃蟹
空数组
可以用以下两种方式声明一个空数组。
let arr = new Array()
let arr2 = []
获取数组长度
数组的 length
属性表示的是数组的长度。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
alert(pets.length)
修改元素
直接通过元素的下标重新赋值便能修改元素。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
pets[1] = "小猪"
alert(pets)
新增元素
头部新增
通过数组的 unshift
方法可以往头部新增一个元素。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
pets.unshift("小牛")
alert(pets)
尾部新增
通过数组的 push
方法可以往末尾新增一个元素。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
pets.push("小牛")
alert(pets)
弹出元素
头部弹出
shift
方法可以弹出(删除并返回)第一个元素。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
let first = pets.shift()
alert(first)
alert(pets)
尾部弹出
pop
方法可以弹出(删除并返回)最后一个元素。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
let last = pets.pop()
alert(last)
alert(pets)
实例
下例是使用 while
循环输出数组中的元素的实例。
$$jsdemo$$
$$edit$$
let pets = ["小猫", "小狗", "小螃蟹"]
let i = 0
while (i < pets.length) {
console.log(pets[i])
i++
}
下例是使用 while
循环收集同学数据并输出的实例。
$$jsdemo$$
$$edit$$
let names = []
while (true) {
let name = prompt("请依次输入班上同学的名字。(完成点取消)")
if (name) {
names.push(name)
} else {
break
}
}
alert(`班上共有${names.length}名同学`)
alert(`它们是${names}`)
练习
-
设计一个程序,收集你们班同学的名字,记得询问性别,按性别分男女组,并输出统计信息。 $$demo <button onclick="collect()">收集同学信息</button> <script> function collect() { // 男性同学 let maleStudents = []
// 女性同学 let femaleStudents = [] while (true) { let name = prompt("请依次输入班上同学的名字。(完成点取消)") if (!name) { // 如果点击取消则结束程序 break } let isMale = confirm("请问是男同学吗?") if (isMale) { maleStudents.push(name) } else { femaleStudents.push(name) } } alert(`总共 ${maleStudents.length + femaleStudents.length} 名同学。`) alert(`${maleStudents.length} 名男同学,分别是:${maleStudents}。`) alert(`${femaleStudents.length} 名女同学,分别是:${femaleStudents}。`)
} </script> $$ $$answer
$$jsdemo$$
$$edit$$
// 男性同学
let maleStudents = []
// 女性同学
let femaleStudents = []
while (true) {
let name = prompt("请依次输入班上同学的名字。(完成点取消)")
if (!name) {
// 如果点击取消则结束程序
break
}
let isMale = confirm("请问是男同学吗?")
if (isMale) {
maleStudents.push(name)
} else {
femaleStudents.push(name)
}
}
alert(`总共 ${maleStudents.length + femaleStudents.length} 名同学。`)
alert(`${maleStudents.length} 名男同学,分别是:${maleStudents}。`)
alert(`${femaleStudents.length} 名女同学,分别是:${femaleStudents}。`)
$$
- 给定一个任意的数字数组,求出其中的最小值和最大值。 $$answer
$$jsdemo$$
$$edit$$
let array = [-10, 3, 4, -20, 50, 18]
let min = array[0]
let max = array[0]
// 计数器
let i = 0
while (i < array.length) {
if (array[i] < min) {
min = array[i]
}
if (array[i] > max) {
max = array[i]
}
i++
}
alert(`最小值是 ${min}`)
alert(`最大值是 ${max}`)
$$