JavaScript常用的数组基础知识

深藏阁楼爱情的钟 2022-10-23 05:55 4阅读 0赞

# 一、数组的创建 #

第一种：使用Array构造函数

let fruits = new Array()

第二种：在构造函数中传入要保存的元素

let fruits = new Array('apple','banana','pear')

第三种：使用数组字面量

let fruits = ['apple','banana','pear']

Array构造函数还有ES6新增的用于创建数组的静态方法：from() 和 of()方法。from()用于将类数组结构转换为数组实例，of()用于将一组参数转换为数组实例。

console.log(Array.from('Apple')) // [ 'A', 'p', 'p', 'l', 'e' ]
    console.log(Array.of(1,2,3,4)) // [ 1, 2, 3, 4 ]

# 二、常用方法 #

##### 增删方法 #####

**push()：** 接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度

let fruits = new Array()
    let count = fruits.push('apple','banana')
    console.log(fruits) // [ 'apple', 'banana' ]

**pop()：** 删除并返回数组最后一项

let item = fruits.pop()
    console.log(item) // 'banana'

**shift()：** 删除数组第一项并返回

let item = fruits.shift()
    console.log(item) // 'apple'

**unshift()：** 在数组开头添加任意多个值，返回新的数组长度

let res = fruits.unshift('orange','watermelon')
    console.log(res)  // 4

##### 排序方法 #####

**reverse()：** 对原来数组反向排列

console.log(fruits.reverse()) // [ 'banana', 'apple' ]

**sort()：** 默认情况下会按照升序重新排列数组元素。sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序，即使数组的元素都是数值也会先把数组转换为字符串再比较。比如：

let values = [0, 5, 10, 15]
    values.sort()
    console.log(values) // [ 0, 10, 15, 5 ]

一开始数组中的顺序是正确的，调用sort()后顺序就不对了。所以，sort()方法可以接收一个比较函数，自定义什么值排在前面，什么值排在后面。比较函数接收两个参数，如果第一个参数排在前面，返回负值，相等返回0，否则返回正值。

function compare(value1, value2){ 
        if(value1 < value2){ 
            return -1
        }else if(value1 === value2){ 
            return 0
        }else { 
            return 1
        }
    }
    let values = [0, 25, 10, 15]
    values.sort(compare)
    console.log(values)  // [ 0, 10, 15, 25 ]

##### 操作方法 #####

**concat()：** 创建当前数组的一个副本，然后把它的参数添加到副本末尾，返回新构建的数组

let fruits = new Array()
    let count = fruits.push('apple','banana')
    let fruits2 = fruits.concat('orange','watermelon')
    console.log(fruits) // [ 'apple', 'banana' ]
    console.log(fruits2) // [ 'apple', 'banana', 'orange', 'watermelon' ]

**slice()：** 用于创建一个包含原有数组中一个或多个元素的新数组。

let fruits = [ 'apple', 'banana', 'orange', 'watermelon' ]
    let result = fruits.slice(1) // 从索引1到结束的元素
    console.log(result) // [ 'banana', 'orange', 'watermelon' ]
    let result2 = fruits.slice(1,3) // 从索引1到索引3，不包括3
    console.log(result2) // [ 'banana', 'orange' ]

**splice()：** 使用splice()方式有多种，它的主要目的是在数组中间插入元素。传入三个参数，分别是开始位置、要删除的元素数量，插入的元素，返回空数组

let fruits = [ 'apple', 'banana', 'orange', 'watermelon' ]
    fruits.splice(1, 1) // 从索引1开始，删除一个元素
    console.log(fruits) // [ 'apple', 'orange', 'watermelon' ]

let fruits = [ 'apple', 'banana', 'orange', 'watermelon' ]
    fruits.splice(1, 2, 'pear') // 从索引1开始，删除2个元素，并插入'pear'
    console.log(fruits) // [ 'apple', 'pear', 'watermelon' ]

##### 查找方法 #####

**indexOf()：** 查找元素下标，不存在返回-1

let fruits = [ 'apple', 'banana', 'orange', 'watermelon' ]
    console.log(fruits.indexOf('banana')) // 1

**lastIndex()：** 从数组末尾开始向前搜索元素的下标，不存在返回-1

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    console.log(values.lastIndexOf(3)) // 5

**includes()：** 是否找到与指定元素匹配的项，返回布尔值

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    console.log(values.includes(5)) // true

**find()：** 接收三个参数，分别是当前元素，当前元素索引和数组本身。返回数组中第一个匹配的元素

const person = [
      { 
        name: 'zs',
        age: 34
      },
      { 
        name: 'ls',
        age: 25
      }
    ]
    console.log(person.find((item, index, arrsy) => { 
      return item.age > 30
    })) // { name: 'zs', age: 34 }

**findIndex()：** 返回数组中第一个匹配元素的下标

const person = [
      { 
        name: 'zs',
        age: 34
      },
      { 
        name: 'ls',
        age: 25
      }
    ]
    console.log(person.findIndex((item, index, arrsy) => { 
      return item.age < 30
    })) // 1

##### 迭代方法 #####

**forEach()：** 参数是一个函数，对数组的每一项都运行传入的参数，没有返回值

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    values.forEach(item => {  
      console.log(item * 2)
    })

**some()：** 对数组的每一项都运行传入的参数，如果有一项函数返回true，则该方法返回true

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    let res = values.some(item => item > 3)
    console.log(res) // true

**every()：** 对数组的每一项都运行传入的参数，如果每一项函数返回true，则该方法返回true

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    let res = values.every(item => item > 3)
    console.log(res) // false

**filter()：** 对数组的每一项都运行传入的函数，函数返回true的项会组成数组之后返回

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    let res = values.filter(item => item > 2)
    console.log(res) // [ 3, 4, 5, 3 ]

**map()：** 对数组每一项都运行传入的函数，返回每次函数调用的结果组成的数组

let values = [1, 2, 3, 4, 5, 3, 2, 1]
    let res = values.map(item => item * 2)
    console.log(res) // [2, 4, 6, 8, 10, 6, 4, 2]

##### 归并方法 #####

**reduce()：** 接收两个参数，分别是对每一项都会运行的归并函数以及可选的以之为归并起点的初始值。所传递的函数包含4个参数：上一个归并值，当前项，当前项索引和数组本身。这个函数返回的值会作为下一次调用同一个函数的第一个参数。如果没有reduce()方法传递可选的第二个参数作为归并起点，则第一次迭代将从数组的第二项开始。

let values = [1, 2, 3, 4, 5]
    let sum = values.reduce((prev, cur, index, array) => prev+cur)
    console.log(sum) // 15

以上代码中，第一次执行归并函数时，prev为1，cur为2，返回结果3，接着遍历第三项，cur为3，prev为之前的返回结果3，此时返回6，下次迭代prev值就为6，以此类推，最终计算出数组的和。