JS Array[includes,reduce,map,forEach]

includes()

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

includes(element, index)。

  1. element代表要判断的元素
  2. index可选参数,代表从哪里开始搜索。
  3. 正数index:左到右,index从0开始;
  4. 负数index:左到右,从数组length+index向右。
let a= ['a','b','c'] // length==3
console.log(a.includes('a'))  // true
console.log(a.includes('d'))  // false

console.log(a.includes('a', 1))  // false 
// 从index为1开始搜索,即['b', 'c']

/* ----------------------------- */
console.log(a.includes('a', -1))  // false
// 从3+(-1)=2->开始,即['c']
console.log(a.includes('a', -3))  // true
// 从3+(-3)=0 ->开始,即['a','b','c']

/* ----------------------------- */
console.log(a.includes('a', -100))  // true
console.log(a.includes('a', 100))   // false
// fromindex超过数组length,直接返回false
// fromindex过负(length+fromindex < 0),即搜索整个数组

reduce()

reduce() 为数组中的每一个元素依次执行回调函数
arr.reduce(callback,[initialValue])

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

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

initialValue (作为第一次调用 callback 的第一个参数。)

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

reduce()用法:

  1. 计算数组中每个元素出现的次数
  2. 数组去重复
  3. 多维数组转一维
  4. 对象属性求和
/* -----------求和----------- */
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 ); //求和,10
console.log( mul ); //求乘积,24

/* -----------次数累加----------- */
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

/* -----------数组去重----------- */
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

/* -----------二维数组转一维--------- */
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

/* -----------多维数组转一维--------- */
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

/* -----------数组属性求和--------- */
var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

map()

创建一个新数组,该数组中的每个元素都调用一个提供的函数后,返回结果。
var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1); // [2,8,18,32]

⚠️注意:map每次遍历数组都只能获取其中一个值。所以在map使用中记得每个循环后都return。 在下面例子中,没有return,结果为:[ undefined, undefined, undefined ]

注意

let array1 = [1, 4, 9];

const map1 = array1.map(x => {
  console.log(x)
  console.log('-----')
  //  do something...
  return x;
})

console.log(map1)

// 1
// -----
// 4
// -----
// 9
// -----
// [ 1, 4, 9]

map() 与 forEach() 不都是遍历操作么。。。差别?

相同点:

  1. 都是循环遍历数组中的每一项;
  2. 每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组);
  3. 匿名函数中的this都是指向window;
  4. 只能遍历数组;
  5. 执行的速度都没for循环快,因为接受一个回调函数,所以在性能方面比不上for loop。

不同点:

  1. map() 返回一个新的数组,数组中的元素为原始数组经过调用函数处理后的值,原油数组不被改变;
  2. map() 方法有返回值,支持链式调用;
  3. forEach() 返回值是undefined,不可以链式调用;
  4. map() 不会对空数组进行检测;
  5. forEach() 对于空数组不执行回调函数;
  6. forEach() 循环只有抛出异常才能提前终止。