JavaScript 系列五:数组

发布于 2021-8-9 16:32
浏览
0收藏

JavaScript 系列五:数组-开源基础软件社区

前言

在开始学习之前,我们想要告诉您的是,本文章是对JavaScript语言知识中 "数组" 部分的总结,如果您已掌握下面知识事项,则可跳过此环节直接进入题目练习

  • 数组简介
  • 定义数组
  • 数组赋值和使用
  • 数组的常用方法
  • 数组的遍历

如果您对某些部分有些遗忘,👇🏻 已经为您准备好了!

汇总总结

数组简介

数组(Array) 是 ECMAScript 中非常常用的类型。ECMAScript 数组跟其他编程语言的数组有很大区别。跟其他语言中的数组一样,ECMAScript 数组也是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。这意味着可以创建一个数组,它的第一个元素是字符串,第二个元素是数值,第三个是对象。ECMAScript 数组也是动态大小的,会随着数据添加而自动增长。

定义数组

有几种基本的方式可以创建数组。一种是使用 Array 构造函数,比如:

let colors = new Array()

 

如果知道数组中元素的数量,那么可以给构造函数传入一个数值,然后 length 属性就会被自动创建并设置为这个值。比如,下面的代码会创建一个初始 length 为 20 的数组:

let colors = new Array(20)

 

也可以给 Array 构造函数传入要保存的元素。比如,下面的代码会创建一个包含 3 个字符串值的数组:

let colors = new Array('red', 'blue', 'green')

 

创建数组时可以给构造函数传一个值。这时候就有点问题了,因为如果这个值是数值,则会创建一个长度为指定数值的数组;而如果这个值是其他类型的,则会创建一个只包含该特定值的数组。下面看一个例子:

let colors = new Array(3) // 创建一个包含 3 个元素的数组

let names = new Array('Greg') // 创建一个只包含一个元素,即字符串"Greg"的数组

 

在使用 Array 构造函数时,也可以省略 new 操作符。结果是一样的,比如:

let colors = Array(3) // 创建一个包含 3 个元素的数组

let names = Array('Greg') // 创建一个只包含一个元素,即字符串"Greg"的数组

 

另一种创建数组的方式是使用数组字面量(array literal)表示法。数组字面量是在中括号中包含以逗号分隔的元素列表,如下面的例子所示:

let colors = ['red', 'blue', 'green'] // 创建一个包含 3 个元素的数组

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

let values = [1, 2] // 创建一个包含 2 个元素的数组

 

在这个例子中,第一行创建一个包含 3 个字符串的数组。第二行用一对空中括号创建了一个空数组。

第三行展示了在数组最后一个值后面加逗号的效果: values 是一个包含两个值(1 和 2)的数组。

数组赋值和使用

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

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,如下例所示:

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

数组的常用方法

1.Array.join()

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

let colors = ['red', 'blue', 'green'] // 创建一个包含 3 个字符串的数组 colors[99] = 'black' //添加一种颜色(位置99) console.log(colors.length) // 100
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

二:以下代码输出什么

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

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

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: C

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


二、
Answer: D

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


三、
Answer: C

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

 

 

 

 

 

 

 

已于2021-8-9 16:32:26修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