preface

Today we’re going to take a closer look at implicit conversions in javascript. We’re going to look at the process of implicit conversions in detail through examples of implicit types that can occur in various situations.

How to convert – prior knowledge

1. Object type conversion

When an object type is converted, toPrimitive, an internal JS method, is called. This method takes two parameters, one for the object to be converted, and the other method takes an expected type, string or number.

  • When the expected value isnumberwhen
    • Will be calledvalueOfMethod, if the value returned is not the original value, the call continuestoStringMethods.
  • When the expected value is string
    • Will be calledtoStringMethod, if the value returned is not the original value, the call continuesvalueOfMethods.

The valueOf method

object The return value
Array Returns the array object itself.
Boolean Boolean value.
Date The stored time is millisecond UTC from midnight on January 1, 1970.
Function The function itself.
Number A numeric value.
Object The object itself. This is the default.
String String value.
Math and Error objects do not have valueOf methods.

The toString method

object The return value
Array A comma-separated string
Boolean ‘true’ or ‘false’
Date A string in American English date format
Function Function string
Number Convert to string
Object “[object Object]”
Math “[object Math]”
RegExp String of regular expressions
Error “function Error() { [native code] }”

2. Change the original type to number

Primitive data type The converted value
Numeric types Don’t make any changes
Null character 0
Non-empty string Change the data content within a character to data, and if there are other symbols, such as Chinese, to NaN
true 1
false 0
null 0
undefined NaN
NaN NaN

3. Convert the original type to string

Primitive data type The converted value
Numeric types Character representation of a numeric type
string Don’t make any changes
null “Null”
undefined “Undefined”
null 0
undefined NaN
Boolean type True to ‘true’,false to ‘false’

4. Convert other types to Boolean

Primitive data type The converted value
0 false
Non-zero number true
NaN false
Null character false
null false
undefined false
Non-empty string true
Non-null object type true

When do implicit type conversions occur

1. +No.

The + sign is special and can be used as either an arithmetic operator for addition or as a string concatenator

  • 1.1 Arithmetic operators (dividestringWhen primitive data types outside the type are added)
    • A non-numeric type is converted to a numeric type

Ex. :

1+null
//1
1+undefined
//NaN
1+true
//2
true + null
//1
true + undefined
//NaN
Copy the code
  • 1.2 String concatenation (stringType and when referencing data types)
    • nonstringThe type is converted tostringtype

Ex. :

[]+[]
//""
[]+{}
//"[object Object]"
true+[]
//"true"
true+{}
//"true[object Object]"
undefined+[]
//"undefined"
undefined + {}
//"undefined[object Object]"
Copy the code

Resolution:

  • The original data type is converted to a number when performing arithmetic operationsNumber()Methods (e.g.null,boolean,undefinedEtc.)
  • When a string concatenation is made, the reference data type calls itselftoStringMethod, if it returns something other than the original value, continues to call itselfvalueOfMethod, non-reference data type:v.isString()If it istrue, it will callv.toString(). Otherwise, it converts the value to a string.

2. Arithmetic operators other than plus (- * /)

  • Non-numeric types are converted to numeric types
    • Called if it is a raw data typeNumber()Method to convert
    • Call itself if it is a reference data typevalueOfMethod is called if it is not the original valuetoStringMethod is called if it is not a numberNumber()Converts, and returns if it is not a numberNaN.
10-'1'
// 9
10-true
// 9
10-[]
//10
10-null
//10
10-undefined
//NaN
10-{}
//NaN
Copy the code

3. The logical operators (&& | |!)

  • A non-Boolean type is converted to a Boolean type
    • a&&bifafortrue, will returnb; ifaforfalse, will returna
    • a||bifafortrue, will returna; ifaforfalseWill returnb
    • ! aifaIf a is a non-Boolean value, it is converted to a Boolean value and then negated
    • The reference data type is always converted to a Booleantrue
1&&2 //2 []&&2 //2 2&&{} //{}! [] //false ! {} //falseCopy the code
Tip:

!!!!! A directly converts a non-Boolean value to a Boolean value.

!!!!! {} //true !! [] //true !! 0 //falseCopy the code

If () 4

  • Converts the value in parentheses to a Boolean type
if({}){
  console.log(1)
}
//1
if(null){
  console.log(1)
}else{
  console.log(2)
}
//2
Copy the code

5. Compare operators ==, >, <, etc

  • nullwithundefinedfor= =No conversion takes place when comparing, always returntrue.
  • The reference data type is first converted tostring(the first callvalueOf, after the calltoString) and convert tonumber
  • if= =The left and right are reference data types, and address comparisons are made
Undefined ==null //true 0==[] //true []==[] //false The addresses of the two arrays are differentCopy the code

At the end

In many excellent framework convenient for us to develop at the same time, or need to know more about some native JS knowledge, blacksmith also need their own hard, mutual encouragement.