1. 数组简介
JS对象包括 内建对象,宿主对象,自定义对象。数组也是一个对象,只不过不是普通的对象。
1、概念
-
数: 一系列数
-
组: 组合起来
数组其实是数据结构的概念,数组用于数组的储存和索引。
数组的特点:
- 数组有索引从 0 开始的整数。
2. 数组的基本操作
1、创建数组
格式:
var 数组对象 = new Array();
实例:
var arr = new Array();
console.log("arr: " + arr); // arr:
分析: 这里的创建一个数组,实际上创建了一个数组对象( 见引用类型 ),也就是只是开辟了内存空间,但是没有数据，所以值是空值。
2、添加元素
格式:
数组对象[] = 元素值;
实例:
arr[0] = 10;
arr[1] = 20;
分析: 上述代码表示,将10赋值给数组的第一个元素,将20赋值给数组的第二个元素。
3、访问数组元素
格式:
数组对象[]
实例:
var arr = new Array();
arr[0] = 10;
arr[1] = 20;
// 分别访问arr[0] , arr[1] 元素值
console.log("arr[0]: " + arr[0]); // arr[0]: 10
console.log("arr[1]: " + arr[1]); // arr[1]: 20
分析: 使用arr[0]来获取数组的元素arr[0]的值。
4、获取数组长度
格式:
数组对象.length
实例:
var arr = new Array();
arr[0] = 10;
arr[1] = 20;
console.log("arr的长度: " + arr.length); //arr的长度: 2
分析: 使用arr.length获取数组的长度。此时数组有2个元素( arr[0], arr[1] ),所以长度为 2。
5、修改数组长度
格式:
数组对象.length = 数字：
实例:
var arr = new Array();
arr[0] = 10;
arr[3] = 20;
console.log("arr的长度: " + arr.length); //arr的长度: 4
arr.length = 10;
console.log("arr的长度: " + arr.length); //arr的长度: 10
分析: 这的修改数组长度,是增大数组的长度。原本是 4,修改为10,但实际赋值只有arr[0],arr[3],也就是除此之外的元素都没有赋值。如访问arr[7]的值:
console.log("arr[7]: " + arr[7] ); // arr[7]: undefined
什么情况下,值才能为undefined呢 ( 仅声明变量但是没有赋值 )。
注意事项和细节:
- JavaScript创建数组时不需要设定长度,长度由赋值时,赋值的元素个数决定。
- 尽量不要创建非连续的数组。
- 没有赋值的数组元素值为 undeifend。
3. 数组字面量
1、使用数组字面量的形式创建数组对象
格式:
var 数组对象 = [];
实例:
var arr = [];
数组对象是方括号 [ ]
同样可以在创建数组的时候同时向数组中添加值
2、使用构造函数创建数组也可以同时添加元素
将要添加的元素作为构造函数的参数传递
// 表示创建一个值为10 的元素
arr = [10];
// 表示创建一个数组长度为 10 的数组
arr = new ( 10 ) ;
数组中的元素可以是任意类型的数据
4. 数组常见四个方法
1、push()
含义: push(推送,推进)
作用: 添加元素到数组的末尾,并返回新的数组的长度。
使用：
格式:
数组对象.push([元素列表]);
实例:
var arr = [10, 20, 30, 40, 50];
console.log("arr: " + arr);
var result = arr.push("唐僧", "白骨精");
console.log("arr: " + arr);
console.log("result: " + a);
控制台输出:
arr: 10,20,30,40,50
arr: 10,20,30,40,50,唐僧,白骨精
result: 7
分析: 使用数组对象.push(元素列表)可以添加元素到数组的末尾,即唐僧,白骨精。push()方法返回新数组的长度,即7。
2、pop
作用: 删除数组末尾的元素,返回最后一个元素。
使用：
格式:
数组对象.pop([元素列表]);
实例:
var arr = [10, 20, 30, 40, 50];
console.log("arr: " + arr);
var result = arr.pop();
console.log("arr: " + arr);
console.log("result: " + a);
控制台输出:
arr: 10,20,30,40,50
arr: 10,20,30,40
result: 50
分析: 先删除数组末尾的元素50,元素组变为[10,20,30,40],并返回这个元素50。
3、unshift()
元素和push( )相反
作用: 添加元素到数组的首位,并返回新的数组长度。
使用：
var arr = [10, 20, 30, 40];
console.log("arr: " + arr);
var result = arr.unshift("java","python");
console.log("arr: " + arr);
console.log("result: " + result);
控制台输出:
arr: 10,20,30,40
arr: java,python,10,20,30,40
result: 6
4、shift()
原理和pop( )相反
作用: 删除数组的第一个元素,并返回第一个元素。
使用:
var arr = [10, 20, 30, 40];
console.log("arr: " + arr);
var result = arr.shift();
console.log("arr: " + arr);
console.log("result: " + result);
控制台输出:
arr: 10,20,30,40
arr: 20,30,40
result: 10
5. 数组的遍历
1、概念
遍历就是一遍遍经历,一遍遍访问。
遍历数组就是将数组元素给取出来
2、数组遍历方法
方法1: 使用普通for循环方式遍历数组
格式:
for(var i = 0; i<数组对象.length; i++){
console.log(数组对象[i]);
}
实例:
var arr = [10,20,30,40,50];
console.log("arr: " + arr);
for( var i = 0; i<arr.length; i++){
console.log("arr"+"["+i+"]"+": " + arr[i] );
}
控制台输出:
arr: 10,20,30,40,50
arr[0]: 10
arr[1]: 20
arr[2]: 30
arr[3]: 40
arr[4]: 50
方法2: 使用js提供的特殊foreach()循环遍历数组(仅支持ie8以上浏览器)。
格式:
数组对象.forEach(function(){
console.log("hello");
});
实例:
var arr = [10,20,30,40,50];
console.log("arr: " + arr);
arr.forEach(function(){
console.log("hello");
});
效果:
分析: forEach()执行的次数等于数组的元素个数、因为数组arr有5个元素,所以执行的hell也是5次。
3、forEach的三个参数
使用forEach()方法时,浏览器会在回调函数中传递三个参数，这三个参数就包含数组的信息。
- value: 当前遍历的元素的元素值
- index: 当前遍历元素所处的索引位置
- array: 当前遍历的数组
var arr = [10,20,30,40,50];
console.log("arr: " + arr);
arr.forEach(function(value,index,array){
console.log("====================");
console.log('value:' + value);
console.log("index: " + index);
console.log("arry: " + array);
});
控制台输出:
====================
value:10
index: 0
arry: 10,20,30,40,50
====================
value:20
index: 1
arry: 10,20,30,40,50
====================
value:30
index: 2
arry: 10,20,30,40,50
====================
value:40
index: 3
arry: 10,20,30,40,50
====================
value:50
index: 4
arry: 10,20,30,40,50
回调函数： 由我们创建，但是不由我们调用的函数
6. 数组特殊方法
1、slice()
作用: 从某个数组中提取指定元素,将取出的元素作为返回值。该方法不会影响原数组，返回值作为一个新的数组
格式:
数组对象.slice(开始位置索引,结束位置索引);
实例:
var arr = [10,20,30,40,50];
console.log("arr: " + arr);
var result = arr.slice(0,2);
console.log("result: " + result)
控制台输出:
arr: 10,20,30,40,50
result: 10,20
分析: 从数组的开始位置索引0开始截取到索引2的位置,所截取的元素值是10,20。
⚠️注意⚠️
slice(开始位置索引,结束位置索引) 所获取的元素是包含开始索引但不包含结束索引的元素。原理就像
(1,3)实际是[1,3)数学上的「前开后闭」原则。取得到1,但取不到3。
2、splice()
作用: 可以删除指定范围元素,并且添加新的元素。
方式1: 只有2个参数
格式:
数组对象.splice(开始删除的位置索引,结束删除的位置索引)
实例:
var arr = ["猪八戒","孙悟空","沙僧","牛魔王"];
var result = arr.splice(0,3);
console.log("result: " + result);
console.log("arr: " + arr);
控制台输出:
result: 猪八戒,孙悟空,沙僧
arr: 牛魔王
分析: 删除从索引0开始到索引3( 不包括索引3元素)即 猪八戒,孙悟空,沙僧。删除后的数组只剩下“牛魔王”一个元素。
方式2: 三个参数
格式:
数组对象.splice(开始删除的位置索引,结束删除的位置索引,删除后数组中新添加的元素)
实例:
var arr = ["猪八戒","孙悟空","沙僧","牛魔王"];
var result = arr.splice(0,3,"铁扇公主");
console.log("result: " + result);
console.log("arr: " + arr);
控制台输出:
result: 猪八戒,孙悟空,沙僧
arr: 铁扇公主,牛魔王
分析: 基本和两个参数的splice()相同,不同是,会在删除后的新的数组的最前面添加第三个参数,得到的数组的是 [铁扇公主,牛魔王]。
三个参数说明:
1. 开始删除元素的位置索引
2. 从开始删除的元素开始往后需要删除的元素个数
3. 添加元素到删除后的新数组的首位置
🔊提示🔊
其实
splice(a,b,c)中的第二个参数b,也可以理解为从第一个参数a指定的元素开始往后删除元素的个数。而不用理解为[a,b)。有关于数组的索引和元素对应关系可见: xxx
7. 数组剩余方法
1、concat()
作用: 连接两个或多个数组，返回新数组 ;不会影响原数组 ; 须放入新数组
🚀T-测试使用concat连接两个数组。
var arr1 = ["孙悟空","猪八戒","沙僧"];
var arr2 = ["白骨精","蜘蛛精","狐狸精"];
// 开始连接 arr1 和 arr2
var result = arr1.concat(arr2);
console.log("result: " + result);
控制台输出:
result: 孙悟空,猪八戒,沙僧,白骨精,蜘蛛精,狐狸精
分析: 这里的连接是相对于arr1来说,去连接arr2,形式是 “ arr1 + arr2 ”。所以结果是arr1在前而arr2在后。
🚀T-测试使用concat连接多个数组。
var arr = ["孙悟空","猪八戒","沙僧"];
var arr2 = ["白骨精","蜘蛛精","狐狸精"];
var arr3 = ["玉皇大帝","铁扇公主","红孩儿"];
var result = arr.concat(arr2,arr3);
console.log("result: " + result);
控制台输出:
result: ["孙悟空","猪八戒","沙僧"，"白骨精","蜘蛛精","狐狸精"，"玉皇大帝","铁扇公主","红孩儿"]
分析: 同样,形式是 “ arr + arr2 + arr3 ”。
2、join()
作用: 数组转字符串(把数组元素的值作为字符串形式) ; 不会影响原数组 ; join()可指定字符串做参数，称为用来连接数组元素的连接符。
格式:
数组对象.join("元素之前分隔符");
实例:
var arr1 = ["孙悟空","猪八戒","沙僧"];
var result = arr1.join("---");
console.log("result: " + result);
console.log( typeof result );
控制台输出:
result: 孙悟空---猪八戒---沙僧
string
分析: 将数组每个元素之间用指定字符串连接起来。并且次数的 result是string类型,而不是array类型。
3、reverse()
作用: 该方法用来反转数组(前边去后边，后边去前边) ; 该方法会修改原数组
var arr1 = ["孙悟空","猪八戒","沙僧"];
var result = arr1.reverse();
console.log("result: " + result);
console.log("arr1: " + arr1);
控制台输出:
result: 沙僧,猪八戒,孙悟空
arr1: 沙僧,猪八戒,孙悟空
4、sort()
作用: 对数组元素排序 ; 影响原数组，默认按照unicode码顺序排序 ; 对于纯数字的数组，使用sort（） 排序时，也会按照unicode表的顺序,对数字进行排序时，可能会得到错误结果
自定义排序规则
可以在sort()中指定回调函数,定义规则
如在回调函数中指定两个参数。浏览器分别使用数组元素作实参用回调函数。
var arr = [5,4,0,9,3,2,8,7,1,6];
arr.sort(function(a,b){
// 如果a > b
if(a > b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
});
console.log(arr);
分析: 上述 算法实现是升序排序。
