JavaScript学习笔记(三) 数组

严格来说,在 JavaScript 中并不存在数组这个数据类型,但是 JavaScript 却提供了一种具有数组特性的对象

并且通过一定的封装,以及提供一系列的语法糖,让这个对象用起来像真正的数组一样方便

1、创建数组

(1)数组字面量

数组字面量由零个或多个用逗号分隔的表达式组成,每个表达式的值可以是任意类型,所有表达式用方括号括起来

> // 创建一个空数组
> var empty = []
> // 创建一个带有内容的数组
> var fruit = ['apple', 'banana', 'cherry']

检查一下刚刚创建的数组,发现它是一个 object 类型

> typeof fruit
// 'object'

在创建数组的时候,数组中的每个元素都会得到一个默认的属性名,第一个为 '0',第二个为 '1',以此类推

最终,属性名和元素值以键值对的形式存储下来,类似于下面直接用对象直接量创建的一个对象

> var fruit = {'1': 'apple', '2': 'banana', '3': 'cherry'}

当然,两者(使用数组直接量创建数组 和 使用对象直接量创建对象)还是有很多不同之处的

  • 数组继承自 Array.prototype,对象继承自 Object.prototype,两者具有的方法有所不同
  • 数组拥有一个神奇的 length 属性,而对象没有

(2)new Array()

可以使用 new 运算符加上 Array 构造函数创建一个数组

> // 创建一个空数组
> var empty = new Array()

2、元素的增删改查

(0)数组的索引

对于常规的数组而言,数组的索引是从零开始的连续增加的正整数,但是在 JavaScript 中情况就不一样了

因为数组也是对象的一种,所以理论上我们可以使用任意合法的字符串索引数组,就像索引对象属性一样

那么怎么区分数组索引和对象属性呢?

JavaScript 规定,只有在 [0, 2**32) 之间的整数才能作为数组索引,否则只能将其当作对象属性

(1)元素的读取(查)

使用方括号操作符( [] )可以访问数组中的元素

方括号的左边是数组的引用,方括号的里面是一个返回非负整数的任意表达式,作为数组的索引

> var fruit = ['apple', 'banana', 'cherry']
> fruit[0]
// 'apple'

不要忘了哦,数组是对象的一种特殊形式,所以使用方括号访问数组元素就像使用方括号访问对象属性一样

JavaScript 会把数字索引值转化为字符串索引值,然后将其作为属性名使用

(2)元素的设置(改)

设置元素的值同样可以使用方括号运算符

> var fruit = ['apple', 'banana', 'cherry']
> fruit[0] = 'almond'
> fruit[0]
// 'almond'

(3)元素的删除(删)

  • delete 运算符:在原数组中将指定索引的元素值设置为 undefined
> var drink = ['milk', 'tea', 'coffee']
> delete drink[1]
> drink[1]
// undefined
> drink[2]
// coffee
  • pop 方法:在原数组中删除最后一个元素,并返回删除的元素
> var drink = ['milk', 'tea', 'coffee', 'beer']
> var drink_popped = drink.pop()
> drink
// ['milk', 'tea', 'coffee']
> drink_popped
// 'beer'
  • shift 方法:在原数组中删除最前一个元素,并返回删除的元素
> var drink = ['milk', 'tea', 'coffee', 'beer']
> var drink_shifted = drink.shift()
> drink
// ['tea', 'coffee', 'beer']
> drink_shifted
// 'milk'
  • splice 方法:在原数组中删除指定元素,第一个参数指定起始索引,第二个参数指定长度,返回删除的元素
> var drink = ['milk', 'tea', 'coffee', 'coke', 'sprite', 'beer']
> var drink_spliced = drink.splice(3, 2)
> drink
// ['milk', 'tea', 'coffee', 'beer']
> drink_spliced
// ['coke', 'sprite']

(4)元素的增加(增)

  • 添加元素最简单的方式就是给新索引赋值
> var food = ['rice', 'meat', 'vegetable']
> food[3] = 'noodle'
> food
// ['rice', 'meat', 'vegetable', 'noodle']
  • push 方法:在原数组的最后添加一个元素,返回新数组中元素的个数
> var food = ['rice', 'meat', 'vegetable']
> var food_length = food.push('bread')
> food
// ['rice', 'meat', 'vegetable', 'bread']
> food_length
// 4
  • unshift 方法:在原数组的最前添加一个元素,返回新数组中元素的个数
> var food = ['rice', 'meat', 'vegetable']
> var food_length = food.unshift('bread')
> food
// ['bread', 'rice', 'meat', 'vegetable']
> food_length
// 4
  • splice 方法:除了删除数组中的元素,splice 方法还可以通过第三个可选的参数添加元素
> var food = ['rice', 'meat', 'vegetable']
> var food_spliced = food.splice(2, 0, 'fish')
> food
// ['rice', 'meat', 'fish', 'vegetable']
> food_spliced
// []

3、元素的遍历

由于数组也是对象的一种,所以我们可以使用遍历对象的方式来遍历数组,常用的有 for-in 循环和 for-of 循环

> var fruit = ['apple', 'banana', 'cherry']
> fruit[5] = 'filbert'
> // for-in 循环
> for (let index in fruit) {
    console.log(fruit[index])
}
// apple
// banana
// cherry
// filbert
> // for-of 循环
> for (let item of fruit) {
    console.log(item)
}
// apple
// banana
// cherry
// undefined
// undefined
// filbert

4、数组的 length 属性

JavaScript 数组 length 属性的值不一定等于数组中元素的个数,它实际上是等于数组中最大的合法索引加 1

在这里有一条规则,那就是 在数组中肯定找不到一个元素的索引值大于或等于它的长度

