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).....这样一直往后写的话明显不是很理想