目录
CSS 题目：改变 placeholder 的字体颜色大小
JS 题目： Set & Map 数据结构
其他 题目： 认识动画效果
CSS
题目：改变 placeholder 的字体颜色大小
<style>
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size: 14px;
color: rgb(202, 73, 181);
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size: 14px;
color: rgb(202, 73, 181);
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size: 14px;
color: rgb(202, 73, 181);
}
</style>
<input type="text" placeholder="可以改变我的颜色" />其他 ： 认识动画效果
一、什么样的动效是好的动效？
1.满足用户的心理预期
我们生活在客观的物理世界，对虚拟界面上的元素难免会有些陌生感，而好的动效就要让我们觉得它不陌生。即可以让这个虚拟的世界与物理世界产生交集，用户会把自己对物理世界的认知映射到对产品的认知上。合理的动效可以满足用户的心理预期、越是符合人对物理世界认知的设计、就越容易帮助用户去预判或者理解产品的交互逻辑。
2.引导用户注意力
一个界面上的所有元素、按照明显程度来排序，我们会得到这样一个顺序： 动态 > 色彩 > 明度
通过合理的动效，可以低成本的抓取人的注意力，让他们关注设计师想让他们关注的东西。
3.情感化设计
情感化设计的目标是在用户接触和使用产品的过程中，激发用户的正向情感，比如愉快，信任，满足；避免用户产生负向情感。
二、如何构建一个合理高效的动效
1.通过动效暗示二维界面暗含的三维层级关系，及其暗含的操作逻辑
2.引导用户的注意力向界面重点元素
3.通过动态设计让情感化设计变得更生动
4.动效的视觉效果统一，控制数量，不滥用JS 题目： Set & Map 数据结构
Set
类似于数组，但是成员的值都是唯一的，Set 本身是一个构造函数，用来生成 Set 数据结构。
- 初始化
Set 函数可以接受一个数组作为参数，用来初始化
const s = new Set( [2, 3, 5, 4, 5, 2, 2]);
console.log(s.size); // 4，重复的值会忽略向 Set 添加值时，不会发生类型的转换
(1).5 和 “5” 是不相同的值
(2).NaN 和NaN 是相同的值（但是 我们知道！NaN ===NaN）
(3).两个对象总是不相等的
- Set 实例的属性和方法
Set.prototype.constructor : 返回构造函数，默认就是Set 函数
Set.prototype.size: 返回Set 实例的成员总数
.add(value) : 添加某个值，返回Set 结构本身
.delete(value) : 删除某个值，返回一个布尔值，表示删除是否成功
.has(value) : 返回布尔值，表示该值是否为Set 成员
.clear() : 清楚所有成员，没有返回值
- Set 的遍历操作
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员
注意：Set 结构的键名就是键值
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
set.forEach((value, key) => console.log(key + ' : ' + value))
// red : red
// green : green
// blue : blueSet 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
console.log(x);
}
// red
// green
// blue扩展运算符（…）内部使用for…of循环，所以也可以用于 Set 结构
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']- 数组去重
(1). 扩展运算符 (…)
将一个数组转为用逗号分隔的参数序列
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)]; // 先变成set结构，再变成数组
// [3, 5, 2](2).Array.from 方法将 Set 结构转为数组，可用此去重：
let arr = [3, 5, 2, 2, 5, 5];
let unique = Array.from(new Set(arr));
// [3, 5, 2]Map
Map 数据结构,它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键，并且Map构造函数的参数 接受任何具有 Iterator 接口、且每个成员都是一个双元素的的数据结构。
- 初始化
const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content');
m.get(o); // "content"
m.set([
['name', '张三'],
['title', 'Author']
]);
m.get('name'); // "张三"
// 对同一个键多次赋值 下面两种相同吗？？？
m.set(1, 'bbb').set(1, 'aaa');
m.get(1); // aaa 最右边的有效
m.set(-0, 123);
m.get(+0) // 123 0和-0就是一个键
m.set(true, 1);
m.set('true', 2);
m.get(true) // 1 布尔值true和字符串true则是两个不同的键
m.set(undefined, 3);
m.set(null, 4);
m.get(undefined) // 3 undefined和null也是两个不同的键
m.set(NaN, 123);
m.get(NaN) // 123 NaN 与自身是同一个键- Map 实例的属性和操作方法
size：返回 Map 结构的成员总数。
set(key, value)：设置键值，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。set方法返回的是当前的Map对象，因此可以采用链式写法。
get(key)： 读取key对应的键值，如果找不到key，返回undefined。
has(key)： 返回一个布尔值，表示某个键是否在当前 Map 对象之中。
delete(key)： 删除某个键，返回true。如果删除失败，返回false。
clear()： 清除所有成员，没有返回值
- 遍历方法
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历 Map 的所有成员。
扩展运算符（…），将Map 转化为数组结构
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]