資訊專欄INFORMATION COLUMN
摘要：中的方法遍歷一下數(shù)組中的每個選項返回一個新的數(shù)組。還可以接受第二個參數(shù)，作用類似與數(shù)組的方法，用于對每個元素進行處理。這個方式是用于將一組值，轉(zhuǎn)換為數(shù)組?？蛇x到該位置前停止讀取數(shù)據(jù)，默認等于數(shù)組長度。如果是負數(shù)，表示倒數(shù)。
ES6中數(shù)組增加了很多新的方法，但是先回顧下之前ES5中的數(shù)組的方法。
ES5中的方法Array.prototype.forEach
遍歷一下數(shù)組中的每個選項
Array.prototype.map, Array.prototype.filter: 返回一個新的數(shù)組。
兩者的區(qū)別是：map返回的是，由原數(shù)組中的每個元素調(diào)用一個方法后返回的新數(shù)組；filter是通過指定函數(shù)測試，然后創(chuàng)建了個新的數(shù)組；
Array.prototype.some,Array.prototype.every: 返回的是Boolean值
some只要有一個符號就返回；every只要有一個不符合就返回。
Array.prototype.reduce, Array.prototype.reduceRight:相當于一個迭代的過程，返回最終的結(jié)果?？梢詡?個參數(shù)：previous, current, index, array.
indexOf, lastIndexOf
ES6中新增的方法 Array.from()這個方法是將對象轉(zhuǎn)為真正的數(shù)組，這個對象有兩種類型：類似數(shù)組的對象和可遍歷的對象（如ES6中的Set和Map）
let arrayLike = {
"0": "a",
"1": "b",
"2": "c",
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ["a", "b", "c"]
// ES6的寫法
let arr2 = Array.from(arrayLike); // ["a", "b", "c"]
常用的場景
常見的類似數(shù)組對象是NodeList集合和arguments
Array.from("hello");//["h","e","l","l","o"]
let namesSet = new Set(["a","b"])
Array.from(namesSet);//["a","b"]
Array.from([1,2,3])//[1,2,3]
但有一點，擴展運算符(...)也可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組
var args = [...arguments];
[...document.querySelectorAll("div")]
其實擴展運算符背后調(diào)用的是遍歷器接口(Symbol.iterator),如果一個對象沒有部署成這個接口，就無法轉(zhuǎn)換。Array.from方法則還支持類似的數(shù)組對象，但是這種類似數(shù)組對象，必須要有l(wèi)ength屬性，如果沒有，就不能轉(zhuǎn)換。
Array.from還可以接受第二個參數(shù)，作用類似與數(shù)組的map方法，用于對每個元素進行處理。
Array.of()這個方式是用于將一組值，轉(zhuǎn)換為數(shù)組。
Array.of(3,11,8)//[3,11,8]
這個方法的主要目的，是彌補數(shù)組構(gòu)造函數(shù)Array()的不足
new Array(3)//[undefined*3]
Array.of可以替代Array()或者new Array()
Array.of()//[] Array.of(undefined)//[undefined] Array.of(1)//[1] Array.of(1,2)//[1,2]copyWidthin()
將制定位置的成員復制到其他位置，然后返回當前數(shù)組，就是使用這個方法，修改當前數(shù)組。
Array.prototype.copyWithin(target, start = 0, end = this.length)
target(必選)：從該位置開始替換數(shù)據(jù)
start(可選)：從該位置開始讀取數(shù)據(jù)，默認為0，如果是負數(shù)，表示倒數(shù)。
end(可選)：到該位置前停止讀取數(shù)據(jù)，默認等于數(shù)組長度。如果是負數(shù)，表示倒數(shù)。
[1,2,3,4,5].copyWidthin(0, 3)//[4,5,3,4,5]
[1,2,3,4,5].copyWidthin(0,3,4)//[3,2,3,4,5]
[1,2,3,4,5].copyWidthin(0,-2,-1)//[4,2,3,4,5]
find(): 用于找到第一個符合條件的數(shù)組成員
findIndex(): 返回第一個符合條件的數(shù)組成員位置
這個方式使用一個定值，填充一個數(shù)組
["a","b","c"].fill(7)//[7,7,7]entries() keys() values()
for (let index of ["a", "b"].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ["a", "b"].values()) {
console.log(elem);
}
// "a"
// "b"
for (let [index, elem] of ["a", "b"].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
includes()
這個方法表示某個數(shù)組是否包含給定的值
數(shù)組的空位，數(shù)組的空位和undefined不是同一個概念
0 in [undefined, undefined, undefined] // true 0 in [, , ,] // false空位處理
ES5中
forEach,filter,every,some會跳過空位 map會跳過空位，但會保留這個值 join(),toString()會將空位視為undefined,而undefined和null會被處理成空字符串. ES6會將空位轉(zhuǎn)為undefined.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86852.html
網(wǎng)上很少有提供不同版本接口對比的文章，所以自己總結(jié)一下。 Array Method Description Modify Version concat 連接多個數(shù)組，返回數(shù)組副本，參數(shù)可以為值或數(shù)組 否 ES3 join 把數(shù)組元素組合為字符串 否 ES3 pop 刪除并返回最后一個元素 是 ES3 push 向數(shù)組末尾添加一個或多個值，返回數(shù)組長度 是 ES3 reve...
摘要：本系列文章適合快速掌握入門語法，想深入學習的小伙伴可以看看阮一峰老師的入門本篇文章是對之前文章的一個補充，可以使代碼更簡潔函數(shù)參數(shù)默認值在傳統(tǒng)語法中如果想設(shè)置函數(shù)默認值一般我們采用判斷的形式在新的語法中我們可以在參數(shù)聲明的同時賦予默認值參數(shù) 本系列文章適合快速掌握 ES6 入門語法，想深入學習 ES6 的小伙伴可以看看阮一峰老師的《ECMAScript 6 入門》 本篇文章是對之前文章...
摘要：最近重構(gòu)了一個項目，引入了部分用法，最大的感受是讓這門語言變得更加嚴謹，更加方便。通過該方法獲得位置后還得比較一次才能判斷是否存在。再來看看的寫法使用數(shù)組來初始化一個，構(gòu)造器能確保不重復地使用這些值。下面提供鏈接，供有興趣的朋友參考。 最近重構(gòu)了一個SPA項目，引入了部分ES6用法，最大的感受是ES6讓javascript這門語言變得更加嚴謹，更加方便。本篇將結(jié)合實戰(zhàn)經(jīng)驗，對最常用的部...
閱讀 971·2021-10-25 09:48
閱讀 680·2021-08-23 09:45
閱讀 2537·2019-08-30 15:53
閱讀 1791·2019-08-30 12:45
閱讀 713·2019-08-29 17:21
閱讀 3500·2019-08-27 10:56
閱讀 2592·2019-08-26 13:48
閱讀 743·2019-08-26 12:24
