细说JavaScript数组（JavaScript数组详解）

iShot_2024-01-18_11.58.11.png

一、理解数组

数组不是一种独立的数据类型，它由对象发展而来，它可以使用对象的诸多方法，但又区别于对象。数组通常用来存储列表等信息，它就像一张电子表格中的一行，包含了若干个单元格，每个单元格都可以存放不同的数据，每个单元格都有一个索引值来标识自己,与string类型的索引值一样，也是从0开始的

1、什么是数组

生活中我们经常遇到，比如期末成绩名次表，特点就是具有严格的顺序，都是从第一名开始的顺序依次递减，中间没有间断，==这种有序的数据就可以称为数组==

2、数组的组成结构

JavaScript的==数组使用中括号定界==，中括号包裹的区域就是数组，数组汇总各个成员之间用==逗号==分隔，它们被称为数组元素，简称元素，这个数组的元素顺序就是自左向右，一次递增，以数字0位开始值。

// 代码实现
[
'斗帝',
'斗圣',
'斗尊',
'斗宗',
'斗皇'
]

3、数组和对象的区别与联系

在JacaScript中一切皆为对象，数组同样也是由对象发展而来的
==从联系的角度看==：对象包含数组，数组由对象发展而来，这意味着数组能直接转换为对象（除类对象外）其他对象不能轻松的转化为数组，类对象可以看作数组转换为对象后的对象，比如：

{
0:'斗帝',
1:'斗圣',
2:'斗尊',
3:'斗宗',
4:'斗皇',
}

==从区别的角度看==：二者书写格式、使用场景都有区别，书写前面讲过，使用场景看：数组适合存储一组数据值，这组数据值有一定的联系，而对象更是个存储多种不同的数值，数据之间不需要关联

二、创建数组

1、构造函数创建数组

// 通过构造函数创建数组时，传入的参数为数组的初始化元素，其中多个参数使用逗号进行分隔，每个参数作为数组的一个元素添加到新创建的数组中
// 语法格式
var 变量名 = new Array(元素0,元素1,...元素n)；

// 例子
var array = new Array(1,2,3,4,5);
console.log(array);

// 使用构造函数创建数组有一个特点就是传入的参数时一个大于0的整数时，该数组是一个置顶了元素个数的空数组
// 元素个数就是这个参数，它通常被称为稀疏数组

2、数组直接量创建数组

// 使用数组直接量创建数组是最简单的方法，只需要将数组元素写在中括号即可，其中元素之间需要使用逗号分隔
// 数组元素可以是任意数据类型，包括数组本身
// 语法格式
var 变量名 = [元素0,元素1,... 元素n];

// 例子
function foo(){
    console.log(10);
}
var array = [10,'10',[10],foo,{num:10}];

三、数组元素

在数组结构中，开发者能够将各种数据类型当作数组的一个元素存入数组中，同时开发者也可以使用中括号[ ] 来对数组中的元素进行访问、查询、修改等操作

1、元素的获取

// 语法格式
数组[索引];

var array = ['斗帝','斗圣','斗尊','斗宗','斗皇'];
alert(array[3]);  // 结果 斗宗

2、元素的添加

// 当需要添加数组元素时，只需要给数组指定一个索引，并对其进行赋值，即可完成元素的创建
var array = [];
array[0] = '斗帝';
console.log(array[0]);

// 注意
// 当指定一个新索引与一存在最大索引的值差大于2时，该数组就会变成稀疏数组，即已存在若干索引没有元素与之对应
array[5] = '豆';
console.log(array);
console.log(array.length);

// 如何避免2中稀疏数组的问题呢
// 可以使用push()【向后添加元素】和unshift()【向前添加元素】方法
// 或者使用pop()【向后删除元素】和shift(）【向前删除元素】方法

3、元素的删除

var arr = [1, 2, 3, 4];
delete arr[0];
console.log(arr);   //[undefined, 2, 3, 4]

4、元素的修改

// 当指定一存在的索引进行赋值时，会覆盖原来元素的值，达到修改的目的
var array = [];
array[0] = '斗帝';
console.log(array[0]);
array[0] = '斗皇';
console.log(array[0]);

5、元素的查询

// 在获取和添加元素时，真是的解析步骤会将索引转换为字符串并当作属性名，属性值为元素
var array = [];
array['0'] = 'A';
array.push('C');
console.log(array[0]); // A
console.log(array['1']); // C

6、元素的遍历

// for...in 循环适用于枚举对象的属性，例如
var array = ['A','B','C'];
for(var element in array){
    console.log(array[element]);
}

// 使用forEach()方法，它按照索引的顺序将元素一次传递给已定义的一个函数
var array = [1,2,3,4,5];
array.forEach(function(x){
    console.log(x); // 1,2,3,4,5
});

四、特殊的数组形式

1、稀疏数组

