常用代码

作者: snakeninja110 | 来源:发表于2017-08-16 16:54 被阅读0次

记录一些平时项目中用到的代码

ES7相关

Async/Await

// http://cnodejs.org/topic/5640b80d3a6aa72c5e0030b6
var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            // 返回 ‘ok’
            resolve('ok');
        }, time);
    })
};

var start = async function () {
    let result = await sleep(3000);
    console.log(result); // 收到 ‘ok’
};

await可以把asnyc当成一个同步函数处理，await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。
基本规则
1.async 表示这是一个async函数，await只能用在这个函数里面。
2.await 表示在这里等待promise返回结果了，再继续执行。
3.await 后面跟着的应该是一个promise对象

ES6相关

参数拼接

`这里就是参数${singer.id}前面就是参数` // ES5: '这里就是参数'+singer.id+'前面就是参数'

push, concat

hot.push(...ret) // push写法
[...hot, ...ret] // 数组合并写法: 扩展运算符是三个点“...”，ES5写法 hot.concat(ret)

数组去重

// ES6
// 1: "SET"
let arr = [1,2,3,3,'1','1',NaN,NaN]
function dedupe (array) {
  return Array.from(new Set(array))
}
dedupe(arr) // [1, 2, 3, "1", NaN]
// 正常情况下，NaN === NaN 返回的是false，但是在set里，一样能够帮你去重

// 2: "filter"
arr.filter((item, index) => arr.indexOf(item) === index)

// 3: "reduce"
arr.reduce((unique, item) => unique.includes(item) ? unique : [...unique, item], []);

// ES5
var arr=[0,2,3,5,6,9,2];
function dedupeEs5 (array) {
  var new_arr=[];
  for(var i = 0; i < array.length; i++) {
    var items = array[i];
    //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
    if(new_arr.indexOf(items) === -1) {
    　　new_arr.push(items);
    }
  }
  return new_arr;
}
dedupeEs5(arr); //[0,2,3,5,6,9]

function unique(array) {
  var result = [], seen;
  array.sort();
  for(var i = 0; i < array.length; i++) {
    var value = array[i];
    if (!seen || seen !== value) {  
        // 第一次!seen为true，之后都为false
        result.push(value);   
    }
    seen = value;
  }
  return result;
}

// 速度最快， 占空间最多（空间换时间） 
// 新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增该键并放入新数组。注意 点： 判断是否为js对象键时，会自动对传入的键执行“toString()”，不同的键可能会被误认为一样；例如： a[1]、a["1"] 。解决上述问题还是得调用“indexOf”。
function unique2(array){ 
  var n = {}, r = [], len = array.length, val, type; 
  for (var i = 0; i < array.length; i++) { 
    val = array[i]; 
    type = typeof val; 
    if (!n[val]) { 
      n[val] = [type]; 
      r.push(val); 
    } else if (n[val].indexOf(type) < 0) { 
      n[val].push(type); 
      r.push(val); 
    } 
  } 
  return r; 
}

一些常用方法

// 判断一个object内是否有值（适用于vue等框架）
function isNullOrEmpty(obj) {
    if (isSet(obj)) {
        if (obj.length && obj.length > 0) {
            return false;
        }

        for (var key in obj) {
            if (hasOwnProperty.call(obj, key)) {
                return false;
            }
        }
    }
    return true;
}

function isSet(val) {
    if (val != undefined && val != null) {
        return true;
    }
    return false;
}

// 判断是否是移动端简单方法
let inTouch = "ontouchstart" in window.document;

// 不用临时变量交换2个值
function swap(a, b) {
  b = b - a;
  a = a + b;
  b = a - b;
  return [a, b];
}
// 交换数组内2个下标的值
arr.splice(x - 1, 1, …arr.splice(y - 1, 1, arr[x - 1]))

