JS 数组创建、访问、常用方法

文章目录

创建
访问
常用属性和相关方法
- [1. length 长度属性](#1. length 长度属性)
- [2. push() 新增元素 - 末尾添加](#2. push() 新增元素 - 末尾添加)
- [3. unshift() 新增元素 - 开头添加](#3. unshift() 新增元素 - 开头添加)
- [4. pop() 移除元素 - 末尾删除](#4. pop() 移除元素 - 末尾删除)
- [5. shift() 移除元素 - 开头删除](#5. shift() 移除元素 - 开头删除)
- [6. concat() 复制数组后新增](#6. concat() 复制数组后新增)
- [7. slice() 复制数组](#7. slice() 复制数组)
- [8. splice() 增删改](#8. splice() 增删改)
- [9. toString() 转字符串](#9. toString() 转字符串)
- [10. join() 转字符串并以指定符号连接](#10. join() 转字符串并以指定符号连接)
- [11. isArray() 判断是否为数组](#11. isArray() 判断是否为数组)
- [12. forEach() 遍历数组](#12. forEach() 遍历数组)
- [13. map() 遍历并返回新数组](#13. map() 遍历并返回新数组)
- [14. filter() 遍历并过滤后返回新数组](#14. filter() 遍历并过滤后返回新数组)
- [15. some() 任意命中](#15. some() 任意命中)
- [16. every() 全部命中](#16. every() 全部命中)
- [17. find() 查找](#17. find() 查找)
- [18. reduce() 归并方法](#18. reduce() 归并方法)

创建

html 复制代码

<script>
    // 方式 1
    let a = []
    a[0] = '1'
    a[1] = '2'
    a[2] = '3'
    console.log(a)

    // 方式 2
    let b = new Array()
    b[0] = '1'
    b[1] = '2'
    b[2] = '3'
    console.log(b)

    // 方式 3
    let c = ['1', '2', '3']
    console.log(c)

    // 方式 4
    let d = new Array('1', '2', '3')
    console.log(d)

    // 方式 5 构造参数为一个数字时, 代表申请数组长度
    let e = new Array(3)
    console.log(e)
</script>

访问

html 复制代码

<script>
    let d = ['1', '2', '3']
    console.log(d[0])
    console.log(d[1])
    console.log(d[2])
</script>

常用属性和相关方法

1. length 长度属性

返回数组长度

html 复制代码

<script>
    let arr = [1, 2, 3, 4, 5];
    console.log(arr.length) // 结果: 5
</script>

2. push() 新增元素 - 末尾添加

将一个或多个元素添加到数组的末尾, 并返回添加后的长度

html 复制代码

<script>
    let arr = [1, 2, 3, 4, 5];
    console.log(arr.push(6, 7)) // 结果: 7
    console.log(arr) // 结果: [1, 2, 3, 4, 5, 6, 7]
</script>

3. unshift() 新增元素 - 开头添加

将一个或多个元素添加到数组的开头, 原元素自动后移, 并返回添加后的长度

html 复制代码

<script>
    let arr = [1, 2, 3, 4, 5];
    console.log(arr.unshift(6, 7)) // 结果: 7
    console.log(arr) // 结果: [6, 7, 1, 2, 3, 4, 5]
</script>

4. pop() 移除元素 - 末尾删除

删除数组中最后一个元素, 并返回被删除的元素值

html 复制代码

<script>
    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(arr.pop()) // 结果: e
    console.log(arr) // 结果: ['a', 'b', 'c', 'd']
</script>

5. shift() 移除元素 - 开头删除

删除数组中第一个元素, 并返回被删除的元素值

html 复制代码

<script>
    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(arr.shift()) // 结果: a
    console.log(arr) // 结果: ['b', 'c', 'd', 'e']
</script>

6. concat() 复制数组后新增

复制原来数组, 并在新数组中添加元素，不会影响原数组

html 复制代码

<script>
    let arr = ['a', 'b', 'c', 'd', 'e'];
    let arr2 = arr.concat('f', 'g')
    console.log(arr) // 结果: ['a', 'b', 'c', 'd', 'e']
    console.log(arr2) // 结果: ['a', 'b', 'c', 'd', 'e', 'f', 'g']
</script>

7. slice() 复制数组

根据起始位置和结束位置复制一份数组, 不会影响原数组

html 复制代码

<script>
    let arr = ['a', 'b', 'c', 'd', 'e'];
    let arr2 = arr.slice(1)
    let arr3 = arr.slice(1, 4)
    console.log(arr) // 结果: ['a', 'b', 'c', 'd', 'e']
    console.log(arr2) // 结果: ['b', 'c', 'd', 'e']
    console.log(arr3) // 结果: ['b', 'c', 'd']

    // 经典案例: 伪数组转真数组
    function func() {
        console.log(Array.isArray(arguments)) // false
        console.log(Array.isArray([].slice.call(arguments))) // true
    }
    func()
</script>

8. splice() 增删改

splice( 索引, 要删除的个数, 新元素1, 新元素2...)

很强大的方法, 可以对数组进行增删改, splice() 方法的返回值是被删除的数组元素。

html 复制代码

<script>
    // 增
    let arr = ['a', 'b', 'c', 'd', 'e'];
    // 从索引 0 开始, 不删除, 插入 f 和 g
    console.log(arr.splice(1, 0, 'f', 'g')) // 结果：被删除元素为 []
    console.log(arr) // 结果：["a", "f", "g", "b", "c", "d", "e"]

    // 删
    let arr2 = ['a', 'b', 'c', 'd', 'e'];
    // 从索引 1 开始, 删除两个
    console.log(arr2.splice(1, 2)) // 结果：被删除元素为 ["b", "c"]
    console.log(arr2) // 结果：["a", "d", "e"]

    // 改
    let arr3 = ['a', 'b', 'c', 'd', 'e'];
    // 从索引 1 开始, 删除两个, 然后插入 f 和 g
    console.log(arr3.splice(1, 2, 'f', 'g')) // 结果：被删除元素为 ["b", "c"]
    console.log(arr3) // 结果： ["a", "f", "g", "d", "e"]
</script>

9. toString() 转字符串

调用数组内各个元素的 toString() 方法, 并把每个元素的 toString() 结果用逗号相连

html 复制代码

<script>
    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(arr.toString()) // 结果：a,b,c,d,e

    // 重写对象的 toString()
    let arr2 = [
        {
            name: 'a',
            toString: function () {
                return this.name;
            }
        },
        {
            name: 'b',
            toString: function () {
                return this.name;
            }
        },
        {
            name: 'c',
            toString: function () {
                return this.name;
            }
        }]
    console.log(arr2.toString()) // 结果：a,b,c
</script>

10. join() 转字符串并以指定符号连接

调用数组内各个元素的 toString() 方法, 并把每个元素的 toString() 结果用连接符相连

html 复制代码

<script>
    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(arr.join('-')) // 结果：a-b-c-d-e

    // 重写对象的 toString()
    let arr2 = [
        {
            name: 'a',
            toString: function () {
                return this.name;
            }
        },
        {
            name: 'b',
            toString: function () {
                return this.name;
            }
        },
        {
            name: 'c',
            toString: function () {
                return this.name;
            }
        }]
    console.log(arr2.join('-')) // 结果：a-b-c
</script>

11. isArray() 判断是否为数组

判断变量是否是数组类型, true: 数组 false: 非数组

html 复制代码

<script>
    let num = 1;
    console.log(Array.isArray(num)) // 结果：false

    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(Array.isArray(arr)) // 结果：true
</script>

12. forEach() 遍历数组

遍历数组, 回调函数的参数都是可选的, 但是必须保证参数列表顺序

html 复制代码

<script>
    // 语法:
    // forEach(function (当前元素, 当前下标, 数组本身) {
    // })

    let arr = ['a', 'b', 'c', 'd', 'e'];
    arr.forEach(function (item, index, array) {
        console.log('第' + index + '个索引位置的数据是' + item)
        if (index === arr.length - 1) {
            console.log('数组对象:' + array)
        }
    })
</script>

13. map() 遍历并返回新数组

遍历数组, 每一次遍历都必须有一个返回值(默认返回 undefined), 最后根据每一次的返回值返回一个新的数组

回调函数的参数都是可选的, 但是必须保证参数列表顺序

html 复制代码

<script>
    // 语法:
    // map(function (当前元素, 当前下标, 数组本身) {
    // return item
    // })

    let arr = ['a', 'b', 'c', 'd', 'e'];
    let arr2 = arr.map(function (item, index, array) {
        return item += '1'
    })
    console.log(arr2) // 结果：["a1", "b1", "c1", "d1", "e1"]
</script>

14. filter() 遍历并过滤后返回新数组

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 最后把所有返回 true 的元素, 筛选成一个新的数组

html 复制代码

<script>
    // 语法:
    // filter(function (当前元素, 当前下标, 数组本身) {
    // return true;
    // })
    let arr = ['a', 'b', 'c', 'd', 'e'];
    let arr2 = arr.filter(function (item, index, array) {
        return item === 'a' || item === 'e'
    })
    console.log(arr2) // 结果：["a", "e"]
</script>

15. some() 任意命中

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 只要有一次返回了 true, 那么 some() 的返回值就为 true

html 复制代码

<script>
    // 语法:
    // some(function (当前元素, 当前下标, 数组本身) {
    // return true;
    // })

    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(arr.some(function (item, index, array) {
        return item === 'a'
    })) // 结果: true

    console.log(arr.some(function (item, index, array) {
        return item === 'z'
    })) // 结果: false
</script>

16. every() 全部命中

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 当所有的返回都为 true, 那么 every() 的返回值就为 true

html 复制代码

<script>
    // 语法:
    // every(function (当前元素, 当前下标, 数组本身) {
    // return true;
    // })
    let arr = ['a', 'b', 'c', 'd', 'e'];
    console.log(arr.every(function (item, index, array) {
        return item.length > 0
    })) // 结果: true

    console.log(arr.every(function (item, index, array) {
        return !item === 'e'
    })) // 结果: false
</script>

17. find() 查找

遍历数组, 每一次遍历都必须返回一个布尔值(默认返回 false), 当碰见返回 true 的元素时, 停止遍历, 并返回该元素。

和 filter() 不同的是, filter() 会遍历完整个数组, 而 find() 只要碰见一次 true，就会直接停止遍历。

html 复制代码

<script>
    // 语法:
    // find(function (当前元素, 当前下标, 数组本身) {
    // return true;
    // })

    let arr = ['a', 'b', 'c', 'd', 'e'];
    let arr2 = arr.find(function (item, index, array) {
        return item === 'a'
    }) // 结果：a

    // 这个地方如果用 filter() 遍历, 会返回 ['a', 'e'], 但是用 find() 遍历只会返回 'a'
    // 因为 find() 遍历时, 只要有一次返回 true, 就会停止遍历
    // 第一次遍历 item === 'a' 这个结果返回 true, 所以遍历直接结束了
    let arr3 = arr.find(function (item, index, array) {
        return item === 'a' || item === 'e'
    })
    console.log(arr2) // 结果：a
</script>

18. reduce() 归并方法

作用：

遍历数组。每一次遍历, 都会把上一次遍历的结果，当作参数传入，当是第一次遍历时, 因为没有上一次的结果, 所以需要指定一个初始值, 来代替上一次遍历结果

语法结构：

javascript 复制代码

reduce(function (prev, item, index, array) {
 return result
}, init))

参数解释：

prev: 上一次遍历的结果
item: 当前元素
index: 当前索引
array: 数组
init: 初始值。用来代替第一次遍历时, 没有上一次结果的情况。第一次遍历时 init 赋值给 prev

使用案例：

html 复制代码

<script>
    // 累计求和
    let arr = [1, 2, 3, 4, 5]
    console.log(arr.reduce(function (prev, item, index, array) {
        return prev + item;
    }, 0)) // 结果：15

    // 求最大值
    console.log(arr.reduce(function (prev, item, index, array) {
        return Math.max(prev, item)
    }, 0)) // 结果：5
</script>

案例分析：

(1) 累计求和 - 共遍历五次：

第一次: prev = init = 0, item = 1, index = 0, array = 数组, 返回值 = 0 + 1

第二次: prev = 1, item = 2, index = 1, array = 数组, 返回值 = 1 + 2

第三次: prev = 3, item = 3, index = 2, array = 数组, 返回值 = 3 + 3

第四次: prev = 6, item = 4, index = 3, array = 数组, 返回值 = 6 + 4

第五次: prev = 10, item = 5, index = 4, array = 数组, 返回值 = 10 +

(2) 求最大值 - 共五次遍历

第一次: prev = init = 0, item = 1, index = 0, array = 数组, 返回值 = Math.max(0, 1)

第二次: prev = 1, item = 2, index = 1, array = 数组, 返回值 = Math.max(1, 2)

第三次: prev = 2, item = 3, index = 2, array = 数组, 返回值 = Math.max(2, 3)

第四次: prev = 3, item = 4, index = 3, array = 数组, 返回值 = Math.max(3, 4)

第五次: prev = 4, item = 5, index = 4, array = 数组, 返回值 = Math.max(4, 5)