Javascript 小知识

获取文件的后缀名

// 获取文件扩展名
function getFileExtension(filename) {
	return filename.slice(((filename.lastIndexOf('.') - 1) >>> 0) + 2);
}

console.log('>>>:', getFileExtension('filename.xsl')); // >>>: xsl
console.log('>>>:', getFileExtension('.hidefile')); // >>>:
console.log('>>>:', getFileExtension('filename')); // >>>:
console.log('>>>:', getFileExtension('filename.xx.apk')); // >>>: apk

filter 数据去重

const deduped = [1, 1, 'a', 'a'].filter(function (el, i, arr) {
  return arr.indexOf(el) === i;
});

console.log(deduped); // [ 1, 'a' ]

简单获取 unix 时间戳

const dateTime = +new Date();
const timestamp = Math.floor(dateTime / 1000);

console.log(timestamp);

简单监听 dom 事件

function handleEvent(
  eventName,
  { onElement, withCallback, useCapture = false },
  thisArg
) {
  const element = onElement || document.documentElement;
  function handler(event) {
    if (typeof withCallback === 'function') {
      withCallback.call(thisArg, event);
    }
  }
  handler.destroy = function () {
    return element.removeEventListener(eventName, handler, useCapture);
  };
  element.addEventListener(eventName, handler, useCapture);
  return handler;
}

const handleClick = handleEvent('click', {
  onElement: document.getElementById('main'),
  withCallback: (event) => {
    console.log('Tada!');
  },
});

你应该在相等比较中使用 Object.is()

0 == ' '           //true
null == undefined  //true
[1] == true        //true
  
NaN === NaN //false 
Object.is(0 , ' '); //false
Object.is(null, undefined); //false
Object.is([1], true); //false
Object.is(NaN, NaN); //true

测量javascript代码块性能

console.time('Array initialize');
var arr = new Array(100);
var len = arr.length;
for (var i = 0; i < len; i++) {
  arr[i] = new Object();
}
// Array initialize: 0.054931640625 ms
console.timeEnd('Array initialize');

纯JS监听document是否加载完成

// 方法一
let stateCheck = setInterval(() => {
  if (document.readyState === 'complete') {
    clearInterval(stateCheck);
    console.log('document 加载完成');
    //...
  }
}, 100);

//方法二
document.onreadystatechange = () => {
  console.log(document.readyState);
  if (document.readyState === 'complete') {
    console.log('document 加载完成');
    //...
  }
};

用数组建立一个简单的循环

function makeLooper(arr) {
  arr.loopIdx = 0;
  arr.current = function() {
    this.loopIdx = ( this.loopIdx ) % this.length;
    return arr[this.loopIdx]
  }

  arr.next = function() {
    this.loopIdx++;
    return this.current();
  }

  arr.prev = function() {
    this.loopIdx--;
    return this.current()
  }
}

var aList = ['A','B','C','D','E']
makeLooper(aList)
console.log(aList.current())  // A
console.log(aList.next())     // B
console.log(aList.next())     // C
console.log(aList.prev())     // B

可以接受单参数与数组的方法

function printUpperCase(words) {
  //你只要把任何东西连接到一个数组. Array.concat可以接受一个数组也可以接受单个参数。
  var elements = [].concat(words || []);
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].toUpperCase());
  }
}

printUpperCase('cactus');
printUpperCase(['cactus', 'bear', 'potato']);

对数组洗牌

function shuffle(arr) {
  let i, j;
  for (i = arr.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a);
console.log(b); // 打乱的数组

获取浏览器信息

const browser = {
  versions: function () {
    var ua = navigator.userAgent;
    var app = navigator.appVersion;
    return {
      iOS: /(iPhone|iPad|iPod|IOS)/i.test(ua),
      android: /android/i.test(ua),
      wechat: /microMessenger/i.test(ua),
    };
  },

  language: (
    navigator.browserLanguage || navigator.language
  ).toLowerCase(),
};