1、函数组合(compose)使用过吗?
var compose = function(f,g) {
return function(x) {
return f(g(x));
};
};
var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);
shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"
// demo
var head = function(x) { return x[0]; };
var reverse = reduce(function(acc, x){ return [x].concat(acc); }
, []);
var last = compose(head, reverse);
last(['jumpkick', 'roundhouse', 'uppercut']);
//=> 'uppercut'
f 和 g 都是函数, x 是在它们之间通过“管道”传输的值。
组合 看起来像是在饲养函数。你就是饲养员,选择两个有特点又遭你喜欢的函数,让它们结合,产下一个崭新的函数.
代码从右向左运行,而不是由内而外运行
怎么写函数试的程序:即通过管道(柯里化和组合)把数据在一系列纯函数间传递的程序
2、命令式和声明式代码各什么意思?有什么区别?
let cars = [{make:1,id:'a'},{make:2,id:'b'}];
// 命令式
var makes = [];
for (i = 0; i < cars.length; i++) {
makes.push(cars[i].make);
}
// 声明式
var makes = cars.map(function(car){ return car.make; });
// [1, 2]
console.log(makes);
// 进阶,结合函数组合
// 命令式
var authenticate = function(form) {
var user = toUser(form);
return logIn(user);
};
// 声明式,compose从右往左执行,声明我们要做的任务是,先用户验证,再登录
var authenticate = compose(logIn, toUser);
命令式:指示计算机如何工作,“先做这个,再做那个”
声明式:明确希望得到的结果,声明式意味着我们要写表达式,而不是一步一步的指示
3、js里指数怎么表达的?比如1000可以怎么写?
1e2 === 100
true
3e4 === 30000
true
计算方式:e前面的数 乘以 10的e后面的数的次方
4、css伪元素有哪些?
::after | p::after | 在每个 元素之后插入内容。 |
---|---|---|
::before | p::before | 在每个 元素之前插入内容。 |
::first-letter | p::first-letter | 选择每个 元素的首字母。 |
::first-line | p::first-line | 选择每个 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
// :after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。可以为图片和文字
h1::after {
content: url(smiley.gif);
}
5、css颜色线性渐变怎么定义?
// background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
.grad {
background-image: linear-gradient(-90deg, red, yellow);
}
6、过渡(transition)允许您在给定的时间内平滑地改变属性值.
- 您要添加效果的 CSS 属性(若忽略,则transition内的样式改变都会受影响)
- 效果的持续时间
// 例如
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px; // 只有width有过渡动画
height: 300px; // 没有过渡动画效果
}
配合transform 2d转换方法,就可以做出动画的,平移,旋转,缩放效果
// 这是旋转效果,和宽高放大效果,持续2s。多项时transition后逗号分隔
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
7、什么是css动画?
使元素逐渐从一种样式变为另一种样式。使用步骤:1制定动画逻辑,2将动画逻辑绑定到页面元素并声明动画时间。如下:
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
// animation-iteration-count: 3; 设置动画运行次数,infinite为一直循环运行
}
// ------------------------------------------------------------------------
// 动画逻辑关键字可以用%代替
/* 动画代码 */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
8、css怎么使用变量?
创建具有全局作用域的变量,在 :root 选择器中声明它, :root 选择器匹配文档的根元素。
创建具有局部作用域的变量,在将要使用它的选择器中声明它。
下面的例子,首先是声明两个全局变量(–blue 和 --white),然后使用 var() 函数在样式表中插入变量的值
tip:微信小程序场景:root换成:host,原因是:root官方套壳时候就用了,对外暴露了一个小程序封装的:host
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
--blue: #0000ff;
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
修改css变量
let r = document.querySelector(':root');
r.style.setProperty('--blue', 'lightblue');