细说JavaScript数组(JavaScript数组详解)

细说JavaScript数组(JavaScript数组详解)_第1张图片

一、理解数组

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

你可能感兴趣的:(JavaScript,Web专区,javascript,开发语言,javascript数组)