终于找到工作啦啦~~~小伙伴们加油啊,好好学习沉淀,毕竟前端这份职业是需要不断学习才能进步并发展下去的啊!最近在工作中经常用到关于数组的一些方法,每次要不是记混就是忘记有哪些方法了,唉~今天终于要对它下手了…
一、数组常用方法
1、push和pop
push(): 向数组末尾添加一个或多个元素,并返回数组新的长度
pop(): 从数组末尾删除1个元素,并返回被删除的元素
var arr = ['1', '2', '3', '4'];
arr.push(5, 6); // 5
arr.pop(); // 6
2、shift和unshift
shift(): 向数组开头添加一个或多个元素,并返回数组长度
unshift(): 从数组开头删除一个元素,并返回被删除的元素
var arr = ['1', '2', '3', '4'];
arr.shift(5, 1); // 6
arr.unshift(); // 1
3、toString和toLocalString
都是将数组的每个元素转化为字符串
var arr = ['1', '2', '3', '4'];
var arr1 = ['1', '2', '3', '4'];
arr.toString(); // 1,2,3,4
arr1.toLocalString(); // 1,2,3,4
4、slice
截取数组,返回数组中第一个参数索引位置到第二个参数索引位置的所有元素,包含一个参数位置的元素但不包含第二个参数位置的元素
var arr = ['1', '2', '3', '4'];
arr.slice(1,3); // ['2', '3']
5、splice
删除或插入数组元素
① 只有一个参数时,表示删除该起始位置后面的所有元素
② 两个参数时,第一个参数为指定删除的起始位置,第二个参数为要删除元素的个数
③ 三个参数时,第一个参数为指定插入的起始位置,若第二个参数表示删除元素的个数,若为0则返回空数组,第三个参数为插入或修改的元素内容
var arr = ['1', '2', '3', '4'];
var arr1 = ['1', '2', '3', '4'];
var arr2 = ['1', '2', '3', '4'];
var arr3 = ['1', '2', '3', '4'];
arr.splice(2); // ['3',' '4']
arr1.splice(2, 1); // ['3']
arr2.splice(2, 0, 'a', 'b'); // [] 表示返回删除元素的数组
arr2; // ['1', '2', '3', 'a', 'b', '4']
arr3.splice(1, 2, 'a', 'b'); // ['2', '3']
arr3; // ['1', '2', 'a', 'b']
6、concat
数组拼接,若参数中含有数组,则拼接数组中的元素,不改变原数组
var arr = ['1', '2', '3', '4'];
arr.concat('fsdf', hhhh'); // ['1', '2', '3', '4', 'fsdf', hhhh']
arr.concat(['a', 'b', 'c']); // ['1', '2', '3', '4', 'a', 'b', 'c']
7、join
将数组中的元素用参数拼接为字符串,默认为逗号
var arr = ['1', '2', '3', '4'];
arr.join(); // 1,2,3,4
arr.join(';'); // 1;2;3;4
8、reserve
将数组中的元素点到顺序
var arr = ['1', '2', '3', '4'];
arr.reserve(); // ['4', '3', '2', '1']
9、sort
给数组中的元素排序
// 默认按第一个字符排序
var arr = [1111,333,22,666,5555];
arr = arr.sort();
arr // [1111, 22, 333, 5555, 666]
// 按数值大小排序 从小到大
arr = arr.sort(function(a,b){
return a-b;
});
arr; // [22, 333, 666, 1111, 5555]
// 按数值大小排序 从大到小
arr = arr.sort(function(a,b){
return b-a;
});
arr; // [5555, 1111, 666, 333, 22]
10、forEach
遍历数组,为每个元素调用指定函数
第一个参数为数组元素,第二个参数为元素索引,第三个参数为数组本身
var arr = [1, 2, 3, 4];
arr.forEach((v, i, arr) => {
arr[i] = v + 1
})
console.log(arr); // ['1','2','3','4']
11、map
调用的数组的每一个元素传递给指定的函数,并返回一个新数组,不修改原数组
var arr = [1, 2, 3, 4];
var res = arr.map((i) => {
return i*i
})
console.log(res); // [1, 4, 9, 16]
12、Array.of()
返回由所有参数组成的数组,如果没有参数就返回一个空数组
var a = Array.of(2,45,7);
a; // [2, 45, 7]
13、Array.from()
将类数组(伪数组)转换为真正的数组
var obj = {0: 'a', 1: 'b', 2: 'c', length: 3};
var arr = Array.from(obj);
arr; // ['a', 'b', 'c']
14、fill
使用给定的参数,将数组所有元素填充
var arr = [1,2,3,4];
var b = arr.fill('a');
b; // ['a', 'a', 'a']
15、indexOf
查找数组是否存在某个元素,有则返回其下标,没有返回-1
(注:使用严格等于 === 来搜索元素,与字符串中的indexOf()有所不同)
var arr = [1,NaN,'哈哈',4];
arr.indexOf(“NaN”); // -1
arr.indexOf("哈哈"); // 2
16、lastIndexOf
查找指定元素在数组中的最后一个位置,有则返回索引,否则返回-1
第一个参数表示要搜索的元素,第二个表示逆向查找的位置,默认为-1
var arr = [1,2,3,4];
arr.lastIndexOf(3, 10); // 2 第二个参数为正值且大于数组长度时查找整个数组
arr.lastIndexOf(3, -2); // 2 第二个参数为负值且绝对值小于数组长度时查找整个数组,从倒数第2个位置开始逆向查找
arr.lastIndexOf(3, -10); // -1 第二个参数为负值且绝对值大于数组长度时不能查找到数组元素,返回-1
17、every和some
every(): 检测数组中所有元素是否符合判断条件
some():检测数组中是否有满足条件的元素
var arr = [1, 2, 3, 4];
var boo = arr.every(i => {
i > 2
})
boo; // false
var boo2 = arr.some(i => {
i > 2
})
boo2; // true
二、数组的转换
数组------字符串
1、数组转为字符串
var arr = [1, 2, 3, 4];
var b = arr.join();
console.log(b); // 1, 2, 3, 4
2、字符串转为数组
var str = "11, 22, 33";
var arr = str.split(",");
console.log(arr); // [11, 22, 33]
数组------对象
1、数组转为对象
var menuArr = [
[1, "Area1", -1],
[2, "Area2", -1],
[3, "Area1-1", 1],
[4, "Area1-2", 1],
[5, "Area2-1", 2],
[6, "Area2-2", 2],
[7, "Area1-2-3", 4],
[8, "Area2-2-1", 6]
];
// 转换的方法
function arryToObject(arry){
var menuObject ={}//创建一个空对象
for(var i=0,len=arry.length;i<len;i++){
var arr1= [];
// console.log(arry[i]);
arr1=arry[i];
// console.log(arry1);
if(arr1[2]== -1){
menuObject[arr1[0]]={
"name":arr1[1],
"subMenu":{ }
}
}
if(arr1[2]== 1){
console.log(arr1[2]);
menuObject["1"]["subMenu"][arr1[0]]={
"name":arr1[2],
"subMenu":{}
}
}
if(arr1[2]== 2){
menuObject["2"]["subMenu"][arr1[0]]={
"name":arr1[2],
"subMenu":{}
}
}
if(arr1[2]== "4"){
menuObject["1"]["subMenu"]["4"]["subMenu"][arr1[0]]={
"name":arr1[2],
"subMenu":{}
}
}
if(arr1[2]==6){
menuObject["2"]["subMenu"]["6"]["subMenu"][arr1[0]]={
"name":arr1[2],
"subMenu":{}
}
}
}
return menuObject;
}
console.log(arryToObject(menuArr));
2、对象转为数组
var scoreObject = {
"Tony": {
"Math": 95,
"English": 79,
"Music": 68
},
"Simon": {
"Math": 100,
"English": 95,
"Music": 98
},
"Annie": {
"Math": 54,
"English": 65,
"Music": 88
}
}
// 转换的方法
var arr6=[];
for(var i in scoreObject){ //第一次使用这种for循环,这里i并不是i=1,i=2,i=3....这种数字,而是i=Tony,i=Simon,i=Annie
var arr7=[];
arr7.push(i);
for(var j in scoreObject[i]){ //同理这里的for循环里的 j 也不是 1,2,3.。。
arr7.push(scoreObject[i][j]);
}
arr6.push(arr7);
}
console.log(arr6);
大概就这么多了吧,如果还要新的方法的话后续更新啦~~