09.js-数组-CSDN博客

本文链接：https://blog.csdn.net/weixin_53971197/article/details/134020749

数组

数组属于对象类型(复杂类型)
string、boolean、number、undefined 属于基础类型(简单类型)

数组中可以存放任意数据类型的数据

一、数组简介

数组的声明

let arr =[1,2,3,4]
let arr4 = new Array(4);

注意，使用构造函数声明数组的时候，如果只有一个number的参数，则表示数组长度，而数组内容为空，如果参数是两个及其以上的数字，则表示数组元素

let arr1 = [1,2,'封神榜','妲己'];
console.log(arr1);
//使用 Array() 构造函数创建数组
let arr2 = new Array();
console.log(arr2);//空数组

let arr3 = new Array('殷寿');
console.log(arr3);
// 如果Array的参数是一个数字类型数据，表示数组长度，该数组中的数据都是空
let arr4 = new Array(4);
console.log(arr4);
// 如果是两个及其以上的数字，则表示数组中的元素
let arr5 = new Array(4,5);
console.log(arr5);

/* 
数组长度的设置和获取
使用数组的length 属性，既可以设置数组长度，也可以获取数组长度
*/

let arr6=[false,'灰太狼',23,'刘备'];
console.log(arr6.length);//获取数组长度，也就是数组中有几个元素，成为数组长度
//删除数组元素
arr6.length =2;
console.log(arr6);

//清空数组
arr6.length =0;
console.log(arr6);

二、获取数组元素和数组遍历

数组当中的每一个元素，都对应一个数组下标(索引)，下标从0开始计算，获取数组中的数据可以通过arr[下标]的方式获取

let arr3=['武松','武大郎','潘金莲','宋江'];
console.log(arr3[2]);
//随机获取下标，范围是[0,3]
let num=Math.floor(Math.random()*4) ;
console.log(arr3[num]);

遍历数组

for 循环

// for循环
for(let i=0;i<arr4.length;i++){
    console.log(arr4[i]);
    document.write(arr4[i]+'<br/>');
}
document.write('<hr/>');

for-in 循环

for-in 循环，还可以循环对象

for(let key in arr4){
key 是循环的下标，key是变量，可以随意命名
arr4 是要循环的对象
}

for(let key in arr4){
    document.write(arr4[key]+'<br/>');
}
document.write('<hr/>');

foreach 函数

ea6中推荐使用数组方法，forEash()

他里面传入的是一个函数，该函数具有一个形参 item，item 就是当前循环的数组元素
```
arr4.forEach(function(item){
    document.write(item+'<br>');
});
```

三、数组的操作方法

push()

参数 1 个或者任意多个

向数组末尾添加元素

返回值是新数组的长度
unshift()

参数1个或者任意多个

向数组头部添加元素

返回值是新数组的长度，ie6 7 下面，没有返回值
pop()

从数组的尾部删除一个元素，每一次只删除一个

没有参数

返回值是被删除的元素
shift()

从数组的头部删除一个元素，每一次只删除一个

没有参数

返回值是被删除的元素
splice()

从数组的任意位置开始，对指定长度的内容进行删除，替换操作，可以插入任意数据类型的元素

参数1：表示删除或者替换的起始位置

参数2：设置操作数据的长度，包括起始位置

参数3：替换的新元素，也可以不写该参数

参数2，如果不写的话，则表示从参数1开始，一直到数组的最后，全部删除

返回值是删除的元素所组成的数组

以上5个方法，都可以改变原数组

indexOf()方法

返回值是指定内容在数组的下标

参数1：指定的元素内容

参数2：指定开始查找的位置，如果没有第二个参数，默认为0

特点：

1.从指定的位置开始查找

2.找不到的话返回-1

3.第二个参数不能为负数
lastIndexOf()

用法和indexOf()一样，只不过是从指定的位置向前查找
slice() 数组截取

参数1：开始截取的下标位置

参数2：结束截取的下标位置

截取的结果包含开始位置，不包含结束位置

如果参数为负整数，则表示从后面开始往前计算，从-1开始计算

特点：
1. 截取的时候，必须保证开始位置在结束位置之前，否则截取为空数组
2. 参数必须是正整数、负整数或者0，其他非法字符都会被解析为0
3. 如果不写结束位置，则直接截取到最后
4. 如果没有参数，则会把整个数组截取，可以理解为复制数组
concat() 数组合并

参数是要合并的数组，可以是多个，使用逗号隔开
```
let arr4 = arr1.concat(arr2,arr3);
```
返回值是一个合并后的数组
join() 数组转化为字符串

参数只有一个，设置拼接的字符，默认是英文逗号，也可以设置其他符号
```
let str1 =arr5.join('$');
```
reverse() 直接翻转数组

修改数组的本身
```
arr7.reverse();
```

every()

检测数组中所有的元素是否满足条件，如果都满足则返回true否则返回false

使用方式

arr1.every(function(ele){
    return 判断条件
})
ele 是每一次循环时候的数组元素，当判断条件都为true的时候，every() 方法返回true

let arr1 = [3,6,9,12,11];

let bol = arr1.every(function(aa){
    console.log(aa);
    return aa%3==0;
});
console.log(bol);

some()
检测数组中所有的元素是否满足条件，如果都不满足则返回false，否则返回true，既是只要有一个满足条件的元素，就返回true
```
let arr2 = [2,4,6,8,10];

let bol3 = arr2.some(function(ele){
    return ele%5==0;
});
```
用法和 every 一致
filter() 过滤

满足条件的数组元素分离到一个新的数组中，原数组不变
```
let arr4 = arr3.filter(function(ele){
    return ele%2==0;
});
```
map() 数组映射

可以给数组的所有元素进行统一操作，返回的是统一操作之后的数组
```
let arr5 = arr3.map(function(ele){
    return ele +'px';
});
```
sort() 对数组进行排序

该方法改变原数组

sort 默认把number 类型转化为string 类型，然后根据每个字符串的字符编码比较大小

字符串大小的比较原则

几个字符串比较大小，会依次比较每一位置上的字符编码大小，直到比较出大小之后，就不再比较，后面的字符直接省略

字符编码排序规则

数字 0-9 依次变大

A-Z,a-z 依次变大

A<a
```
let arr1 =[ 1,4,6,3,2,10];
arr1.sort();
console.log(arr1);

let arr2 =['e','a','c','b'];
arr2.sort();
console.log(arr2);
```
一般的，在进行排序的时候，会给sort() 传入一个参数，该参数是一个函数，在函数中设置排序规则，该函数必须有返回值

函数返回值
- return 参数1-参数2;从小到大排序
- return 参数2-参数1;从大到小排序
规则：
- 当返回一个正数，就会交换两者的位置
- 当返回一个负数，不会交换两者的位置
- 当返回一个0，会认为这两个数字相等，也不会交换位置
```
let arr4 =[110,11,23,45,7,5,95];
arr4.sort(function(a,b){
    return a-b;
});
console.log(arr4);
```

四、二维数组

arr4 就是一个二维数组，二维数组，指的是数组的每一个元素也是一个数组
获取数组中的元素 arr4[1][1]
第一个下标表示的是arr4 数组中的第几个数组，第二个下标表示的是该数组中的第几个元素
遍历二维数组，需要使用双重for循环

for (let i = 0; i < arr4.length; i++) {

    for (let j = 0; j < arr4[i].length; j++) {
            document.write(arr4[i][j]+'<br>') ;   
    }
    document.write('<hr>') ;  
}