ES6: 数组扩展

1. find():

说明:
1. 用于返回数组中, 满足条件的第一个值;
2. find(callback) 里面的回调函数, 会对数组进行遍历;
- 回调函数中具有两个参数:
  参数1: item: 数组元素
  参数2: index: 索引值

示例:

  let arr = [1, 2, 3, 4, 5, 6];
  let result = arr.find((item, index) => {
      return item > 4;
  })
  console.log(result);  // => 5 返回满足条件的第一个值

2. findIndex():

说明:
1. 返回数组中, 找到的满足要求的第一个值的索引值;
2. findIndex() 的用法与 find() 相同;

示例:

  let resultIndex = arr,findIndex((item, index) => {
      return item > 4;
  }) 
  console.log(resultIndex);  // => 4 返回满足条件的第一个值的索引

3. includes():

说明:
1. 用于判断一个值是否存在于一个数组当中;
2. 如果数组中存在该值, 返回true, 否则返回false;

示例:

let arr = [1, 3, 5, 7];
console.log(arr.includes(5));  // => true arr中存在5
console.log(arr.includes(8));  // => false arr中不存在8

4. Array.from():

说明: 是将一个类数组对象或者 Iterator对象转换成一个真正的数组;
- 什么是类数组对象:
  - 最基本的要求就是: 具有 length 属性的对象 ;
- Iterator对象:
  - Set, Map, Array;
示例:
1. new Set() 讲解中的数组去重示例: 将Set类型对象转化为数组
2. 将类数组对象转换为真正的数组:
```
 let arrLike = {
    0: '王东',
    1: 18,
    2: '男',
    'length': 3
 }
 console.log(Array.from(arrLike)); // => ["王东", 18, "男"]
```
1. 如果上面的代码将 length 属性去掉, 结果会变为一个长度为 0 的空数组 ;
2. 如果仍然保存 length 属性, 但是对象的属性名都不再是数字类型;
```
let obj = {
  name: '王东',
  age: 20,
  length: 2
} 
console.log(Array.from(obj));  // => [undefined, undefined]
```
- 综上: 如果要将一个类数组对象转换为一个真正的数组, 必须要具备以下条件:
  1. 该类数组对象必须具有 length 属性, 用于指定数组的长度, 如果没有, 转换后的数组是一个空数组;
  2. 该类数组对象的属性名必须是数值类型, 后者是字符串类型的数字;
  - 说明: 类数组对象的属性名可以加引号, 也可以不加;

兼容性:

在IE浏览器中不能识别该方法: 进行兼容处理

 if(!Array.from) {
    Array.from = function (el) {
      return Array.apply(this, el);
    }
}

5. new Set():

说明: 该方法可用于数组去重;
扩展 - 去重原理: 在 ES6 中, 提供了新的数据结构 Set, Set类似于数组, 但是成员的值都是唯一的, 没有重复的值;
- 关于 Set 解析, 具体请看 ES6中的: Set 解析;
返回值: 返回 Set 类型的数据

示例:

let arr = [1, 2, 2, 4, 5, 1, 5];
console.log(new Set(arr)); // => Set(4) {1, 2, 4, 5}; 得到 Set 类型的数据
/** 再使用上面的 Array.from() 将 Set 类型的数据, 转换为 数组类型即可: */ 
console.log(Array.from(new Set(arr)));  // => [1, 2, 4, 5]

6. filter():

说明:
1. 数组的过滤器, 用于过来数组中满足指定条件的元素;
2. 方法里面的回调函数会对数组进行遍历;
返回值: 满足条件的元素所组成的新数组;

示例:

let arr = [1, 2, 3, 4, 5];
arr.filter(item => item > 3); // => [4, 5]

7. reduce():

说明:
1. 该方法接收一个函数作为累加器, 数组的每个值(从左到右)开始缩减, 最终计算为一个值;
2. 该函数可以作为一个高阶函数, 用于函数的 compose(可以百度这是啥玩意) ;
注意: reduce() 对于空数组是不会执行里面的回调函数的;

语法:

arr.reduce(function (total, currentValue, currentIndex, arr) {}, initialValue);

参数:
- 参数1: 回调函数
  - 回调函数参数 :
    参数1: total: 必选参数, 初始值, 或者是计算结束后的返回值;
    参数2: currentValue: 必选参数, 当前元素;
    参数3: currentIndex: 可选参数, 当前元素的索引;
    参数4: arr: 可选参数, 当前元素所属的数组对象;
- 参数2: initialValue: 可选参数, 传递给函数的初始值; 如果不设置, 那么参数1 就是调用对象的第一个元素;
返回值: 返回计算结果;

示例:

使用reduce() 求数组项之和

let arr = [3, 4, 6, 3, 7, 11, 6]; 
let sum = arr.reduce(function(prev, cur) {
   return prev + cur;
}, 0)
console.log(arr);  // => 40
/** 
   参数2位置传入初始值: 0, 所以开始时 prev为 0,
   cur的值为数组的第一项3, 相加之后返回值为3作为下一轮回调的prev的值
   然后在继续与下一个数组项相加, 一次类推, 直至所有项相加, 并返回所得到的 求和
*/

求数组中的最大数

let max = arr.reduce(function (prev, cur) {
    return Math.max(prev, cur); 
}) 
 /**  
    由于未传入初始值, 所以再开始时 prev 的值为数组第一项: 3;
    cur的值为数组的第二项9, 取得两值的最大值后, 进入下一轮回调;
 */

数组去重: (使用该函数, 可以达到去除数组中相同的对象, 自行百度相关方法)

let newArr = arr.reduce(function (prev, cur) {
   prev.indexOf(cur) === -1 && prev.push(cur);
   return prev;
}, []);
/** 
   参数2 位置 传入了个 空数组: [], 作为 prev的初始值, 如果不传, 则prev则为: arr的第一项: 3 ;
   然后将 arr中的每一项: cur 通过数组的 indexOf 判断是否已经存在于 prev 当中, 如果返回 -1, 那么将改元素 push到 perv中
   ... 依次类推, 直到遍历完 arr 中所有的元素, 得到的 prev 便是去重后的 新数组  
*/