JS常见数组方法记录

数组（Array）是JavaScript中内置的全局对象，在构建诸如商品列表等组件（Component）时，时常用到。

除了常见的push、pop、indexOf等方法，js还提供了一些诸如过滤、规约等流处理方法，接下来就是记录常用的数组方法，以便于翻阅学习。
先定义一个数组列表：

const actList = [
    { name: '大酬宾', reward: 100 },
    { name: '跑步吧', reward: 90 },
    { name: '一起来', reward: 80 },
    { name: '打卡', reward: 70 },
    { name: '检测', reward: 60 },
    { name: '答题', reward: 50 },
    { name: '早晚', reward: 40 },
    { name: '悦走', reward: 30 },
];

• filter
  返回符合条件的元素。

//返回奖励大于70的活动
const  newact = actList.filter(item => item.reward > 70);
console.log(newact); 
//[{name: "大酬宾", reward: 100},{name: "跑步吧", reward: 90},{name: "一起来", reward: 80}]

由于const类型的值，都是不可变量，因此这些操作的返回的都是一个新对象，并不会影响到原值。

• map
  将数组内的item转化成另一种对象

const names = actList.map(item => item.name);
console.log(names);
//["大酬宾", "跑步吧", "一起来", "打卡", "检测", "答题", "早晚", "悦走"]

• find
  类似于filter方法，但返回第一个符合条件的元素。filter返回一个数组，find返回一个object。

//返回name长度为3的第一个对象
const findName= actList.find(item => item.name.length === 3);
console.log(findName);
// {name: "大酬宾", reward: 100}

可见，虽然’跑步吧’ ，'一起来’也符合条件 但是find生成的对象 只返回第一个符合条件的元素。

• forEach
  遍历数组内全部元素。

//打印元素
actList.forEach(item=>console.log(`act-name=${item.name},act-reward=${item.reward}`));

结果：

act-name=大酬宾,act-reward=100
act-name=跑步吧,act-reward=90
act-name=一起来,act-reward=80
act-name=打卡,act-reward=70
act-name=检测,act-reward=60
act-name=答题,act-reward=50
act-name=早晚,act-reward=40
act-name=悦走,act-reward=30

• some
  当数组中有一个符合条件，则返回true，否则返回false。

//是否至少有一个name为Jack的
const isSome = actList.some(item=>item.name === '答题');
console.log(isSome); // true

• every
  功能类似于some，但要求每一个元素都符合条件才返回true。

//是否score都大于70
const isEvery = actList.every(item=>item.reward> 70);
console.log(isEvery); //false

• reduce
  规约函数。在MDN中给出的API可以简化为reduce(callback(accumulator,current),initValue)。它有两个参数，第一个是回调函数，第二个initValue是初始值，可选的。current表示数组内的元素，即当前值。

值得一说的是accumulator这个参数，它是中间态的值，一个累加器。换句话数，reduce函数是有状态的，即非纯函数，在多线程执行的时候，需要做一致性处理，否则可能会得到意外值。当然JavaScript是单线程执行的，所以可不考虑，但是用到类似于Java的语言中则需小心。

//求取全部reward之和
const result = actList.reduce(
    (accumulator, current) => accumulator + current.reward,
    0
);
console.log(result);

以上函数中，我们通过accumulator加上每一个元素值，获得最终结果。
结果：520。

• includes
  是否包含指定的元素值。

const isIncludes = actList.includes({ name: '打卡', reward: 700 });
console.log(isIncludes); //false

未完待续~