前端从入门到精通---数组(Array)

数组是有序集合, 每个值叫做一个元素, 而每个元素在数组中有一个位置, 以数字表示, 称为索引。Javascript的数组是无类型的, 数组元素可以是任意类型, 同一个数组中的不同元素可能是对象或数组。

• 数组的声明

1. 直接声明

var arr = ['Javascript', 'PHP', 'Java']
console.log(arr) // ['Javascript', 'PHP', 'Java']

2. 声明一个空数组, 再通过 push 方法插入

var arr = []
arr.push('Javascript')
arr.push('PHP')
arr.push('Java')
console.log(arr) // ['Javascript', 'PHP', 'Java']

3. 通过 new 关键字声明

var arr = new Array('Javascript', 'PHP', 'Java')
console.log(arr) // ['Javascript', 'PHP', 'Java']

• 数组的索引

数组的索引从 0 开始。

var arr = ['Javascript', 'PHP', 'Java']
// [0]是数组第一个元素: Javascript, [1]是数组第二个元素: PHP, [2]是数组第三个元素: Java
console.log(arr[0], arr[1], arr[2]) // Javascript PHP Java

arr[0] = 'Python' // 更改数组第一个元素值为 Python
console.log(arr[0]) // Python 

• 数组的长度

每个数组都有一个 length 属性, 表示数组元素的个数。

var arr = ['Javascript', 'PHP', 'Java']
console.log('数组长度为:', arr.length) // 3

arr.push('Python') // 在最后添加一个元素 Python
console.log('数组长度为:', arr.length) // 4

• 数组的使用

1. 数组中可以存入对象。

var arr = [
    {
        height:170,
        age: 25,
        weight: 120,
        eat: function () {
            console.log('吃饭')
        },
        sleep: function () {
            console.log('睡觉')
        },
    },
    'Javascript', 
    'PHP', 
    'Java'
]
// 数组第一个元素 arr[0] 为对象
console.log(arr[0]) // {height: 170, age: 25, weight: 120, eat: ƒ, sleep: ƒ}

2. 获取数组的第一个元素和最后一个元素

数组的第一个元素索引为 0, 最后一个元素索引为 length - 1。

var arr = ['Javascript', 'PHP', 'Java']
console.log('数组第一个元素为:', arr[0]) // Javascript
console.log('数组第一个元素为:', arr[arr.length - 1]) // Java

3. 向数组中添加元素

向数组中添加新元素使用 push(elem1, elem2, ...., elemX) 方法, 其在数组尾部插入一个或多个元素。

var arr = ['Javascript', 'PHP', 'Java']
arr.push('Python')
arr.push('Go', 'Dark')
console.log(arr) // ['Javascript', 'PHP', 'Java', 'Python', 'Go', 'Dark']
console.log('数组长度为:', arr.length) // 6

4. 向数组头部添加元素

向数组中添加新元素使用 unshift(elem1, elem2, ...., elemX) 方法, 其在数组头部插入一个或多个元素。

var arr = ['Javascript', 'PHP', 'Java']
arr.unshift('Python')
arr.unshift('Go', 'Dark')
console.log(arr) // ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']
console.log('数组长度为:', arr.length) // 6

5. 把数组所有元素组成一个字符串

使用 join(separator), 其中 separator 是可选的, 为分割符。

var arr = ['Javascript', 'PHP', 'Java']
console.log(arr.join(',')) // Javascript,PHP,Java

6. 删除数组中的元素

使用 splice(index, count, item1, ... , itemX)

• index: 必需。规定添加/删除项目的位置, 使用负数可从数组结尾处规定位置。
• count: 必需。要删除的项目数量。如果设置为 0, 则不会删除项目。
• item1, …, itemX: 可选。向数组添加的新项目。

// 删除一个元素
var arr = ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']
arr.splice(1, 1) // 删除索引位为 1 的元素
console.log(arr) // ['Go', 'Python', 'Javascript', 'PHP', 'Java'], 删除了 `Dark`

// 删除多个元素
arr.splice(1, 2) // 从索引位1开始, 连续删除两个元素
console.log(arr) // ['Go', 'PHP', 'Java'], 删除了 `Python`, `Javascript`

// 添加多个元素
arr.splice(1, 2, 'Flutter', 'C++') // 从索引位1开始, 连续删除两个元素, 再添加两个元素
console.log(arr) // ['Go', 'Flutter', 'C++']

删除数组中的元素还可以使用 delete 方法, 删除后原位置值变为 undefined。

var arr = ['Javascript', 'PHP', 'Java']
delete arr[1]
console.log(arr) // Javascript, undefined ,Java

7. 删除并返回数组的最后一个元素

使用 pop() 方法删除并返回数组的最后一个元素。注意: 会改变数组的长度。

var arr = ['Javascript', 'PHP', 'Java']
console.log(arr.pop()) // Java
console.log(arr) // ['Javascript', 'PHP']
console.log('数组长度为:', arr.length) // 2

8. 删除并返回数组的第一个元素

使用 shift() 方法删除并返回第一个元素的值。注意: 会改变数组的长度。

var arr = ['Javascript', 'PHP', 'Java']
console.log(arr.shift()) // Javascript
console.log(arr) // ['PHP', 'Java']
console.log('数组长度为:', arr.length) // 2

9. 颠倒数组中元素的顺序

使用 reverse()

