目录
1、数组的基本使用
1.1 定义数组:定义数组的方法有两种:使用构造函数创建数组、使用直接量定义数组。
(1)构造数组:使用 Array() 构造函数可以构造数组。当使用 new 运算符调用 Array() 构造函数时,可以创建一个新数组。
//当调用Array构造函数时,,没有传递参数,可以创建一个空数组
var a = new Array(); //空数组
//当调用Array构造函数时,仅给Array构造函数传递一个数值参数,该数值定义了数组的长度,即定义数组中包含元素的个数。
var a = new Array(5); //指定长度的数组
//当调用Array构造函数时,明确指定数组的元素,可以创建一个实数组
var a = new Array(1,true,"string",[1,2],{x:1,y:2}); //实数组
(2)数组直接量:使用直接量是定义数组的快捷方法。方法是在中括号运算符中包含多个值列表,以逗号进行分割。
var a = []; //空的数组直接量
var a = [1,true,"string",[1,2],{x:1,y:2}]; //包含具体元素的数组直接量
1.2 数组长度和遍历数组
(1)数组长度:JavaScript 为 Array 对象预定义了一个 length 属性,该属性将被所有数组对象继承,不管是由 Array() 构造函数创建的数组,还是由数组直接量定义的数组。length 属性存储了数组包含的元素个数。length 属性值不是数组元素的实际个数,而是当前数组的最大元素个数。由于数组下标可以是非连续的,因此 length 属性的值总是等于数组最大下标值加上 1。
alert(arr.length); //通过 "数组名.length" 的方式获取数组的长度
(2)遍历数组:可以通过数组下标值搭配数组长度 length 来遍历数组。
// 普通for方式遍历数组
for (var i=0; i <arr.length; i++) {
alert(arr[i])
}
// 通过foreach遍历数组
arr.forEach(function (value) {
alert(value)
})
//通过for/in遍历数组
for(var i in arr){
alert(arr[i]);
}
2、数组的常见操作
数组中常见的操作有: 添加元素、删除元素、修改元素、获取元素。
数组方法 | 说明 |
push() | 在数组末尾添加元素并返回添加后的数组长度 |
pop() | 删除并返回数组的最后一个元素,数组长度减 1,如果数组为空,则不改变数组结构,并放回 undefined |
unshift() | 在数组头部插入一个或多个元素 |
shift() | 将数组第一个元素移出,并返回该元素的值,然后将余下所有元素前移一位,以填补数组头部的空缺 |
splice() | 插入、删除、或替换数组的元素 |
slice() | 截取并返回数组的一部分 |
concat() | 连接2个或更多数组,并返回结果 |
2.1 添加元素
(1)在数组的最后位置添加一个元素 - push()
// 添加一个元素到数组的最后位置 - length
arr[arr.length] = 10
// 添加一个元素到数组的最后位置 - push()
arr.push(11)
arr.push(12, 13)
(2)在数组首位插入一个元素 - unshift()
// 在数组首位插入一个元素 - 手动实现,需要先将数组第一个位置空出来
for (var i=arr.length; i>0; i--) {
arr[i] = arr[i-1]
}
arr[0] = -1;
// 在数组首位插入一个元素 - unshift()
arr.unshift(-1);
arr.unshift(-3, -2);
alert(arr); //-3,-2,-1...
2.2 删除元素
(1)删除数组最后一个元素 - pop()
arr.pop(); // 删除最后的元素
(2)删除数组第一个元素 - shift()
// 删除首位的元素 - 手动实现
for (var i=0; i<numbers.length; i++) {
numbers[i] = numbers[i+1]
}
numbers.pop();
// 删除首位的元素 - shift()
numbers.shift()
alert(numbers)
2.3 任意位置
(1)删除指定位置的数据 - splice()
arr.splice(5, 3); //删除数组中索引为5, 6, 7位置的元素
//第一个参数表示索引起始的位置为5(其实是第6个元素, 因为索引从0开始的), 删除3个元素.
(2)在任意位置插入数据 - splice()
arr.splice(5, 0, 3, 2, 1); //从索引为5的位置开始插入数据. 其他数据依次向后位移
//第一个参数依然是索引值为5(第六个位置),第二个参数为0时表示不是删除数据, 而是插入数据,后面紧跟要插入的元素
(3)修改指定位置的数据 - splice()
arr.splice(5, 3, "a", "b", "c"); //从索引5的位置开始修改数据, 修改多少由第二个参数来决定的
//第一个参数依然是索引的位置为5(第六个位置),第二个参数是要将数组中多少个元素给替换掉,后面紧跟要替换的元素
2.4 数组合并
(1)两个数组合并 - concat()
var arr1 = [1, 2, 3];
var arr2 = [10, 20, 30];
var newNums = arr1.concat(arr2);
alert(newNums); // 1,2,3,100,200,300
(2)两个数组合并 - +
var arr1 = [1, 2, 3];
var arr2 = [10, 20, 30];
newNums = arr1 + arr2;
alert(newNums); // 1,2,3,100,200,300
3、数组排序
数组方法 | 数组 |
reverse() | 在原数组的基础上颠倒数组中元素的顺序 |
sort() | 对数组元素进行排序 |
var a = [1,2,3,4,5]; //定义数组
a.reverse(); //颠倒数组顺序,reverse() 能够在原数组的基础上颠倒数组元素的排列顺序,该方法不需要参数。
alert(a); //这回数组[5,4,3,2,1]
var a = ["a","e","d","b","c"]; //定义数组
a.sort(); //按字母顺序对元素进行排序
alert(a); //返回数组[a,b,c,d,e]
//sort() 方法能够根据一定条件对数组元素进行排序。如果调用 sort() 方法时没有传递参数,则按字母顺序对数组中的元素进行排序。
4、数组迭代
方法名 | 描述 |
every() | 对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true,否则返回false |
some() | 对数组中的每一项运行给定函数,如果任一项返回true,则结果为true,并且迭代结束 |
forEach() | 对数组中的每一项运行给定函数。这个方法没有返回值 |
filter() | 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组 |
map() | 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组 |
reduce() | 对数组中的所有元素调用指定的回调函数,该回调函数的返回值为累计结果,并且此返回值在下一次调用该函数时作为参数提供 |
----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
indexOf() | 返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1 |
lastIndexOf() | 返回在数组中搜索到的与给定参数相等的元素的索引里最大的值 |
join() | 将所有的数组元素连接成一个字符串 |
toString() | 将数组作为字符串返回 |
valueOf | 和toString类似,将数组作为字符串返回 |
4.1 every()方法:对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true,否则返回false
//判断数组元素中是否都包含a字符
var arr = ["abc", "cb", "mba", "dna"]; // 定义数组
var flag = arr.every(function (t) { // 判断数组的元素是否都包含a字符
return t.indexOf('a') != -1;
})
alert(flag);
4.2 some()方法:对数组中的每一项运行给定函数,如果任一项返回true,则结果为true,并且迭代结束
var arr = ["abc", "cb", "mba", "dna"]; // 定义数组
var flag = arr.some(function (t) { // 判断数组中是否包含有a字符的字符
return t.indexOf("a") != -1;
})
alert(flag);
4.3 forEach()方法:forEach()方法仅仅是一种快速迭代数组的方式而已,该方法不需要返回值
var arr = ["abc", "cb", "mba", "dna"]; // 定义数组
arr.forEach(function (t) { // forEach的使用
alert(t);
})
4.4 filter()方法:对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
var arr = ["abc", "cb", "mba", "dna"]; // 定义数组
var newNames = arr.filter(function (t) { // 获取names中所有包含'a'字符的元素
return t.indexOf("a") != -1;
})
alert(newNames);
4.5 map()方法:对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
var arr = ["abc", "cb", "mba", "dna"]; // 定义数组
var newNames = arr.map(function (t) { // 在names中所有的元素后面拼接-abc
return t + "-abc";
})
alert(newNames);
5、reduce() 方法
对数组中的所有元素调用指定的回调函数,该回调函数的返回值为累计结果,并且此返回值在下一次调用该函数时作为参数提供,具体用法如下:
array.reduce(callbackfun[,initiaValue])
//array:一个数组对象。
//callbackfun:必需参数,最多可以接收 4 个参数的函数。
//对于数组中的每个元素,reduce 方法都会调用 callbackfun 函数一次。
//initiaValue:可选参数,如果指定 initiaValue,则它将用于初始值来积累。
//第一次调用 callbackfun 函数将此值作为参数而非数组值提供
reduce 方法的返回值是通过最后一次调用回调函数获得的累计结果。如果提供了 initialValue 则 reduce 方法对数组中的每一个元素调用一次 calbackfun函数(按升序索引顺序)。如果未提供 initialValue,则 reduce 方法会对从第二个元素开始的每个元素调用 callbackfun 函数。回调函数的返回值在下一次调用回调函数时作为 previousValue 参数提供。最后一次调用回调函数获得的返回值作为 reduce方法的返回值。回调函数语法如下:
function callbackfun(previousValue,currentValue,currentIndex,array)
//previousValuc:通过上一次调用回调函数获得的值。
//如果向 reduce 方法提供 initialValue,则在首次调用函数时,previousValue 为 initialValue。
//currentValue:当前数组元素的值。
//currentlndex:当前数组元素的数字索引。
//array:包含该元素的数组对象。
在第一次调用回调函数时,作为参数提供的值取决于 reduce 方法是否具有 initialValue 参数。如来向 reduce 方法提供initialValue,则 previousValue 参数为 initialValue,curentValue 参数是数组中的第1个元素的值。如果未提供 initialValue,则 previousValue 参数是数组中的第 1 个元素的值,curentValue 参数是数组中的第 2 个元素的值。
下面例子,演示将数组值连接成字符串,各个值用 "::" 分隔开。由于未向 reduce 方法提供初始值,第一次调用回调函数时会将 "abc" 作为 previousValue 参数并将 "def" 作为 currentValue 参数。
function appendCurrent(previousValue,currentValue){
return previousValue + "::" + currentValue;
}
var elements = ["abc","def",123,456];
var result = elements.reduce(appendcurrent);
document.write(result); //abc::def::123::456
6、数组结构的应用—数组去重算法
var arr = [1,2,3,2,2,1,3,4,2,5]; //创建一个数组
//去除数组中重复的数字
for (var i=0; i<arr.length; i++) {//获取数组中的每一个元素
for (var j=i+1; j<arr.length; j++) {//获取当前元素后的所有元素
if(arr[i] == arr[j]){//判断两个元素的值是否相等
arr.splice(j,1); //如果相等则证明重复的元素,则删除j对应的元素
//当删除了当前j所在的元素以后,后边的元素会自动补位
//此时将不会在比较这个元素,我需要再比较一次j所在的位置元素
//使j自减
j--;
}
}
}
console.log(arr); //去重后的数组