第三节：补充高频方法(filter/forEach/map/find/findIndex/forEach/includes/some等等)

一. 数组中的高频方法

数据准备：

let arry1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arry2 = [
  { id: 1, userName: "ypf1", age: 11 },
  { id: 2, userName: "ypf2", age: 12 },
  { id: 3, userName: "ypf3", age: 13 },
  { id: 4, userName: "ypf4", age: 14 },
  { id: 5, userName: "ypf5", age: 15 },
  { id: 6, userName: "ypf6", age: 16 },
  { id: 7, userName: "ypf2", age: 12 },
];
let arry3 = [11, 12, 13, 14];
let arry4 = [14, 15, 16];

1.  filter

 用于过滤，获取符合条件的数据
 用法：条件为true的数据会被放到【新数组里】

/* 
    用于过滤，获取符合条件的数据
    用法：条件为true的数据会被放到【新数组里】
 */
// 案例1：获取所有偶数
{
  let newArry = arry1.filter(item => {
    return item % 2 === 0;
  });
  console.log(newArry);
}
// 案例2：获取age大约13的所有数据
{
  let newArry = arry2.filter(item => item.age > 13);
  console.log(newArry);
}

2. forEach

  用于遍历数据

/* 
  用于遍历数据
*/
// 案例1：将arry2中的数据按顺序依次输出
{
  arry2.forEach((item, index) => {
    console.log(index, item);
  });
}

3. map

  用途：遍历每个元素，可以对其处理后，返回一个【新数组】

/* 
  用途：遍历每个元素，可以对其处理后，返回一个【新数组】
*/
// 案例1：将arry1中的数据翻倍后输出
{
  let newArry = arry1.map(item => {
    return item * 2;
  });
  console.log(newArry);
}
// 案例2：单独输出所有的年龄
{
  let newArry = arry2.map(item => item.age);
  console.log(newArry);
}
// 案例3：将年龄大约13的所有名字数出来
{
  let newArry = arry2.filter(item => item.age > 13).map(item => item.userName);
  console.log(newArry);
}

4.  find

 作用：获取符合条件的第一个元素 (特别注意：多个符合条件的数据，仅返回第一个，放到obj里)
 用法：条件为true的数据会被放到一个obj对象里

/* 
   作用：获取符合条件的第一个元素 (特别注意：多个符合条件的数据，仅返回第一个，放到obj里)
   用法：条件为true的数据会被放到一个obj对象里
*/
// 案例1：获取名字为ypf2的第一条数据
{
  let obj = arry2.find(item => item.userName === "ypf2");
  console.log(obj);
}

5. findIndex

 作用：获取符合条件的【第一个】元素的索引  (特别注意：多个符合条件的数据，仅获取第一个)
 用法：条件为true的数据

/* 
   作用：获取符合条件的【第一个】元素的索引  (特别注意：多个符合条件的数据，仅获取第一个)
   用法：条件为true的数据
*/
// 案例1：获取名字为ypf2的顺序
{
  let objIndex = arry2.findIndex(item => item.userName === "ypf2");
  console.log(objIndex); //结果为 1
}

6. includes

  ES7的语法
  作用：判断数组里是否有某个元素，返回true or false
  PS：ES7之前可以通过filter或者find或者indexof来判断，详见：https://www.cnblogs.com/yaopengfei/p/14700298.html

/* 
    ES7的语法
    作用：判断数组里是否有某个元素，返回true or false
    PS：ES7之前可以通过filter或者find或者indexof来判断，详见：https://www.cnblogs.com/yaopengfei/p/14700298.html
*/
// 案例1：判断arry1是否包含5，  判断arry1从第二个元素往后，是否包含5
{
  console.log(arry1.includes(5)); //true
  console.log(arry1.includes(5, 1)); //true,  第二个参数 1，代表索引的位置
}

7.  some

  ES6语法
  作用：判断数组里是否有符合条件的数据，只要有1个，则返回true，反之false

/* 
    ES6语法
    作用：判断数组里是否有符合条件的数据，只要有1个，则返回true，反之false
*/
//案例1：判断是否arry中是否有年龄>15的数据 (换言之，有一个>15,则返回true)
{
  console.log(arry2.some(item => item.age > 15));  //true
}

8. every

  ES6语法
  作用：判断数组里是否所有数据都符合条件，全部符合，则返回true，反之false

/* 
  ES6语法
  作用：判断数组里是否所有数据都符合条件，全部符合，则返回true，反之false
 */
// 案例1:判断是否所有年龄都>15
{
  console.log(arry2.every(item => item.age > 15)); //false
}

9. reduce

   ES6语法
   作用：累加，
   参数说明，第一个参数中的preValue代表上次的返回值, currentValue表示遍历的当前值
           第二个参数代表第一次的默认值，

/* 
   ES6语法
   作用：累加，
   参数说明，第一个参数中的preValue代表上次的返回值, currentValue表示遍历的当前值
            第二个参数代表第一次的默认值，
*/
// 案例1：将arry1中的数据累加
{
  let total = arry1.reduce((preValue, currentValue) => {
    return preValue + currentValue;
  }, 0);
  console.log(total);
}

10. contact

 作用：将几个不同的数组组合成1个新的数组，注意：不去重！！！

/* 
    作用：将几个不同的数组组合成1个新的数组，注意：不去重！！！
*/
// 案例1：将arry1 arry3 arry4组合成一个新数组，进行删除
{
  let newArry = arry1.concat(arry3, arry4);
  console.log(newArry);
}

11. slice

  作用：获取数组中的指定位置的元素
  用法：slice(startIndex,endIndex),两个参数分别是：开始位置索引，结束位置索引, 
  特别注意：获取的数据包含开始，不含结束位置！！！！

/* 
    作用：获取数组中的指定位置的元素
    用法：slice(startIndex,endIndex),两个参数分别是：开始位置索引，结束位置索引, 
    特别注意：获取的数据包含开始，不含结束位置！！！！
*/
// 案例：获取arry1中第2-4个元素
{
  let newArry = arry1.slice(1, 4);
  console.log(newArry); //[2,3,4]
}

12. 其它

  下面的方法都是在原数组的基础上进行修改

　   a. push: 往数组最后面添加一个元素，成功返回当前数组的长度。

　　b. pop: 删除数组的最后一个元素，成功返回删除元素的值

　　c. shift: 删除数组的第一个元素，成功返回删除元素的值

　　d. unshift: 往数组最前面添加一个元素，成功返回当前数组的长度

　　e. splice: 有三个参数，第一个要删除元素的下标(必选)，第二个要删除元素的个数(必选)，第三个删除后想在原位置替换的值

　　f. sort: 将数组按照字符编码从小到大排序，成功返回排序后的数组

　　g. reverse: 将数组倒序排列，并返回倒叙后的数组

二. 其它

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。