整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
大家使用数组估计最让人厌烦的就是对数组进行赋初值，要不就是手动的进行赋值要不就是使用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小时内与您取得联系。
