Full analysis of JavaScript basics (Part 2)

Data type (emphasis)

●It refers to the classification of the data we store in memory. In order to facilitate data management, the data is divided into different types. ●
We usually divide it into two categories: basic data types and complex data types (reference data types)

basic data type

●The basic data types in js are divided into the following types

Numerical type (number)

●Contains all numbers and numerical related content
○Integer: 100, -100, 234
○Floating point number: 100.234, -0.456
○Scientific notation: 10e5
○Representation in other bases
■Binary: 0b100
■Octal: 0o100
■Hexadecimal : 0x100
○Infinity: Infinity
○Not a Number: NaN

// 整数
var n1 = 100
var n2 = -100
// 浮点数
var n3 = 100.2
var n4 = -100.2
// 科学记数法
// e5 => 指 10 的 5 次方
// 10e5 => 指 10 * 10的5次方
var n5 = 10e5
// 其他进制表示
var n6 = 0b100
var n7 = 0o100
var n8 = 0x100

String type (string)

●Everything surrounded by quotes
○Single quotes ( '' )
○Double quotes ( " " )
○Back quotes ( `` )

var s1 = 'hello world'
var s2 = "hello world"
var s3 = `hello world`
console.log(s1)
console.log(s2)
console.log(s3)

●Attention

No matter what kind of quotation marks, they must appear in pairs

Various quotation marks can be nested before each other, but they cannot be nested by themselves

The string defined by backticks can be written in a new line, and variables can be parsed directly in the string using the form of ${}

// 1. 可以换行书写
var str = `
  hello
  world
  你好 世界
`
console.log(str)

// 2. 可以直接在字符串内解析变量
var age = 18
// 单引号 和 双引号 不具备解析变量的能力
var s1 = '我是小千, 我今年 ${ age } 岁了'
console.log(s1)

var s2 = `我是小千, 我今年 ${
      
       age } 岁了`
console.log(s2)

// 2. 可以直接在字符串内解析变量
var age = 18
// 单引号 和 双引号 不具备解析变量的能力
var s1 = '我是小千, 我今年 ${ age } 岁了'
console.log(s1)

var s2 = `我是小千, 我今年 ${
      
       age } 岁了`
console.log(s2)

Boolean type (boolean)

●When expressing affirmation or negation, the corresponding Boolean data in the computer
●There are only two (true or false)
●For affirmative data use true, and 1 is stored in the computer
●For negative data, use false, which is stored in the computer is 0

/*
  布尔 Boolean
    + true 表示真, 在计算机内存储的时候按照 1 存储
    + false 表示假, 在计算机内存储的时候按照 0 存储
*/

var b1 = true
var b2 = false
console.log(b1)
console.log(b2)

null type (null)

●There is only one, which is null, and the null value represents an empty object pointer.
●There is a value, but it is a null value.
●You need to assign null to the variable when using it to get null

undefined type (undefined)

Undefined is also called undefined, which is a special type. It should have a value, but there is no value, it is undefined.
When only declaring a variable and not assigning a value, the default value of the variable is undefined. Generally, it is seldom [directly] to be a certain value. The variable assignment is undefined
●There is only one, which is undefined, which means there is no value

/*
  空
    + Undefined: 只有一个值
      => undefined, 表示 没有
      => 这里本该有一个值, 但是没有的时候, 叫做 undefined
      => 一个变量声明为赋值, 就是 undefined
    + Null: 只有一个值
      => null, 表示 有一个空
      => 这里真的有一个值, 这个值是一个空值
      => 你需要给一个变量赋值为 null 才是 null
*/

var u
// 需要拿到 u 变量的值来使用
// u 本该给我一个值, 让我显示, 但是没有
console.log(u)

var n = null
// n 变量给我的值就是一个 空值
console.log(n)

complex data type

●Object type (object)
●Function type (function)

Detect data type

●Since the data has been separated into types
●We need to know what type of data we store
●We need to know the type of each variable

typeof

●Use the typeof keyword to judge
●Syntax:
1.typeof variable
2.typeof(variable)
○Return value (result): Tell you what data type the variable you detected is in the form of a string

