Array

instanceof

Can instanceof determine the type?

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; 
Copy the code

Here’s why:

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

Is the result true? false?

Array.isArray(new Uint8Array(32)) 
Copy the code

Here’s why:

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

sort

Do you have any idea what the result will be? Does an exception occur? const arr = [1,undefined,2,undefined,4,undefined]; arr.sort((a,b) => { return a.name > b.name });Copy the code

Here’s why:

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 (1, 1); console.timeEnd(); console.time(); var arr = initArr2.filter((item,index) => { return index ! = = 10; }); console.timeEnd(); // Default: 13.819091796875 ms // default: 365.22021484375 msCopy the code

String

substr

Date

new Date

1.Date has compatibility problems with browsers, especially when it comes to time sorting such as startTime and endTime. Chrome has strong compatibility, while FF and Safari have insufficient compatibility.

MDN Web Docs is described as follows:

Code execution effect

  • Chrome – Space, T same effect

  • Firefox – blank, T same effect

  • Safari – blank and T have different effects

T in the Date string

2. We often see T in the Date value, so what is T?

  • For Chrome,ff, T and space are the same, marking the beginning of the time section, but Spaces don’t work in Safari, as shown above.

Boolean

new Boolean

Is the following result true? Or false?

var myFalse = new Boolean(false);   
var g = new Boolean(myFalse); 
Copy the code

Here’s why:

  • False can be obtained in the following ways:
  var bNoParam = new Boolean();
  var bZero = new Boolean(0);
  var bNull = new Boolean(null);
  var bEmptyString = new Boolean('');
  var bfalse = new Boolean(false);
Copy the code
  • To get true, do the following:
  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({}); 
Copy the code
  • From the above, we can see that myFalse is the object, so we get true.

Object

If code uses lodash, replace _. Assign or _. AssignIn with care

_.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}
Copy the code

_.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}
Copy the code

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}
Copy the code

Event

document.createEvent

Have been abandoned

var event = document.createEvent('Event'); InitEvent ('click', true, false); // Initialize a click event that can bubble and cannot be cancelled. Elem. AddEventListener ('click', function (e) {// e.target is the target element of the listener event}, false); Elem. DispatchEvent (event**); **Copy the code

New Event or New CustomEvent is recommended

const event = new Event('build');

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

// Dispatch the event.
elem.dispatchEvent(event);
Copy the code
Const event = new CustomEvent('build', {detail: em.dataset. Time});Copy the code

More recommended

A front-end development HTML introduction

Have you had a thorough understanding of the commonly used method js

Angular8 digs into Directive directives

reference

MDN web docs