给元素添加多个事件监听
- 使用
Array.prototype.forEach()和EventTarget.addEventListener()向元素添加多个具有指定回调函数的事件监听。
const addMultipleListeners = (el, types, listener, options, useCapture) => {
types.forEach(type =>
el.addEventListener(type, listener, options, useCapture)
);
};
addMultipleListeners(
document.querySelector('.my-element'),
['click', 'mousedown'],
() => { console.log('hello!') }
);
知识点：
EventTarget.addEventListener()：使用window.addEventListener(type, listener, options/useCapture)注册一个事件监听器type：表示监听事件类型的大小写敏感的字符串。listener：监听的事件触发时，触发这个回调。这里要注意区别fun和fun()的区别，前者是触发函数体，后者是触发函数return的事件。options：ES6的新拓展，可以配置capture、once、passive、signalcapture(boolean)：=== useCapture，冒泡once(boolean)：是否设置单次监听passive(boolean)：是否让preventDefault()(阻止默认行为api) 失效。（preventDefault这个api可以阻止浏览器的默认行为生效，比如滑动，点击等等。）signal(AbortController类)：当这个字段启用时，可以添加一个能被AbortSignal移除的侦听器。如下代码。
// 为id为outside的元素添加可被移除的事件监听器
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal } );
// 改变 t2 内容的函数
function modifyText() {
controller.abort(); // 移除监听器
}
给元素元素添加样式
- 使用
Object.assign()和HTMLElement.style将提供的样式对象合并到给定元素的样式中。
const addStyles = (el, styles) => Object.assign(el.style, styles);
addStyles(document.getElementById('my-element'), {
background: 'red',
color: '#ffff00',
fontSize: '3rem'
});
知识点：
Object.assign：Object.assign(target, ...sources)，将可枚举属性sources对象复制到target对象，并返回修改后的对象。（如果目标对象与源对象具有相同的 key，则target对象中的属性将被sources对象中的属性覆盖。）- 用途：合并对象，浅拷贝对象
计算加上给定数个工作日之后的日期。
- 使用
Array.from()构造一个组数，count天数作为数组的length长度。 - 使用
Array.prototype.reduce()从startDate开始迭代数组，并使用Date.prototype.getDate()和Date.protype.setDate()递增。 - 如果当前的
date日期是在周末，请通过添加一天或两天来再次更新，使其成为工作日。 - 注意: 不考虑法定假日。
const addWeekDays = (startDate, count) =>
Array.from({ length: count }).reduce(date => {
date = new Date(date.setDate(date.getDate() + 1)); // 获取加了一天以后的时间
if (date.getDay() % 6 === 0)
date = new Date(date.setDate(date.getDate() + (date.getDay() / 6 + 1))); // 只要是星期六就给日上面加两天变成星期一
return date;
}, startDate);
addWeekDays(new Date('Oct 09, 2020'), 5); // 'Oct 16, 2020'
addWeekDays(new Date('Oct 12, 2020'), 5); // 'Oct 19, 2020'
知识点：
Array.from()：Array.from(arrayLike, mapFn, thisArg)方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。arrayLike：可迭代对象mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数。thisArg：执行回调函数 mapFn 时 this 对象。
Array.from({ length: 3 }) // [undefined, undefined, undefined]
-
data.getDay：获取data是星期几 返回1234567 -
reduce：如果回调函数中有return的话，只有最后一次的return才会输出
测试所有数组元素是否正都能通过检验，可以指定方法测试
- 使用
Array.prototype.every()测试集合中的所有元素是否基于fn函数返回true。 - 省略第二个参数
fn, 以使用Boolean作为默认值。
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
知识点
every(): 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。
检查数组中的所有元素是否相等。
- 使用
Array.prototype.every()检查数组的所有元素是否与第一个元素相同。 - 数组中的元素使用严格比较运算符进行比较，该运算符不考虑
NaN。
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
知识点：
这个思路牛的：所有元素是否相等===所有元素是否与第一个元素相同。