// 取范围内随机数
function getRandomInt (min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

// 洗牌（乱序）
function shuffle (arr) {
  let _arr = arr.slice()
  for (let i = 0; i < _arr.length; i++) {
    let j = getRandomInt(0, i)
    [arr[i], arr[j]] = [arr[j], arr[i]]
  }
  return _arr
}

// 去抖
function debounce (func, delay) {
  let timer

  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

function insertArray (arr, val, compare, maxLen) {
  const index = arr.findIndex(compare) //compare为一个比较函数
  if (index === 0) { // 为0表示就在当前第一位
    return
  }
  if (index > 0) { // 如果存在则删除
    arr.splice(index, 1)
  }
  arr.unshift(val) // 在首位添加
  if (maxLen && arr.length > maxLen) { // 大于最大值就删除末位
    arr.pop()
  }
}

function deleteFromArray (arr, compare) {
  const index = arr.findIndex(compare)
  if (index > -1) {
    arr.splice(index, 1)
  }
}

正则表达式

  // 邮箱
  var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;

dom操作

export function createDom(tpl) {
    let container = document.createElement('div');
    container.innerHTML = tpl;
    return container.childNodes[0];
};

export function addEvent(el, type, fn, capture) {
    el.addEventListener(type, fn, !!capture);
};

export function removeEvent(el, type, fn, capture) {
    el.removeEventListener(type, fn, !!capture);
};

export function hasClass(el, className) {
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
    return reg.test(el.className);
};

export function addClass(el, className) {
    if (hasClass(el, className)) {
        return;
    }

    let newClass = el.className.split(' ');
    newClass.push(className);
    el.className = newClass.join(' ');
};

export function removeClass(el, className) {
    if (!hasClass(el, className)) {
        return;
    }

    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
    el.className = el.className.replace(reg, ' ');
};

JSON解析

1.eval()方法

var data = " // json字符串
{ 
root: 
  [ 
    {name:'1',value:'0'}, 
    {name:'6101',value:'北京市'}, 
    {name:'6102',value:'天津市'}, 
    {name:'6103',value:'上海市'}, 
    {name:'6104',value:'重庆市'}, 
    {name:'6105',value:'渭南市'}, 
    {name:'6106',value:'延安市'}, 
    {name:'6107',value:'汉中市'}, 
    {name:'6108',value:'榆林市'}, 
    {name:'6109',value:'安康市'}, 
    {name:'6110',value:'商洛市'} 
  ]
}";  
var dataObj=eval("("+data+")"); // 转换为json对象

2.对于服务器返回的JSON字符串，如果jQuery异步请求将type（一般为这个配置属性）设为“json”，或者利用 $.getJSON()方法获得服务器返回，那么就不需要eval()方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$ .getJSON方法为例说明数据处理方法：

$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){ 
// 此处返回的data已经是json对象

3.使用Function对象来完成

var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();
// 此时的data就是一个会解析成一个 json对象了.

CSS相关

垂直居中

<div class="block" style="height: 300px;">
    <div class="centered">
        <h3>haorooms案例题目</h3>
        <p>haorooms案例内容，haorooms案例内haorooms案例内容</p>
    </div>
</div>
// flex
.block{
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  background: #ddd
}

//伪类
.block{
  &:before{
    content: '';display: inline-block; height: 100%; vertical-align: middle;
  }
  .centered{
    display: inline-block; vertical-align: middle; width: 50%;
  }
}

1px线

border-top-1px($color)
  &:before, &:after
    display: block
    position: absolute
    border-top: 1px solid $color
    left: 0
    width: 100%
    content: ' '
  &:before
    display: block
    top: 0
  &:after
    display: none
    bottom: 0

border-bottom-1px($color)
  &:before, &:after
    display: block
    position: absolute
    border-top: 1px solid $color
    left: 0
    width: 100%
    content: ' '
  &:before
    display: none
    top: 0
  &:after
    display: block
    bottom: 0

flex

flex-box()
  display: -ms-flexbox
  display: -webkit-box
  display: -webkit-flex
  display: flex

flex()
  -ms-flex: 1 1 0.000000001px
  -webkit-box-flex: 1
  -webkit-flex: 1
  flex: 1
  -webkit-flex-basis: 0.000000001px
  flex-basis: 0.000000001px
  width: 1%