JS快速構建陣列方法
阿新 • • 發佈:2018-12-16
一、常用(普通)陣列的構建
1.1 直接構建
let arr = ['mock1', 'mock2', 'mock3']
1.2 通過new Array
let arr = newArray('mock1', 'mock2', 'mock3')
let arr1 = newArray();
arr1[0] = 'mock1'
arr1[1] = 'mock2'
...
//array可設定長度,但對於map並沒什麼用,後面詳細介紹
let arr1 = new Array(9)
二、特殊陣列的構建
2.1 構建相同內容的陣列
直接構建法: 簡單粗暴不推薦,如果資料多,不僅構建麻煩,而且不美觀
let arr = ['mock', 'mock', 'mock']
迴圈法: for迴圈 比第一種要好,但是程式碼依然不美觀
let arr = [];
for(var i = 0;i < 3;i++){
arr.push('mock')
}
fill: 使用一個固定值來填充陣列 這種顯然就方便又美觀多了!
let newArr = new Array(3);
newArr.fill('mock')
2.1 構建順序(倒序陣列)
直接構建法: 資料多起來,10條、20條可要了親命
let arr = ['mock1', 'mock2', 'mock3'...]
迴圈法: for迴圈 和2.1一樣的道理
let arr = []; for(var i = 0;i < 10;i++){ arr.push(`mock${i+1}`) }
fill + map實現 這種顯然就方便又美觀多了!
let newArr = new Array(10).fill('').map( (item, index) => index+1);
console.log(newArr)
可以完美打印出[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
簡單解釋一下原理.
之所以要用fill
結合map
,因為new Array建立的空陣列是無法map的.
比如new Array(3)建立的陣列是[,,,]
,用map進行迴圈得不到任何結果.當然你說可以用for和length,我只是不太喜歡用for.map看起來更簡潔舒服
所以我們新建了陣列要向數組裡真真切切填充一個(任何)數,因為到後面,其值還是會被map代替。
let arr = new Array(10).fill('任何數')
這時候就可以使用map方法了,然後通過每次return返回的值改變當前陣列位置的值
arr.map( (item, index) => index+1 )
上面有幾點要注意:
- map的時候,需要用的是序號值index,item(陣列的值)對我們是沒有意義的
- 當箭頭函式的內容只有一行的時候,會自動return該行內容
總之,還是建議大家儘可能使用高質量、簡潔的程式碼去構建專案.這樣對效能也好,後面維護專案也好,都有很大的作用