// 第一种使用方式
var n1 = 100;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

Notice

The result of typeof must be a string type

When you need to check the operation result of two contents, you must use () package

var r1 = typeof 100 + 200
var r2 = typeof(100 + 200)
console.log(r1)
console.log(r2)

When you use multiple typeofs in conjunction, the return value must be a 'string'

console.log(typeof typeof 100); // string

isNaN()

You can use the isNaN method to determine whether a variable is a legal number
isNaN: is not a number
Syntax:
isNaN (data to be detected)
Return value: Boolean

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

//如果变量是这样的一个数据
var r1 = '123'
console.log(isNaN(r1)); //=>false

Number.isNaN()

● The Number.isNaN() method is used to determine whether the passed value is NaN
● and check whether its type is Number
● If the value is NaN and the type is Number, return true, otherwise return false

console.log(Number.isNaN(123)); // false
console.log(Number.isNaN(0/0)); // true

data type conversion

● Conversion between data types
○ Convert other data types to numeric types
○ Convert other data types to string types
○ Convert other data types to Boolean types

Convert other data types to values

Number (variable)
●Syntax:
○Number(the data you want to convert)
●Return value:
○Converted numerical data
●Conversion rules:
○Take the content you want to convert as a whole
○If the whole can be converted into a legal number , then it is this number
○ If the whole cannot be converted into a legal number, then it is NaN (not a number)

Notice:

○true will convert to 1

○false is converted to 0

// 1. Number()
var s1 = '132abc'
console.log(s1)
console.log(typeof s1)
console.log('==========================')
// 开始转换
// 使用 Number 方法转换 s1 变量, 把结果赋值给 res 变量
var res = Number(s1)
console.log(res)
console.log(typeof res)

parseInt(variable)

●Syntax:
○parseInt(the data you want to convert)
●Return value:
○Converted numerical type data
●Conversion rules:
○No matter what data you want to convert, treat it one by one
○If the first digit is If it cannot be converted into a legal number, then give NaN directly and stop the conversion
○If the first digit is OK, then continue to convert the second digit
○And so on, until you encounter something that cannot be converted

Note:
○I don’t know the decimal point. When I encounter a decimal point, I think it’s not after a number and I don’t detect it. What I return is the integer part before the point.
○So use parseInt() and there is also a rounding function

var s1 = '100.23456'
console.log(s1)
console.log(typeof s1)
console.log('=============================')
var res = parseInt(s1)
console.log(res)
console.log(typeof res)

parseFloat(variable)

Syntax:
○parseFloat (the data you want to convert)
Return value:
○Converted numerical data
Conversion rules:
○Exactly the same as parseInt
○The only difference is to recognize a decimal point

var s1 = '1.52rem'
console.log(s1)
console.log(typeof s1)
console.log('=============================')
var res = parseFloat(s1)
console.log(res)
console.log(typeof res)

Mathematical operations other than addition

●As long as it is not an addition operation, you can convert numbers
○num - 0
○num * 1
○num / 1
○…
●Conversion rules:
○It is exactly the same as the Number method
○Treat the data as a whole
○Both sides of the operator can be operated Numbers only work
○ If the operator is not an operable number at any one time, it will return NaN
○ Addition is not available

var s1 = '100'
console.log(s1)
console.log(typeof s1)
console.log('====================')
var res = s1 - 0
console.log(res)
console.log(typeof res)

Convert other data types to strings

●It is to convert other data types into string data type
toString()
●Syntax:
○The data you want to convert.toString()
●Return value:
○Converted string type data
●Note:
○Except null and undefined everything will do

 // 2. toString
    var n = null
    console.log(n)
    console.log(typeof n)
    console.log('-------------------------')
    var res = n.toString()
    console.log(res)
    console.log(typeof res)

String()

●Syntax:
○String(the data you want to convert)
●Return value:
○Converted string type data
●Can be converted:
○All data can be converted

// 1. String()
var n1 = 100
console.log(n1)
console.log(typeof n1)
console.log('==================')
var res = String(n1)
console.log(res)
console.log(typeof res)

use addition

