ES6 的数组新增常用方法

ES6 的数组新增常用方法

1. map(callback) 映射数组:

通过遍历的方式, 将原数组中每一个元素通过传入的回调函数处理后返回的值创建并返回一个新数组, map 方法不会对空数组进行检测, map 方法不会改变原数组

使用场景： map 是我们最常用到的一个数组方法, 没有之一。无论是在页面中的列表渲染还是对数组中的元素做一些计算, 都要用到它;

/**
 * mapCallback
 * map方法用于对每一个数组元素做处理的回调函数
 * @param {any} value 当前索引的元素
 * @param {number} index 当前索引
 * @param {Array} array 原数组
 * @return {any} 计算完成后的数组成员, 可以是任意内容
 * map方法不会对空数组进行检测, map方法不会改变原始数组
 **/
function mapCallback(value, index, array) {
  console.log('mapCallback方法的参数', value, index, array);
  return value * value;
}
const arr = [1, 2, 3];
// 简单的map
const newArr = arr.map(mapCallback);
//[2,4,6]
// 注：当方法内仅一行代码时, 可以省略掉花括号与return,
// map方法中内容仅一行代码且该代码是表达式时默认返回该表达式
// 什么是表达式？ 表达式就是ECMAScript里的一个短句, ECMAScript解释器可以将其计算出一个结果

2. filter(callback) 过滤数组: 通过遍历的方式, 将数组中的每一个元素通过回调函数进行筛选后返回的值创建并返回一个新数组, filter 方法不会改变原数组

使用场景：相比起 map 来说, filter 的适用场景少很多, 主要用来对页面中的商品等信息做筛选处理

/**
 * filterCallback
 * filter方法用于对每一个数组元素做处理的回调函数
 * @param {any} value 当前索引的元素
 * @param {number} index 当前索引
 * @return {boolean} 如果返回值为true则将该元素加入到新数组中
 * filter方法不会改变原数组
 */
function filterCallback(value, index) {
  console.log('filterCallback方法的参数：', value, index);
  return value > 2;
}
const arr = [1, 2, 3];
// 简单的filter
const newArr = arr.filter(filterCallback);
// [3]

3. reduce(callback, initialValue) 累加器: 遍历数组的所有项, 将数组中从左至右的的每个元素与上一次经过回调函数处理后的值进行计算, 最终将其合并成一个值

reduce 是一个极常用到的方法, 我们不仅可以用它来对数字进行一元计算, 还可以用它实现比如数组去重、数组转对象等一系列复杂功能

使用场景：多用于计算订单金额以及在一些特殊场景将对象转换成数组或将数组转换成对象

/**
 * reduceCallback
 * reduce方法用于处理遍历的函数
 * @param {any} previousValue 上一次调用回调返回的值, 初始化时是reduce接收到的第二个参数initialValue
 * @param {any} currentValue 数组中当前被处理的元素
 * @param {number} index 当前索引
 */
function reduceCallback(previousValue, currentValue, index) {
  console.log('reduceCallback方法的参数', previousValue, currentValue, index);
  return previousValue + currentValue;
}
const arr = [1, 2, 3];
/**
 * reduce方法
 * @param {function} callback 回调函数, 该函数中返回的内容会被当成下一次遍历时的第一个参数
 * @param {any} initialValue 初始值, 该参数是一个可选参数, 会被当成首次遍历时的回调函数的第一个参数
 */
const accumulated = arr.reduce(reduceCallback, 0);
// 6

reduce 是一个很有思想的方法, 它的回调函数第一个参数并不是固定的, 当我们调用 reduce 方法时传入初始化值的时候, 它是这个传入的参数, 如果没有传入初始化参数, 它就是数组的第一个元素, 而当回调被执行过一遍以后, 它又成了上次执行回调函数时返回的值。根据它的这个特点, 我们可以实现一些复杂的功能

const str = '4687231567182461978234';
/**
 * 将上面的字符串去重后排序
 */
const newStr = str
  .split('')
  .reduce((prev, next) => {
    return prev.includes(next) ? prev : prev.concat(next);
  }, [])
  .sort()
  .join('');
// '123456789'
/**
 * 将指定的数组转换成对象
 */
const newObj = newStr.split('').reduce((prev, next, index) => {
  prev[next] = index;
  return prev;
}, {});
// {1: 0, 2: 1, 3: 2, 4: 3, 5: 4, 6: 5, 7: 6, 8: 7, 9: 8}

4. includes() 判断数中是否包含给定的值

const arr = [1, 2, 3];
arr.includes(2);
// true
arr.includes(6);
// false

5. find() 找到第一个符合条件的数组成员

const arr = [1, 2, 3];
arr.find(2);
// 2

find 方法也接受一个回调函数作为参数, 以实现对复杂数 c 组成员的检索

const arr = [
  { a: 1, b: 2 },
  { a: 3, b: 5 },
];
/**
 * findCallback
 * find方法用于对每一个数组元素做处理的回调函数
 * @param {any} value 当前索引的元素
 * @param {number} index 当前索引
 * @param {Array} array 原数组
 * find方法不会改变原数组
 **/
function findCallback(item, index, array) {
  return item.a === 3;
}
arr.find(findCallback);

6. findIndex() 找到的第一个符合条件的数组成员的索引值, 其用法与 find 一致

7. fill() 以指定的值填充数组, 不怎么用, 确切地说是一直没用过

const arr = new Array(5);
arr.fill(5);
// [5, 5, 5, 5, 5]

8. arr.every(callback) 依据判断条件, 数组的元素是否全满足, 若满足则返回 ture

const arr = [1, 2, 3];
/**
 * everyCallback
 * @param {any} value 当前索引的元素
 * @param {number} index 当前索引
 * @return {boolean} 如果返回值为true跳过, 如果返回值为false则结束遍历
 */
function everyCallback(value, index) {
  return value > 3;
}

const greater = arr.every(everyCallback);
// false

9. arr.some() 依据判断条件, 数组的元素是否有一个满足, 若有一个满足则返回 ture

const arr = [1, 2, 3];
/**
 * someCallback
 * @param {any} value 当前索引的元素
 * @param {number} index 当前索引
 * @return {boolean} 如果返回值为false跳过, 如果返回值为true则结束遍历
 */
function someCallback(value, index) {
  return value > 3;
}

const greater = arr.some(someCallback);
// false