跳到主要内容

WTF JavaScript 极简教程: 8. 数组

WTF JavaScript 教程,帮助新人快速入门 JavaScript。

推特@WTFAcademy_ | @0xAA_Science

WTF Academy 社群: 官网 wtf.academy | WTF Solidity 教程 | discord | 微信群申请

所有代码和教程开源在 github: github.com/WTFAcademy/WTF-Javascript


这一讲,我们会介绍 Javascript 最常见的复杂类型:数组(Array)。它可以把多个数据有序的存储在一起。

定义

数组类型支持在单个变量名下存储多个元素。创建数组最简单的方式,就是在一对中括号 [] 内部用逗号 , 分割的列表,例如:

// 没有元素的空数组
const empty = [];
// 存储三个字符串的数组
const courses = ["Solidity", "Etherjs", "JavaScript"];
// 存储不同数据类型的数组
const mix = [1,'WTF',true];

数组中的元素可以使基础类型,也可以是另外一个数组。你可以通过数组存储比较复杂的嵌套数据。下面,complex 数组包含了 coursesmix 两个数组:

// complex是一个数组,包含两个元素,每个元素都是另外一个数组
const complex = [courses, mix];
const nested = [[1, 2], [1, 1, 1]];

读写数组

读取

我们可以在变量上使用索引(中括号 [])来读取数组元素。注意数组的索引是从 0 开始计算的:

const arr = [1,2,3,["Solidity",true]]
// 读取第 0 个元素
console.log(arr[0]) // 1
// 读取嵌套数组第 0 个元素
console.log(arr[3][0]) // "Solidity"

写入

你可以利用索引对某个元素进行赋值,从而修改数组:

// 修改数组的第1个元素
arr[1] = 6
console.log(arr) //[1, 6, 3, Array(2)]

数组变量还有一些属性可以读取,例如 length 属性会返回数组的长度:

// 输出数组长度
console.log(arr.length) // 4

遍历数组

一个数组存储着多个数据,我们可以用循环来遍历数组内部的所有元素。下面的例子中,我们使用 for 循环来计算 numArr 数组的平均值。

const numArr = [5, 8, 9, 11, 55];
let average = 0;
for(let i = 0; i < numArr.length; i++){
average += numArr[i] / numArr.length
}
console.log(`平均值为: ${average}`) // 17.6

增加和删除

数组中内置了很多方法,其中 push, pop 用于增加,删除元素。

push

数组中我们可以使用 push 方法在数组最后 推入 (新增)一个元素。这个方法会使数组长度加一。

const nums = [1,2,3]
nums.push(4)
console.log(nums) // [1, 2, 3, 4]

pop

我们可以使用 pop 方法从数组的末尾 弹出 一个元素。这个方法会使数组长度减一,同时返回被弹出的元素。

// pop方法会返回被弹出的元素
const last = nums.pop()
console.log(last) // 4 弹出
console.log(nums) // [1, 2, 3]

更多的数组操作方法可以参考 MDN教程,可以着重看一下 slice, splice, indexOf 方法。

习题

补全下面的 sumOdd 函数,完成逻辑: 计算输入数组 arr 中所有奇数的和。

function sumOdd(arr){

}

console.log(sumOdd([1, 2, 3, 4, 5])) // 应该返回 9
console.log(sumOdd([2, 4, 6, 8, 10])) // 应该返回 30
console.log(sumOdd([1, 3, 5, 7, 9])) // 应该返回 25

总结

这一讲我们介绍了 Javascript 中的数组,包括数组的定义,读取,写入,和遍历。数组是日常开发中经常用到的数据结构,我们将在后续的教程不断见到,一定要好好掌握。