前言

春节不知不觉就过去了，感觉过年也不过如此。可能有的人现在早上还在梦周公，我们又得爬起来上班了。
谁叫我们是打工仔呢。好了，废话不多说，上点干货。希望为能帮到你。第一次写文章，请各方大佬轻拍。

一、一行代码就完事

武侠剧里的高手通常都是十步杀一人，千里不留行。
代码领域里的高手我认为应该同样如此，干净利落 ，毫不拖泥带水。能用一行代码搞定的事情，绝对不用两行。

1.求不定数之和

const sum = (...args) => args.reduce((prev, cur) => cur && prev + cur, 0)
console.log(sum(1,2,3,4,5)) //15

数组的reduce 方法真的是一大利器，有空的时候大家可以多研究研究

2.获取url参数

const getUrlParams = url => url.match(/([^?=&]+)(=([^&]*))/g)
            .reduce((a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a), {})
const url = "http://www.dev.to?a=1&b=2&c=3"
console.log(getUrlParams(url)) // {a:1,b:2,c:3}

活用逗号运算符，可以帮助大家缩减代码行数。举个栗子

const testComma = (obj={})=>{
  obj.age = 18
  obj.name = 'jack'
  return obj
}

可以写成下面这种形式

const testComma = (obj={})=>obj.age = 18,obj.name = 'jack',obj

3.数组去重

const removeDuplicate = arr=>[...new Set(arr)]

自带的Set不用白不用，还要自己去写算法实现的都是高手，请忽略。

4.求奇数平方和

const arr = [1,2,3,4,5]
const sum = arr.filter(x=>x%2===1).reduce((pre,cur)=>pre+cur**2,0)

二、那些骚操作

1.扩展运算符

// 求最大值
const a = [1, 2, 3];
Math.max(...a); // 3

// 克隆数组
const b = [4, 5, 6];
const c = [...b]; // c = [4, 5, 6], b !== c

//链接数组
const d = [...a, ...b]; // d = [1, 2, 3, 4, 5, 6]

// 压平数组
const e = [[1, 2], [3, 4]];
const f = [...e[0], ...e[1]]; // f = [1, 2, 3, 4]

// 字符串转字符数组
const g = [...'hello'];//['h','e','l','l','o']

//rest参数
const sum = (...args)=>args.reduce((p,c)=>p+c,0)
sum(1,2) //3
sum(1,2,3) //6

2.解构赋值

// 数组
const nums = [ 3, 6, 9, 12, 15 ];
const [
  k,              // k = 3
  l,              // l = 6
  ,               //中间跳过了9
  ...n            // n = [12, 15] 还可以通过...再接收剩余的重新生成一个数组
] = nums;
//简单对象
const obj = { a: 1, b: 2, c: 3, d: 4 };
const {
  a,              // a = 1
  c: d,           // d = 3 解构时可以跟冒号重新命名，此时相当于重新声明了一个变量d用于接收c的值
  ...rest         // rest = { b: 2, d: 4 } 收集剩余的重新生成一个对象
} = ob
//嵌套对象
const nested = { a: { b: 1, c: 2 }, d: [1, 2]};
const {
  a: {
    b: f,         // f = 1
    ...g          // g = { c: 2 }
  },
  ...h            // h = { d: [1, 2]}
} = nested; //大家自行领会^_^
//终极大招
const arr = [ 5, 'b', 4, 'd', 'e', 'f', 2 ];
const {
  6: x,           // x = 2
  0: y,           // y = 5
  2: z,           // z = 4
  length: count,  // count = 7
  name = 'array', // name = 'array' (not present in arr)
  ...restData     // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
} = arr;

3.暂停函数

有时候我们可能希望我们的代码能暂停几秒钟再执行后面的方法，如果不想用回调，可以在同步方法用这种方式

const sleepSync = (ms) => {
  const end = new Date().getTime() + ms;
  while (new Date().getTime() < end) { /* 啥事也不干，干等着 */ }
}

const printNums = () => {
  console.log(1);
  sleepSync(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2和3需要等500毫秒才会打印)

或者有可能你想在异步函数中使用

const sleep = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // 1,2,3(2和3需要等500毫秒才会打印)

4.实现range方法

有时候你可能想要用python里面的range方法，那就自己造一个。

1.首先range可以源源不断生成数据，那我们就需要一个生成器。

function* generateRange(end, start = 0, step = 1) {
  let x = start - step;
  while(x < end - step) yield x += step;
}

const gen5 = generateRange(5);
let x = gen5.next();

while (!x.done) {
  console.log(x.value);
  x = gen5.next();
} // Logs: 0, 1, 2, 3, 4

2.因为我们要循环，所以要添加一个迭代器Symbol.iterator

const iterableXx = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
  }
};

console.log([...iterableX]); // [1, 2]

3.把他们放到一起

const range = (end, start = 0, step = 1) => {
  function* generateRange() {
    let x = start - step;
    while(x < end - step) yield x += step;
  }
  return {
    [Symbol.iterator]: generateRange
  };
}

console.log([...range(7)]); // [0, 1, 2, 3, 4, 5, 6]
for (let i of range(8, 2, 2)) console.log(i); // Logs: 2, 4, 6

学过python的朋友，是不是感觉有那味儿了？

[每天学一点]这点javascript代码可能会让你看起来像个高手

前言