Javascript：新的数组方法

Array.prototype.at

注意：该方法仍属实验阶段，尚未定型

作用： 获取给定索引位置的元素
使用：

const array = ['a', 'b', 'c'];
array.at(-1);  // c
array.at(0);  // a
array.at(4);  // undefined

原生代码实现：

Array.prototype._at = function(index) {
  return index >= 0 ? this[index] : this[this.length - Math.abs(index)];
}

const array = ['a', 'b', 'c'];
array._at(-1);  // c
array._at(0);  // a
array._at(4);  // undefined

Array.prototype.flatMap

array.flatMap(callbackFn, thisArg);
array.flatMap(function(currentValue, index, array){...}, thisArg); 作用： 使用映射函数映射每个数组元素，再将结果压缩成一个新数组
参数：
 callbackFn 生成新数组元素的函数
   currentValue 正在处理的当前元素
   index 正在处理的当前元素的索引，可选
   array 原数组，可选
 thisArg 执行回调时用作this的值，可选

使用：

const array = [1, 2, 3, 4];

// 获取大于1的元素，并输出各项元素的倍数
const arr1 = array.flatMap(x => x > 1 ? [x * 2] : [])
const arr2 = array.flatMap(function(x, idx, arr){
  return x > 1 ? [x * this] : [];
}, 3);

console.log(arr1, arr2);  //  [4, 6, 8]      [6, 9, 12]

// 预分配和显示迭代
const arr3 = array.flatMap(x => [x, x * 2]);
console.log(arr3);   // [1, 2, 2, 4, 3, 6, 4, 8]

// 在map期间添加和删除项目
const arr = [5, 4, -3, 20, 17, -33, -4, 18];
const arr4 = arr.flatMap(x => 
  (x < 0) ? [] :
    (x % 2 === 0) ? [x] : [x - 1 , 1]
);
console.log(arr4);  //  [4, 1, 4, 20, 16, 1, 18]

Array.prototype.groupBy

注意：该方法仍属实验阶段，尚未定型。且仅能在Firefox 的 Nightly 版本中使用。

array.groupBy(callbackFn, thisArg);
array.groupBy(function(currentValue, index, array){...}, thisArg);

作用： 对数组对象进行分类，返回一个新的数组对象
参数：
 callbackFn 生成新数组元素的函数
   currentValue 正在处理的当前元素
   index 正在处理的当前元素的索引，可选
   array 原数组，可选
 thisArg 执行回调时用作this的值，可选
使用：

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas',  type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 }
];

const rs1 = inventory.groupBy( ({ type }) => type );
console.log(rs1);
/*
  返回结果：
  { 
    vegetables: [
      { name: 'asparagus', type: 'vegetables', quantity: 5 }, 
    ],
    fruit: [
      { name: "bananas", type: "fruit", quantity: 0 },
      { name: "cherries", type: "fruit", quantity: 5 }
    ], 
    meat: [
      { name: "goat", type: "meat", quantity: 23 },
      { name: "fish", type: "meat", quantity: 22 }
    ] 
  }
*/


const rs2 = inventory.groupBy( function({ quantity }) {
  return quantity > this ? 'satisfy' : 'dissatisfy';
} , 5);
console.log(rs2);
/*
  返回结果：
  { 
    dissatisfy: [
      { name: "asparagus", type: "vegetables", quantity: 5 },
      { name: "bananas", type: "fruit", quantity: 0 },
      { name: "cherries", type: "fruit", quantity: 5 }
    ], 
    satisfy: [
      { name: "goat", type: "meat", quantity: 23 },
      { name: "fish", type: "meat", quantity: 22 }
    ] 
  }
*/

Array.prototype.groupByToMap

注意：该方法仍属实验阶段，尚未定型。且仅能在Firefox 的 Nightly 版本中使用。

array.groupByToMap(callbackFn, thisArg);
array.groupByToMap(function(currentValue, index, array){...}, thisArg);

作用： 对数组对象进行分类，返回一个对象数组
参数：
 callbackFn 生成新数组元素的函数
   currentValue 正在处理的当前元素
   index 正在处理的当前元素的索引，可选
   array 原数组，可选
 thisArg 执行回调时用作this的值，可选
使用：

const inventory = [
  { name: 'asparagus', type: 'vegetables', quantity: 5 },
  { name: 'bananas',  type: 'fruit', quantity: 0 },
  { name: 'goat', type: 'meat', quantity: 23 },
  { name: 'cherries', type: 'fruit', quantity: 5 },
  { name: 'fish', type: 'meat', quantity: 22 }
];

const restock = { restock: true }; 
const sufficient = { restock: false }; 
const result = inventory.groupByToMap( ({ quantity }) => 
  quantity < 6 ? restock : sufficient 
); 
console.log(result.get(restock));
/*
  返回结果：
  [
    { name: 'asparagus', type: 'vegetables', quantity: 5 }, 
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ]
*/