新增數組方法：1、from()，可將類別數組或可迭代物件轉為真正的數組；2、of()，可將一組值轉換為數組，它彌補數組建構子Array()的不足；3、find()和findIndex()，傳回第一個符合條件的陣列元素；4、fill()等等。
如何快速入門VUE3.0：進入學習
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
1、Array.from()
Array.from 方法用於將兩類物件轉為真正的陣列：
類似陣列的物件（array-like object）
可遍歷（iterable）的物件（包括ES6 新增的資料結構Set 和Map）
意味著，只要部署了Iterator介面的資料結構，Array.from都能將其轉換為陣列
實際開發中，一般可以用來轉換DOM操作傳回的NodeList集合，以及函數內部的arguments
當物件
傳遞一個參數時，用於將類別數組轉為真正的數組
數組去重
const arr = [1,2,3,3,3,2,5]; console.log(Array.from(new Set(arr))); //[1,2,3,5] //...也可實現相同的效果console.log([...new Set(arr)]) //[1,2,3,5]
對於沒有部署此方法的瀏覽器，可使用Array. prototype.slice方法取代
cosnt toArray = (() => {
Array.from ? Array.from : obj => [].slice.call(obj)
})()也可以接收第二個參數，第二個參數傳入一個函數，實現類似map方法的效果，對每個元素進行處理並傳回處理好的陣列
Array.from([1,2,3 ] , item => item *2) //[2,4,6]
返回字串的長度
可以用於將字串轉為數組，然後返回字串的長度，因為它能夠正確處理各種Unicode字符，從而避免JS將大於/uFFFF的Unicode字元算作2個字元的自身bug
function countLength(string) {
return Array.from(string).length
} 2、Array.of()
Array.of 方法用於將一組值，轉換為陣列。彌補數組建構子Array()的不足。因為參數個數的不同，會導致Array()的行為有差異
//如下程式碼看出差異Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]
new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]
// Array.of方法可以用下面的程式碼模擬實作。
function ArrayOf() {
return [].slice.call(arguments);
} 3、陣列實例的find() 和findIndex()
find()
傳回第一個符合條件的陣列成員，它的參數是一個回呼函數，所有陣列成員依序執行該函數，直到找出第一個滿足條件的成員，然後傳回該成員，如果沒有符合條件的成員，則傳回undefined
該方法的回呼函數接收三個參數： 目前的值， 當前位置， 原始數組
範例1
[1,12,4,0,5] .find(（item,index , arr） => return item < 1) // 0
範例2
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find 也支援這個複雜的查找var points = [
{
x: 10,
y: 20
},
{
x: 20,
y: 30
},
{
x: 30,
y: 40
},
{
x: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.find(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 } findIndex()
寫法用法基本上與find()方法相同，只是傳回第一個符合條件的陣列成員的位置，如果沒有則回傳-1
範例1
[1 ,2,4,15,0].findIndex((item , index ,arr) => return item > 10) //3
範例2
var points = [
{
x: 10,
y: 20
},
{
x: 20,
y: 30
},
{
x: 30,
y: 40
},
{
x: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.findIndex(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
return point.x % 6 == 0 && point.y % 7 == 0;
}); //1 4、陣列實例的fill()
// fill方法使用給定值， 填入一個陣列。
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill方法也可以接受第二個和第三個參數，用於指定填滿的起始位置和結束位置。
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// 注意，如果填充的類型為對象，那麼被賦值的是同一個記憶體位址的對象，而不是深拷貝對象。
let arr = new Array(3).fill({
name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]這兩個方法都可以發現陣列中的NaN，而ES5中的indexOf()是發現不了NaN的
5.數組實例的entries()，keys() 和values()
三個方法都用來遍歷數組，都返回一個遍歷器對象，可用for…of循環遍歷
不同的是：
keys()是對鍵名的遍歷
values()是對鍵值的遍歷
entries()是對鍵值對的遍歷
for (let index of ["a", "b"].keys()) {
console.log(index);
}
// 0 1
for (let elem of ["a", "b"].values()) {
console.log(elem);
}
// ab
for (let [index, elem] of ["a", "b"].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
var a = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ] 6、includes()方法傳回一個布林值
該方法傳回一個布林值，表示某個陣列中是否包含給定的值
[1, 2, 3].includes(2) // true [(1, 2, 3)].includes(4) // false
也可接收第二個參數，表示搜尋的起始位置，預設為0。如果第二個參數是負數，則表示到數的位置。如果第二個參數大於數組的長度，則從下標0處開始
includes 方法彌補了indexOf 方法不夠語義化和誤判NaN 的缺點
[1,23,NaN].includes(NaN) //true
相容方法：
function contains = ( () => {
Array.prototype.includes
?(arr , val) => arr.includes(val)
:(arr , val) => arr.some(item => return item === val)
})() 7、數組實例的flat()，flatMap()
// flat()
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
//flatMap()
[2, 3, 4].flatMap((x) => [x, x * 2])
//map執行完後是[[2, 4], [3, 6], [4, 8]]
//然後在執行flat()方法得到下邊的結果// [2, 4, 3, 6, 4, 8]
// flatMap()只能展開一層陣列。
// 相當於.flat()
[1, 2, 3, 4].flatMap(x => [
[x * 2]
])
//map執行完後是[[[2]], [[4]], [[6]], [[8]]]
//接著在執行flat()方法得到以下結果// [[2], [4], [6], [8]]複製程式碼8、陣列實例的copywithin()
在目前陣列內部將指定位置的成員複製到其他位置，然後傳回目前數組，會改變原數組
接收三個參數：
1、target(必需) 從該位置開始替換資料
2、start(可選) 從該位置開始讀取數據，預設為0，如果為負數，則表示到數
3、end(可選) 到該位置前停止讀取數據，預設等於數組長度。如果是負數，表示到數
三個參數都應該是數字，如果不是，會自動轉為數值
[1,2,3,4,5].copywithin(0,3); //[4,5,3 ,4,5] 表示從下標3位置直到結束的成員(4,5)，複製到從下標0開始的位置，結果替換掉了原來的1和2