原生js开发中存在的点滴坑

892 阅读2分钟

Array

instanceof

请问下,instanceof 一定能判断类型吗?

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]
arr instanceof Array; 

原因如下:
o instanceof Array works correctly only if o is an array created by that page's original Array constructor(or, equivalently, by use of an array literal in that page)

isArray

请问,如下结果是true? false?

Array.isArray(new Uint8Array(32)) 

原因如下:

 # [object Uint8Array]
 Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
 };

sort

# 请问,你想到结果是什么吗?是否会发生异常?
const arr = [1,undefined,2,undefined,4,undefined];
arr.sort((a,b) => {
   return a.name > b.name
});

原因如下

If compareFunction is supplied, all non-undefined array elements are sorted according to the return value of the compare function (all undefined elements are sorted to the end of the array, with no call to compareFunction)

filter or splice

var initArr = [];
var initArr2 = [];
var number = 10000000;
for(var i = 0;i < number;i++ ){
 initArr[i] = i;
 initArr2[i] = i;
}
console.time();
initArr.splice(10,1);
console.timeEnd();

console.time();
var arr = initArr2.filter((item,index) => {
 return index !== 10;
});
console.timeEnd();

// default: 13.819091796875 ms
// default: 365.22021484375 ms

String

substr

Date

new Date

1.Date存在浏览器兼容问题,尤其在涉及startTime,endTime等时间排序,Chrome兼容性强,FF,Safari兼容性存在不足。

MDN web docs介绍如下:

code运行效果

  • chrome - 空格、T一样效果

  • firefox - 空格、T一样效果

  • Safari - 空格、T不一样效果

Date字符串中的T

2.Date值中,我们常常看到T ,那么T是干嘛的呢?

  • 针对chrome,ff而言,T跟空格都是一样的,标志着时间部分的开始的,但是在safari空格不能生效,上图即可表明。

Boolean

new Boolean

请问如下结果是true? 还是false ?

var myFalse = new Boolean(false);   
var g = new Boolean(myFalse); 

原因如下

  • 得到false值有如下方式:
  var bNoParam = new Boolean();
  var bZero = new Boolean(0);
  var bNull = new Boolean(null);
  var bEmptyString = new Boolean('');
  var bfalse = new Boolean(false);
  • 得到true,有如下方式:
  var btrue = new Boolean(true);
  var btrueString = new Boolean('true');
  var bfalseString = new Boolean('false');
  var bSuLin = new Boolean('Su Lin');
  var bArrayProto = new Boolean([]);
  var bObjProto = new Boolean({}); 
  • 从上,我们可以看出,myFalse是对象,那么我们得到的就是true.

Object

如果code中使用lodash,那么替换_.assign or _.assignIn,需要留意

_.assignIn

function Foo() {
 this.a = 1;
}

function Bar() {
 this.c = 3;
}

Foo.prototype.b = 2;
Bar.prototype.d = 4;

_.assignIn({ 'a': 0 }, new Foo(), new Bar());
// {a: 1, b: 2, c: 3, d: 4}

_.assign

function Foo() {
 this.a = 1;
}

function Bar() {
 this.c = 3;
}

Foo.prototype.b = 2;
Bar.prototype.d = 4;

_.assign({ 'a': 0 }, new Foo(), new Bar());
// {a: 1, c: 3}

Object.assign

function Foo() {
 this.a = 1;
}

function Bar() {
 this.c = 3;
}

Foo.prototype.b = 2;
Bar.prototype.d = 4;

Object.assign({ 'a': 0 }, new Foo(), new Bar());
// {a: 1, c: 3}

Event

document.createEvent

已废弃

var event = document.createEvent('Event');

// 初始化一个点击事件,可以冒泡,无法被取消
event.initEvent('click', true, false);

// 设置事件监听.
elem.addEventListener('click', function (e) {
  // e.target 就是监听事件目标元素
}, false);

// 触发事件监听
elem.dispatchEvent(event**);**

建议采用new Event or new CustomEvent

const event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);
# detail 字段传递参数
const event = new CustomEvent('build', { detail: elem.dataset.time });

更多推荐

一名前端开发のHTML入门

js这些常用的method,你深入了解过吗

Angular8深入了解Directive指令

参考文献

MDN web docs