- 1. 认识数组
- 2.创建数组
- 3. 数组的访问(赋值与取值)
- 4. 数组的遍历
- 5. 数组的长度,元素的更新,增加和删除
- 6. 数组中常用的方法
- 7. 数组排序
- 8. 迭代方法
- 9. 归并方法
1. 认识数组
内置对象是JS语言自带的对象,提供了一些基本的功能供开发者使用。常用的内置对象有Math,String,Array,Date等。<br /> 对象<br /> 属性(变量)和方法(函数)的集合<br /> **数组就是对象**<br />** 可以存储多个不同类型的数据**
2.创建数组
2.1 内存
2.1.1 栈区
基本数据类型保存在栈区,会根据函数的结束而自动释放
2.1.2 堆区
需要手动开辟,并且需要手动释放
2.2 new
2.2.1 在堆区开辟内存空间来存储对象
2.2.2 返回堆区对象的引用
通过栈区的引用,访问堆区的对象
2.3 构造函数法创建数组
2.3.1 创建空数组
var arr = new Array();
2.3.2 创建确定容量的数组
var arr = new Array(10);
2.3.3 创建一个拥有一些数据的数组
var arr = new Array(1,2,"Tom",true);
2.4 字面量法创建数组
2.4.1 创建空数组
var array = [];
2.4.2 创建一个拥有一些数据的数组
var array = [1,2,"Tom",true];
3. 数组的访问(赋值与取值)
3.1 数组元素的访问
3.2 赋值与取值
4. 数组的遍历
4.1 快速遍历:for-in
4.2 for循环遍历
4.3 forEach()遍历
5. 数组的长度,元素的更新,增加和删除
5.1 数组长度
5.1.1 数组元素的个数
5.1.2 length不计算非正规(数字)下标
5.1.3 数组最多可以包含4294967295个项,基本上可以满足任何编程要求
5.2 数组长度的增加
数组长度的增加,默认赋值为undefined
var array = [1,2,3];
array.length = 5;
console.log(array); //[1,2,3,undefined,undefined]
5.3 数组长度的减少
数组长度的减少,多余的删除
var array = [1,2,3,4,5];
array.length = 3;
console.log(array); //[1,2,3]
5.4 添加数组元素
var array = [1,2,3];
// 添加元素的位置小于数组长度,数组元素替换
array[2] = 10;
console.log(array); // [1,2,10]
//添加的元素位置大于数组疮毒,则数组长度自动补齐,默认赋值undefined
array[5] = 20;
console.log(array); //[1,2,10,undefined,undefined,20]
5.5 删除数组元素
用delete操作符来删除指定的元素
注意:数组长度不会改变,只是对应的值删除为undefined
var array = [1,2,3,4,5];
delete array[2];
console.log(array); //[1,2,undifined,4,5]
6. 数组中常用的方法
6.1 push(item1, item2, …)
6.1.1 功能
在数组的末尾添加一个或者多个元素
6.1.2 参数
要添加的元素
6.1.3 返回值
添加数据后数组的长度
var array = [1,2,3];
var ret = array.push(4,5,6);
console.log(ret); //6
console.log(array); //[1,2,3,4,5,6]
6.2 unshift(item1, item2, …)
6.2.1 功能
在数组的开头添加一个或多个元素
6.2.2 参数
要添加的元素
6.2.3 返回值
添加数据后数组的长度
var array = [1,2,3];
var ret = array.unshift(4,5,6);
console.log(ret); //6
console.log(array); // [4,5,6,1,2,3]
6.3 pop()
6.3.1 功能
删除数组末尾的一个元素
6.3.2 参数
无
6.3.3 返回值
被删除的元素
var array = [1,2,3,4,5];
var ret = array.pop();
console.log(array); //[1,2,3,4]
console.log(ret); // 5
6.4 shift()
6.4.1 功能
在数组的开头删除一个元素
6.4.2 参数
无
6.4.3 返回值
被删除的元素
var array = [1,2,3,4,5];
var ret = array.shift();
console.log(array); //[2,3,4,5]
console.log(ret); //1
6.5 join(str)
6.5.1 功能
将数组的元素用参数字符串拼接成一个新的字符串
6.5.2 参数
一个字符串
6.5.3 返回值
拼接的结果
注意:并不会改变原数组
var array = [1,2,3,4,5];
var ret = array.join("-");
console.log(array); //[1,2,3,4,5]
console.log(ret); //1-2-3-4-5
6.6 reverse()
6.6.1 功能
倒置数组元素
6.6.2 参数
无
6.6.3 返回值
倒置以后的数组
注意:将会改变原数组
var array = [1,2,3,4,5];
var ret = array.reverse();
console.log(array); //[5,4,3,2,1]
console.log(ret); //[5,4,3,2,1]
6.7 slice(startIndex, endIndex)
6.7.1 功能
在数组中,从startIndex下标开始一直截取到endIndex下标之前
6.7.2 参数
开始和结束下标
6.7.3 返回值
截取的数据数组
注意:不包含endIndex下标处的元素 注意:不会改变原数组
var array = [1,2,3,4,5];
var ret = array.slice(1,3);
console.log(array); //[1,2,3,4,5]
console.log(ret); //[2,3]
6.8 splice(下标,个数,item1, item2, …)
6.8.1 功能
在数组的中间添加或者删除一些元素
添加
从下标为1的位置删除0个元素,并添加两个元素8, 9
注意:如果下标大于原数组最大的下标,都是在数组最后添加元素
var array = [1,2,3,4,5];
var ret = array.splice(1,2,8,9);
console.log(array); //[1,8,9,4,5]
console.log(ret); //[2,3]
// 如果下表大于原数组最大的下表,都是再数组最后添加元素
var ret1 = array.splice(8,2,8,9);
console.log(array); [1,2,8,9,4,5,8,9]
console.log(ret1); []
删除
从下标为1的位置删除两个元素(2, 3),并添加两个元素8, 9,返回含有被删除元素的数组
注意:如果省略可选参数,则从下标开始删除对应个数的元素,返回删除的元素数组
var array = [1,2,3,4,5];
var ret = array.splice(1,2);
console.log(array); //[1,4,5]
console.log(ret); //[2,3]
//如果省略可选参数,则从下标开始删除对应个数的元素,返回删除元素数组
var ret1 = array.splice(1,1);
console.log(array); //[1,5]
console.log(ret1); // [4]
6.8.2 参数
下标:必需。
规定从何处添加/删除元素
该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
个数:必需。
规定应该删除多少元素。必须是数字,但可以是 “0”。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, item2, …:可选。
6.8.3 返回值
含有被删除的元素的数组
注意:将会改变原数组
6.9 concat()
6.9.1 功能
将多个数组拼接成一个数组
6.9.2 参数
一个或多个数组或者元素
6.9.3 返回值
拼接之后新的数组
注意:拼接后数组的元素将按照传入参数的顺序排列 注意:不改变原数组
var array = [1,2];
var newArray = array.concat([3,4]),"a",true);
console.log(array); //[1,2]
console.log(newArray); //[1,2,3,4,"a",ture]
6.10 indexOf(item)
6.10.1 功能
从数组的左侧开始查找对应第一次出现的参数元素的下标
6.10.2 参数
要查找的元素值
6.10.3 返回值
如果找到了对应的元素则返回该元素的下标值,否则返回-1
var array = [1,2,3,4,5];
var ret = array.indexOf(4);
console.log(array); //[1,2,3,4,5]
console.log(ret); //3
console.log(Array.indexOf(6)); // -1
6.11 lastIndexOf(item)
6.11.1 功能
从数组的右侧开始查找对应第一次出现的参数元素的下标
6.11.2 参数
要查找的元素值
6.11.3 返回值
如果找到了对应的元素则返回该元素的下标值,否则返回-1
var array = [1,2,3,4,5];
var ret = array.lastIndexOf(4);
console.log(array); //[1,2,3,4,5]
console.log(ret); //3
console.log(Array.lastIndexOf(6)); // -1
7. 数组排序
7.1 冒泡排序
7.1.1 原理
冒泡排序的基本思想是,对相邻的元素进行两两比较,顺序相反则进行交换,这样,每一趟会将最小或者最大的元素浮到顶端,最终达到完全有序
7.1.2 公式
var array = [4,5,2,8,6];
for (var i = 0, len1 = array.length; i < len1; i++){
for(var j = 0, len2 = array.length; j < len2; j++){
if(array[j]) <= array[j+1]{
var temp = array[j];
array[j] = array[j+1];
array[j+1] = temp;
};
};
};
console.log(array); //[8,6,5,4,2]
7.2 sort()
7.2.1 默认升序排序
var array = [4,5,2,3,1];
//默认升序排序
array.sort();
console.log(array); //[1,2,3,4,5]
7.2.2 sort()调用每一项的toString()方法,然后比较得到的字符串,确定如何排序
排降序,需要给出排序的标准,排序的标准是一个函数
var array = [4,5,2,3,1];
//降序排序
array.sort(function(v1,v2){
if (v1 < v2 ){
return 1;
};
return -1 ;
});
console.log(array); //[5,4,3,2,1]
8. 迭代方法
8.1 every()
对数组中的每一项运行给定函数,如果该数组中每一项都返回true,则返回true
ECMAScript5为数组定义了5个迭代方法,每个方法接收2个参数,一个是每一项运行的函数,一个是运行该函数的作用域对象,传入这些方法的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身。
var array = [1,2,3,4,5];
var retVal = array.every(function(item,index,array){
return item > 2; //false
//return item < 6; //true
});
console.log(retVal);
8.2 filter()
对数组中的每一项运行给定函数,返回该函数返回true的项组成的数组
var array = [1,2,3,4,5];
var retVal = array.filter(function(item,index,array){
return item > 2; //false
//return item < 6; //true
});
console.log(retVal); //[3,4,5]
8.3 forEach()
对数组中的每一项运行给定函数,这个方法没有返回值
var array = [1,2,3,4,5];
var retVal = array.foreach(function(item,index,array){
//执行某些操作
});
console.log(retVal); //[3,4,5]
8.4 map()
对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
var array = [1,2,3,4,5];
var retVal = array.map(function(item,index,array){
return item * 2;
});
console.log(retVal); //[2,4,6,8,10]
8.5 some()
对数组中的每一项运行给定函数,只要其中有一项返回true, 则返回true。与every()相反
var array = [1,2,3,4,5];
var retVal = array.some(function(item,index,array){
return item > 2;
});
console.log(retVal); //ture
9. 归并方法
归并方法
ECMAScript5还新增了2个归并方法,这两个方法都会迭代数组的所有项,然后构建成一个最终返回的值
9.1 reduce()
9.1.1 语法arr.reduce([callback, initialValue])
callback(previousValue, currentValue, currentIndex, array)
- 这个函数返回的任何值都会作为第一个参数自动传递给下一项
- previousValue:上一次调用回调函数返回的值,或者是提供的初始值(initialValue)
- currentValue:数组中当前被处理的元素
- currentIndex:当前被处理元素在数组中的索引,即currentValue的索引。如果有initialValue初始值,从0开始,否则从1开始
- array:调用reduce()的数组
initialValue
可选参数, 作为第一次调用 callback 的第一个参数。
例子
var array = [1,2,3,4,5]; var retVal = array.reduce(function(prev,cur,index,array){ //实现数组元素累加求和 return prev + cur; }); console.log(retVal); //15
9.2 reduceRight()
从数组的最后一项开始,向前遍历到第一项
eg: 与reduce()一样,方向相反