【逐点突破】JavaScript 数组的总结：数组简介、定义数组、赋值和使用、常用方法等

数组赋值和使用

---

要取得或设置数组的值，需要使用中括号并提供相应值的数字索引，如下所示：

let colors = [‘red’, ‘blue’, ‘green’] // 定义一个字符串数组

console.log(colors[0]) // 显示第一项

colors[2] = ‘black’ // 修改第三项

colors[3] = ‘brown’ // 添加第四项

在中括号中提供的索引表示要访问的值。如果索引小于数组包含的元素数，则返回存储在相应位置的元素，就像示例中colors[0]显示 red 一样。设置数组的值方法也是一样的，就是替换指定位置的值。如果把一个值设置给超过数组最大索引的索引，就像示例中的 colors[3]，则数组长度会自动扩展到该索引值加 1 （示例中设置的索引 3 ，所以数组长度变成了4）。数组中元素的数量保存在 length 属性中，这个属性始终返回0或大于 0的值，如下例所示：

let colors = [‘red’, ‘blue’, ‘green’] // 创建一个包含 3 个字符串的数组

let names = [] // 创建一个空数组

console.log(colors.length) // 3

console.log(names.length) // 0

数组length属性的独特之处在于，它不是只读的。通过修改 length 属性，可以从数组末尾删除或添加元素。来看下面的例子：

let colors = [‘red’, ‘blue’, ‘green’] // 创建一个包含 3 个字符串的数组

colors.length = 2

console.log(colors[2]) // undefined

这里，数组 colors 一开始有 3 个值。将length设置为 2 ，就删除了最后一个（位置 2的）值，因此 colors[2] 就没有值了。如果将 length设置为大于数组元素数的值，则新添加的元素都将以 undefined填充，如下例所示：

let colors = [‘red’, ‘blue’, ‘green’] // 创建一个包含 3 个字符串的数组

colors.length = 4

console.log(colors[3]) // undefined

这里将数组 colors的 length设置为 4，虽然数组只包含 3 个元素。位置3在数组中不存在，因此访问其值会返回特殊值 undefined 。使用 length属性可以方便地向数组末尾添加元素，如下例所示：

let colors = [‘red’, ‘blue’, ‘green’] // 创建一个包含 3 个字符串的数组

colors[colors.length] = ‘black’ // 添加一种颜色（位置3）

colors[colors.length] = ‘brown’ // 再添加一种颜色（位置4）

数组中最后一个元素的索引始终是 length - 1，因此下一个新增槽位的索引就是length。每次在数组最后一个元素后面新增一项，数组的 length属性都会自动更新，以反映变化。这意味着第二行的 colors[colors.length]会在位置3 添加一个新元素，下一行则会在位置4添加一个新元素。新的长度会在新增元素被添加到当前数组外部的位置上时自动更新。换句话说，就是length属性会更新为位置加上 1，如下例所示：

let colors = [‘red’, ‘blue’, ‘green’] // 创建一个包含 3 个字符串的数组

colors[99] = ‘black’ //添加一种颜色（位置99）

console.log(colors.length) // 100

这里，colors 数组有一个值被插入到位置 99，结果新length就变成了 100(99 + 1)。这中间的所有元素，即位置3~98，实际上并不存在，因此在访问时会返回undefined 。

数组的常用方法

---

1.Array.join()

join()方法用于把数组中的所有元素放入一个字符串。join() 方法可以传入一个分隔符，元素通过分隔符进行分隔，如果不传分隔符将默认使用逗号分隔。

let Array = [‘apple’, ‘banner’, ‘cat’]

