记录 30 seconds of code 项目个人觉得中有价值的片段或者小技巧 （一）

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 时（或者不传）才是取默认值，其他情况均为传啥就是啥