原生JS常用方法汇总

时间戳处理

• 时间戳格式化输出

/**
 * @param {Number} 时间标签 e.g. 1463368789
 * @param {String} 格式 e.g. 'yyyy-mm-dd hh:MM'
 * @returns {String} e.g. '2016-05-16 11:19'
 */
function parseTime(time, cFormat) {
  if (arguments.length == 0) {
    return ''
  }
  formatter = formatter || 'yyyy-mm-dd hh:MM:ss'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (('' + time).length === 10) time = parseInt(time) * 1000
    date = new Date(time)
  }
  const formatObj = {
    'y': date.getFullYear(),    // 年
    'm': date.getMonth() + 1,   // 月
    'd': date.getDate(),        // 日
    'h': date.getHours(),       // 时
    'M': date.getMinutes(),     // 分
    's': date.getSeconds(),     // 秒
    'a': date.getDay(),         // 星期
    'q': Math.floor((date.getMonth() + 3) / 3), // 季度   
    'S': date.getMilliseconds() // 毫秒   
  }
  return formatter.replace(/(y|m|d|h|M|s|a|q|S)+/g, kw => {
    const key = kw.charAt(0)
    let value = formatObj[key] || 0
    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
    const len = Math.min(kw.length, 4)
    value = ('0000' + value).slice(-len)
    return value
  })
}

url参数和对象互转

// url的search转对象
function getQueryObject(url) {
  url = url === null ? window.location.href : url
  const search = url.substring(url.lastIndexOf('?') + 1)
  const obj = {}
  const reg = /([^?&=]+)=([^?&=]+)/g
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1)
    let val = decodeURIComponent($2)
    // val = String(val)
    obj[name] = val
    return rs
  })
  return obj
}

console.log(getQueryObject('https://www.xxx.com/p/9744241.html?a=123&b=456&c&d=&e=ddd'))

// 将 query 转化成url参数 --> 对象转成 ?name=wmm&age=18&job=fe
function makeQuery(obj) {
  const params = Object.entries(obj)
  const str = params.reduce((result, entry) => {
    result.push(entry.join('='))
    return result
  }, []).join('&')
  return `?${str}`
}

console.log(makeQuery({
  name: 'wmm',
  age: 18,
  job: 'fe'
}))

洗牌函数

// 原地洗牌算法
function shuffle(arr) {
  for (let i = 0; i < arr.length; i++) {
    let randomIndex = i + Math.floor(Math.random() * (arr.length - i))
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  }
  return arr
}
console.log(shuffle([1, 2, 3, 4, 5, 6, 7, 8]))


// 非原地洗牌算法
function shuffle2(arr) {
  let _arr = []
  while(arr.length) {
    let randomIndex = Math.floor(Math.random() * arr.length)
    _arr.push(arr.splice(randomIndex, 1)[0])
  }
  return _arr
}
console.log(shuffle2([1, 2, 3, 4, 5, 6, 7, 8]))

try-catch处理

async function errorCaptured(asyncFunc) {
  try {
    let res = await asyncFunc()
    return [null, res]
  } catch (e) {
    return [e, null]
  }
}
// let [err, res] = await errorCaptured(asyncFunc)

动态引入js文件

原生JS实现动态加载js文件，并在加载成功后执行回调函数的方法

要实现这样的功能，可以使用<script>元素的load事件（IE9+、chrome、FireFox等）和onreadystatechange事件（IE8以下）

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.charset = 'UTF-8'
    script.src = src
    if (script.addEventListener) {
      script.addEventListener('load', function () {
        resolve()
      }, false)
      script.addEventListener('error', function () {
        reject(new Error('加载失败'))
      }, false)
    } else if (script.attachEvent) {
      script.attachEvent('onreadystatechange', function () {
        const target = window.event.srcElement
        if (target.readyState === 'loaded') {
          resolve()
        }
      })
    }
    document.getElementsByTagName('head')[0].appendChild(script)
  }) 
}
loadScript('https://code.jquery.com/jquery-3.4.1.js').then(res => {
  console.log(666, jQuery)
}).catch(err => {
  console.log(err)
})

对象参数

参数为一个对象，如果使用参数某属性的默认值，可以不传这个属性

JQuery中可以使用extend方法进行对象合并

function func(options) {
  var defaults = {
    name: '喵巨人',
    age: 18
  }
  // jQuery.extend(defaults, options)
  // console.log(defaults)  // { age: 19, name: '喵巨人' }

  var opts = $.extend({}, defaults, options)
  console.log(opts) // { age: 19, name: '喵巨人' }
}
func({ age: 19 })

