整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
大家使用數組估計最讓人厭煩的就是對數組進行賦初值，要不就是手動的進行賦值要不就是使用for循環進行賦值。在ES6中可以使用fill方法進行數組的初始化。fill方法接收3個參數，第一個參數是賦值的值為必要參數，第二個參數是賦值開始的起始位置，第3個參數是賦值開始的終止位置此位置不會進行賦值。
當只有第1個參數是默認設置數組的所有值為參數1的值。
當只有第1,2兩個參數值設置從第2個值的位置到數組的末尾使用參數1的值進行賦值。
同時還需要注意的是不能對超出數組長度的值進行賦值。
請看下面的演示程序。
<!DOCTYPE html>
<html>
<head>
<title>數組的fill方法</title>
<meta charset="utf-8">
</head>
<body>
<textarea style="height: 500px;width: 300px;" id="value"></textarea>
</body>
<script>
let dom = document.getElementById("value");
let str=[]
let a=new Array(5);
str.push(`the init value is ${a}`);
a.fill(1);
str.push(`the a.fill(1) value is ${a}`);
a.fill(2,1);
str.push(`the a.fill(2,1) value is ${a}`);
a.fill(3,3,5);
str.push(`the a.fill(3,3,5) value is ${a}`);
a.fill(3,5,10);
str.push(`the a.fill(3,5,10) value is ${a}`);
a.length=10
a.fill(3,5,10);
str.push(`after set length is 10 the a.fill(3,5,10) value is ${a}`);
dom.value =str.join("\n");
</script>
</html>輸出結果為：
從結果上我們可以看到上述的結論。但是使用fill對數組進行賦值還是有一些局限性的，只能賦值一部分的位置的值為一個相同的值。
JavaScript 中，我們往往會遇到需要使用某些默認值來填充數組的情況，那么都有哪些方式可以完成這樣的任務呢？今天就為大家介紹 4 種填充數組的方式，并且會講解一下每一種方式的優缺點。?
Array.fill 應該是很直觀的一種方式。如下代碼所示，我們想要使用 "hello" 字符串把長度為 10 的數組填充滿，代碼就像下面這樣：?
?上述代碼對于不可變的值，例如數值、字符串和布爾類型工作的很好。但是如果我們想要使用一個對象來填充呢？?
?當我們使用對象來填充一個數組的時候，數組里面的每個索引處填充的值指向的都是這同一個對象，所以如果我們修改對象的時候：?
?它將會把數組中的所有值都改變掉，大多數情況下這都不是我們想要的行為。所以如果想要填充對象的話，得需要借助 map 來為每一個槽位單獨填充對象才可以：?
?但是你應該要考慮到，map 方法是一個代價比較高的方法。它會生成一個新的數組，而不是直接操作原來的數組，數據量一大的話，性能會急劇下降。所以可以試試其他方法。
我們可以先創建一個數組：?
?然后使用一個 for 循環一一賦值即可：?
?這樣可以避免使用 map 方法。
另外一種可選的方式是使用 Array.from 方法。Array.from 方法可以讓你從一個像數組或可迭代的對象中創建數組。像數組的對象指的是這個對象有一個 length 屬性，并且它的元素可以根據索引查詢到?？傻鷮ο缶褪窍?Map 或 Set 一類的。下面這行代碼就將對象一一填充到數組的對應位置：?
最后一種方法是使用展開操作符：?
?使用展開操作符可以讓我們展開一個數組，然后從展開的數組中再創建一個新的數組。使用這種方式，我們避免了使用 fill 方法，但是我們依舊使用了 map 方法。
上述填充數組的各種方法都有優缺點，不知道小伙伴們平常使用哪個方法來完成這個任務呢？
html頁面中，所有可見的html標簽元素都是由margin、padding、border 和內容組成的，專業術語稱盒子模型或框模型，后面統稱為盒子模型。
如下圖示例：
盒子模型
按F12鍵打開開發者工具，使用選擇元素工具（箭頭圖標），隨便選擇一個html元素，在下方styles 面板上就會看到上圖的盒模型。
在了解盒子模型前，讓我們先學習邊距、填充、和邊框。
當html元素沒有任何內容或寬高為0時，設置邊距、邊框、填充就沒有任何意義了，所以這些都是建立在有內容的元素基礎上的。
因為每一個html元素都是一個盒子，它有上下左右四個面，所以邊距、填充、邊框屬性需要設置四個方向的值，可以簡寫也可以分開使用，語法如下：
簡寫語法：
margin: 10px 15px 20px 12px
padding: 10px 15px 20px 12px
border: 1px solid #ff0000效果如下：
margin和padding在簡寫時是按照上、右、下、左的順時針方向設置值的，這4個值不是必須都要設置的，你可以設置一個、2個、3個，但至少要一個值。
如果設置一個值時，其它方向都使用相同的值，如：
margin:10px;
padding:10px;效果如下：
如果設置2個值時,如：
margin:10px 15px;
padding:10px 15px;效果如下：
如上可以看到，下、左邊距都是10px，下、左填充都是15px，缺省的方向會以使用反方向的值，同理當設置3個屬性值時一樣，缺省的那個會默認使用反方向的值。
拆分寫法：
/*邊距*/
margin-top: 10px;
margin-right:15px;
margin-bottom:20px;
maring-left:12px;
/*填充*/
padding-top: 10px;
padding-right:15px;
padding-bottom:20px;
padding-left:12px;
/*邊框*/
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;分開寫法和簡寫的效果是一樣的，這里注意邊距、填充只有一個屬性值，而邊框有三個屬性值：邊框大小、邊框樣式、邊框顏色，所以邊框更加復雜點，邊框還可以按照不同屬性單獨設置。
1、css 邊距 —— margin
邊距（margin）是指從邊框邊界向外的距離，為元素周圍創建空間，它是透明的，如下箭頭所示。
邊距的重疊現象，當相鄰的html元素都有邊距時，會出現邊距重疊而不是相加的效果，如下示例：
可以看到，盒子1的下邊距和盒子2的上邊距重疊了，它們的上下間距是10px，而不是20px。如果盒子1和盒子2的邊距值不一樣時也會重疊，只不過它們的間距會以其中最大的那個值顯示，如下：
2個盒子上下間距實際以盒子2的邊距顯示，因為盒子2邊距大于盒子1的邊距。
2、css 填充 —— padding
填充就是從邊框邊界向內到元素內容邊界的距離，如下綠色區域箭頭示例：
3、css 邊框 —— border
邊框border，不同于margin、padding，它是可見的默認是有顏色的，如下示例：
盒子1邊框寬度1px，盒子2邊框寬度10px，都是紅色邊框，其盒模型圖如下：
當border為0時，不顯示邊框。
之前介紹了邊框的簡寫方法，是按照方向分別設置邊框寬度、樣式、顏色：
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 1px solid #ff0000;因為邊框有三個屬性值：寬度、樣式、顏色，所以還可以按照不同屬性值設置，如下：
border-color:red;
border-style:solid;
border-width:10px;當按照屬性值的維度設置的時候，同樣可以繼續按照方向拆分設置，如下：
設置邊框寬度：
四個方向都是一樣的邊框寬度：
border-width:10px;分別設置每個方向的寬度：
border-top-width:10px;
border-right-width:15px;
border-bottom-width:12px;
border-left-width:5px;如下顯示效果：
設置邊框樣式
樣式分別有 dotted（虛線） 、solid（實線） 、double（雙線） 、dashed（虛線）4個樣式，如下：
四個方向都是一樣的邊框樣式：
border-style: solid;分別設置每個方向邊框樣式：
border-top-style:solid;
border-right-style:dotted;
border-bottom-style:double;
border-left-style:dashed;如下效果：
當邊框寬度為0時，設置邊框樣式或顏色是無效的。
設置邊框顏色
四個方向都是一樣的顏色：
border-color: red;分別設置每個方向的顏色：
border-top-color:red;
border-right-color:blue;
border-bottom-color:green;
border-left-color:orang;顯示效果：
當邊框寬度為0時，設置邊框樣式或顏色是無效的。
一個html元素在頁面中顯示的實際寬高并一定等于它的width和height屬性設置的值。
標準盒模型
標準盒模型的width/height 不包含padding和border
如下圖：
盒子1的實際顯示尺寸等于height + border + padding之和，如圖中盒子1占據的空間：高度126 = 100 + 20 + 6，寬度 136 = 100 + 30 + 6。
非標準盒模型
比如在之前Ie瀏覽器中，width/height 包含了padding和border。
這里使用box-sizing: border-box模擬非標準盒模型。
如下圖：
可以看到，padding 和 border 被包含到寬度和高度里了。
如果想要改變盒子的計算方式可以使用 CSS Box Sizing 。
當box-sizing: border-box，是非標準盒模型。
當box-sizing: content-box（瀏覽器默認），為標準盒模型。
1、盒子模型的概念，由邊距、邊框、填充和元素內容組成。
2、邊距、填充和邊框的語法使用，簡寫、拆分使用、按方向或屬性值維度單獨使用。
3、html元素實際顯示寬度和高度計算方法。
4、標準盒模型和非標準盒模型的區別。
總而言之，css盒子模型是學習css的基礎知識，后面一切都是建立在盒子模型之上的，所以要完全理解它，感謝關注，祝學習愉快。
上一篇：前端入門——css 選擇器
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
