很碎很碎的前端知识点，稀碎！！！（不定期更新）

reduce() 

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose（compose就是执行一系列的任务（函数））。

注意: reduce() 对于空数组是不会执行回调函数的。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

function(total, currentValue, currentIndex, arr)为必需参数。用于执行每个数组元素的函数。

total 必需。初始值, 或者计算结束后的返回值。

currentValue 必需。当前元素

currentIndex 可选。当前元素的索引

arr 可选。当前元素所属的数组对象。

initialValue为可选参数。传递给函数的初始值。

这个函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第 一个参数是数组的第一项，第二个参数就是数组的第二项。 

对于这个函数的两种参数理解都是正确的，第一次迭代的时候total就是第一项；

let dataArr = [1,2,3,4,5];
let sum = 0;
function getSum(sum,item) {
    return sum += item;
}
sum = dataArr.reduce(getSum);
console.log(sum);

 

Array​.prototype​.some()

some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。

some() 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true。否则，some() 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。

注意：some() 遍历的元素的范围在第一次调用 callback. 时就已经确定了。在调用 some() 后被添加到数组中的值不会被 callback 访问到。如果数组中存在且还未被访问到的元素被 callback改变了，则其传递给 callback 的值是 some() 访问到它那一刻的值。

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

$.grep()

$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。（源数组不会受到影响，过滤结果只反映在返回的结果数组中）

$.grep( array, function [, invert ] )  invert可选，Boolean类型，默认值为false，指定是否反转过滤结果。如果参数invert为true，则结果数组将包含function返回false的所有元素。

 

前端工程化

使用软件工程的技术和方法来进行前端项目的开发、维护和管理；用来提高前端的开发效率和代码质量；

大致包含以下几个方面：

1）、代码规范；

2）、分支管理；

3）、模块化和组件化；

         模块化中的模块一般指js模块；

         从UI拆分下来的包含HTML（模板）、CSS（样式）、JS（逻辑）功能完善的解构单元称之为组件；

         一个组件可能包含多个模块；

4）、自动化测试；

5）、构建、部署；

 

HTTPS

HTTPS协议是通过加入SSL（Secure Sockets Layer）层来加密HTTP数据进行安全传输的HTTP协议，同时启用默认的443端口进行数据传输。

HTTP和HTTPS的区别：

HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如支付信息等。

HTTPS是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全；

HTTPS通信过程：

（1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接。

（2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端。

（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级。

（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站。

（5）Web服务器利用自己的私钥解密出会话密钥。

（6）Web服务器利用会话密钥加密与客户端之间的通信。

 

跳出循环

for循环

使用break可以跳出循环，这个循环将不再被执行；

for(var i=1;i<=10;i++) { 
    if(i==8) { 
        break; 
    } 
    console.log(i); 
}
//1  2  3  4  5  6  7

continue语句可以跳出当次循环，后面的循环还能继续执行；

for(var i=1;i<=10;i++) { 
    if(i==8) { 
        continue; 
    } 
    console.log(i); 
}
//1   2   3   4   5   6   7   9   10

 

position:sticky 粘性定位

很多人在面试中可能都遇到了CSS中position相关的问题，会被问到position有几个值，分别介绍一下。当我被问到时，心中窃喜：这个我会！！然后流畅地说出了static、relative、absolute、fixed四个值及其定位方式，心想着这个问答肯定没问题，然而！！！发现这并不是面试官想要的，要是仔细想想吧也是，这四个任何一个前端都会，问肯定问不寻常的，接下来介绍一下这个粘性定位。

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。如下示例：

<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

* {
  box-sizing: border-box;
}
dl {
  margin: 0;
  padding: 24px 0 0 0;
}
dt {
  background: #B8C1C8;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  color: #FFF;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}
dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
dd + dd {
  border-top: 1px solid #CCC
}

 

注意：须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

 

js获取浏览器UA

let browserMes = navigator.userAgent;    浏览器代理信息

navigator.appName    浏览器名称

navigator.appCodeName   代码名称

navigator.appVersion    版本号

获取浏览器名称：

var sBrowser, sUsrAg = navigator.userAgent;
if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
  sBrowser = "Opera";
} else if (sUsrAg.indexOf("Trident") > -1) {
  sBrowser = "Microsoft Internet Explorer";
} else if (sUsrAg.indexOf("Edge") > -1) {
  sBrowser = "Microsoft Edge";
} else if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome or Chromium";
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
} else {
  sBrowser = "unknown";
}
alert("当前浏览器为: " + sBrowser);

数组排序

function createComparisonFunction(propertyName) { 
    return function(object1, object2){         
        var value1 = object1[propertyName];         
        var value2 = object2[propertyName]; 
        if (value1 < value2){             
            return -1;         
        } else if (value1 > value2){             
            return 1;         
        } else {             
            return 0;         
        }     
     }; 
}

var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}]; 
 
data.sort(createComparisonFunction("name")); alert(data[0].name);  //Nicholas 
 
data.sort(createComparisonFunction("age")); alert(data[0].name);  //Zachary   

在默认情况下，sort()方法会调用每个对象的 toString()方法以确定它们的次序；但得 到的结果往往并不符合人类的思维习惯，因此，我们调用 createComparisonFunction("name")方 法创建了一个比较函数，以便按照每个对象的 name 属性值进行排序。

BFC

块格式化上下文（Block Formatting Context，BFC）是web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

• 根元素(<html>)
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

display:flow-root;一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。

可以利用BFC来避免外边距折叠：BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

BFC解决容器高度不会被撑开的问题；

使用BFC避免文字环绕；

 

实现0.5px细线

/* css */
.line {
    position: relative;
}
.line:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #000000;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}


/* html */
<div class="line"></div>

闭包

闭包是函数和声明该函数的词法环境的组合。

function Adder(x) {
    return function (y) {
        return x + y;
    }
}

var add1 = Adder(1);
var add2 = Adder(2);

add1(5);   //6
add2(5);   //7

 

函数柯里化

函数柯里化就是高阶函数的一种特殊用法，先介绍一下高阶函数，JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。说白了高阶函数，就是让函数的参数能够接收别的函数。

//简单的高阶函数
function add(x, y, f) {
    return f(x) + f(y);
}

函数柯里化就是将一个有多个参数的函数处理成接受一个参数（这个参数是前面有多个参数的函数）的函数并返回一个新的函数，返回的新的函数能够处理传入的参数函数的剩余参数。说白了就是把一个多参数的函数转换为一个单参数的函数，所有的函数只接收一个参数。

是不是有点绕啊，说完自己都懵了，举个栗子：

用上面闭包提到的例子，也是经常遇见的一个函数，实现叠加：

//实现叠加函数
function add(x,y) {
    return x + y;
}

上面函数是两个参数，可以将函数修改为：

function adder(x) {
    return function (y) {
        return x + y;
    }
}
let add1 = adder(1);
add1(1);  //2
add1(2);  //3
//换种写法
adder(1)(1);   //2
adder(1)(2);   //3

这样的写法就实现了将两个参数变成了一个参数的转变，但是问题又来了，这是两个参数，如果参数是三个、四个甚至很多个，还像adder(1)(2)(3).....这样一直往后写的话明显不是很理想