js处理数组的5个方法

1. Array.at()

数组的索引都是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的长度减1。
我们一般使用方括号通过索引访问数组元素：array[index]，如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 undefined。

const array = ['first', 'second ', 'last'];
console.log(arr[0])              // logs 'first'
console.log(arr[1])              // logs 'second'

在大多数情况下，方括号语法是通过正索引访问数组元素的好方法，但有时我们需要从末尾而不是从头开始访问元素。例如，访问数组的最后一个元素。

const array = ['first', 'second ', 'last'];
console.log(arr[array.length-1])              // logs 'last'

现在，有更加简洁的新方法访问数组元素：Array.prototype.at()。
at()方法接收了一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。
方括号符号没有问题，但对于后面的项目，可以调用array.at(-1)，无须再访问array.length

const array = ['first', 'second ', 'last'];
console.log(arr.at(0))              // logs 'first'
console.log(arr.at(-2))              // logs 'second'
console.log(arr.at(-1))              // logs 'last'

2. Array.reduce(callback,[initialValue])

reduce()方法对数组中每一个元素执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

callback(执行数组中每个值的函数，包含四个参数)

1. previousValue（上一次调用回调返回的值，或者是提供的初始值（initialValue））
2. currentValue（数组中当前被处理的元素）
3. index （当前元素在数组中的索引）
4. array （调用 reduce 的数组）

没有设置函数初始迭代值时：

const arr = [1,2,3,4,5];
const sum = arr.reduce(function(prev,cur,index,arr){
    console.log(prev,cur,index);
    return prev + cur;
});
console.log('arr:',arr,'sum:',sum);

运行结果：

分析：在这里reduce的作用就是对这个数组进行求和，迭代了四次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值

设置函数初始迭代值：

const arr = [1,2,3,4,5];
const sum = arr.reduce((prev,cur,index,arr) => {
    console.log(prev,cur,index);
    return prev + cur;
},5); 
console.log('arr:',arr,'sum:',sum);

分析：这里我们添加了一个初始的迭代值，也就是让prev从5开始计算(以5为初始值求和)，可以看到，这里迭代了5次，结果也加上了初始值。同时，这里使用箭头函数来代替完整的函数。 运行结果相同。

reduce的实际应用：

数组求和

let arr = [1,2,3,4,5]
console.log(arr.reduce((a,b) => a + b)) // - 15
console.log(arr.reduce((a,b) => a * b))  // - 120

计算数组中每个元素出现的次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice', 'Bob', 'Bob'];
var countedNames = names.reduce(function (allNames, name) {
  console.log(allNames,name);
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames);

运行结果：

分析：
a：由于设置了迭代初始值，allNames的第一个值是一个空对象，此时name为Alice，然后进行判断，发现在allNames中没有Alice属性，所以就将Alice对应的属性值赋为1。
b.后面没有重复的是一样的道理，如果碰到重复值，就会将该属性值加1，这样就能计算元素重复的次数了。

去除数组中重复的元素

let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
let myOrderedArray = myArray.reduce((accumulator, currentValue)=>{
  if (accumulator.indexOf(currentValue) === -1) {
    accumulator.push(currentValue)
  }
  return accumulator;
}, []);
console.log(myOrderedArray);  // - ['a','b','c','d']

let arr1 = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr1.sort().reduce((prev, current) => {
if(prev.length === 0 || prev.at(-1) !== current) {
        prev.push(current);
    }
    return prev;
}, []);
console.log(result);  // [1,2,3,4,5]

分析：这里主要是借助迭代功能实现数组的扩展，判断当前元素是否已经添加到数组中，如果不存在就从尾部添加，这两个方法在去重方法中应该算比较简单高效的。

按属性对Object分类

var person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
var groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

对对象的属性求和

let people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];
let result = people.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)
 
console.log(result) // - 结果：61

二维数组的处理

let arr = [
    ['红色','黑色','白色'],
    ['16G','32G'],
    ['移动版','联通版','电信'],
    ['中国','美国'],
]
 
//reduce
let phone = arr.reduce( (prev,current,index)=>{
    //处理第一组
    if(index == 0){
        //遍历第一组
        current.forEach(item=>{
            prev.push([item])
        })
    } else {
        //其他行
        // res 获得第一行准备数组
        let newArr = []
        prev.forEach(item=>{
            // 当前行获得需要处理
            current.forEach(ele=>{
                newArr.push([...item, ele ])
            })
        })
        prev = newArr
    }
    return prev
} ,[])
console.log(phone)

二维数组 处理结果为对象

let arr = [
    ['红色','黑色','白色'],
    ['16G','32G'],
    ['移动版','联通版']
]
//reduce
let phone = arr.reduce( (res,current,index)=>{
    //第一个数组
    if(index == 0) {
        current.forEach(ele=>{
            res.push({['attr' + index] : ele })
        })
    } else {
        //其他数组
        let newArr=[]
        res.forEach(obj=>{
            current.forEach(ele=>{
                // console.info({ ...obj, ['attr'+index] : ele})
                newArr.push({ ...obj, ['attr' +index] : ele})
            })
        })
        res = newArr
    }
    return res
} , [])
console.info(phone)

3. Array.groupBy()

arr.groupBy(callback(item,index,arr))按类别创建相同分组的方法，接受一个使用三个参数的回调函数：当前数组项、索引和数组本身，回调函数返回一个字符串：即您要在其中添加的项目的组名。

const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];
const result = products.groupBy(item=>{
    return item.category
})
console.log(result)

分析：返回一个对象，其中每个属性的键作为类别名称，值作为包含相应类别产品的数组。

4. Array.groupByToMap()

有时您可能想要使用Map而不是普通对象，因为Map是接受任何数据类型作为键，但纯对象仅限字符和符号。因此，如果您想要将数据分组到一个Map中，您可以使用该方法，该方法工作原理与array.groupBy()一样，只是它将项目分组为Map而不是普通的javascript对象。

const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];
const groupByCategory = products.groupByToMap(product => {
  return product.category;
});

console.log(groupByCategory);
// Map([
//   ['fruits', [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ]],
//   ['vegetables', [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// ])

5. Array.filter()

array.filter()为数组中的每一个元素调用一次callback函数，并利用所有使得callback返回true或等价于true的值元素创建一个新数组。filter()不会改变原数组，它返回过滤后的新数组。filter()的遍历的元素范围在第一次调用callback之前已经确定。在调用filter之后被添加到数组中的元素不会被filter遍历到。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(item=> item.length > 6)
console.log(result) // expected output: Array ["exuberant", "destruction", "present"]

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
 
/** * Array filters items based on search criteria (query) */
function filterItems(query) {
    return fruits.filter(function (el) {
        return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
    })
}
 
console.log(filterItems('ap')); 
// ['apple', 'grapes'] console.log(filterItems('an')); 
// ['banana', 'mango', 'orange']