一、JS数组概览（汇总）
1、find、findIndex
find：返回符合条件的第一个元素
findIndex： 返回符合条件的第一个元素的位置(下标)
let arr = [1,2,3,4,5];
let index = arr.findIndex(item=>{
return item % 2 === 0
})
// index ========= 1
2、 splice
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。会改变原数组
语法：array.splice(index,howmany,item1,.....,itemX)
实例：删除数组中的元素
var arr = [1,2,2,3,4,5,6];
var len = arr.length;
// 方法一（常规操作）
for(var i=0;i<len;i++){
if(arr[i]==2){ // 删除所有为2的元素
arr.splice(i,1);
i--;
}
}
// 方法二（从后往前遍历，代码更简单）
for(var i=len;i>=0;i--){
if(arr[i]==2){
arr.splice(i,1);
}
}
// 方法三 （while）
while(i--){
if(arr[i]==2){
arr.splice(i,1);
}
}
实例：指定位置添加元素
var arr= ["1", "2", "3", "4"];
arr.splice(2, 0, "111", "222"); // ["1","2","111","222","3","4"]
3、slice
slice(start,end)提取字符串的某个部分，并以新的字符串返回被提取的部分
不会改变原数组
/**
* [1,2,3,4,5,6,7,8,9,10] => [[1,2,3],[4,5,6],[7,8,9],[10]]
* size:3
*/
let arr = Array.from(new Array(10), (x, index) => {
return index + 1
})
function getResultGroup(result,size) {
let arr1 = [];
let len = result.length;
for(let i = 0; i< len; i = i + size) {
let arr2 = result;
arr1.push(arr2.slice(i,i + size))
}
return arr1;
}
4、concat
concat() 方法用于连接两个或多个数组
返回一个新的数组，不会改变原数组
let arr1 = new Array(1,2,3);
let num = 4;
let arr2 = [5,6];
console.log(arr1.concat(num,arr2)) // [1,2,3,4,5,6]
5、indexOf
语法：Array.indexOf(a)
从数组头部开始查找某项，返回索引值（找到的第一个索引值），找不到返回-1
- 案例-数组去重
// filter 遍历数组返回执行结果为true的项，组成一个新数组
let arr = [1,2,3,4,5,4,3,2,1];
let newArr = arr.filter((item,index)=>{
return arr.indexOf(item) === index
})
console.log(newArr) // 返回 [1,2,3,4,5]
6、map
语法：array.map(function(currentValue,index,arr), thisValue)
参数：接收两个参数，一个是回调函数，另一个是回调函数的this值（可选）。回调函数接收三个参数，分别是当前值，当前索引和整个数组。
返回：函数返回一个新创建的数组，数组中的每个元素都经过了回调函数的处理，结果不改变原数组。
let nums = [1, 2, 3];
let obj = {val: 5};
let newNums = nums.map(function(item,index,array) {
return item + index + array[index] + this.val;
//对第一个元素，1 + 0 + 1 + 5 = 7
//对第二个元素，2 + 1 + 2 + 5 = 10
//对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]
7、filter
语法：array.filter(function(currentValue,index,arr), thisValue)
参数：接收一个函数参数。函数接收一个默认参数，就是数组正在遍历的当前元素，函数参数的返回值是一个布尔值，若返回true，则数组元素得到保留。
返回：返回该函数会返回true的项组成的数组，此函数不会改变原数组。
let data = [ { id: 1, check: true }, {id: 2, check: false} { id: 4, check: true } ]
let newData = data.filter(item=>{
return item.check;
});
console.log(newData); // 返回true的项组成的数组
8、every和some
some：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
every：判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true。
// every
let data = [{id: 1, check: true},{id: 2, check: false},
{id: 3, check: false},{id: 4, check: true}];
let selectAll = data.every(item=>{
return item.check;
});
console.log("every函数："+selectAll) // data中每一项都为true才会返回true
// some
let hasCheck = data.some(item=>{
return item.check;
});
console.log("some函数："+hasCheck); // data中任一一项返回true则会返回true
9、reduce
语法：reduce(callback,initiaValue)会传入两个变量，回调函数(callback)和初始值(initiaValue)。
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。
案例：
- 计算数组总和
var num = [1,2,3,4,5];
var res = num.reduce(function(total,num){
return total+num;
},0);
console.log(res)；//15
- 合并二维数组
var red = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
console.log(red) // [0, 1, 2, 3, 4, 5]
- 统计一个数组中有多少个不重复的单词
// 不用reduce时：
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
var obj = {};
for(var i= 0, l = arr.length; i< l; i++){
var item = arr[i];
obj[item] = (obj[item] +1 ) || 1;
}
return obj;
}
console.log(getWordCnt()); // {apple: 2, orange: 3, pear: 1}
// 用reduce时：
var arr = ["apple","orange","apple","orange","pear","orange"];
function getWordCnt(){
return = arr.reduce(function(prev,next) {
prev[next] = (prev[next] + 1) || 1;
return prev;
},{})
}
console.log(getWordCnt()); // {apple: 2, orange: 3, pear: 1}
10、Array.from()
- 将具有length属性的对象 转成数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5
let arr = Array.prototype.slice.call(arrayLike);
// ES6
let arr1 = Array.from(arrayLike);
console.log(arr); //['a','b','c'];
console.log(arr1); //['a','b','c'];
补充：关于slice大致内部实现
Array.prototype.slice = function(start,end){
var result = new Array();
start = start || 0;
//this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象
end = end || this.length;
for(var i = start; i < end; i++){
result.push(this[i]);
}
return result;
}
- Array.from()方法的第二个参数
Array.from()方法的第二个参数类似与数组的map方法，用于对每个元素进行处理，并将处理后的结果放入返回的数组。
let arrayLike = {
'0': 1,
'1': 2,
'2': 3,
length: 3
};
// ES6
let arr1 = Array.from(arrayLike, ele => ele + 1); //[2,3,4]
// ES5
let arr2 = Array.prototype.map.call(arrayLike, ele => ele + 1); //[2,3,4]
// 等同于
let arr3 = Array.from(arrayLike).map(ele => ele + 1); //[2,3,4];
- 举例：快速生成包含10个数字1的数组
let arrayLike = {length: 10};
let arr = Array.from(arrayLike, () => 1);
- 举例：生成数字范围
function range(end) {
return Array.from({ length: end }, (_, index) => index)
}
console.log(range(4)); // => [0, 1, 2, 3]
拓展
数组的拷贝
arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向
数组元素的字符串化
arrayObj.join(separator); //返回字符串
let arr = [1,2,3,4,5,6];
console.log(arr.join(',')) // 1,2,3,4,5,6
数组排序
arrayObj.sort() arrayObj.reverse()
网友评论