js数组常见的方法

js数组常见的方法

1. isArray()

作用：用于判断对象是否为数组

例子：

let arr1=[1,2,3];
let arr2={
    name:'张三',
    age:18,
};
arr3=10;
console.log(Array.isArray(arr1));//预计输出为 true
console.log(Array.isArray(arr2));//预计输出为 false
console.log(Array.isArray(arr3));//预计输出为 false

运行结果：

2. toString()

作用：在默认情况下都会以逗号分隔字符串的形式返回数组项

例子：

let arr=['张三','李四','王五'];
let str=arr.toString();
console.log(str);
console.log(arr);

运行结果：

3. join()

作用：使用指定的字符串用来分隔数组字符串

例子：

let arr=['张三','李四','王五'];
let str1=arr.join('-');
let str2=arr.join('&');
console.log(str1);
console.log(str2);
console.log(arr);

运行结果：

4. pop()

作用：移除数组中的最后一个项，并且返回移除的值项，同时将数组的长度-1

​ 注意：返回移除的那一项

例子：

let arr=['张三','李四','王五'];
let res=arr.pop();
console.log(res);//res接收移除的项应该为 王五
console.log(arr);// 注意观察此时的arr

运行结果:

此时会发现不同于之前的join（），原数组arr被改变了,当然，肯定不止这一个，注意观察每一个arr的输出,我们在后面总结。

5. push()

作用：可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度

​ 注意：返回数组长度

例子：

let arr=['张三','李四','王五'];
let res=arr.push('赵六','刘七');
console.log(res);//注意，是返回数组长度，所以应该是 5
console.log(arr);

运行结果：

6. shift()

作用：移除数组中的第一个项并且返回移除的项，同时将数组的长度-1

​ 注意：返回移除的那一项

例子：

let arr=['张三','李四','王五'];
let res=arr.shift();
console.log(res);//返回第一项，所有应该是 张三
console.log(arr);

运行结果：

7. unshift()

作用：在数组的前面添加任意个项，并返回数组的长度

​ 注意：返回数组长度

例子：

let arr=['张三','李四','王五'];
let res=arr.unshift('天一','孙二');
console.log(res);//返回的是数组长度，应该为 5
console.log(arr);

运行结果：

8. reverse()

作用：反转数组项的顺序

例子：

let arr=['张三','李四','王五'];
let res=arr.reverse();
console.log(res);
console.log(arr);

运行结果：

9. sort()

作用：数组排序，默认按照字符序列排序，该方法可以接受一个比较函数作为参数

例子一：默认排序

//默认排序，就是sort()里面不传参数
let arr1=[3,5,2,4,1,8,6,1];
let arr2=[3,1,18,22,6,45];
let res1=arr1.sort();
let res2=arr2.sort();
console.log(res1);
console.log(res2);
console.log(arr1);
console.log(arr2);

运行结果一：

例子二：自定义排序之从小到大排序

let arr2=[3,1,18,22,6,45];
let res2=arr2.sort((a,b)=>{
    //从小到大排序
    if(a>b){return 1;}
    else if( a<b){return -1;}
    else{return 0;}
})
console.log(res2);
console.log(arr2);

运行结果二：

例子三：自定义排序之从大到小排序

let arr2=[3,1,18,22,6,45];
let res2=arr2.sort((a,b)=>{
    // 从大到小排序
    if(a>b){return -1;}
    else if( a<b){return 1;}
    else{return 0;}
})
console.log(res2);
console.log(arr2);

运行结果三：

10. concat()

作用：数组拼接，先创建当前数组的一个副本，然后将接收到的参数拼接到这个副本的末尾，返回副本

例子：

let arr1=['天一','孙二'];
let arr2=['张三','李四','王五'];
let arr3=['赵六','刘七'];
//连接两个数组
let res1=arr1.concat(arr2)
console.log(res1);
console.log(arr1,arr2);
//连接多个数组
let res2=arr1.concat(arr2,arr3)
console.log(res2);
console.log(arr1,arr2,arr3);

运行结果：

连接两个数组

连接多个数组

11. slice()

作用：数组切割，返回通过截取得到的数组，可接受一个或者两个参数（返回项的起始位置，结束位置）。

​ 接收一个参数表示从该参数开始到数组末尾的所有项；

​ 当接受两个参数时表示从开始到结束的所有项。

​ 注意：（1）返回截取得到的数组（2）不包括结束项

例子：

let arr=['张三','李四','王五','赵六']
let res1=arr.slice(2);//预测结果是截取从数组下标为2（也就是'王五'）到结尾（'赵六'）的所以项,所以返回结果应该为['王五','赵六']
let res2=arr.slice(2,3);//预测结果是截取从数组下标为2（也就是'王五'）到数组下标为3（也就是'赵六'）的所以项，但是不包括结尾，所以结果应该为['王五']
console.log(res1);
console.log(res2);
console.log(arr);

运行结果：

12. splice()

作用：向数组的中部插入数据将始终返回一个数组，该数组中包含从原始数组中删除的项。