●In JS, + has two meanings
●String concatenation: As long as either side of + is a string, string concatenation will be performed
●Addition operation: only when both sides of + are numbers or Boolean values, mathematics will be performed Operation
●If you want to convert a data into a string, you only need + string

var n1 = '100'
console.log(n1)
console.log(typeof n1)
console.log('===================')
// 在字符串拼接转字符串的时候, 最好拼接一个空字符串
var res = n1 + ''
console.log(res)
console.log(typeof res)

Convert other data types to Boolean

●Syntax: Boolean (data to be converted)
●Return value: the Boolean value you converted
●In js, only '', 0, null, undefined, NaN, these are false
●The rest are true

console.log(Boolean(''));
console.log(Boolean(NaN));
console.log(Boolean(0));
console.log(Boolean(undefined));
console.log(Boolean(null));

operator

●It is the symbol used when performing calculations in the code
●It is not just mathematical operations
●We have many calculation methods in js
●The mathematical operations we are familiar with are just one of many operators

mathematical operator

●+
○Addition will only be performed when both sides of the symbol are numbers or Boolean values
​​○As long as either side of the symbol is a string type, string concatenation will be performed

// 数学运算符
console.log(100 + 100); // 200
console.log(100 + true); // 101
console.log(100 + false); // 100
console.log(100 + '435'); // '100435'

●-
○ will perform subtraction operation
○ will automatically convert both sides into numbers for operation

// 数学运算符(-)
console.log(10 - 5); // 5
console.log(10 - true); // 9
console.log(10 - false); // 10

●*
○Can perform multiplication
○Can automatically convert both sides into numbers for calculation

// 数学运算符(*)
console.log(10 * 5); // 50
console.log(10 * true); // 10
console.log(10 * false); // 0

●/
○ will perform division operation
○ will automatically convert both sides into numbers for operation

// 数学运算符(/)
console.log(10 / 5); // 2
console.log(10 / true); // 10
console.log(false / 10); // 0

●%
○ will perform remainder operation
○ will automatically convert both sides into numbers for operation

// 数学运算符(%)
console.log(10 % 3); // 1

● **
○ The power (**) operator returns the result of raising the first operand to the power of the second operand

// 数学运算符(**)
console.log(3 ** 4); // 81

assignment operator

1.=

○It is to assign the value on the right side of = to the variable name on the left side of the equal sign
○var num = 100
○It is to assign 100 to the num variable
○Then the value of the num variable is 100
○Note:
■The same variable can only be assigned once
■That is to say After assigning a value to the same variable for the first time, it cannot be assigned again
. If you assign a value to the same variable again, the previous value will be overwritten.
○Exchange of variable values
. Use the third variable to do the exchange.

// 交换变量
// 声明变量
var x = 5
var y = 6
console.log(x) 
console.log(y) 

// 声明第三个变量
var tmp
// 把x的值赋值给tmp
tmp = x
// 把y的值赋值给x 
x = y
// 把tmp的值赋值给y
y = tmp

console.log(x) 
console.log(y) 

2.+=

○It is the cooperative symbol of the assignment symbol and the plus sign
○It is how much is added on the original basis

var a = 10;
a += 10;
console.log(a); //=> 20

○a += 10 is equivalent to a = a + 10
○It cannot be written as a = 10 + a

3.-=

○It is the cooperative symbol of the assignment symbol and the minus sign
○It is how much is subtracted from the original one

var a = 10;
a *= 10;
console.log(a); //=> 100
// `a -= 10` 等价于 `a = a - 10`

4.*=

○It is the cooperative symbol of the assignment symbol and the multiplication sign
○It is how much is multiplied on the original basis

var a = 10;
a *= 10;
console.log(a); //=> 100
// `a *= 10` 等价于 `a = a * 10`

5./+

○It is the cooperative symbol of assignment symbol and division sign
○It is how much to divide on the original basis

var a = 10;
a /= 10;
console.log(a); //=> 1
// `a /= 10` 等价于 `a = a / 10`

6.%=

○ is the cooperative symbol of the assignment symbol and the remainder symbol
○ is the result of assigning the remainder of yourself and a certain number to yourself

