【JS-7】——JavaScript数组的使用

我们之前说对象的时候，分成了三种：内建对象，宿主对象，自定义对象。接下来我们要学习内奸对象和宿主对象。我们就来说一下数组

创建数组

先看个数组属性的表格：

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

数组也是对象，它和普通对象功能类似，也是用来存储一些值的。

不同的是，普通对象是使用字符串作为属性名的，而数组是使用索引(index)操作元素。

索引是从0开始的整数。数组的存储性能比普通对象好，所以在开发中，经常使用数组来存储数据。

• 创建数组对象：

var arr = new Array();

向数组中添加元素：

• 语法：数组[索引] = 值

arr[0] = 10;
arr[1] = 33;
arr[2] = 22;

• 读取数组中的元素，语法：数组[索引]

console.log(arr[0]);//10
console.log(arr[1]);//33
console.log(arr[2]);//22
console.log(arr[3]);//undefined

如果读取不存在的索引，他不会报错，而是返回undefined。

• 获取数组长度，可以使用length属性来获取数组（连续的）的长度。语法：数组.length

console.log(arr.length);//3

对于不连续的数组会获得最大索引加一。尽量不要创建非连续数组。

• 修改length，语法：数组.length = 修改后的长度。

  • 如果修改的长度大于原来的长度，则多出的部分会空出来。
  • 如果修该的长度小于原长度，则多出来的元素会被删除。

• 向数组最后添加元素：

arr[arr.length] = 值;

• 使用字面量创建数组，语法：[]

var arr = [];

使用字面量创建数组时，可以在创建时就指定数组中的元素。

var arr = [1,2,3,4,5,6];
var arr2 = new Array(1,2,3,4,5,6);

使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递，元素之间使用,隔开。

arr = [10];//创建一个数组，数组中只有一个元素10。
arr2 = new Array(10);//创建一个长度为10的数组。

• 数组中的元素，可以是任意的数据类型。也可以是对象。

arr = ["hello",1,true,null,undefined,{name:"孙悟空",age:18}];

• 数组中也可以放数组，这种数组我们称为二维数组。

数组的方法

先看个数组对象方法的表格：

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

我们先挑一些常用的方法。

push()

该方法可以向数组的末尾添加一个或多个，并返回数组新的长度。

可以将要添加的元素所为方法的参数传递，这样，这些元素会直接添加到数组的末尾。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

pop()

该方法可以删除数组的最后一个元素，并返回删除的元素。

fruits.pop();

unshift()

向数组开头添加一个或多个元素，并返回新的数组长度。

var result = fruits.unshift("Lemon","Pineapple");

向前面插入元素以后，其他元素的索引会依次调整。

shift()

删除并返回数组的第一个元素。

var delell = fruits.shift();

这是很常用的4个数组的方法。

silce()

选取数组的的一部分，并返回一个新数组。该方法不会改变原数组，而是将截取到的元素封装到一个新数组中。

语法：array.slice(start, end)

参数	描述
start	可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。（包含开始索引）
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。(不包含结束索引)

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨精"];
result = arr.slice(0,2);
console.log(arr);
console.log(result);

• 第二个参数可以省略不写，，此时会截取从开始索引往后的所有元素。
• 索引可以传递负值，如果传递负值，则从后往前计算，-1就是倒数第一个。

splice()

删除元素并向数组添加新元素。

• 使用splice()会影响到原数组，会将指定元素从原数组中删除，并将删除元素返回。

语法：array.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素。这些新元素会自动插入到开始位置索引前边。

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧","白骨精"];
result = arr.splice(0,2);
console.log(arr);
console.log(result);

其他方法

• concat()可以将量个或者多个数组连接，并将新的数组返回。该方法不会对原数组产生影响。

• join()可以将数组转换成一个字符串。该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回。在join()中可以指定一个字符串，这个字符串会成为数组重元素的连接符。如果不传，则默认为,逗号。

• reverse()该方法用来反转数组，前面的去后面，后面的去前面。该方法会直接修改原数组。

• sort()对数组的元素进行排序。也会影响原数组，默认按照Unicode编码进行排序。
  • 即使纯数字的数组，使用sort()也会按照Unicode编码排序，所以岁数字进行排序，可能会得到错误的信息。
  • 我们可以自己来指定排序的规则。我们可以在sort(),添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数。它使用哪个元素调用不确定，但是可定的是数组中a一定是在b的前面。
  • 浏览器会根据回调函数的返回值来决定元素的顺序，如果返回一个大于0的值，则元素会交换位置。如果返回一个大于0的值，则元素会交换位置。如果返回一个小于0的值，则元素不会交换位置。如果返回一个0，则认为两个元素相等，也不会交换位置。

arr.sort(function(a,b){
	return a-b;//升序排列，（b-a）则为降序排列
});

数组的遍历

所谓遍历数组，就是将数组中的所有的元素都取出来。

那我们要怎么遍历数组呢？？

1. 可以使用for循环。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

for(var i = 0 ; i < fruits.length ; i++ ){
	console.log(fruits[i]);
}

2. for循环需要配合length属性和数组下标来实现，我们可以使用for/in语句，for/in语句会跳过空元素，效率比for循环高。

var fruits = ["Banana", "Orange", "Apple", "Mango"];

for(var i in fruits){
	console.log(fruits[i]);
}

3. 一般我是都使用for循环遍历数组，JS中还为我们提供了一个方法forEach()，用来遍历数组。但是：

IE9以下的浏览器不支持。

forEach()方法需要一个函数作为参数。这种函数由我们创建但是不由我们调用。

这种由我们创建但不由我们调用的函数，称之为回调函数。

• 数组中有几个元素就会被执行几次。

• 每次执行时，浏览器会将遍历的元素以实参的形式传递进来，我们可以来定义形参，来读取这些内容。

那我们再来看一下：

我们发现可以放3个形参，但第4个就返回undefined了。

• 浏览器会在回调函数中传递三个参数。

arr.forEach(function(value,index,array){
	
});

1. 第一个参数，就是我们正在遍历的元素。

2. 第二个参数，就是正在遍历的元素的索引。

3. 第三个参数，就是正在遍历的数组。

之前的

【JS-5】——javascript关于函数的使用
【JS-6】——JavaScript构造函数与原型