js常见方法使用1

1.map()

描述：map方法返回一個新的数组，数组中的元素为原始数组元素調用函数处理后的值

回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。

map方法按照原始元素顺序依次处理元素

注：map()不会对空数组进行检测

        map()不会改变原始数组

语法：[{...}].map((value,index,array)=>{
　　　　//指定条件
　　});

用法：

1.判断当前数组满足的项

 const bbb = [

      {name:'aaa',type:1},

      {name:'bbb',type:2},

      {name:'ccc',type:3},

      {name:'ddd',type:4},

      {name:'aaa',type:5}

    ]

    const aaa = bbb.map(f=>  f.name === 'aaa');
    console.log(aaa)

输出值：[true, false, false, false, true]

2.返回一个执行完条件的新的数组

 const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
    const aaa = bbb.map(f=> {
      if( f.name === 'ddd'){
        return { name:f.name, type:f.type*2 } 
      }
        return f 
    });
    console.log(aaa)

 注：  return f  一定要加，不加的话返回出来的新数组除了f.name === 'ddd'的其他都会为undefined。因为不加return f 只是增加了一个条件，即f.name === 'ddd'时才乘以2，之所以会出现undefined。map()方法创建了一个新数组，但aaa并不是在遍历完bbb后才被赋值的，而是每遍历一次就得到一个值。

不加之前

加入 return f 之后

2.every()

描述：every()方法用于检测数组所有元素是否都符合指定的条件（通过函数提供）

回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。

every()方法使用指定函数检测数组中的所有方法，如果数组中检测到有一个元素不满足，则整个表达式返回false，且剩余的元素不会再进行检测；如果所有元素都符合条件，则返回true

注：every()不会对空数组进行检测

        every()不会改变原始数组

语法：[{...}].every((value,index,array)=>{
　　　　//指定条件
　　});

用法：

const bbb = [
      {name:'aaa',type:1},
      {name:'aaa',type:2},
      {name:'aaa',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
    const aaa = bbb.every(f=>  f.name === 'aaa');
    console.log(aaa)

输出值：false

3.some()

描述：some() 方法用于检测数组中的元素是否满足指定条件（函数提供）

回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身。

some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。

注： some() 不会对空数组进行检测。

        some() 不会改变原始数组。

语法：[{...}].some((value,index,array)=>{
　　　　//指定条件
　　});

用法：

 const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
    const aaa = bbb.some(f=>  f.name === 'ddd');
    console.log(aaa)

输出值：true

4.forEach()

描述：forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身

 forEach方法用于循环一个数组

注: forEach() 对于空数组是不会执行回调函数的

语法：[{...}].forEach((value,index,array)=>{
　　　　//指定条件
　　});

用法：

  const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
     bbb.forEach(f=> {
      console.log(f)
    });
   

输出值：

5.find()

描述：find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身

find() 方法为数组中的每个元素都调用一次函数执行：数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined

注：find() 对于空数组，函数是不会执行的。

        find() 并没有改变数组的原始值。

语法：[{...}].find((value,index,array)=>{
　　　　//指定条件
　　});

用法：

   const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
     const aaa =  bbb.find(f=> f.name === 'aaa');
    console.log(aaa)

输出值：{name:'aaa',type:1} //只会返回第一个满足条件的值

 const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
     const aaa =  bbb.find(f=> f.name === 'eee');
    console.log(aaa)

输出值：undefined //没有符合的值，直接返回 undefined

值得一提的是find是浅拷贝，如下

 const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
     let aaa =  bbb.find(f=> f.name === 'bbb');
    //在我们找到 bbb符合条件的元素时，我们修改这个接收后的值
        aaa.type = 10;
    console.log(aaa,bbb)

 返回如下结果

发现原数组的元素值被修改了，这里就反应出 find() 方法返回的结果内存指向依然是 bbb 所指向的内存地址，所有这里返回的是浅拷贝的数据。

6.filter()

描述：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

回调函数的形参，依次为，value：遍历的数组内容；index：对应的数组索引，array：数组本身

find() 方法为数组中的每个元素都调用一次函数执行：数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined

注：filter() 不会对空数组进行检测。

        filter() 不会改变数组的原始值。

语法：[{...}].filter((value,index,array)=>{
　　　　//指定条件
　　});

用法：

1.筛选当前数组符合的元素

 const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
     const aaa =  bbb.filter((value,index,arr)=>  value.name === 'aaa');
    //  aaa.type = 10;
    console.log(aaa)

输出：[{name:'aaa',type:1},{name:'aaa',type:5}] 

2.去重数组重复项

const bbb = [
      {name:'aaa',type:1},
      {name:'bbb',type:2},
      {name:'ccc',type:3},
      {name:'ddd',type:4},
      {name:'aaa',type:5}
    ]
     const aaa =  bbb.filter((value,index,arr)=> {
      let ccc = [];
      bbb.forEach(f => {
        ccc.push(f.name);
      });
      return  ccc.indexOf(value.name) === index
     });
    console.log(aaa)

输出值： [{name:'aaa',type:1},{name:'bbb',type:2}, {name:'ccc',type:3},{name:'ddd',type:4}]

7.reduce()

描述：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

回调函数的形参，依次为，prev ：必需，表示上一次调用回调时的返回值，或者初始值 init；cur ：必需，表示当前正在处理的数组元素；index ：当前元素的索引，若提供 init 值，则索引为0，否则索引为1​​​​​​​；arr：当前元素所属的数组对象

reduce() 可以作为一个高阶函数，用于函数的 compose。

注: reduce() 对于空数组是不会执行回调函数的。

语法：[{...}].reduce((prev,cur,index,arr)=>{
　　　　//指定条件
　　});

用法：

1.加总

[1,2,3,4,5,6,3].reduce((prev,cur)=>{ 

    return prev + cur;

 },0)

输出：24

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项1，相加之后返回值为1作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

2.找数组最大项

[1,2,3,4,5,6,3].reduce((prev,cur)=>{ 

    return Math.max(prev,cur);

 })

输出：6 

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

3.去重

 [1,2,3,4,2,4].reduce((prev, cur)=> {

    prev.indexOf(cur) === -1 && prev.push(cur);

    return prev;

 },[]);

输出：[1,2,3,4] 

补充：

reduceRight()

该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。