数组
数组是对象数据类型的，它属于特殊的对象
- 根据索引获取指定项的内容
- 通过
array.length获取数组的长度 - 通过
array.length - 1获取最后一项的索引
let arr = [2,3,4,5];
console.log(arr[0]); // 2
console.log(arr.length); // 4
console.log(arr[arr.length -1]); // 5
常用方法
1.实现数组增删改查的方法
这一部分方法均会修改原有数组
-
push()：向数组末尾增加内容
@params
多个任意类型
@return
新增后数组的长度
let arr = [10,20];
console.log(arr.push(30,'aa')); // 4
console.log(arr); // [10,20,30,"aa"]
// 当追加单项时，也可以通过索引的方式实现
arr[arr.length] = 11;
console.log(arr); // [10, 20, 30, "aa", 11]
-
unshift()：向数组开始位置增加内容
@params
多个任意类型
@return
新增后数组的长度
let arr = [10,20];
console.log(arr.unshift(30,'aa')); // 4
console.log(arr); // [30, "aa", 10, 20]
-
shift()：删除数组中的第一项
@params
@return
删除的那一项
let arr = [10,20];
let res = arr.shift();
console.log(res,arr); // 10 [20]
// 基于原生JS的delete，把数组当作普通对象，确实可以删除某一项
// 但是不会影响数组本身的结构特点(length不会跟着修改)
delete arr[0];
console.log(arr); // [empty]
-
pop()：删除数组中的最后一项
@params
@return
删除的那一项
let arr = [10,20];
let res = arr.pop();
console.log(res,arr); // 20 [10]
// 基于原生JS让数组长度减少一位，默认删除最后一项
arr.length--;
console.log(arr); // []
-
splice()：实现数组的增删改
@params
n,m,x都是数字，从索引n开始删除m个元素（m不写，默认删到末尾），用x占用删除的部分
@return
把删除的部分用新数组存储起来返回
let arr = [10,20,30,40,50,60,70,80,90];
let res = arr.splice(2,4);
console.log(res,arr); // [30, 40, 50, 60] [10, 20, 70, 80, 90]
// 删除最后一项或首项
arr.splice(arr.length-1);
console.log(arr); // [10, 20, 70, 80]
arr.splice(0,1);
console.log(arr); // [20, 70, 80]
// 增加元素
res = arr.splice(1,0,'hhhh');
console.log(res,arr); // [] [20, "hhhh", 70, 80]
// 替换元素
res = arr.splice(1,1,2333);
console.log(res,arr); // ["hhhh"] [20, 2333, 70, 80]
// 向数组头尾追加
res = arr.splice(arr.length,0,666);
console.log(res,arr); // [] [20, 2333, 70, 80, 666]
// 基于这种方式可以清空数组
res = arr.splice(0);
console.log(res,arr); // [20, 2333, 70, 80, 666] []
2.实现数组查询和拼接的方法
这一部分方法均不会修改原有数组
-
slice()：实现数组的查询
@params
n,m都是数字，从索引n开始，找到索引为m的地方（不包含该项）
@return
把找到的内容以一个新数组的形式返回
let arr = [10,20,30,40,50];
let res = arr.slice(1,3);
console.log(res,arr); // [20, 30] [10, 20, 30, 40, 50]
res = arr.slice(1);
console.log(res); // [20, 30, 40, 50]
// 数组克隆（浅克隆）
res = arr.slice(0);
console.log(res); // [10, 20, 30, 40, 50]
// 当参数为负数时，自动将其加上数组长度
res = arr.slice(-3,-1);
console.log(res); // [30, 40]
// 当n>m时，返回空数组
res = arr.slice(3,1);
console.log(res); // []
// 当参数为小数时，只舍不入
res = arr.slice(1.9,3);
console.log(res); // [20, 30]
-
concat()：实现数组的拼接
@params
多个任意类型值
@return
拼接后的新数组
let arr1 = [10,20,30];
let arr2 = [40,50,60];
let res = arr1.concat(arr2,'2333');
console.log(res); // [10, 20, 30, 40, 50, 60, "2333"]
3.把数组转换为字符串的方法
原有数组不变
-
toString()：把数组转换为字符串
@params
@return
转换后的字符串，每一项用逗号分隔
let arr = [10,20,30];
let res = arr.toString();
console.log(res); // "10,20,30"
console.log([].toString()); // ""
console.log([12].toString()); // "12"
-
join()：把数组转换为字符串
@params
指定的分隔符（字符串格式）
@return
转换后的字符串，每一项用逗号分隔
let arr = [10,20,30];
let res = arr.join("");
console.log(res); // "102030"
res = arr.join(",");
console.log(res); // "10,20,30"
res = arr.join("|");
console.log(res); // "10|20|30"
res = arr.join("+");
console.log(res); // "10+20+30"
console.log(eval(res)); // 60
4.检测数组中是否包含某一项的方法
原来数组不变
-
indexOf() / lastIndexOf()：检测当前项在数组中第一次或最后一次出现位置的索引（IE6~8不兼容）
@params
要检索的内容
@return
这一项出现的位置索引值（数字），没有则返回-1
let arr = [10,20,30,10,20,30];
console.log(arr.indexOf(20)); // 1
console.log(arr.lastIndexOf(20)); // 4
5.数组的排序或者排列
原数组改变
-
reverse()：把数组倒过来排列
@params
@return
排列后的新数组
let arr = [12,15,9,28,10,22];
arr.reverse();
console.log(arr); // [22, 10, 28, 9, 15, 12]
-
sort()：数组排序
@params
可以没有，也可以是个函数
@return
排列后的新数组
let arr = [7,8,5,2,4,6,9];
arr.sort();
console.log(arr); // [2, 4, 5, 6, 7, 8, 9]
// 不传参数的情况下无法处理10以上数字的排序
arr = [12,15,9,28,10,22];
arr.sort();
console.log(arr); // [10, 12, 15, 22, 28, 9]
arr = [12,15,9,28,10,22];
arr.sort((a,b)=> a - b);
console.log(arr); // [9, 10, 12, 15, 22, 28]
6.遍历数组的方法
原数组不变
-
forEach()：遍历数组中的每一项
@params
回调函数
@return
let arr = [12,15,9,28,10,22];
arr.forEach((item, index, array)=>{
console.log(item, index, array); // 元素，索引，原数组
})
-
every()：遍历数组中的每一项
@params
回调函数
@return
布尔值，函数中每一项都返回true，则为true，否则为false
var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.every(function(item, index, array){
return (item > 2);
});
console.log(res); // false
-
some()：遍历数组中的每一项
@params
回调函数
@return
布尔值，函数中任意一项返回true，则为true，否则为false
var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.some(function(item, index, array){
return (item > 2);
});
console.log(res); // true
-
filter()：遍历数组中的每一项，过滤出符合条件的元素
@params
回调函数
@return
回调函数中返回 true 的项组成的新数组
var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.filter(function(item, index, array){
return (item > 2);
});
console.log(res); // [3, 4, 5, 4, 3]
-
map()：遍历数组中的每一项并对其进行修改
@params
回调函数
@return
回调函数中处理后的项组成的新数组
var arr = [1,2,3,4,5,4,3,2,1];
var res = arr.map(function(item, index, array){
return item * 2;
});
console.log(res); // [2, 4, 6, 8, 10, 8, 6, 4, 2]
7.归并数组的方法
原数组不改变
-
reduce()：遍历数组中的每一项并对其进行修改
@params
回调函数，初始化值（该值会作为第一次迭代时回调函数的第一个参数）
@return
归并处理后的新数组
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
console.log(index); // 输出：1 2 3 4
return prev + cur;
});
console.log(sum); //15
-
reduceRight()：和reduce()作用类似，方向相反而已
@params
回调函数，初始化值（该值会作为第一次迭代时回调函数的第一个参数）
@return
归并处理后的新数组
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
console.log(index); // 输出：3 2 1 0
return prev + cur;
});
console.log(sum); //15
