JS我不知道的技巧

行者、空山/2019-03-07 13:55

12 min read

最大值

Math.max(10,2,33,55); //55
//针对数组
Math.max(...[10,2,33,55]);

数组，字符串去重

// 去除数组的重复成员
[...new Set(array)]
//字符串去重
[...new Set('ababbc')].join('')

关于箭头函数的疑惑

let test = {bar:()=>{console.log(this)}};
function scope(){
	let test2 = {bar:()=>{console.log(this)}};
	test.bar();
	test2.bar();
}
let t = {run:scope};
t.run();

函数运行时（执行环境）会有一个this参数传递进来。
对象不会运行，不存在this。
箭头函数没有this，this是外层执行作用域上的一个变量，外层执行作用域的this指向由绑定规则决定。

关于取整

~~3.122222

//3

deepGet

当对象嵌套层级太深时，可以使用这个方法来获取你想要的值。

const deepGet = (obj, keys) => keys.reduce((xs, x) => (xs && xs[x] ? xs[x] : null), obj);

let index = 2;
const data = {
  foo: {
    foz: [1, 2, 3],
    bar: {
      baz: ['a', 'b', 'c']
    }
  }
};
deepGet(data, ['foo', 'foz', index]); // get 3
deepGet(data, ['foo', 'bar', 'baz', 8, 'foz']); // null

深拷贝

function deepClone(obj, cache = []){
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  const has = cache.filter(c => c.orignal === obj)[0];
  if (has) {
    return has.copy;
  }

  const copy = Array.isArray(obj) ? [] : {};
  cache.push({
    orignal: obj,
    copy
  });

  Object.keys(obj).forEach(key => {
    copy[key] = deepClone(obj[key], cache);
  });
  return copy;
}

const a = { foo: 'bar', obj: { a: 1, b: 2 } };
const b = deepClone(a); // a !== b, a.obj !== b.obj

挖掘

const dig = (obj, target) =>
  target in obj
    ? obj[target]
    : Object.values(obj).reduce((acc, val) => {
      if (acc !== undefined) return acc;
      if (typeof val === 'object') return dig(val, target);
    }, undefined);


const data = {
  level1: {
    level2: {
      level3: 'some data'
    }
  }
};
dig(data, 'level3'); // 'some data'
dig(data, 'level4'); // undefined

生成随机整数

const randomNum = (min,max)=>{
	max || (max=min,min=0)
	return  parseInt(Math.random()*(max-min+1)+min,10);
}

axios缺失content-type

在浏览器端使用的时候，post请求如果没有带data，会缺失content-type这个头部信息。这是因为axios在发请求时做了一次过滤，当data为空，会主动删除content-type。 axios源码如下

// Add headers to the request
  if ('setRequestHeader' in request) {
    utils.forEach(requestHeaders, function setRequestHeader(val, key) {
      if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
        // Remove Content-Type if data is undefined
        delete requestHeaders[key];
      } else {
        // Otherwise add header to the request
        request.setRequestHeader(key, val);
      }
    });
  }

其实应该删除，因为没有data（即请求体/body/request-payload），content-type确实没必要。