数组的方法
- push() 可以接受任意数量的参数,把他们逐个添加到数组末尾,并返回修改后的数组的长度。改变原数组
var arr = [1, 2];
console.log(arr); //[1,2]
console.log(arr.push(3, 4, 5)); //5 返回修改后的长度
console.log(arr); //[1,2,3,4,5]
- pop()从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。
var arr = [1,2];
console.log(arr.pop()); //2 返回被删除的项
console.log(arr); //[1]
- unshift()方法能够在数组前面添加任意个项并返回新数组的长度。
var arr = [1,2];
console.log(arr.unshift(3, 4, 5, 6)); //6 返回新数组的长度
console.log(arr); //[3, 4, 5, 6, 1, 2]
- shift()方法能够移除数组中的第一个项并返回该项,同时将数组长度减 1。
var arr = [1, 2, 3, 4];
arr.shift(); //返回新数组
console.log(arr); //[2, 3, 4]
*案例:定义一个含有30个整型元素的数组,按顺序分别赋予从2开始的偶数;然后按顺序每五个数求出一个平均值,放在另一个数组中并输出。试编程*
var arrnum = []; //准备空数组
for(var i = 1; i <= 30; i++){
arrnum.push(i * 2);
}
console.log(arrnum);
//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
var newarr = []; //存放平均数的数组
var sum = 0; //和
for(var i = 0; i < arrnum.length; i++){
sum = sum + arrnum[i]; //累加求和
if ((i + 1) % 5 == 0) {
newarr.push(sum / 5);
sum = 0; //重置sum=0
}
}
console.log(newarr); //[6, 16, 26, 36, 46, 56]
- reverse()方法会反转数组项的顺序
var arr = ['a', 'b', 'c'];
console.log(arr.reverse()); //['c', 'b', 'a'] 颠倒输出
- sort()方法按照字母表升序排列数组项
Unicode编码
a-z 97-122
A-Z 56-90
0-9 48-57
var arrstr = ['cyan', 'apple', 'banana'];
console.log(arrstr.sort()); //['apple', 'banana', 'cyan']
var arrnum = [9, 6, 3, 8, 2, 5, 7, 100, 4];
console.log(arrnum.sort()); //无法排序数字
如果利用sort排序数字,需要添加一个比较函数作为参数
function compare(a, b){
return b - a;
}
function compare(a, b){
if(a > b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
}
var arrnum = [9, 6, 3, 8, 2, 5, 7000, 100, 4];
console.log(arrnum.sort()); //[100, 2, 3, 4, 5, 6, 7000, 8, 9] 未加比较函数
console.log(arrnum.sort(compare)); //[2, 3, 4, 5, 6, 8, 9, 100, 7000] 添加比较函数
- concat()方法可以基于当前数组中的所有项创建一个新数组
应用:快速排序,数组的扁平化
var arr = ['zhangsan', 'lisi', 'wangwu'];
console.log(arr.concat()); //["zhangsan", "lisi", "wangwu"] 生成一个新数组 克隆arr数组 不影响之前的数组
console.log(arr.concat('ccccc', 'dddd')); //["zhangsan", "lisi", "wangwu", "ccccc", "dddd"]
console.log(arr); //["zhangsan", "lisi", "wangwu"] 不会改变原数组
- slice()方法他能够基于当前数组中的一个或多个创建一个新数组。可以接受一个或两个参数
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
console.log(arr.slice()); //["a", "b", "c", "d", "e", "f", "g"] 生成新的数组 全部截取从0开始
console.log(arr.slice(1)); //["b", "c", "d", "e", "f", "g"] 从当前位置截取
console.log(arr.slice(1, 5)) //["b", "c", "d", "e"] 从1开始到5结束,不包括5
console.log(arr.slice(1, -3)); //["b", "c", "d"] 负数表示从后往前找位置,-1开始。截取始终是从前完后。
console.log(arr.slice(1, -30)); //[] 找不到截取的位置,返回空数组。[]
console.log(arr.slice(-16)); //["a", "b", "c", "d", "e", "f", "g"] 参1位负数,找不到情况下从索引0开始
- splice()方法,对数组进行删除、插入、替换,是最强大的数组方法,返回值是数组,改变原数组。
参1:起始索引位置
参2:删除的长度
参3开始:需要添加的数组项
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
//删除
console.log(arr.splice(1, 3)); //输出被删除的 ["b", "c", "d"]
console.log(arr); //["a", "e", "f", "g"]
//插入:不删除,删除的起始位置直接添加
console.log(arr.splice(1, 0, 'h', 'i', 'j')); //[]
console.log(arr); //["a", "h", "i", "j", "b", "c", "d", "e", "f", "g"]
//替换:删除了3项,对应添加了3项,理解成替换
console.log(arr.splice(1, 3, 'hello', 'hi', 'hhh')); //返回被操作的项 ["h", "i", "j"]
console.log(arr); //["a", "hello", "hi", "hhh", "e", "f", "g"]
- join方法,将数组转换成对应的字符串。参数就是连接符。
var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
console.log(arr); // ["a", "b", "c", "d", "e", "f", "g"]
console.log(arr.join()); //a,b,c,d,e,f,g
console.log(arr.join('#')); //a#b#c#d#e#f#g
console.log(arr.join('')); //abcdefg
数组类别
- 二维数组:数组中还有数组
var arr = [1, 2, [3, 4], [5, 6], [7, [8, 9]]];
//如何获取二维数组的值
console.log(arr[2][0]); //3
console.log(arr[4][1][1]); //9
//如何给二维数组赋值
//必须确认数组的这一项的结果还是数组
var arr = [];
//arr[0][0] = 10; //报错
//正确做法
arr[0] = [];
arr[0][0] = 1;
arr[0][1] = 2;
arr[1] = 3;
console.log(arr); //[[1,2],3]
*案例:通过循环按执行顺序,做一个5×5的二维数组,赋1到25的自然数,然后输出该数组的左下半三角。试编程。*
//var arr = [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[],[]];
function double(n){
//如果n<10,前面添加0
return n < 10 ? '0' + n : n;
}
var arr = [];
var num = 1;
for(var i = 0; i < 5; i++){
arr[i] = []; //告知arr数组的每一项是数组
for(var j = 0; j < 5; j++){
arr[i][j] = double(num++);
//控制二维数组输出,通过索引完成
//对比前后索引,输出需要的结构
if(i >= j){
document.write(arr[i][j] + ' ')
}
}
document.write('<br>');
}
console.log(arr);
- 对象数组
学会访问数组的值和访问对象的值。
var arrobj = [
{ a: 1, b: 2 },
{ c: 3, d: 4 },
{ name: 'zhangsan', age: 100 }
];
console.log(arrobj[1]); //{c: 3, d: 4}
var data = {
"result": [
["衣服女2019新品", "1721756.308989681"],
["衣服男冬季", "504758.0918811832"],
["衣服女", "1865461.4536140976"],
["衣服女冬季", "2161687.2736833775"],
["衣服男", "950314.6975331445"],
["衣服男潮流", "456609.93286396784"],
["衣服套装女秋冬", "642995.9155301922"],
["衣服女2019新款潮", "1509431.645108339"],
["衣服女秋冬 百搭", "638487.1820551006"],
["衣服冬天女装", "1243145.52768236"]
],
"magic": [
{
"index": "6",
"type": "tag_group",
"data": [
[
{ "title": "薄款", "type": "hot" },
{ "title": "常规" }
],
[
{ "title": "夏季" },
{ "title": "圆领" },
{ "title": "印花" },
{ "title": "短袖" },
{ "title": "脑壳疼" },
{ "title": "纯棉" },
{ "title": "宽松" },
{ "title": "学生", "type": "逆战" }
]
]
}
]
};
console.log(data.magic[0].data[1][4].title); //脑壳疼
数组的排序
- 排序,就是把一个乱序的数组,通过我们的处理,让他变成一个有序的数组–sort()
- 交换两个值的方式,通过中间值实现
var a = 10;
var b = 5;
console.log(a, b); //10 5
var temp = a;
a = b;
b = temp;
console.log(a, b); //5 10
- 交换两个值的方式,数字通过计算实现
var a = 10;
var b = 5;
console.log(a, b); //10 5
a = a + b; //a=15
b = a - b; //b = 10
a = a - b ; //a = 5
console.log(a, b); //5 10
- 冒泡排序
相邻的元素两两比较,如果第一个数比第二个数大,交换位置,每一轮有一个数字排序好了。
重复。
var arr = [23, 5, 89, -23, 0, 5, 88, 100, 7, 2];
var times = 0;
console.log(arr); //[23, 5, 89, -23, 0, 5, 88, 100, 7, 2]
for(i = 0; i < arr.length - 1; i++){ // 比较的轮数 10个数字比较9次
for(j = 0; j < arr.length - i - 1; j++){ //当前比较轮次 两两比较
//10个数字比较9次 每一轮都有一个数字排序号,当下一次比较时,忽略这个已经排序好的数
if(arr[j] > arr[j + 1]){ //满足条件,交换位置
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
times++;
}
}
console.log(arr); //[-23, 0, 2, 5, 5, 7, 23, 88, 89, 100]
console.log(times); //45
- 选择排序
工作原理:每一次从待排序的数据中选出最小的一个元素,存放起始位置。直到全部排序完成。
var arr = [23, 5, 89, -23, 0, 5, 88, 100, 7, 2];
console.log(arr); //[23, 5, 89, -23, 0, 5, 88, 100, 7, 2]
for(var i = 0; i < arr.length; i++){
var minindex = i; //假设i为最小值的索引
var minvalue = arr[minindex]; //假设为最小值
for(var j = i + 1; j < arr.length; j++){ //比较:如果当前的值比设定的最小值还要小,当前找到的才是真正的最小值。
if (arr[j] < minvalue) { //满足条件,得到真正的最小值
minvalue = arr[j]; //当前的最小值
minindex = j; //当前最小值的索引
}
}
//内层循环完成了,代表找到了真正的最小值
//如果假设的最小值成立,真的是最小值,无需进行交换比较
if (i !== minindex) { //假设的最小值不是真正的最小值,进行交换。
var temp = arr[i];
arr[i] = arr[minindex];
arr[minindex] = temp;
}
}
console.log(arr); //[-23, 0, 2, 5, 5, 7, 23, 88, 89, 100]
ES5新增的数组方法
- indexOf/lastIndexOf
返回要查找的项在数组中的索引位置,没找到的情况下返回-1
两个参数:参1,要查找的数组项,参2,(可选的)查找的起点位置的索引 找参1从参2的位置开始找
var arr = ['apple', 'banana', 'pear', 'orange', 'banana', 'pear', 'orange'];
console.log(arr.indexOf('pear')); //2 始终找第一次出现的 找到就不找了
console.log(arr.indexOf('pear', 3)); //5 从索引3的位置找
console.log(arr.indexOf('xxxxx')); //-1
*案例:检测是否是数组*
function noRepeat(arr) {
//检测是否是数组 Array.isArray
if (Array.isArray(arr)) {
//满足是数组的条件
var newarr = [];
for (var i = 0, len = arr.length; i < len; i++) {
if (newarr.indexOf(arr[i]) == -1) {
newarr.push(arr[i]);
}
}
return newarr; //返回去重后的数组
}else{
//不是数组
throw new Error('你输入的不是数组');
}
}
console.log(noRepeat([1, 1, 34, 56, 34, 56, 123, 1, 34])); //[1, 34, 56, 123]
console.log(noRepeat(1)); //报错
- 迭代是重复反馈过程的活动,其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次迭代
每一个方法都有2个参数:参1是一个函数(回调函数) 参2(可选的)this指向
参1是一个函数(回调函数),这个函数又有三个参数(数组项的值,数组项的索引位置,数组本身);
every():对数组中的每一项运行给定的函数,如果函数对数组的每一项都返回true,整个方法的结果就是true
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.every(function(value, index, array){
//value:数组项的值
//index:数组项的索引位置
//array:数字本身
return value > 0;
});
console.log(result); //true
*案例:检测字符串数组:数组的每一项都是字符串*
function checkStr(arr){
var result = arr.every(function (value, index, array){
return typeof value == 'string';
}) ;
return result;
}
console.log(checkStr(['a', 'b', 'v'])); //true
- some():对数组中的每一项运行给定的函数,如果该函数对数组的任意一项返回true,结果就返回true
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.some(function(value, index, arr){
return value > 3; //有一个满足即可
});
console.log(result); //true
*案例:判断一个数组中是否存在某个值。*
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.some(function(value, index, arr){
return value > 3; //有一个满足即可
});
console.log(result); //true
//判断一个数组中是否存在某个值。
function checkValue(v){
var result = arr.some(function(value, index, arr){
return value == v;
});
return result;
}
console.log(result); //true
- filter():对数组中的每一项运行给定的函数,返回该函数为true项组成的数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.filter(function(value, index, arr){
return value > 5;
})
console.log(result);
- map(),对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组,返回的就是数组,无需考虑true false—映射
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.map(function(value, index, array){
return value > 5;
});
console.log(result); //[false, false, false, false, false, true, true, true, true]
*案例:编写一个map()函数,把数组的中的每一位数字都增加30%,并返回一个新数组*
function map1(arr){
return arr.map(function(value){
return value * 1.3
});
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(map1(arr)); //[1.3, 2.6, 3.9000000000000004, 5.2, 6.5, 7.800000000000001, 9.1, 10.4, 11.700000000000001]
- forEach():对数组的每一项运行给定的函数,这个方法没有返回值
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = arr.forEach(function(value, index, array){
console.log(value + '----' + index);
});
-
reduce() reduceRight()
这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。每一
次迭代得到的结果会作为下一次迭代的初始值
reduce():从数组的第一项开始,逐个遍历到最后
reduceRight():从数组的最后一项开始,逐个遍历到第一项方法包含两个参数:参1每一项执行的函数,参2 迭代的初始值(可选的)
每一项执行的函数里面包含四个参数(前一个值,当前值,数组项的索引,数组本身)
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//一个参数:每一项执行的函数
var result = arr.reduce(function(prev, curr, index, array){
// console.log(prev); //第一次找的是迭代的初始值,后面的每一次值就是迭代结果。
// console.log(curr); //分别表示从数组的第一项开始的值。
console.log(prev + '|' + curr); //迭代每次的过程
return prev + curr;
},100); //迭代的初始值(可选的)
console.log(result);
// 100|1
// 101|2
// 103|3
// 106|4
// 110|5
// 115|6
// 121|7
// 128|8
// 136|9
// 145|10
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
//一个参数:每一项执行的函数
var result = arr.reduceRight(function(prev, curr,index, array){
console.log(prev + '|' + curr);
return prev + curr;
});
console.log(result);
// 10|9
// 19|8
// 27|7
// 34|6
// 40|5
// 45|4
// 49|3
// 52|2
// 54|1
// 55