前言
在开始学习之前,咱们想要告诉您的是,本文章是对 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: Cjs
的数组能够动静减少,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 源码的正确姿态,看完就学废!