关于数组:数组的总结数组简介定义数组赋值和使用常用方法等

前言

在开始学习之前，咱们想要告诉您的是，本文章是对 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，如下例所示：

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

往期精彩

350 页前端校招面试题直击大厂：前端根底、前端外围、计算机根底、我的项目、Hr 面 …
面试官的一句话点破了我：三年的前端教训只相当于人家一年
什么时候能被好运眷顾一次：快手前端三面，败在智力题称砝码分量 …
教你浏览 vue 源码的正确姿态，看完就学废！