JS数组概览（汇总）

一、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()