稀疏数组是一种特殊的数组形式，与之相反的就是稠密数组，二者的却别就是索引的连续性，稀疏数组的索引会有断层，而稠密数组的索引是连续的，并且从0开始，一般情况下不会主动使用稀疏数组，但有些情况我们会遇到这类数组，比如使用delete运算符删除索引，创建数组时的手误、错误使用构造函数等，下面是几个例子

var array1 = new Array(5);  // 创建了稀疏数组
var array2 = [1,,3];  // 创建时手误
var array3 = ['a','b','c'];
delete array3[1];  // 删除了索引

//稀疏数组的特点就是它的length属性不能代表有效元素的个数，其值为最大索引减1
// 并且有些数组元素是不存在的，默认为endefined
// 如何规避
var array = [1,2,3,4,5];
for(var i=0;i<array.length;i++){
    if(array[i] === undefined) continue;
    console.log(array[i]);
}

2、多维数组

多维数组就是数组的元素还可以是数组，也就是我们说的嵌套关系

var array = [
    'A',
    ['V','B'];
    ['D',['e','f']]
]

// 访问多为数组
array[2][1][0] // e

3、类数组对象

类数组对象相当于对象使用数组的方式来存储数据，属性名即字符串类型的数值，可以使用数组指定索引的方式进行访问

var obj = {'0':'A','1':'B','2':'C'};
console.log(obj[0]); // A
// 需要注意的是类数组对象没有length属性

4、字符串

在js中字符串以一种==只读的类数组==的形式存在，但并不是真正的数组类型，这一机制让它有了数组的一些特征，比如可以通过索引进行访问，但是无法进行修改，字符串也有它自身访问方法charAt()参数为索引，但明显使用[ ]的方式更为方便

var string = '知数网络';
console.log(string[0]); // 知
console.log(string.charAt(2)); // 网

五、数组特有的方法

1、join()方法

// join()方法的作用是将数组的雨哦有元素转换为字符串，并将每个数组元素进行连接
// 最终生成字符串
// 该方法调用者是自定义的数组它能接收一个参数，该参数指定了元素间连接的方式
// 如果不指定参数，默认用逗号作为连接符
// 语法格式
myArray.join(separator);

// 例子
var arrayOne = ['A','B'];
var arrayTwo = ['AA',['BB','CC']]
console.log(arrayOne.join());
console.log(arrayTwo.join());
console.log(arrayOne.join('@'))
console.log(arrayTwo.join('@'));

2、contac()方法

// concat()方法的作用就是连接两个或多个数组，该数组不会修改原数组，而是返回一个新数组
// 它的调用者是自定义的数组，它的参数可以是任意多个，参数可以是具体的值，也可以是数组对象
// 语法格式
myArray.concat(arrayX,arrayX,...);

// 例子
var array = ['a','b','v'];
var array1 = array.concat('d',['2',['f']]);
console.log(array1.length);
console.log(array1);
// 该方法只能将参数中的值和一维数组元素进行连接，不会递归多维数组元素连接

3、splice()方法

// splice()方法用于插入、删除或替换数组的元素，然后返回被操作的元素
// 该方法是对于调用数组的操作，而不是返回一个新数组
// 语法格式 index 要操作数组索引位置 count 要删除的元素个数 elementX 要插入的新元素
myArray.splice(index,count,elementX,...)

// 例子
var array = ['a','b','c','d'];
var array1 = array.splice(0,2,'e');
console.log(array1); // ['a','b']
console.log(array); // ['e','c','d']

4、slice()方法

// slice()方法用于对数组的元素截取片段，然后返回被操作的元素
// 该方法不会对调用数组进行修改
// 语法格式 
// start要操作数组的索引位置 
// end可选，选择元素结束的位置，不选默认到最后，使用负数会从数组结尾处规定位置
myArray.slice(start,end);

// 例子
var array = ['a','b','c','d'];
console.log(array.slice(2)); // ['c','d']
console.log(array.slice(1,-1)); // ['b','c']

5、push()和pop()方法

// push()方法用于向数组末尾添加一个或多个元素，并返回新数组的长度
// 语法
myArray.push(element1,element2,...);

// pop()方法用于删除调用数组的最后一个元素，返回被推出的数组元素
myArray.pop();

6、unshift()和shift()方法

// unshift()方法用于向调用数组头部插入一个或多个元素，参数是任意个数组元素,返回新数组长度
// 语法
myArray.unshift(element1,elemeng2,...);

// shift()方法用于将调用数组头部的第一个元素删除
myArray.shift();

7、forEach()方法

// forEach()方法从头到尾遍历数组，每个元素都会调用指定的回调函数
// 回调函数作为forEach()方法的参数
// 语法
// function 作为参数的回调函数
// element 作为传入实参的数组元素
// index 作为传入实参的元素索引
// arrayOne 作为传入实参的数组本身
array.forEach(function(element,index,arrayone){}
    ...
);

