5 個(gè)JavaScript 中 Array.from() 的用例
點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
英文 | https://javascript.plainenglish.io/5-use-cases-for-array-from-in-javascript-a40889115267
翻譯 | 楊小愛(ài)
Array.from('astring');// [“a”, “s”, “t”, “r”, “I”, “n”, “g”]
您可以從地圖創(chuàng)建一個(gè)新數(shù)組。此外，您可以使用 Array.from() 方法為地圖的鍵和值構(gòu)造數(shù)組。
const map = new Map([[1, 2], [2, 4], [4, 8]]);Array.from(map)// [1, 2], [2, 4], [4, 8]Array.from(map.values());// [2, 4, 8]Array.from(map.keys());// [1, 2, 4]
您還可以編寫一個(gè)將參數(shù)作為數(shù)組元素的函數(shù)。然后，返回構(gòu)造的數(shù)組。
function createArray() {return Array.from(arguments);}createArray(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
您還可以從用戶定義的可迭代對(duì)象創(chuàng)建數(shù)組。
function*?iterator()?{yield 1;yield 2;}console.log(Array.from(iterator())); // [1, 2]
2、初始化一個(gè)數(shù)組
有時(shí)，您可能需要用零初始化數(shù)組。使用 Array.from() 方法，您可以快速完成。
Array.from({length: 5}, x => 0);// [0, 0, 0, 0, 0]
3、克隆一個(gè)數(shù)組
JavaScript 中的 slice() 方法可以幫助您創(chuàng)建數(shù)組的淺拷貝。例如，您可以使用不帶參數(shù)的 slice() 方法克隆一個(gè)數(shù)組。
const updatedGrades = [66, 92, 100, 58, 21, 33];midtermGrades = updatedGrades.slice();
您還可以使用 Array.from() 方法克隆一個(gè)數(shù)組。
const updatedGrades = [66, 92, 100, 58, 21, 33];const midtermGrades = Array.from(updatedGrades);
4、查找數(shù)組的唯一項(xiàng)
您可以使用 Array.from() 方法在數(shù)組中找到唯一項(xiàng)。為此，您可以將 Array.from() 方法與 Set 結(jié)合使用。
Array.from(new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]));// [1, 2, ,3 ,4]
5、創(chuàng)建范圍函數(shù)
Array.from() 可以幫助您根據(jù)需要?jiǎng)?chuàng)建范圍函數(shù)。對(duì)于類似數(shù)組的對(duì)象參數(shù)，您可以使用類似數(shù)組的 {length:end}
function Range(start, stop, step) {return Array.from({ length: (stop?-?start) / step + 1}, (_, i) => start + (i * step));}console.log(Range(0,5,1)) // [0, 1, 2, 3, 4, 5]console.log(Range(0,9,3)) // [0, 3, 6, 9]console.log(Range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)));// ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
從類數(shù)組對(duì)象創(chuàng)建數(shù)組
初始化數(shù)組
克隆數(shù)組
查找數(shù)組的唯一項(xiàng)
創(chuàng)建范圍函數(shù)并使用該函數(shù)創(chuàng)建英文字母表。
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
