要問互聯網開發這塊最難的是什么方面，我覺得大多數人的回答都是前端開發這塊，因為前端這塊技術更新換代實在是過於快速，也許沒有多少時間就有大量的新技術面世了，想要在這行保持競爭力就必須要又一個持續學習的習慣，正所謂活到老，學到老來形容前端開發這塊是最合適不過了
今天筆者就來總結以下在es6中數組新增的一些方法，首先我來告訴大家如何查看數組中都有哪些方法，只需要在網頁中打開我們的控制台，輸入 []._proto_ 就可以看到數組中現在都有哪些已經支持的方法了，下面給大家一張圖看下
如上圖所示，是不是發現有很多方法比較陌生，有的可能是我們之前已經掌握的，有的則是新支持的方法，現在筆者就來帶大家一起來看一下這些新增的方法啦（這里呢筆者就簡單介紹一下筆者尚未完全掌握的方法，至於其他的方法，如果同學們有疑問的話可以來找筆者進行討論，筆者的聯系方式在第一篇博客中有所體現，有興趣的小伙伴可以去看下哦）
1、find()方法，筆者在實際開發中對於這個方法使用的很少，所以來記錄一下
作用：find()函數用來查找目標元素，找到就返回該元素，找不到返回undefined。
參數：
查找函數有三個參數。
value：每一次迭代查找的數組元素。
index：每一次迭代查找的數組元素索引。
arr：被查找的數組
示例：
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] var ret1 = arr1.find((value, index, arr1) => { return value > 4 }) var ret2 = arr1.find((value, index, arr1) => { return value > 14 }) console.log('%s', ret1)//5 console.log('%s', ret2)//undefined
這個比較簡單，就是在數組中查找我們定義的滿足條件的元素，如果查詢到就返回這個元素，查不到就返回undefined
2、findIndex（）同上
作用：findIndex()函數也是查找目標元素，找到就返回元素的位置，找不到就返回-1。
同樣是接收三個參數，同上
示例：
const arr1 = [1,2,3,4,5,6,7,8,9]; var ret3 = arr1.findIndex((value, index, arr1) => { return value > 4 }) var ret4 = arr1.findIndex((value, index, arr1) => { return value > 14 }) console.log('%s', ret3)//4 console.log('%s', ret4)//-1
這個也不多說了，想必大家也都很好理解
3、copyWithin() 這個函數筆者之前確實不知到這個函數，所以查詢了很多資料，最后總結在這里
作用：copyWithin() 方法用於從數組的指定位置拷貝元素到數組的另一個指定位置中，該方法會改變原數組
參數：
target：必需，復制到指定目標索引位置
start： 可選，元素復制的起始位置
end： 可選，停止復制的索引位置（默認為array.length),如果為負值，表示倒數
示例：
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; fruits.copyWithin(2, 0, 2); console.log(fruits)//["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]
筆者在整理這個博客的時候遇到一個很有意思的題目，大家可以思考一下：
var obj = [].copyWithin.call({length: 5, 3: 1}, 0, 3); console.log(obj)//?這里會輸出什么？為什么？大家積極思考一下
4、flat() flat() 方法會按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。
參數:
depth ：可選，指定要提取嵌套數組的結構深度，默認值為 1。
返回值：
一個包含將數組與子數組中所有元素的新數組。
示例：
var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] //使用 Infinity 作為深度，展開任意深度的嵌套數組 arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
注意：該方法會默認移除數組中的空項(此處空項不包含指為false的項)
var arr = [1,2,3,4,5,,6,'',false,null,undefined,9]; console.log(arr.flat())//[1, 2, 3, 4, 5, 6, "", false, null, undefined, 9]
5、flatmap() flatMap() 方法首先使用映射函數映射每個元素，然后將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 通常在合並成一種方法的效率稍微高一些
參數：
callback：
可以生成一個新數組中的元素的函數，可以傳入三個參數：
-
currentValue - 當前正在數組中處理的元素
-
index可選 - 可選的。數組中正在處理的當前元素的索引。
-
array可選 -
可選的。被調用的
map數組
thisArg：可選的。執行 callback 函數時 使用的this 值。
返回值：
一個新的數組，其中每個元素都是回調函數的結果，並且結構深度 depth 值為1。
示例：
let arr = ["今天天氣不錯", "", "早上好"]
arr.map(s => s.split(""))
// [["今", "天", "天", "氣", "不", "錯"],[""],["早", "上", "好"]]
arr.flatMap(s => s.split(''));
// ["今", "天", "天", "氣", "不", "錯", "", "早", "上", "好"]// 只會將 flatMap 中的函數返回的數組 “壓平” 一層
6、fill() fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。
arr.fill(value[, start[, end]])
參數：value用來填充數組元素的值。start可選 起始索引，默認值為0。
-
end可選 終止索引，默認值為this.length。 - 返回值：修改后的數組
- 描述：
fill 方法接受三個參數 value, start 以及 end. start 和 end 參數是可選的, 其默認值分別為 0 和 this 對象的 length 屬性值。
如果 start 是個負數, 則開始索引會被自動計算成為 length+start, 其中 length 是 this 對象的 length 屬性值。如果 end 是個負數, 則結束索引會被自動計算成為 length+end。
fill 方法故意被設計成通用方法, 該方法不要求 this 是數組對象。
fill 方法是個可變方法, 它會改變調用它的 this 對象本身, 然后返回它, 而並不是返回一個副本。
當一個對象被傳遞給 fill方法的時候, 填充數組的是這個對象的引用。
示例：
[1, 2, 3].fill(4); // [4, 4, 4] [1, 2, 3].fill(4, 1); // [1, 4, 4] [1, 2, 3].fill(4, 1, 2); // [1, 4, 3] [1, 2, 3].fill(4, 1, 1); // [1, 2, 3] [1, 2, 3].fill(4, 3, 3); // [1, 2, 3] [1, 2, 3].fill(4, -3, -2); // [4, 2, 3] [1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] [1, 2, 3].fill(4, 3, 5); // [1, 2, 3] Array(3).fill(4); // [4, 4, 4] [].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} // Objects by reference. var arr = Array(3).fill({}) // [{}, {}, {}]; arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]，這里前面說到過，填充數組的是對這個對象的引用
以下介紹下關於Array的幾個方法
1、Array.of() Array.of() 方法創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。Array.of() 和 Array 構造函數之間的區別在於處理整數參數：Array.of(7) 創建一個具有單個元素 7 的數組，而 Array(7) 創建一個長度為7的空數組（注意：這是指一個有7個空位的數組，而不是由7個undefined組成的數組）。
參數：任意個參數，將按順序成為返回數組中的元素
返回值：新的Array實例
示例：
Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]
2、Array.from() Array.from() 方法從一個類似數組或可迭代對象中創建一個新的數組實例。
參數：
arrayLike 想要轉換成數組的偽數組對象或可迭代對象。
mapFn (可選參數)如果指定了該參數，新數組中的每個元素會執行該回調函數。
thisArg (可選參數)可選參數，執行回調函數 mapFn 時 this 對象。
返回值：一個新的數組實例
描述：
Array.from() 可以通過以下方式來創建數組對象：
- 偽數組對象（擁有一個
length屬性和若干索引屬性的任意對象） - 可迭代對象（可以獲取對象中的元素,如 Map和 Set 等）
Array.from() 方法有一個可選參數 mapFn，讓你可以在最后生成的數組上再執行一次 map方法后再返回。也就是說 Array.from(obj, mapFn, thisArg) 就相當於 Array.from(obj).map(mapFn, thisArg), 除非創建的不是可用的中間數組。 這對一些數組的子類,如 typed arrays 來說很重要, 因為中間數組的值在調用 map() 時需要是適當的類型。
from() 的 length 屬性為 1 ，即Array.from.length = 1。
在 ES2015 中， Class 語法允許我們為內置類型（比如 Array）和自定義類新建子類（比如叫 SubArray）。這些子類也會繼承父類的靜態方法，比如 SubArray.from()，調用該方法后會返回子類 SubArray 的一個實例，而不是 Array 的實例。
示例代碼：
Array from a String節 Array.from('foo'); // ["f", "o", "o"] Array from a Set節 let s = new Set(['foo', window]); Array.from(s); // ["foo", window] Array from a Map節 let m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]] Array from an Array-like object (arguments)節 function f() { return Array.from(arguments); } f(1, 2, 3); // [1, 2, 3] 在Array.from中使用箭頭函數節 // Using an arrow function as the map function to // manipulate the elements Array.from([1, 2, 3], x => x + x); // x => x + x代表這是一個函數，只是省略了其他的定義，這是一種Lambda表達式的寫法 // 箭頭的意思表示從當前數組中取出一個值，然后自加，並將返回的結果添加到新數組中 // [2, 4, 6] // Generate a sequence of numbers // Since the array is initialized with `undefined` on each position, // the value of `v` below will be `undefined` Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] 數組去重合並節 function combine(){ let arr = [].concat.apply([], arguments); //沒有去重復的新數組 return Array.from(new Set(arr)); } var m = [1, 2, 2], n = [2,3,3]; console.log(combine(m,n)); // [1, 2, 3]
3、Array.isArray() Array.isArray() 用於確定傳遞的值是否是一個 Array。
參數：obj，需要檢測的值
返回值： 如果是數組就返回true，否則就返回false
示例：
// 下面的函數調用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); // 鮮為人知的事實：其實 Array.prototype 也是一個數組。 Array.isArray(Array.prototype); // 下面的函數調用都返回 false Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(17); Array.isArray('Array'); Array.isArray(true); Array.isArray(false); Array.isArray({ __proto__: Array.prototype });
好了，今天關於數組的介紹就到這里了，下一遍我們會總結下關於object中比較常用或者說比較新的方法 ，本文資料來源於MDN，鏈接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray，有興趣的同學可以自行前往觀看，下次再會啦！