一些前端基础积累

翻腾的涮肉
253 阅读3分钟

  • 遍历 JS中，除了for循环(for, for...of)，其他的遍历(forEach, map, filter, some等)都是对键值的遍历，也就是对空位并不会进行遍历，可见速度差距之大。如下:

    WechatIMG1393.jpeg

  • line-height

    1. 多行文字垂直居中
      .box {
      width: 400px;
      line-height: 400px;
      border: 1px solid #ccc;
  }
  .content {
      display: inline-block;
      line-height: 1.5;
      font-size: 14px;
      vertical-align: middle;
  }
<div class="box">
    <span class="content">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</span>
</div>

    实现效果如下:

    image.png
    2. “空白幽灵节点”

    .img-wrap  {
  background: deepskyblue;
}
<div class="img-wrap"><img src="imgs/img1.png" alt="">xgh</div>

    展示如下：

    image.png

可看到底部蓝色背景在图片后溢出了一道间隙。这间隙是什么？由于img元素是内联(inline)元素，内联元素有默认行高，正如右侧文字“xgh”。内联元素之间默认baseline对齐，从图中可见是图片底部与英文字母x底部对齐。而baseline并非是内联盒子的底部，所以会出现“空隙”。如何fix？ 至少三种方式：

  // 第一种：给父盒子（块级元素）设置字号为0。因为行高是根据字号来计算的，没有字号也就没有默认行高。
  .img-wrap {
	font-size: 0;
	background: deepskyblue;
  }
  // 第二种：给内部的内联盒子设置vertical-align为以下几种属性。
  .img-wrap img {
	vertical-align: middle/top/bottom/text-top/text-bottom
  }
  // 第三种：把内联盒子变为块级盒子
  .img-wrap img {
    display: block
  }

移步看：前端大宝剑之line-height 移步看：css中line-height深入解析 移步看：如何用js实现“多行溢出隐藏”功能

  • 数组操作

    1. 找出最大值 第一种：Math.max.apply(Math, array) 第二种：reduce方法，forEach也阔以
    var arr = [-99, 188, 217, 3, 42, 75];
	arr._max = function () {
		var _arr = this, max = arr[0];
		return _arr.reduce((prev, next, currentIdx) => {
			if (next > prev) {
				return max = next;
			} else {
				return max = prev;
			}
	  })
}

    1. 找出最小值 第一种：Math.min.apply(Math, array)； 第二种：思路同上

    2. 找出最大差值 除上面所述，利用原生sort()方法，使数组按照顺序排列得出最大差值。如下：

      arr.sort(function (a, b) {
    return a - b
})

    3. 找出第二大值 除原生sort方法，可利用forEach循环找到第二大值

      //思路，当出现比最大值还大的值时，更新最大值，此前最大值为第二大值。注意当数组第一个值即为最大值情况的判断。
var arr = [217, -99, 188, 3, 42, 75];
  arr.find2max = function () {
  	var _arr = this, max = arr[0], smax = arr[1];
  	_arr.forEach(n => {
  		if (n > max) {
  			smax = max;
  			max = n;
  		} else {
  			if (n != max && n > smax) {
  				smax = n;
  			}
  		}
  	})
  	return smax
}

    4. 找出第二小值 思路同上，注意数组第一个值即为最小值的情况。

    5. 多维数组变成一维数组

      var arr = [217, [-99, 188], -32, 98, [-7, 3], 42, 75];
arr.join(',').split(',')
// ["217", "-99", "188", "-32", "98", "-7", "3", "42", "75"]
avatar
文章
阅读
粉丝