ECMAScript 6中数组新方法

数组的方法

数组的的大部分方法都可以实现数组的遍历。

foreach方法

实现数组的遍历

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.forEach(function (value, index, arr) {
    cosnole.log(value, index, arr);
});
// value ==> 值
// index ==> 值对应的下标
// arr ==> 遍历的数组对象

map方法

map方法的作用：会生成一个与遍历对象数组相同长度的新数组，并且map中的返回值就是新数组的参数值。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const narr = arr.map(function (value) {
    return value;
})
// 此时narr中的值与arr中的值相等
// 当方法中的函数只有一个形参和函数内部只有return时，可以写成下面的方式
const narr = arr.map(value => value);
// 箭头函数

reduce方法

语法

arr.reduce(callback, [initialValue])

reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接收四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce数组

// callback(执行数组中的每个函数，包含四个参数)
/**
 * 1、previousValue（上一次回调函数返回的值，或者是提供的初始值（initialValue））
 * 2、currentValue（数组中当前被处理的元素）
 * 3、index（当前元素在数组中的索引）
 * 4、array（调用的reduce数组）
 */
// initialValue（作为第一次调用callback的第一个参数）

如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

1. 常规用法

var arr = [1, 2, 3, 4, 5]

var sum = arr.reduce((prev, cur, index, arr) => {
  console.log(prev, cur, index)
  return prev + cur
})
console.log(sum)
// 默认直接从索引1执行，prev默认为数组索引为0的值
/*
1 2 1
3 3 2
6 4 3
10 5 4
15
 */

2. 数组求和、求积

var arr = [1, 2, 3, 4]
var sum = arr.reduce((x, y) => x + y)
var mul = arr.reduce((x, y) => x * y)
console.log(sum, mul)
// 10 24

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

给initialValue初始值{}

var arr = ['xiaoming', 'lisi', 'good', 'lisi', 'xiaoming', 'nihao', 'lisi']
let nums = arr.reduce((pre, cur) => {
  // pre初始值为{}，因为initialValue给了值，所以reduce从索引0开始执行，cur初始为arr[0]  'xiaoming'
  if (cur in pre) {
    pre[cur]++
  } else {
    pre[cur] = 1
  }
  return pre
}, {})
console.log(nums)
// { xiaoming: 2, lisi: 3, good: 1, nihao: 1 }

4. 数组去重

var arr = [1, 2, 2, 2, 2, 3, 4, 3, 5, 3, 3, 4, 1, 2]
var a = arr.reduce((pre, cur) => {
  if (!pre.includes(cur)) {
    return pre.concat(cur)
  }
  return pre
}, [])
console.log(a)
// [ 1, 2, 3, 4, 5 ]

5. 多维数组转换为一维数组

var arr = [1, [2, 3], [[4, 5, [6, [7]]]], 8]
var a = (arr) => {
  return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? a(cur) : cur), [])
}
console.log(a(arr));
// [1, 2, 3, 4, 5, 6, 7, 8]

6. 对象属性求和

var arr = [
  {
    name: 'zangsa',
    num: 10
  }, {
    name: 'zangsa',
    num: 19
  }, {
    name: 'zangsa',
    num: 14
  }, {
    name: 'zangsa',
    num: 12
  }
]

const a = arr.reduce((pre, cur) => {
  return pre + cur.num
}, 0)

console.log(a);
// 55

filter方法

过滤，起到筛选的作用。

// 例如：筛选出数组arr中的奇数
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const oddArr = arr.filter(num => num % 2);

find方法

// 查找
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const num = arr.find(value => value > 3);
// num的值为4，find方法会返回满足条件的第一个结果

includes方法

// 对比arr.indexOf(value) 判断对应的值在数组中的下标，有则返回下标，否则返回-1
// arr.includes(value) 只要存在于数组则返回true，否则返回false
// 该方法不会遍历数组
const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.includes(1)); //true
console.log(arr.includes(9)); //false

some方法和array方法

• some是判断数组中是否存在满足条件的值，满足返回true，否则返回false。

var arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9, 10]
console.log(arr.some(val => val > 5));      // true
console.log(arr.some(val => val > 10));      // false

• every是判断数组中的值是否全部满足条件，满足返回true，否则返回false。

var arr = [1, 2, 3, 4, 5, 6, 7, 8 ,9, 10]
console.log(arr.every(val => val > 5));      // false
console.log(arr.every(val => val > 0));      // true