var arr = ['Javascript', 'PHP', 'Java']
console.log(arr.reverse()) // ['Java', 'PHP', 'Javascript']

10. 数组中返回选定的元素

使用 slice(startIndex, endIndex) 返回一个新的数组, 该方法并不会修改数组, 而是返回一个子数组, 包含从 startIndex 到 endIndex （不包括该元素）的数组元素。

• startIndex: 必需。规定从何处开始选取。如果是负数, 那么它规定从数组尾部开始算起的位置。也就是说, -1 指最后一个元素, -2 指倒数第二个元素, 以此类推。
• endIndex: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数, 那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数, 那么它规定的是从数组尾部开始算起的元素。

var arr = ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']
var newArr = arr.slice(1, 3) // 索引位置为 1 和 2 的两个元素
console.log('原数组为:', arr) // ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']
console.log('新数组为:', newArr) // ['Dark', 'Python']

11. 连接两个或更多的数组

使用 concat(arr1, ..., arrX) 连接两个或多个数组。

var arr1 = ['Javascript', 'PHP', 'Java']
var arr2 = ['Go', 'Dark', 'C++']
var arr = arr1.concat(arr2)
console.log(arr) // ['Javascript', 'PHP', 'Java', 'Go', 'Dark', 'C++']

还可以通过新建一个数组, 使用 ...arr来存入到新数组中。

var arr1 = ['Javascript', 'PHP', 'Java']
var arr2 = ['Go', 'Dark', 'C++']
var newArr = [...arr1, ...arr2]
console.log(newArr) // ['Javascript', 'PHP', 'Java', 'Go', 'Dark', 'C++']

12. 查找数组出现的位置

使用 indexOf(index, fromIndex) 和 lastIndexOf(index, fromIndex), 如未检索到数据, 则返回 -1。

• indexOf: 返回某个指定的字符串值在字符串中首次出现的位置。
• lastIndexOf: 返回一个指定的字符串值最后出现的位置, 在一个字符串中的指定位置从后向前搜索。
• index: 必需。规定需检索的字符串值。
• fromIndex: 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 arr.length - 1。如省略该参数, 则将从字符串的最后一个字符处开始检索。

var arr = ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']
console.log(arr.indexOf('Python')) // 2
console.log(arr.indexOf('C++')) // -1

console.log(arr.lastIndexOf('Python')) // 2
console.log(arr.lastIndexOf('C++')) // -1

13. 遍历数组

使用 for循环遍历, 或使用 forEach(function(currentValue, index, arr), thisValue) 函数。

• for循环: 格式有两种: for(var i = 0; i < arr.length; i++) 或 for(var a of arr)。
• forEach: 接受一个 function函数, 包含三个入参:
  • currentValue: 必需。当前元素。
  • index: 可选。当前元素的索引值。
  • arr: 可选。当前元素所属的数组对象。
  • thisValue: 可选。对象作为该执行回调时使用, 传递给函数, 用作 “this” 的值。 如果省略了 thisValue , “this” 的值为 “undefined”。

var arr = ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']

// for循环遍历
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i]) // 打印输出每个元素
}

for(var a of arr) {
  console.log(a) // 打印输出每个元素
}

// forEach函数遍历
arr.forEach(function (value, index, a) {
  console.log(value) // 打印输出每个元素
  console.log(index) // 打印输出每个元素的索引
})

14. 查找数值一个或多个元素

使用 filter(function(currentValue, index, arr), thisValue) 方法, 并返回符合条件所有元素的数组, 该数组为一个新数组, 参数同 forEach 方法。

var arr = ['Go', 'Dark', 'Python', 'Javascript', 'PHP', 'Java']
var newArr = arr.filter(function (currentValue, index) {
    return currentValue !== 'Python' // 过滤不是 `Python` 的值
})
console.log(newArr) // ['Go', 'Dark', 'Javascript', 'PHP', 'Java']

15. 将数组元素计算为一个值

使用 reduce(function(total, currentValue, currentIndex, arr), initialValue)方法，将数组中的每个值（从左到右）开始缩减，最终计算为一个值，另有一个方法 reduceRight(total, currentValue, currentIndex, arr), initialValue) 是从右往左缩减计算。

• total: 必需。初始值, 或者计算结束后的返回值。
• currentValue: 必需。当前元素。
• currentIndex: 可选。当前元素的索引。
• arr: 可选。当前元素所属的数组对象。
• initialValue: 可选。传递给函数的初始值。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var count = arr.reduce(function (total, currentValue, currentIndex, arr) {
  return total + currentValue;
})
console.log('数组总和为:', count) // 55

16. 数组的排序

数组的排序使用 sort(func) 方法在原数组上直接排序, 其中 func 是一个可选函数。

• func: 可选。排序函数。
  • 若 a 小于 b, 在排序后的数组中 a 应该出现在 b 之前, 则返回一个小于 0 的值, 降序。
  • 若 a 等于 b, 则返回 0。
  • 若 a 大于 b, 则返回一个大于 0 的值, 升序。

var arr = [1, 3, 8, 7, 5, 9, 2, 4, 10, 6]
arr.sort() // 默认排序 [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr)

arr.sort(function (a, b) {
    return a - b
})
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 升序

arr.sort(function (a, b) {
    return b - a
})
console.log(arr) // [10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 降序

下一节我们将认识一下Javascript的循环。