A - C 系列
1、+ 号的隐式类型转换使用
+[3] //3
+[1,2,3].slice(-1) //将 [3] 转换为了3
2、日期的转换
const addDaysToDate = (date, n) => {
const d = new Date(date);
d.setDate(d.getDate() + n);
return d.toISOString().split('T')[0];
};
addDaysToDate('2020-10-15', 10); // '2020-10-25'
- 平时做日期的计算可能更多的使用时间戳，秒数去加减，其实有对应的 setDate，getDate等方法去做（月份也一样）
- toISOString 可以将日期对象转换为 YYYY-MM-DDTHH:mm:ss.sssZ 格式，分割掉 T 字符，即可以得到日期形式
3、对象的合并
Object.assign
// 在像某对象添加多个属性时，可以直接采取合并方式
const addStyles = (el, styles) => Object.assign(el.style, styles)
addStyles(document.getElementById('my-element'), {
background: 'red',
color: '#ffff00',
fontSize: '3rem'
})
4、Array.from
/**
对于这个api知道更多的只是将类数组转化为真正的数组
(arrayLike,mapFn) 准确的说应该是类数组或者 可迭代对象({length: 5})
mapFn 接收一个回调，返回的数组每个元素会执行该回调
**/
let a = Array.from({length: 10},(_,i) => i)
a // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
5、关于工具函数封装tips
- 在封装工具类函数时，可以往闭包的角度靠（内部再返回一个函数）
- 有时候可以具有更好的拓展性
// 栗子：获取某些数中的最大值
const ary = (fn,n) => (...arg) => fn(...arg.slice(0,n))
const firstTwoMax = ary(Math.max, 2)
firstTwoMax(1,2,3,4)
// ary的函数将传入的函数，作为返回函数的返回值调用，类似于将传入的函数缓存下来，再一次调用时，传入比较值
// 这样有个好处是，其实我们可以更改比较条件，比如 取最小值等等
// 这样工具函数更具有灵活性
6、 按条件分割数组
const bifurcateBy = (arr, fn) =>
arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [
[],
[],
])
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b');
// [ ['beep', 'boop', 'bar'], ['foo'] ]
/**
利用 reduce 将结果汇总，同时把分割条件作为一个 返回布尔值的函数传入
内部通过布尔值的判断，添加到对应的数组中
**/
7、二分搜索算法，来查找已排序数组中某元素的位置
- 尽管现在有api可以直接实现位置查找，不过这个算法思想还是可以的
const binarySearch = (arr,item) => {
// 获取首位下标
let l = 0,
r = arr.length - 1;
while(l <= r) {
// 找到中间下标
const middle = Math.floor( (l + r) / 2)
const guess = arr[middle]
// 中间值与目标值比较
if(guess == item) return middle
// 中间值 > 目标值 ? 说明目标值在左侧，则取左边中间值再比较，反之亦然
guess > item ? r = middle - 1 : l = middle + 1
}
return -1
}
binarySearch([1,2,3,4],4) // 3
- 二分搜索算法，采取折中的方式，将中间值与目标做比较，然后不断修改中间值，进而找到目标值
8、冒泡排序
const bubbleSort = arr => {
let swapped = false;
const a = [...arr];
for (let i = 1; i < a.length; i++) {
swapped = false;
for (let j = 0; j < a.length - i; j++) {
if (a[j + 1] < a[j]) {
// es6 变量交换
[a[j], a[j + 1]] = [a[j + 1], a[j]];
swapped = true;
}
}
if (!swapped) return a;
}
return a;
};
- 核心思想是将当前值a 与 下一位置值b比较，如果 a > b,就把 a和b交互位置
- 同时，一轮排序其实就可以实现最大值排最后了，所以循环次数越往后会越少，这也是 i < a.length ,j < a.length - i 的原因
- es6 的变量交换位置，更加方便了，其实也可以用于多个变量的赋值改变类似： [count, i] = [count + 1, r + 1]...
9、将字符串首字母转换为大写
// 有意思的是 这里只是通过解构的方式，就把字符串的首字符与剩余字符分开了
// 在此之前你说否还想着截取首字母再来转换？
const capitalize = ([first, ...rest], lowerRest = false) =>
first.toUpperCase() +
(lowerRest ? rest.join('').toLowerCase() : rest.join(''));
capitalize('fooBar', true); // 'Foobar'
10、链式控制异步流程
const chainAsync = fns => {
let curr = 0;
const last = fns[fns.length - 1];
// 内部实现一个函数，用于逐次从数组中提取执行函数
const next = () => {
const fn = fns[curr++];
// 提取函数与最后一个做对比，是否为最后一个函数
// 同时将这个内部函数，作为回调，传入下一个 异步函数中
fn === last ? fn() : fn(next);
};
next();
};
chainAsync([
next => {
console.log('0 seconds');
// 函数执行后，再执行传入的回调next
setTimeout(next, 1000);
},
next => {
console.log('1 second');
setTimeout(next, 1000);
},
() => {
console.log('2 second');
}
]);
- 异步的实现，其实还是回调的使用，只不过封装后，看似同步
- 好比 Promise的resolve，获取结果后，通过resolve回调出去
- Promise + async ，运用迭代器，使得可以控制函数的暂停和恢复，更加具有同步风范
11、js 实现一个剪切板
const copyToClipboard = str => {
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0
? document.getSelection().getRangeAt(0)
: false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
}
copyToClipboard('Lorem ipsum')
12、根据给定函数或者属性，统计符合条件的数组元素的个数
const countBy = (arr, fn) =>
arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => {
acc[val] = (acc[val] || 0) + 1;
return acc;
}, {});
countBy([6.1, 4.2, 6.3], Math.floor); // {4: 1, 6: 2}
countBy(['one', 'two', 'three'], 'length'); // {3: 2, 5: 1}
countBy([{ count: 5 }, { count: 10 }, { count: 5 }], x => x.count)
13、实现一个发布订阅模式
const createEventHub = () => ({
hub: Object.create(null),
emit(event, data) {
(this.hub[event] || []).forEach(handler => handler(data));
},
on(event, handler) {
if (!this.hub[event]) this.hub[event] = [];
this.hub[event].push(handler);
},
off(event, handler) {
const i = (this.hub[event] || []).findIndex(h => h === handler);
if (i > -1) this.hub[event].splice(i, 1);
if (this.hub[event].length === 0) delete this.hub[event];
}
});
const handler = data => console.log(data);
const hub = createEventHub();
let increment = 0;
// Subscribe:
hub.on('message', handler);
hub.on('message', () => console.log('Message event fired'));
hub.on('increment', () => increment++);
// Publish
hub.emit('message', 'hello world');
hub.emit('message', { hello: 'world' });
hub.emit('increment');
// Unsubscribe
hub.off('message', handler);
14、补充一点关于函数length属性
/***
* js 函数的length是表示参数的个数，需要注意的是
* 该个数指的是 函数必须接收参数的个数，且是有效参数（应当是默认值前的参数个数）
* */
function a( a,b = 10,c) {} //a.lenght = 1
a(10,'',30) // a = 10 b = '' c = 30
a(10,null,30) // a = 10 b = null c = 30
a(10,undefiend,30) // a =10 b = 10 c = 30
// 对于包含默认值的参数，只有传递 undefiend 时（或者不传）才是取默认值，其他情况均为传啥就是啥
