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']
网友评论