为了维持这个规则,length 属性有许多有趣的行为

  • 如果为一个数组元素赋值,并且它的索引 i 大于或等于现有的数组长度,那么 length 属性的值将设置为 i + 1
> var alphabet = ['a', 'b', 'c']
> alphabet.length
// 3
> alphabet[4] = 'e'
> alphabet.length
// 5
  • 如果为一个数组元素赋值,并且它的索引不是一个合法的数组索引,那么 length 属性的值将不会发生改变
> var alphabet = ['a', 'b', 'c']
> alphabet.length
// 3
> alphabet[-1] = 'z'
> alphabet.length
// 3
  • 如果设置 length 属性为一个小于当前长度的非负整数 n 时,数组中那些索引值大于或等于 n 的元素将被删除
> var alphabet = ['a', 'b', 'c']
> alphabet.length
// 3
> alphabet.length = 1
> alphabet
// ['a']

5、数组的方法

JavaScript 提供了一套作用于数组的方法,这些方法是储存在 Array.prototype 的函数

(1)常规的数组方法

  • join:将数组中的所有元素都转化为字符串并拼接在一起,返回拼接后的字符串

    可以通过一个可选的参数(字符串类型)指定分隔符,默认使用逗号

> var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
> var numbers_join = numbers.join()
> numbers_join
// '0,1,2,3,4,5,6,7,8,9'
  • reverse:将数组中的元素倒序排列,返回排序后的数组
> var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
> var numbers_reverse = numbers.reverse()
> numbers_reverse
// [ 9, 8, 7, 6, 5, 4, 3, 2, 1, 0 ]
  • sort:将数组中的元素按照一定的规则排序,返回排序后的数组

    可以通过一个可选的参数(函数类型)指定元素之间的比较规则,默认为字典序

> var numbers = [111, 3, 22]
> ns1 = numbers.sort() // 转化为字符串,按照字典序排列
> ns2 = numbers.sort(function(a, b) { return a < b }) // 按照数值从大到小排列
> ns3 = numbers.sort(function(a, b) { return a > b }) // 按照数值从小到大排列
> ns1
// [ 111, 22, 3 ]
> ns2
// [ 111, 22, 3 ]
> ns3
// [ 3, 22, 111 ]
  • concat:拼接两个数组的元素,返回拼接之后的数组
> var a = [1, 2, 3]
> var b = [4, 5, [7], [8, 9]]
> var c = a.concat(b)
> var d = b.concat(a)
> c
// [1, 2, 3, 4, 5, [7], [8, 9]]
> d
// [4, 5, [7], [8, 9], 1, 2, 3]
  • slice:返回指定范围的数组片段

    两个参数分别指定起止位置,省略第二个参数默认为数组最后,同时省略第一个参数默认为数组最前

> var a = [1, 2, 3, 4, 5]
> var b = a.slice(1, 4)
> var c = a.slice(2) // 省略第二个参数
> var d = a.slice() // 同时省略第二个和第一个参数
> b
// [ 2, 3, 4 ]
> c
// [ 3, 4, 5 ]
> d
// [ 1, 2, 3, 4, 5 ]
  • includes:检查数组中是否包含特定的元素,有的话返回 true,没有的话返回 false
> var numbers = [1, 2, 3, 4, 5]
> numbers.includes(0)
// false
> numbers.includes(1)
// true
  • indexOf:检查数组中是否包含特定的元素,有的话返回对应的索引,没有的话返回 -1
> var numbers = [1, 2, 3, 4, 5]
> numbers.indexOf(0)
// -1
> numbers.indexOf(1)
// 0

(2)ECMAScript5 中的数组方法

ECMAScript5 中新定义的数组方法具有一些类似的特性,这里先做介绍

这些方法大都接收一个函数作为参数,并且对数组中的每个元素都调用一次该函数

该函数接收三个参数,分别是数组元素、元素索引和数组本身

(1)forEach

> var numbers = [1, 3, 5, 7, 9]
> // 计算数组中所有元素的总和
> var sum = 0
> numbers.forEach(function(value){
    sum += value
})
> sum
// 25
> // 将数组中的每个元素加 1
> numbers.forEach(function(value, index, array){
    array[index] = value + 1
})
> numbers
// [2, 4, 6, 8, 10]

(2)map

> var numbers = [1, 2, 3, 4, 5]
> // 将数组中的每个元素乘 2,并返回一个新的数组
> var numbers_doubled = numbers.map(function(number){
    return (number * 2)
})
> numbers_doubled
// [2, 4, 6, 8, 10]

(3)filter

> var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
> // 留下偶数元素
> var even_numbers = numbers.filter(function(number){
    return (number % 2 === 0)
})
> even_numbers
// [2, 4, 6, 8, 10]

(4)every / some

> function isPrime(val) {
    if (val < 2) {
        return false
    } else if (val === 2) {
        return true
    } else { // val > 2
        if (val % 2 === 0) {
            return false
        } else { // val % 2 !== 0
            for (let i = 3; i * i <= val; i += 2) {
                if (val % i === 0) {
                    return false
                }
            }
            return true
        }
    }
}
> // 判断数组中的每个元素是否都是素数
> [2, 3, 5, 7].every(function(value){
    return isPrime(value)
})
// true
> [2, 3, 5, 7, 9].every(function(value){
    return isPrime(value)
})
// false
> // 判断数组中是否存在一个元素是素数
> [4, 6, 8, 9].some(function(value){
    return isPrime(value)
})
// false
> [2, 4, 6, 8, 9].some(function(value){
    return isPrime(value)
})
// true

【 阅读更多 JavaScript 系列文章,请看 JavaScript学习笔记 】

你可能感兴趣的:(JavaScript学习笔记(三) 数组)