【JavaScript】15_数组初步及常用方法

102 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第17天,点击查看活动详情

1、简介

数组(Array)

  • 数组也是一种复合数据类型,在数组可以存储多个不同类型的数据

  • 数组中存储的是有序的数据,数组中的每个数据都有一个唯一的索引 可以通过索引来操作获取数据

  • 数组中存储的数据叫做元素

  • 索引(index)是一组大于0的整数

  • 创建数组 通过Array()来创建数组,也可以通过[]来创建数组

  • 向数组中添加元素 语法: 数组[索引] = 元素

  • 读取数组中的元素 语法: 数组[索引] - 如果读取了一个不存在的元素,不好报错而是返回undefined

length

-   获取数组的长度
-   获取的实际值就是数组的最大索引 + 1
-   向数组最后添加元素: 数组[数组.length] = 元素
-   length是可以修改的
    <script>
        const obj = {name:'孙悟空',age:18}
​
        const arr = new Array()
        const arr2 = [1,2,3,4,5]//数组字面量
​
        arr[0] = 43
        arr[1] = 22
        arr[2] = 44
        arr[3] = 88
        arr[4] = 99
​
        // 使用数组时,应该避免非连续数组,因为它性能不好
        // arr[100] = 99
​
        // console.log(arr[1])
        // console.log(typeof arr) // object
​
        arr[arr.length] = 33;
        arr[arr.length] = 66//没有用,因为越界
​
        arr.length = 5
        console.log(arr)
    </script>

2、遍历数组

遍历数组

  • 遍历数组简单理解,就是获取到数组中的每一个元素
    <script>
        //任何类型的值都可以成为数组中的元素
        let arr = [1,'hello',true,null,{name:'孙悟空'},() => {}]
​
        //创建数组时尽量要确保数组中存储的数据的类型是相同类型的
        arr = ['孙悟空','猪八戒','沙和尚']
        console.log(arr)
​
        arr = ['孙悟空','猪八戒','沙和尚','唐僧','白骨精']  
        for(let i = 0; i < arr.length-1; i++){
            console.log(arr[i])
        }
​
        for(let i = arr.length-1; i >= 0; i--){
            console.log(arr[i])
        }
​
        /* 
            定义一个Person类,类中有两个属性name和age
                然后创建几个Person对象,将其添加到一个数组中
​
            遍历数组,并打印未成年人的信息
        */
​
        class Person {
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
        }
​
        const personArr = [
            new Person('孙悟空',18),
            new Person('沙和尚',25),
            new Person('红孩儿',9)
        ]
        
        for(let i = 0; i < personArr.length; i++){
            if(personArr[i].age < 18){
                console.log(personArr[i])
            }
        }
    </script>

3、for-of语句

for-of语句可以用来遍历可迭代对象

语法:

for(变量 of 可迭代的对象){

语句...

}

执行流程:

for-of的循环体会执行多次,数组中有几个元素就会执行几次,

每次执行时都会将一个元素赋值给变量

    <script>
        const arr = ['孙悟空','猪八戒','沙和尚','唐僧']
        for(let value of arr){
            console.log(value)
        }
​
        for(let value of 'hello'){
            console.log(value)
        }
    </script>

4、数组的方法

developer.mozilla.org/en-US/docs/…

Array.isArray()

  • 用来检查一个对象是否是数组

at()

  • 可以根据索引获取数组中的指定元素
  • at可以接收负索引作为参数

concat()

  • 用来连接两个或多个数组
  • 非破坏性方法,不会影响原数组,而是返回一个新的数组
    <script>
        console.log(Array.isArray({name:'孙悟空'}))//false
        console.log(Array.isArray([1,2,3]))//true
​
        const arr = ['孙悟空','猪八戒','沙和尚','唐僧','白骨精']
        console.log(arr.at(-2))//负数是从-1开始的,就是倒数第二个
        console.log(arr[arr.length-2])//两者相同
​
        const arr2 = ['白骨精','蜘蛛精','玉兔精']
        let result = arr.concat(arr2,['牛魔王','铁扇公主'])
        console.log(result)//相当于是合并了arr和arr2两个数组,顺便添加了两个值
    </script>