ES6: 數(shù)組擴(kuò)展

1. find():

說明:
1. 用于返回?cái)?shù)組中, 滿足條件的第一個(gè)值;
2. find(callback) 里面的回調(diào)函數(shù), 會對數(shù)組進(jìn)行遍歷;
- 回調(diào)函數(shù)中具有兩個(gè)參數(shù):
  參數(shù)1: item: 數(shù)組元素
  參數(shù)2: index: 索引值

示例:

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

2. findIndex():

說明:
1. 返回?cái)?shù)組中, 找到的滿足要求的第一個(gè)值的索引值;
2. findIndex() 的用法與 find() 相同;

示例:

  let resultIndex = arr,findIndex((item, index) => {
      return item > 4;
  }) 
  console.log(resultIndex);  // => 4 返回滿足條件的第一個(gè)值的索引

3. includes():

說明:
1. 用于判斷一個(gè)值是否存在于一個(gè)數(shù)組當(dāng)中;
2. 如果數(shù)組中存在該值, 返回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():

說明: 是將一個(gè) 類數(shù)組對象或者 Iterator對象轉(zhuǎn)換成一個(gè)真正的數(shù)組;
- 什么是類數(shù)組對象:
  - 最基本的要求就是: 具有 length 屬性的對象 ;
- Iterator對象:
  - Set, Map, Array;
示例:
1. new Set() 講解中的數(shù)組去重示例: 將Set類型對象轉(zhuǎn)化為數(shù)組
2. 將類數(shù)組對象轉(zhuǎn)換為真正的數(shù)組:
```
 let arrLike = {
    0: '王東',
    1: 18,
    2: '男',
    'length': 3
 }
 console.log(Array.from(arrLike)); // => ["王東", 18, "男"]
```
1. 如果上面的代碼將 length 屬性去掉, 結(jié)果會變?yōu)橐粋€(gè)長度為 0 的空數(shù)組 ;
2. 如果仍然保存 length 屬性, 但是對象的屬性名都不再是數(shù)字類型;
```
let obj = {
  name: '王東',
  age: 20,
  length: 2
} 
console.log(Array.from(obj));  // => [undefined, undefined]
```
- 綜上: 如果要將一個(gè)類數(shù)組對象轉(zhuǎn)換為一個(gè)真正的數(shù)組, 必須要具備以下條件:
  1. 該類數(shù)組對象必須具有 length 屬性, 用于指定數(shù)組的長度, 如果沒有, 轉(zhuǎn)換后的數(shù)組是一個(gè)空數(shù)組;
  2. 該類數(shù)組對象的屬性名必須是數(shù)值類型, 后者是字符串類型的數(shù)字;
  - 說明: 類數(shù)組對象的屬性名可以加引號, 也可以不加;

兼容性:

在IE瀏覽器中不能識別該方法: 進(jìn)行兼容處理

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

5. new Set():

說明: 該方法可用于數(shù)組去重;
擴(kuò)展 - 去重原理: 在 ES6 中, 提供了新的數(shù)據(jù)結(jié)構(gòu) Set, Set類似于數(shù)組, 但是成員的值都是唯一的, 沒有重復(fù)的值;
- 關(guān)于 Set 解析, 具體請看 ES6中的: Set 解析;
返回值: 返回 Set 類型的數(shù)據(jù)

示例:

let arr = [1, 2, 2, 4, 5, 1, 5];
console.log(new Set(arr)); // => Set(4) {1, 2, 4, 5}; 得到 Set 類型的數(shù)據(jù)
/** 再使用上面的 Array.from() 將 Set 類型的數(shù)據(jù), 轉(zhuǎn)換為 數(shù)組類型即可: */ 
console.log(Array.from(new Set(arr)));  // => [1, 2, 4, 5]

6. filter():

說明:
1. 數(shù)組的過濾器, 用于過來數(shù)組中滿足指定條件的元素;
2. 方法里面的回調(diào)函數(shù)會對數(shù)組進(jìn)行遍歷;
返回值: 滿足條件的元素所組成的新數(shù)組;

示例:

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

7. reduce():

說明:
1. 該方法接收一個(gè)函數(shù)作為累加器, 數(shù)組的每個(gè)值(從左到右)開始縮減, 最終計(jì)算為一個(gè)值;
2. 該函數(shù)可以作為一個(gè)高階函數(shù), 用于函數(shù)的 compose(可以百度這是啥玩意) ;
注意: reduce() 對于空數(shù)組是不會執(zhí)行里面的回調(diào)函數(shù)的;

語法:

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

參數(shù):
- 參數(shù)1: 回調(diào)函數(shù)
  - 回調(diào)函數(shù)參數(shù) :
    參數(shù)1: total: 必選參數(shù), 初始值, 或者是計(jì)算結(jié)束后的返回值;
    參數(shù)2: currentValue: 必選參數(shù), 當(dāng)前元素;
    參數(shù)3: currentIndex: 可選參數(shù), 當(dāng)前元素的索引;
    參數(shù)4: arr: 可選參數(shù), 當(dāng)前元素所屬的數(shù)組對象;
- 參數(shù)2: initialValue: 可選參數(shù), 傳遞給函數(shù)的初始值; 如果不設(shè)置, 那么參數(shù)1 就是調(diào)用對象的第一個(gè)元素;
返回值: 返回計(jì)算結(jié)果;

示例:

使用reduce() 求數(shù)組項(xiàng)之和

let arr = [3, 4, 6, 3, 7, 11, 6]; 
let sum = arr.reduce(function(prev, cur) {
   return prev + cur;
}, 0)
console.log(arr);  // => 40
/** 
   參數(shù)2位置傳入初始值: 0, 所以開始時(shí) prev為 0,
   cur的值為數(shù)組的第一項(xiàng)3, 相加之后返回值為3作為下一輪回調(diào)的prev的值
   然后在繼續(xù)與下一個(gè)數(shù)組項(xiàng)相加, 一次類推, 直至所有項(xiàng)相加, 并返回所得到的 求和
*/

求數(shù)組中的最大數(shù)

let max = arr.reduce(function (prev, cur) {
    return Math.max(prev, cur); 
}) 
 /**  
    由于未傳入初始值, 所以再開始時(shí) prev 的值為數(shù)組第一項(xiàng): 3;
    cur的值為數(shù)組的第二項(xiàng)9, 取得兩值的最大值后, 進(jìn)入下一輪回調(diào);
 */

數(shù)組去重: (使用該函數(shù), 可以達(dá)到去除數(shù)組中相同的對象, 自行百度相關(guān)方法)

let newArr = arr.reduce(function (prev, cur) {
   prev.indexOf(cur) === -1 && prev.push(cur);
   return prev;
}, []);
/** 
   參數(shù)2 位置 傳入了個(gè) 空數(shù)組: [], 作為 prev的初始值, 如果不傳, 則prev則為: arr的第一項(xiàng): 3 ;
   然后將 arr中的每一項(xiàng): cur 通過數(shù)組的 indexOf 判斷是否已經(jīng)存在于 prev 當(dāng)中, 如果返回 -1, 那么將改元素 push到 perv中
   ... 依次類推, 直到遍歷完 arr 中所有的元素, 得到的 prev 便是去重后的 新數(shù)組  
*/