Summary of practical native APIs in JavaScript_javascript skills

Go directly to the topic

Parse string object

We all know that JavaScript objects can be serialized into JSON, and JSON can also be parsed into objects. But the problem is that if there is a "thing" that is neither JSON nor an object, it is inconvenient to convert to either one, then eval It can come in handy

var obj = "{a:1,b:2}";  // 看起来像对象的字符串
eval("("+ obj +")")   // {a: 1, b: 2}

Because eval can execute string expressions, and we want to execute the string object obj into a real object, then we need to use eval. But in order to prevent eval from executing obj with {} as a statement, we put a pair of () outside obj to let it be parsed into an expression.

& (bitwise AND)

To determine whether a number is the nth power of 2, you can AND it with itself minus one

var number = 4
(number & number -1) === 0 // true

^ (bitwise XOR)

With different third variables, you can exchange the values ​​​​of the two variables

var a = 4,b = 3
a = a ^ b //  7
b = a ^ b //  4
a = b ^ a //  3

Format Date

Want to get the time after format? Now you no longer need to get the year, month, day, hour, minute and second, you can do it in three steps

var temp = new Date();
var regex = /\//g;
(temp.toLocaleDateString() + ' ' + temp.toLocaleTimeString().slice(2)).replace(regex,'-');

// "2015-5-7 9:04:10"

Want to convert the formatted time into a time object? Directly use the Date constructor

new Date("2015-5-7 9:04:10");

// Thu May 07 2015 09:04:10 GMT+0800 (CST)

Want to convert a standard time object to a unix timestamp? valueOf gets it done

(new Date).valueOf();

// 1431004132641

Many friends also reminded me that this can quickly get the timestamp

new Date

One dollar plus

One dollar plus can quickly convert string numbers into mathematical numbers, that is,

var number = "23" 
typeof number // string
typeof +number // number

You can convert time objects into timestamps

new Date // Tue May 12 2015 22:21:33 GMT+0800 (CST)
+new Date // 1431440459887

Escaped URI

You need to pass the url as a parameter in the route, now escape it

var url = encodeURIComponent('http://segmentfault.com/questions/newest')

// "http%3A%2F%2Fsegmentfault.com%2Fquestions%2Fnewest"

Reverse escape

decodeURIComponent(url)
// "http://segmentfault.com/questions/newest"

Number

If you want to keep a few decimal places after the decimal point without having to do string interception, use toFixed to take them away

number.toFixed()   // "12346"
number.toFixed(3)  // "12345.679"
number.toFixed(6)  // "12345.678900"

The parameter range is 0~20, if not written, the default is 0

Type detection

Typeof is the most frequently used type detection method

typeof 3    // "number"
typeof "333"  // "string"
typeof false  // "boolean"

It’s good for basic (simple) data types, but once it comes to reference data types, it’s not so easy

typeof new Date()  // "object"
typeof []      // "object"
typeof {}      // "object"
typeof null     // "object"   

The first three are bearable, but null actually returns object. Are you kidding me! ! ! (ps: Actually this is a JavaScript bug that people can’t fix ꒰･◡･๑꒱ )

At this time, we will use instanceof

toString instanceof Function
// true
(new Date) instanceof Date
// true
[] instanceof Object
// true
[] instanceof Array
// true

In fact, we can find that [] and Object get true. Although we know that [] is also an object, we hope for a more accurate method to determine the type, and now it is here
Use Object.prototype.toString() to judge. In order for each object to pass the detection, we need to use Function.prototype.call or Function.prototype.apply to call

var toString = Object.prototype.toString;

toString.call(new Date)  // "[object Date]"
toString.call(new Array)  // "[object Array]"
toString.call(new Object) // "[object Object]"
toString.call(new Number) // "[object Number]"
toString.call(new String) // "[object String]"
toString.call(new Boolean) // "[object Boolean]"

It should be noted that the toString method is very likely to be overridden, so when you need to use it,
You can use the Object.prototype.toString() method directly

Implement inheritance

Look at an official example

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

Get the initialized properties and methods through call, and get the properties and methods on the prototype object through Object.create

Iteration

ES5 has a lot of iteration functions, such as map, filter, some, every, reduce, etc.

Array

The specific API is introduced in detail here.
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Glob...
Here are a few words:
Join, pop, push, reverse, shift, sort, splice, unshift will change the original array

concat,indexOf,lastIndexOf,slice,toString will not change the original array

Iteration methods such as map, filter, some, every, reduce, and forEach will not change the original array

A few points to note:

1 shift, pop will return the deleted element
2 splice will return an array composed of deleted elements, or an empty array
3 push will return the new array length
4 some stops when true
5 every Stop when there is false
6 The above iteration method can append a parameter thisArg at the end, which is the this value when executing callback.

The above is the entire content of this article, I hope you all like it.