很多时候,需要按顺序保存一些数据,比如班里的成绩排名。

在 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}`)

练习

  1. 设计一个程序,收集你们班同学的名字,记得询问性别,按性别分男女组,并输出统计信息。 $$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}。`)

$$

  1. 给定一个任意的数字数组,求出其中的最小值和最大值。 $$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}`)

$$

  1. 实现一个冒泡排序,使得针对任何数组都能从小到大排列。冒泡排序讲解: youtube 视频b站视频。 $$answer
$$jsdemo$$
$$edit$$
let numbers = [5, 7, 1, 3, 2]

let counter = 0

for (let i = 0; i < numbers.length - 1; i++) {
    // 此轮循环是否发生了交换
    let isChange = false
    for (let n = 0; n < numbers.length - i - 1; n++) {
        counter++
        if (numbers[n] > numbers[n + 1]) {
            isChange = true

            // 如果当前的数大于下一个数
            // 那么两者交换一下位置
            let temp = numbers[n]

            numbers[n] = numbers[n + 1]
            numbers[n + 1] = temp
        }
    }

    if (isChange == false) {
        // 如果没发生交换,结束循环
        break
    }
}

console.log(numbers)
console.log(`总共对比了 ${counter} 次`)

$$