​ 删除：指定两个参数(起始位置，要删除的项数)
​ 插入：指定三个参数(起始位置，0，要插入的任意数量的项)
​ 替换：指定三个参数(起始位置，要删除的项数，要插入的任意数量的项)

​ 注意：（1）返回对原数组截取/删除/插入/替换后得到的数组（这点要与slice分开，slice是截取得到的数组，splice是剩下的）（2）第二个参数不是结束位置，是截取/删除/插入/替换的个数

例子：

let arr=['张三','李四','王五','赵六'];
let res_del=arr.splice(1,2);//预测结果是删除从数组下标为1开始的两项，所以结果应该为['李四','王五']
console.log(res_del);//返回删除的项
console.log(arr);//此时数组变为['张三','赵六']
let res_ser=arr.splice(0,0,'天一','孙二');//预测结果是在数组下标为0的位置插入'天一'和'王五'两项，所以数组变为['天一','孙二','张三','赵六']
console.log(res_ser);//返回删除的项
console.log(arr);
let res_rep=arr.splice(2,2,'刘七');//预测结果是在数组下标为2的位置先删除'张三'和'赵六'两项，然后在数组下标为二的位置插入'刘七'，所以数组变为['天一','孙二','刘七']
console.log(res_rep);//返回删除的项
console.log(arr);

运行结果：

13. indexOf()

作用：从数组开头向后查找，返回数组下标，找不到该元素返回-1。第一个参数为要查找的项，第二个参数（可选）为索引开始位置

​ 注意：只返回第一次找到的数组下标

例子：

let arr=['张三','李四','王五','赵六'];
let res=arr.indexOf('张三');
console.log(res);
console.log(arr);
//但是如果有两个或多个相同的项
let arr1=['张三','李四','王五','李四','赵六'];
let res1=arr1.indexOf('李四');
console.log(res1);//只会返回第一次找到的数组下标
console.log(arr1);

运行结果：

14. lastIndexOf()

作用：从数组末尾向前查找，返回数组下标，找不到该元素返回-1。第一个参数为要查找的项，第二个参数（可选）为索引开始位置

​ 注意：只返回第一次找到的数组下标

例子：

let arr=['张三','李四','王五','赵六'];
let res=arr.lastIndexOf('张三');
console.log(res);
console.log(arr);
//但是如果有两个或多个相同的项，与indexOf()方法类似，只会返回最先找到的数组下标
let arr1=['张三','李四','王五','李四','赵六'];
let res1=arr1.lastIndexOf('李四');
console.log(res1);//只会返回第一次找到的数组下标
console.log(arr1);

运行结果：

15. every()

作用：对数组中的每一元素运行给定的函数，如果该函数对每一项都返回true，则该函数返回true

例子：

let age=[18,20,25,22];
// let res=age.every((item,index,arr)=>{//item代表数组的值，index代表数组下标，arr是数组名，其中第一个参数一定要传，其他参数可选写
// 	return item>18;
// });
// console.log(res);

//简写为 需要返回谁就传谁
let res1=age.every(item=>{
    return item>20;
});
let res2=age.every(item=>{
    return item>15;
});
console.log(res1);
console.log(res2);
console.log(age);

 此处为箭头函数的简写形式,当只传一个参数时可以省略(),原本是(item)=>{}
 也等价于:
// let res=age.every(function(item){
// 	return item>18;
// });
// console.log(res);
// console.log(age);

运行结果：

16. some()

作用：对数组中的每一运行给定的函数，如果该函数对某一项返回true，则返回true

例子：

let age=[18,20,25,22];
let res=age.some(i=>{//此处直接用简写，传的3个参数都可以自己定义，不是一定要用item,index,arr
    return i>20;
});
console.log(res);
console.log(age);

运行结果：

17. filter()

作用：对数组中的每一项运行给定的函数，会返回满足该函数的项组成的数组

例子：

let age=[18,20,25,22];
let res=age.filter(i=>{//此处直接用简写
    return i>20;
});
console.log(res);
console.log(age);

运行结果：

18. reduce()

作用：接收一个函数作为累加器，将数组的值累加，最终计算为一个值

例子：

let num=[1,2,3,4,5];
let res=num.reduce((prev,next,index,arr)=>{//其中prev为初始值或计算结果的返回值e，next是当前要计算的值，index和arr同样可以省略
    return prev+next
})
console.log(res);
console.log(num);

运行结果：

19. map()

作用：对数组中的每一元素运行给定的函数，返回每次函数调用的结果组成的数组

例子：

let num=[1,2,3,4,5];
let res=num.map(v=>{//也是可以传3个参数
    return v*v;
});
console.log(res);
console.log(num);

运行结果：

20. forEach()

作用：对数组中的每一元素运行给定的函数，没有返回值，常用来遍历元素

例子：

let num=[1,2,3,4,5];
let res=num.forEach(v=>{
    console.log(v)
});
console.log(num);

运行结果：

总结：

改变原数组的方法：pop(),push(),shift(),unshift(),reverse(),sort(),splice()
不改变原数组的方法：toString(),join(),concat(),slice(),indexOf(),lastIndexOf(),every(),some(),
filter(),reduce(),map()
其中forEach()比较特殊，不过一般不推荐使用forEach()改变原数组