var a = 10;
a %= 3;
console.log(a); //=> 1
// `a %= 3` 等价于 `a = a % 3`

comparison operator

●In addition to the addition, subtraction, multiplication and division of data
, the computer can also compare data, such as size comparison, type comparison, etc.
The result of the comparison operation must be Boolean.
Comparison operators are also called relational operators

1.==

Whether the values ​​on both sides of the comparison symbol are equal, regardless of the data type

console.log(1 == 1); // true
console.log(1 == '1'); // true
console.log(1 == 2); // false
console.log(1 == '2'); // false

2.===

● Whether the values ​​and data types on both sides of the comparison symbol are equal

console.log(1 === 1); //true
console.log(1 === '1'); // false

3.!=

●Whether the values ​​on both sides of the comparison symbol are not equal, if so, return true regardless of the data type

console.log(1 != 1);// false
console.log(1 != '2'); // true
console.log(1 != '1'); // false

4.!==

●Whether the data types and values ​​on both sides of the comparison symbol are not equal, if they are all satisfied, return true

console.log(1 !== 1); // false
console.log(1 !== '1');// true
console.log(1 !== 2); // true
console.log(1 !== '2'); // true

5.>=

● Compare whether the value on the left is greater than or equal to the value on the right

console.log(2 >= 1); // true
console.log(2 >= 2); // true
console.log(2 >= 3); // false

6.<=

● Compare whether the value on the left is less than or equal to the value on the right

console.log(1 <= 1); // true
console.log(1 <= 2); // true
console.log(3 <= 2); // false

7.>

● Compare whether the value on the left is greater than the value on the right

console.log(1 > 2); // false
console.log(3 > 2); // true
console.log(2 > 2); // false

8.<

● Compare whether the value on the left is less than the value on the right

console.log(1 < 2); // true
console.log(3 < 2); // false
console.log(2 < 2); // false

Logical Operators

●Logical operators generally combine the values ​​of multiple expressions, and then operate again to generate new expression values. Logical operations are mainly divided into three situations:

○ Logical AND (and) &&
○ Logical OR ||
○ Logical NOT (negation) !

1. Logical AND (and) &&

○Conduct AND operation
○Must both sides of the sign are true at the same time, it will return true
○As long as one side is not true, then it will return false
○The same true is true, one false is false

console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false

2. Logical OR ||

○ Perform an OR operation
○ If either side of the symbol is true, it will return true
○ Only when both sides are false will it return false
○ One true is true, and the same false is false

console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false

3. Logical NOT (negation)!

○ Perform negation operation
○ If it is true, it will become false
○ If it is false, it will become true

console.log(true); // true
console.log(!true); // false
console.log(false); // false
console.log(!false); // true

short circuit operation

1. Logical and (and) &&

○When the left side of the operator is false, the code on the right is not executed
○Only when the code on the left is true, the code on the right is executed

false && console.log('你好 世界');
true && console.log('你好 世界');

2. Logical OR ||

○When the left side of the operator is true, the code on the right is not executed
○Only when the code on the left is false, the code on the right is executed

true || console.log('hello world');
false || console.log('hello world');

Increment and decrement operators (unary operators)

The operation that can be completed with one data and one operator is called unary operation

1.++

○Carry out self-increment operation
○Divided into two types, front ++ and post ++ No matter it is pre or post, it will make its own value +1, only +1
○Pre ++, the value will be automatically first +1 for participating in operations after returning

var a = 10;
console.log(++a);
// 会返回 11，并且把 a 的值变成 11

○After the ++, the value will be used to participate in the operation first, and it will be automatically +1 after the operation is completed

var a = 10;
console.log(a++);
// 会返回 10，然后把 a 的值变成 11

○Exercise - find the value of n and res

var n = 10
var res = n++ + ++n + ++n + ++n + n++
console.log(n) 
console.log(res) 

2.–

○Carry out self-decrement operation
○Divided into two types, pre-- and post--
○It is the same as ++ operator
○Find the value of n and res

var n = 10
var res = --n + ++n + n++ + n++ + n-- - --n
console.log(n) 
console.log(res)