let joinArray1 = Array.join(’ ')

console.log(joinArray1) // ‘apple banner cat’

let joinArray2 = Array.join(‘-’)

console.log(joinArray2) // ‘apple-banner-cat’

let joinArray3 = Array.join()

console.log(joinArray3) // ‘apple,banner,cat’

2.Array.pop()

pop()方法用于删除并返回数组的最后一个元素。pop()方法将删除 arrayObject的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则pop()不改变数组，并返回 undefined 值。

let Array = [‘apple’, ‘banner’, ‘cat’]

let popArray = Array.pop()

console.log(popArray) // ‘cat’

console.log(Array) //[ ‘apple’, ‘banner’ ]

3.Array.push()

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。push()方法可把它的参数顺序添加到 arrayObject的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push()方法和 pop()方法使用数组提供的先进后出栈的功能。

let Array = [‘apple’, ‘banner’, ‘cat’]

let pushArray1 = Array.push(‘dog’)

console.log(pushArray1) // 4

console.log(Array) // [ ‘apple’, ‘banner’, ‘cat’, ‘dog’ ]

let pushArray2 = Array.push(‘egg’, ‘fox’)

console.log(pushArray2) // 6

console.log(Array) // [ ‘apple’, ‘banner’, ‘cat’, ‘dog’, ‘egg’, ‘fox’ ]

4.Array.reverse()

reverse()方法用于颠倒数组中元素的顺序。且该方法会改变原来的数组，而不会创建新的数组。该函数的返回值就是原数组的指针。

let Array = [‘apple’, ‘banner’, ‘cat’]

let reverseArray = Array.reverse()

console.log(reverseArray) // [ ‘cat’, ‘banner’, ‘apple’ ]

console.log(Array) // [ ‘cat’, ‘banner’, ‘apple’ ]

console.log(reverseArray === Array) // true

5.Array.shift()

shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。如果数组是空的，那么shift() 方法将不进行任何操作，返回 undefined值。该方法不创建新数组，而是直接修改原有的 arrayObject。

let Array = [‘apple’, ‘banner’, ‘cat’]

let shiftArray = Array.shift()

console.log(shiftArray) // ‘apple’

console.log(Array) // [ ‘banner’, ‘cat’ ]

6.Array.unshift()

unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。unshift()方法将把它的参数插入 arrayObject的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素0，如果还有第二个参数，它将成为新的元素1，以此类推。

let Array = [‘apple’, ‘banner’, ‘cat’]

let unshiftArray1 = Array.unshift(‘rookies’)

console.log(unshiftArray1) // 4

console.log(Array) // [ ‘xhs’, ‘apple’, ‘banner’, ‘cat’ ]

let unshiftArray2 = Array.unshift(‘hello’, ‘xhs’)

console.log(unshiftArray2) // 6

console.log(Array) // [ ‘hello’, ‘xhs’, ‘rookies’, ‘apple’, ‘banner’, ‘cat’ ]

7.Array.slice()

slice()方法可从已有的数组中返回选定的元素。返回一个新的数组，包含从 start到 end（不包括该元素）的 arrayObject中的元素。您可使用负值从数组的尾部选取元素。如果 end未被规定，那么 slice()方法会选取从 start到数组结尾的所有元素。

let Array = [‘apple’, ‘banner’, ‘cat’]

let sliceArray1 = Array.slice(0, 2)

console.log(sliceArray1) // [ ‘apple’, ‘banner’ ]

console.log(Array) // [ ‘apple’, ‘banner’, ‘cat’ ]

let sliceArray2 = Array.slice(-2, -1)

console.log(sliceArray2) // [ ‘banner’ ]

let sliceArray3 = Array.slice(1)

console.log(sliceArray3) // [ ‘banner’, ‘cat’ ]

let sliceArray4 = Array.slice(-1)

console.log(sliceArray4) // [ ‘cat’ ]

8.Array.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。splice()方法可删除从index处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject中删除了元素，则返回的是含有被删除的元素的数组。

let Array = [‘apple’, ‘banner’, ‘cat’]

// 只填第一和第二个参数是删除数组中元素并返回删除的元素数组

let spliceArray1 = Array.splice(1, 1)

console.log(spliceArray1) // [ ‘banner’ ]

console.log(Array) // [ ‘apple’, ‘cat’ ]

// 如果第二个参数写为0则不会删除

let spliceArray2 = Array.splice(1, 0)

console.log(spliceArray2) // []

console.log(Array) // [ ‘apple’, ‘cat’ ]

// 如果除了两个参数外还有别的参数，会在删除完后在规定的起始位置添加元素

let spliceArray3 = Array.splice(1, 1, ‘hello’, ‘xhs’)

console.log(spliceArray3) // [ ‘cat’ ]

console.log(Array) // [ ‘apple’, ‘hello’, ‘xhs’ ]

数组的遍历

---

数组的遍历有许多方法，下面展示几种较为常见的遍历方法

1. for 循环

let array = [1, 2, 3, 4, 5]

for (let i = 0; i < array.length; i++) {

console.log(array[i])

}

// 1

// 2

// 3

// 4

// 5

2. for…in…

for...in...会遍历出数组中的所有数据的索引值，然后通过索引值获取每个索引对应的值。

let array = [1, 2, 3, 4, 5]

for (let i in array) {

console.log(array[i])

}

// 1

// 2

// 3

// 4

// 5

3. forEach()

每个数组都拥有一个 forEach函数，这个函数的参数是一个回调函数，每次会把数组中的值传入调用一次回调函数，直到遍历完成。

let array = [1, 2, 3, 4, 5]

array.forEach(function (item) {

console.log(item)

})

// 1

// 2

// 3

// 4

// 5

题目自测

---

一：以下代码输出什么

const numbers = [1, 2, 3]

numbers[10] = 11

console.log(numbers)

A: [1, 2, 3, 7 x null, 11]

B: [1, 2, 3, 11]

C: [1, 2, 3, 7 x empty, 11]

D: SyntaxError

Answer

Answer: C

js 的数组可以动态增加，numbers[10]=11 让数组的长度变成了 11，而只有索引为0、1、2、10的元素有值，中间的元素为空，在数组中打印为empty，作为元素访问时为 undefined。

二：以下代码输出什么

let array = [1, 2, 3, 4, 5]

array.length = 3

array[3] = array[3] * 2

let num = ‘’

for (let i in array) {

num += array[i]

}

console.log(num)

A: 1238

B: 14

C: 9

D: 123NaN

Answer

Answer: D

数组原先有5个元素，长度为 5，通过修改 lenth属性，将后两个元素删除，此时 array=[1,2,3],当访问 array[3]时，得到 undefined，undefined*2 得到 NaN，所以 array此时变成了[1,2,3,NaN]。num初始化为一个字符串，所以遍历是将所有元素进行字符串拼接，最后输出123NaN

三：下列代码执行会输出什么

let array1 = [1, 2, 3, 4, 5]

let array2 = array1

array2[2] = 5

array1[3] = 6

let num = 0

for (let i in array1) {

num += array2[i]

}

console.log(num)

A: 15

B: 16

C: 19

D: 012565

Answer

Answer: C

因为array2=array1,使用array1 和 array2指向的是同一个数组，经过修改，数组变成[1,2,5,6,5],经过累加，答案为 19

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

rray1[3] = 6

let num = 0

for (let i in array1) {

num += array2[i]

}

console.log(num)

A: 15

B: 16

C: 19

D: 012565

Answer

Answer: C

因为array2=array1,使用array1 和 array2指向的是同一个数组，经过修改，数组变成[1,2,5,6,5],经过累加，答案为 19

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

[外链图片转存中…(img-IhX9J0G1-1718599108037)]

[外链图片转存中…(img-mOBiAWzV-1718599108038)]