如何使用JavaScript快速創(chuàng)建一個(gè)1到100的數(shù)組
代碼示例:
let arr = [] // push方法 for(let i = 1,len=100;i<=100;i++){arr.push(i)} // or //循環(huán)賦值 for(let i = 1,len=100;i<=100;i++){arr[i-1]=i} // Array.from()方法 后面會(huì)有一點(diǎn)點(diǎn)的優(yōu)化 Array.from({length:101}, (v,k) => k)// or Array.from(Array(101), (v,k) =>k); Array.from(Array(101).keys()) arr.splice(0,1) // 使用遞歸實(shí)現(xiàn) // 當(dāng)前值 // 最大長(zhǎng)度 let arr = [] function setArray(current,maxLength,arr){ if(arr.length<maxLength){ arr[current-1] = current setArray(++current,maxLength,arr) }else{ arr.filter(i=>i)// 去除假值 empty } } setArray(1,100,arr) // 暫且不知道有沒(méi)有性能問(wèn)題 // 在網(wǎng)上看到一些方法,也蠻好玩的,但是不知道來(lái)源 // 1 let arr = Array(100).toString().split(',').map((item,index)=>index)// 0-> 99 // 2 let i = 0; let timer = setInterval(function(){ arr[i] = i++; if(i>=100){ clearInterval(timer); console.log(arr); } },1); // 0-> 99 // 3 Object.keys(Array.apply(null, {length:100})).map(item=>+item);// 0-> 99 // 4 [...Array(100).keys()]// 0-> 99 [...Array.from({length:100}).keys()]// 0-> 99 // mdn 看見(jiàn)的 序列生成器(指定范圍) const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => + (i * step)); range(1,100,1)// 1-> 100 //優(yōu)化我上面寫(xiě)的 Array.from({length:100},(_, i)=>1+(i)) // 1-> 100
我覺(jué)得看起來(lái)最舒服的是: Array.from({length:100},(_, i)=>1+(i))
前提知識(shí):
Array.from()
Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike
想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象。
mapFn
可選如果指定了該參數(shù),新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)。
thisArg
可選可選參數(shù),執(zhí)行回調(diào)函數(shù)
mapFn
時(shí)this
對(duì)象。返回值
一個(gè)新的
數(shù)組
實(shí)例。
用法:
- String 生成 數(shù)組
- Set 生成 數(shù)組
- Map 生成 數(shù)組
- 類數(shù)組 生成 數(shù)組
示例:從Map生成數(shù)組
const map = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(map); // [[1, 2], [2, 4], [4, 8]] const mapper = new Map([['1', 'a'], ['2', 'b']]); Array.from(mapper.values()); // ['a', 'b']; Array.from(mapper.keys()); // ['1', '2'];
其他:
Array.from({length: 100}) or Array.from(Array(100)) // 都會(huì)生成 (100) [undefined,..., undefined]
數(shù)組實(shí)例方法keys()
keys()是ES6中新增的對(duì)鍵名的遍歷,返回一個(gè)遍歷器對(duì)象
apply(thisArg, [argsArray])
apply(thisArg, [argsArray])
參數(shù)
thisArg
必選的。在
func
函數(shù)運(yùn)行時(shí)使用的this
值。請(qǐng)注意,this
可能不是該方法看到的實(shí)際值:如果這個(gè)函數(shù)處于非嚴(yán)格模式下,則指定為null
或undefined
時(shí)會(huì)自動(dòng)替換為指向全局對(duì)象,原始值會(huì)被包裝。
argsArray
可選的。一個(gè)數(shù)組或者類數(shù)組對(duì)象,其中的數(shù)組元素將作為單獨(dú)的參數(shù)傳給
func
函數(shù)。如果該參數(shù)的值為null
或undefined
,則表示不需要傳入任何參數(shù)。從ECMAScript 5 開(kāi)始可以使用類數(shù)組對(duì)象。返回值
調(diào)用有指定
this
值和參數(shù)的函數(shù)的結(jié)果。
補(bǔ)充:js中實(shí)現(xiàn)隨機(jī)獲取1-100的不重復(fù)的數(shù)組
<script type="text/javascript"> function getArr() { var i = 0; var arr = new Array(); var p; while (i < 100) { //生成隨機(jī)數(shù) var p = Math.floor(Math.random() * 100 + 1) if (arr.indexOf(p) == -1) { arr[i] = p; i++; } } return arr; } </script>
總結(jié)
到此這篇關(guān)于如何使用JavaScript快速創(chuàng)建一個(gè)1到100數(shù)組的文章就介紹到這了,更多相關(guān)JS快速創(chuàng)建1到100數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用原生js寫(xiě)的一個(gè)簡(jiǎn)單slider
這篇文章主要介紹了使用原生js寫(xiě)的一個(gè)簡(jiǎn)單slider,喜歡的朋友可以參考下2014-04-04微信小程序解除10個(gè)請(qǐng)求并發(fā)限制
這篇文章主要介紹了微信小程序解除10個(gè)請(qǐng)求并發(fā)限制,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤(pán)左右滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了swiper+echarts實(shí)現(xiàn)多個(gè)儀表盤(pán)左右滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06JavaScript如何動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何動(dòng)態(tài)監(jiān)聽(tīng)DOM元素高度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-07-07使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能,以及iframe預(yù)覽報(bào)錯(cuò)問(wèn)題和iframe未能加載PDF文檔,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09JavaScript數(shù)組的定義及數(shù)字操作技巧
這篇文章主要介紹了JavaScript數(shù)組的定義及數(shù)字操作技巧的相關(guān)資料,需要的朋友可以參考下2016-06-06js實(shí)現(xiàn)倒計(jì)時(shí)(距離結(jié)束還有)示例代碼
本文與大家分享個(gè)js實(shí)現(xiàn)倒計(jì)時(shí)的代碼,主要實(shí)現(xiàn)功能距離結(jié)束還有多少時(shí)間,感興趣的朋友可以參考下,希望對(duì)大家學(xué)習(xí)js有所幫助2013-07-07