How to convert different data types to each other in JS? Here are some common ways to convert different data types.

Any type to string

  • x.toString()
(1).toString()  // '1'
true.toString()  // 'true'Null.tostring () // error undefined. ToString () // error ({}).toString() //"[object Object]"
Copy the code

The toString method is valid for number and Boolean, but for null and undefined it will return an error. For object, the toSring method will always return “[Object object]”.

Console. log actually uses this principle. In theory, console.log can only accept strings.

console.log
console.log(1)
console.log((1).toString)

console.log
toString
object
key

  • String(x)

String() applies to all data types (except objects, which result in the same result as toString())

String(1)  // '1'
String(true) / /'true'
String(null)  // 'null'
String(undefined)  // 'undefined'
String({})  // "[object Object]"
Copy the code
  • x + ”

It is more powerful to use the + operator plus an empty string, which can be +null and +undefined.

1 + ' '  // '1'
true + ' '  // 'true'
obj+"";  // "[object Object]"
' ' + null  // 'null'
' ' + undefined  // 'undefined'
1 + '1'  // '11'
Copy the code

If + finds a string on either side, it tries to turn the other side into a string. + always wants to get two strings.

1 + ‘1’ Since + can only add the same type, it will try to change the type, preferably to a string, equivalent to (1).toString + ‘1’.

Any type to Boolean

  • Boolean(x)
Boolean(123); // true
Boolean("abc"); // true
Boolean({}); // true
Boolean(' '); // false
Copy the code
  • !!!!! x

Take anything backwards twice and you get a Boolean

!!!!!"abc" ; // true!!!!!' ' ; // false!!!!! {}; //true
Copy the code
  • Falsy value

Falsy is a value that is assumed to be convertible to false in a Boolean context;

0, NaN, null, undefined, ' '(empty string),false
Copy the code

Convert any type to a number

  • Number()

Using the Number function, you can convert any type of value to a numeric value. If it cannot be converted to a Number, the Number() function returns NaN.

Number(123) // 123
Number('123') // 123
Number(true) // 1
Number(null) // 0
Number('123.45 #') // NaN
Copy the code
  • parseInt()

The parseInt method is used to convert a string to an integer.

parseInt('123') / / 123Copy the code

If there is a space at the head of the string, the space is automatically removed.

parseInt('81') / / 81Copy the code

If parseInt is not a string, it is converted to a string and then converted.

ParseInt (1.23) // 1'1.23'/ / 1Copy the code

When a string is converted to an integer, it is converted one by one. If it encounters a character that cannot be converted to a number, it stops and returns the converted part.

parseInt('8a') / / 8Copy the code
  • parseFloat()

The parseFloat method is used to convert a string to a floating point number.

parseFloat('3.14') / / 3.14Copy the code

If the string conforms to scientific notation, the corresponding conversion is performed.

parseFloat('314e-2') / / 3.14Copy the code

If the string contains characters that cannot be converted to a floating-point number, it is not converted back and the converted part is returned.

parseFloat('3.14 more non - digit characters') / / 3.14Copy the code

The parseFloat method automatically filters the Spaces leading the string.

parseFloat('\ t \ n \ r12.34 \ n') / / 12.34Copy the code

NaN is returned if the argument is not a string, or if the first character of the string cannot be converted to a floating point number.

parseFloat([]) // NaN
Copy the code
  • x – 0
123-0Copy the code
  • Plus x.
+ 123  // 123
+ '1'  // -1
Copy the code

How JS data is stored in memory

What is memory, for example: When you buy an 8-gigabyte ram, the operating system takes up 512MB when it starts up, and Chrome takes up 1 gb when it starts up. Chrome allocates a certain amount of memory to each web page, which is divided between the page renderer, the web module, the browser shell, and the JS engine (V8). The JS engine divides memory into code areas and data areas, and we will only examine the data area. Data is classified into Stack memory and Heap memory. Simple types of data (such as Number, string, etc.) are stored directly in the Stack, while complex types of data (object objects) are stored in the Stack with Heap addresses.

Objects are stored by storing an address in the stack memory, forming a reference to an object that points to a location in the heap memory, so that objects can be added or removed at any time. So an object is a reference to an object. It stores addresses in the stack memory, unlike other data types that store content directly in the stack memory.

Interview questions about memory

  • Subject to a
Var a = 1 var b = a b = 2Copy the code

a
1

  • Topic 2
    var a = {name: 'a'}
    var b = a
    b = {name: 'b'} What is a.name now?Copy the code

a.name
'a'

  • The title three
    var a = {name: 'a'}
    var b = a
    b.name = 'b'What is a.name now?Copy the code

a.name
'b'

  • The title four
    var a = {name: 'a'} var b = a b = nullCopy the code

a

  • Topic five
    var a = {n:1};  
    var b = a; 
    a.x = a = {n:2};  
    alert(a.x);
    alert(b.x);
Copy the code

a.x = a = {n:2};
a
a
{n:2}
a
a
a

GC garbage collection

If an object is not referenced, it is garbage and will be collected.

    var fn = function(){}
    document.body.onclick = fn
    fn = null
Copy the code

Fn is garbage to be collected?

fn
document

If I close the page now, is FN garbage?

Fn is garbage that will be collected, because the document will not exist after the page is closed, and the objects behind it will lose reference. Three objects are connected inside, but not outside, and all three will be reclaimed.

However, IE6 has a BUG that will consider these three not garbage, will keep these three memory. As long as you don’t close the entire Internet Explorer, it’s useless to close just one TAB, as the garbage will accumulate and the memory will not be reused. IE6 does not normally mark onclick functions as garbage when the page is closed.

// The solution is to set all event listeners to null window.onunload =function(){
    document.bady.onclick = null
}
Copy the code

This is known as a memory leak, and a memory leak is a bug in the browser that causes something to be marked as garbage not to be marked as garbage, and memory to be permanently used.

Shallow copy VS deep copy

  • This is a deep-copy example
Var a = 1 var b = a b = 2 var b = a b = 2 var b = 1 var b = a b = 2 var b = 1 var b = a b = 2Copy the code

For simple types of data, assignment is a deep copy. For complex types of data (objects), it is important to distinguish between shallow and deep copies.

  • This is a shallow copy example
    var a = {name: 'frank'}
    var b = a
    b.name = 'b'
    a.name === 'b' // true
Copy the code

Because when we do something to B, A changes. Deep copy is a complete copy of Heap memory.