1. 什么是数组

`一组任意类型的数据` （可以随意的动态扩容）

2. 数组的作用

用一个容器装多个数据

3. 数组的写法

3.1 构造函数创建数组 Array

var arr = new Array( "参数1"，"参数2"，...... );// new可省略，但不推荐

3.2 数组的字面量表达式（推荐）

var arr = [1，2，"A"];

4. 数组的长度 arr.length

获取数组的长度
改变数组的长度
new Array(n)，括号里面是一个数值，代表这个数组的长度。

5. 数组的下标 arr[i]

下标是从 0 开始
获取元素
改变元素（给元素赋值）

6. 遍历数组

6.1 for 遍历数组 `数组长度决定遍历次数`

var arr = [36, 43, 53, 71, 46, 44, 15, 69, 66, 35];
for (var i = 0; i < arr.length; i++) {
    console.log(i,arr[i]); // 输出的 i 是数值
}

6.2 for...in 遍历数组 `跳过undefined`

k ---> key ---> 键

v ---> value ---> 值

var arr = [36, 43, 53, 71, 46, 44, 15, 69, 66, 35];
for (var k in arr) {
    console.log(k, arr[k]); // 输出的 k 是字符串
}

QQ图片20230325190702.png

7. 栈方法 VS 队列方法

栈方法：后进先出 LIFO （类比羽毛球筒）
队列方法：先进先出 FIFO （类比排队）

8. 数组中的方法

8.1 会改变原数组的一些方法：

1. push()

① 作用：往数组最后添加新元素。改变原数组。
② 参数：多个任意类型的数据
③ 返回值：返回数组的新长度

2. pop()

① 作用：删除数组最后面的元素。改变原数组。
② 参数：无参
③ 返回值：返回被删除的元素

3. shift()

① 作用：删除数组最前面的元素。改变原数组。
② 参数：无参
③ 返回值：返回被删除的元素

4. unshift()

① 作用：往数组最前添加新元素。改变原数组。
② 参数：多个任意类型的数据
③ 返回值：返回数组的新长度

5. splice()

① 作用：删除，插入，替换。改变原数组。
② 参数：起始位置下标，删除的个数，插入多个任意类型的元素......
③ 返回值：返回被删除的元素组成的数组。（插入的返回值是一个空数组）

QQ图片20230327085455.png

6. sort()

① 作用：排序（升序、降序）。改变原数组。
② 参数：无参
③ 返回值：返回排好序的原数组。

【注】sort是根据ASCII码进行比较。>=10的数比较会出错，需要增加配置规则。

QQ图片20230325193854.png

7. reverse()

① 作用：倒序。改变原数组。
② 参数：无参
③ 返回值：返回倒序的原数组。

8.2 不会改变原数组的一些方法：

8.2.1 基本方法:

1. concat()

① 作用：合并/数组浅拷贝。不改变原数组。
② 参数：多个任意类型的数据/无参
③ 返回值：返回合并后的数组/返回拷贝的数组。

QQ图片20230325194450.png

(RPQ}5IWJ`_(}GV}@%5UP.png

2. slice()

① 作用：截取数组指定区域（包括起始位置，不包括结束位置），也可以做拷贝arr.slice(0)。不改变原数组
② 参数：起始位置下标，结束位置下标。若只有一个参数代表从起始位置到最后。
③ 返回值：返回截取的数组。

QQ图片20230325201324.png

3. join()

① 作用：把数组中的所有元素放入一个字符串（分隔符默认是，）。不改变原数组
② 参数："分隔符"
③ 返回值：返回一串指定格式的字符串。

4. indexOf()

① 作用：查找元素是否存在。不改变原数组
② 参数：一个任意类型的数据
③ 返回值：存在该元素返回下标，不存在该元素返回-1。

5. includes()

① 作用：查找元素是否存在。不改变原数组
② 参数：一个任意类型的数据
③ 返回值：存在该元素返回true，不存在该元素返回false。

8.1.2 高阶方法(利用回调函数)：

（实际上可以改变，这里先不做讨论）

1. forEach()

    arr.forEach(function(el,index,arr1){
        //el 索引值 ---> 当前元素
        //index 索引 ---> 当前元素下标
        //arr1 遍历的对象 注意:arr和arr1指向同一个地址
        console.log(el,index,arr1);
    })

① 作用：遍历数组(跳过undefined)。不改变原数组
② 参数：回调函数
③ 返回值：无返回值。

2. map()

    arr.map(function(el,index,arr1){
        //el 索引值 ---> 当前元素
        //index 索引 ---> 当前元素下标
        //arr1 遍历的对象 注意:arr和arr1指向同一个地址
        console.log(el,index,arr1);
    })

① 作用：遍历数组(跳过undefined)。不改变原数组
② 参数：回调函数
③ 返回值：返回一个新的数组，新数组的内容由回调函数的return决定。

QQ图片20230327191855.png

3. some()

    arr.some(function(el,index,arr1){
        //el 索引值 ---> 当前元素
        //index 索引 ---> 当前元素下标
        //arr1 遍历的对象 注意:arr和arr1指向同一个地址
        console.log(el,index,arr1);
    })

① 作用：查找数组中是否有满足条件的元素（找到真的就停止遍历）。不改变原数组
② 参数：回调函数
③ 返回值：只要有一个元素满足条件则返回true，否则返回false。

4. every()

    arr.every(function(el,index,arr1){
        //el 索引值 ---> 当前元素
        //index 索引 ---> 当前元素下标
        //arr1 遍历的对象 注意:arr和arr1指向同一个地址
        console.log(el,index,arr1);
    })

① 作用：查找数组是否所有的元素都满足条件（找到假的就停止遍历）。不改变原数组
② 参数：回调函数
③ 返回值：全部元素满足条件则返回true，否则返回false。（默认值是false）

QQ图片20230327195013.png

5. filter()

    arr.filter(function(el,index,arr1){
        //el 索引值 ---> 当前元素
        //index 索引 ---> 当前元素下标
        //arr1 遍历的对象 注意:arr和arr1指向同一个地址
        console.log(el,index,arr1);
    })

① 作用：过滤不满足条件的元素。不改变原数组
② 参数：回调函数
③ 返回值：返回满足条件的元素组成的新数组

6. reduce()

    arr.reduce(function(pre,cur,index,arr1){
        //pre 匿名函数上一次的返回值，没有return返回undefined
        //cur 索引值 ---> 当前元素
        //index 索引 ---> 当前元素下标
        //arr1 遍历的对象 注意:arr和arr1指向同一个地址
        //num pre的初始值。
              //不写num时，pre的初始值是arr[0]，index从1开始遍历
        console.log(pre,cur,index,arr1);
    },num)

① 作用：主要用作累计。不改变原数组
② 参数：回调函数，初始值
③ 返回值：返回回调函数的最终返回值

QQ图片20230327203542.png

五、数组