ES6中使用Object.assign方法进行对象合并

function func(options) {
  var defaults = {
    name: '喵巨人',
    age: 18
  }
  var opts = Object.assign({}, defaults, options)
  console.log(opts) // { age: 19, name: '喵巨人' }
}
func({ age: 19 })

深拷贝

对象、数组的深拷贝实现
简单的对象或者数组，比较常用的JSON.parse(JSON.stringify(obj))
以下方法适用于较为复杂的对象或者数组的深拷贝

function deepClone(obj) {
  if (!obj && typeof obj !== 'object') {
    throw new Error('error arguments', 'shallowClone');
  }
  const newObj = obj.constructor === Array ? [] : {};
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === 'object') {
      newObj[key] = obj[key].constructor === Array ? [] : {};
      newObj[key] = deepClone(obj[key]);
    } else {
      newObj[key] = obj[key]
    }
  })
  return newObj
}

// 另一种写法
function deepClone(obj) {
  // 过滤特殊情况
  if (obj === null) return null
  if (typeof obj !== 'object') return obj
  if (obj instanceof RegExp) return new RegExp(obj)
  if (obj instanceof Date) return Date(obj)
  // 不直接创建空对象目的：因为克隆的结果和之前保持相同的所属类
  let newObj = new obj.constructor
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key])
    }
  }
  return newObj
}

console.log(deepClone({
  a: 100,
  b: [10,20,30],
  c: { x: 10 },
  d: /^\d+$/
}))

获取随机颜色

生成一个随机颜色的色值,#ffffff的形式

function getRandomColor() {
  const r = Math.round(Math.random() * 255);
  const g = Math.round(Math.random() * 255);
  const b = Math.round(Math.random() * 255);
  const color = r << 16 | g << 8 | b;
  return "#" + color.toString(16);
}

生成随机码

随机生成一串随机码，要求有的位置是固定的数字，有的位置做一些处理。用于校验

function guid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    let r = Math.random() * 16 | 0;
    let v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

备注：

• (r & 0x3 | 0x8)：按照位进行与或计算。比如r=15即1111；r & 0x3就是0011；r & 0x3 | 0x8就是1011即11
• v.toString(16)：将数字转为字符，按照十六进制的方式转
• x：所在位置随机替换成一个字母
• y：所在位置随机替换成一个计算后的字母，计算出来的是10**
• 4：所在位置不替换，保留原来的4

m个n范围内的不重复随机数（m<n）

高效产生m个n范围内的不重复随机数（m<n）

var getRandomNumber = function(n, m){
  if(typeof n !== 'number' || typeof m !== 'number'){
    throw Error('m和n必须是数字！');
  }

  if(m >= n){
    throw Error('m必须小于n！');
  }

  var arr = [],
    result = [],
    i = 0,
    j = 0,
    tempNumber = 0,
    randomNumber = 0;

  // 在两个数值间产生一个随机数
  function selectFrom(lowerValue, upperValue) {
    var choices = upperValue - lowerValue + 1;
    return Math.floor(Math.random() * choices + lowerValue);
  }

  // 建一个n个元素的一维数组，放0 ~ n
  for(; i < n; i++){
    arr[i] = i;
  }

  // 开始取 j ~ n-1 范内的随机数。把每次取到的随机数作为位置（数组的下标）与位置（数组的下标）为 j 的数交换数值
  // 比如第一次去到32，将arr[32]和arr[0]互换，这样arr数组的1~n-1位置就没有32这个数了；然后再从1~n-1之间取随机数，以此类推
  for(; j < m; j++){
    randomNumber = selectFrom(j, n - 1);
    tempNumber = arr[j];
    arr[j] = arr[randomNumber];
    arr[randomNumber] = tempNumber;
    result.push(arr[j]);
  }

  return result;
}

console.log(getRandomNumber(100, 50));

特殊字符替换

• SEO优化，url中可能会有产品名称等字符串
• 字符串中的特殊字符用-代替

function getTitleEncode(title) {
  if (typeof title !== 'string') {
    return title
  }
  // return title.replace(/[\s\\?/:*|\"]+/g, '-')
  title = encodeURIComponent(title)
  return title.replace(/(%[0-9A-Fa-f]{2})+/g, '-')
}
let str = 'Soldiers Inc: Mobile Warfare'
console.log(getTitleEncode(str))

其他

• Javascript小技巧