// 例子
var array = ['a','b','c'];
var sum = new String();
array.forEach(function(element){
    sum += element;
});
console.log(sum); // abc

array.forEach(function(e,i,a){
    a[i] = e + '#';
});

console.log(array); // ['a#', 'b#', 'c#']

8、map()方法

// map()方法将调用数组的每个元素传递给指定的回调函数，并返回一个数组，它包含该数组的返回值
// 语法
marry.map(function(element){
    return value;
});

// 例子
var array = [1,2,3];
var arrayOne = array.map(function(e){
    return e * e;
});
console.log(arrayOne); // 1,4,9

// map()方法跟forEach()方法不同，map()方法会调用数组元素生成一个新数组，不修改原数组，所以需要return返回值给新数组

9、filter()方法

//filter()方法 过滤掉不符合条件的数组元素，返回一个新数组，新数组中包含符合条件的数组元素，该方法接受一个回调函数作为参数，如果该回掉函数的返回值是true则添加到新数组中，否则会被过滤掉
// 语法格式
// function 作为参数的回调函数
// element 作为传入实参的数组元素
// index 可选 座位传入实参的元素索引
array.filter(function(element,index){
    ...
});

// 例子
var array = [1,2,3,4,5];
var arr = array.filter(function(e){
    return e < 3;
});

10、every()和some()方法

// every() 和 some()方法具有类似的效果，对于调用数组的每个元素进行逻辑判断，返回值是true或false
// every()方法是对每个元素进行判断，当每个数组元素斗符合逻辑判断时则返回true，否则返回false
// 语法格式
array.every(function(element){
    ...
});
// 例子
var array = [1,2,3,4];
var bool = array.every(function(element){
    return element > 3;
}); // false
// some()方法是对每个数组元素进行判断，当所有数组都不符合逻辑判断时则返回false，否则返回true
// 语法格式
array.somefunction(element){
    ...
});

// 例子
var array = [1,2,3,4];
var bool = array.some(function(element){
    return element > 3;
});  // true

11、reduce()和reduceRight()方法

// reduce() 和 reduceRight()方法的作用是将数组元素进行组合，生成单个值
// 语法格式
// function 回调函数
// element1 第一次调用时为一个初始值，在以后调用时为上一次回调函数的返回值
// elment2 数组元素
// initial 可选 初始值
array.reduce(function(element1,element2){
    ...
},initial);

// 例子
var array = [1,2,3];
var num1 = array.reduce(function(i,e){
    return i + e;
}); // 6

var num1 = array.reduce(function(i,e){
    return i + e;
},10); //16

// reduceRight() 和 reduce() 方法的使用方式一致，区别就是reduce()方法是根据索引从低到高进行遍历
// reduceRight()方法是根据索引自高向低进行遍历

12、indexOf() 和 lastIndexOf()方法

// indexOf() 和 lastIndexOf()方法，用来搜索元素汇总指定的元素，会返回寻找到的第一个元素的数组，咩有次元素则返回-1
// indexOf()方法是从头到尾寻找
// lastIndexOf()方法是从尾到头寻找
// 例子
var array = ['a','b','c','b','e']
console.log(array.indexOf('b')); // 1
console.log(array.lastIndexOf('b')); // 3

六、ES6数组新特性

1、Array.of()方法

// Array.of()方法用于将一组值转化为数组，接受的参数为任意多个元素，剋是任意类型，最终会返回一个新数组
// 语法格式
Array.of(ele1,ele2,...elen);

// 例子
var array = Array.of(5); // [5]

2、数组实例的find()和findeIndex()方法

// 数组实例的find()方法用于寻找第一个符合条件的数组成员
// 参数是一个回调函数，所有数组成员依次执行该回调函数，知道找到第一个返回值为true的成员
// 如果没有符合的条件成员，则返回undefined
// 语法格式
myArray.find(function(element){
    
});

// 例子
var array = [1,5,7,99,101,399,888];
var num = array.find(element=> element > 100);
console.log(num);  // 101

// 数组实例的findIndex()方法的用法与find()方法非常相似，它返回额第一个符合条件的数组成员的索引位置
// 如果不符合条件则返回-1

3、数组实例的fill()方法

// fill()方法使用给定值填充一个数组，fill()方法还可以接收第二个和第三个参数，用于指定起始和结束位置
// fill()方法用于空数组的初始化非常方拜年，数组中已有的元素会被去哪不抹去
// 语法格式
myArray.fill(element,start,end);

// 例子
var myArr = ['a','b','c'];
arr1 = myArr.fill('zhishunet');
console.log(arr1);  // ['zhishunet', 'zhishunet', 'zhishunet']

var myArr = ['a','b','c'];
arr2 = myArr.fill('zhishu',1,2);
console.log(arr2);  // ['a', 'zhishu', 'c']