关于前端:JavaScript基础入门全解析下

数据类型（重点）
● 是指咱们存储在内存中的数据的分类，为了不便数据的治理，将数据分成了不同的类型

● 咱们通常分为两大类 根本数据类型 和 简单数据类型（援用数据类型）

根本数据类型
● 在 js 中根本数据类型分为以下几种

数值类型（number）
● 蕴含所有数字和数值相干内容

○ 整数 : 100, -100, 234

○ 浮点数 : 100.234, -0.456

○ 迷信记数法 : 10e5

○ 其余进制示意

■ 二进制 : 0b100

■ 八进制 : 0o100

■ 十六进制 : 0x100

○ 无穷 : Infinity

○ 非数字 : 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）
● 被引号包裹的所有内容

○ 单引号 (”)

○ 双引号 (“”)

○ 反引号 (“)

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

● 留神

○ 无论哪种引号, 必须成对呈现

○ 各种引号之前能够相互嵌套, 然而不能自己嵌套本人

○ 反引号定义的字符串能够换行书写, 并且能够在字符串内间接应用 ${} 的模式解析变量

// 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）
● 示意必定或否定时在计算机中对应的是布尔类型数据

● 只有两个（true 或者 false）

● 示意必定的数据用 true，计算机中存储的就是 1

● 示意否定的数据用 false，计算机中存储的就是 0

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

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

null 类型（null）
● 只有一个，就是 null，null 值示意一个空对象指针

● 有值，然而是一个空值。

● 应用时须要给变量赋值为 null，能力失去 null

undefined 类型（undefined）
● undefined 也叫未定义是比拟非凡的类型，本该有个值，然而没有，就是 undefined

● 只申明变量，不赋值的状况下，变量的默认值为 undefined，个别很少【间接】为某个变量赋值为 undefined

● 只有一个，就是 undefined，示意没有值的意思

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

var u
// 须要拿到 u 变量的值来应用
// u 本该给我一个值, 让我显示, 然而没有
console.log(u)

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

简单数据类型
● 对象类型（object）

● 函数类型（function）

检测数据类型
● 既然曾经把数据离开了类型

● 咱们就要晓得咱们存储的数据是一个什么类型的数据

● 咱们就要晓得每个变量的类型是什么

typeof
● 应用 typeof 关键字来进行判断

● 语法:

1. typeof 变量
2. typeof(变量)

○ 返回值 (后果): 以一个字符串的模式通知你你检测的变量是什么数据类型

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

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

● 留神

○ typeof 的后果必然是一个字符串类型

○ 当你须要检测两个内容的运算后果的时候, 必须要应用 () 包裹

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

○ 当你多个 typeof 连用的时候，返回值必然是一个 ’string’

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

isNaN()
● 能够应用 isNaN 这个办法来判断一个变量是不是一个非法的数字

● isNaN：is not a number

● 语法：

○ isNaN(要检测的数据)

● 返回值：布尔值

// 如果变量是一个数字
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()
● Number.isNaN() 办法用于判断传递的值是否为 NaN

● 并且查看其类型是否为 Number

● 如果值为 NaN 且类型为 Number，则返回 true，否则返回 false

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

数据类型转换
● 数据类型之间的转转换

○ 其余数据类型转换成数值类型

○ 其余数据类型转换成字符串类型

○ 其余数据类型转换成布尔类型

其余数据类型转成数值
Number(变量)
● 语法:

○ Number(你要转换的数据)

● 返回值:

○ 转换好的数值类型数据

● 转换规则:

○ 把你要转换的内容当做一个整体

○ 如果整体能够转换为一个非法数字, 那么就是这个数字

○ 如果整体不能够转换为非法数字, 那么就是 NaN(not a number)

● 留神:

○ true 会转换为 1

○ false 会转换为 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(变量)
● 语法:

○ parseInt(你要转换的数据)

● 返回值:

○ 转换好的数值类型数据

● 转换规则:

○ 不论你要转换的是什么数据, 都一位一位的对待

○ 如果第一位就不能转换成非法数字, 那么间接给出 NaN, 进行转换

○ 如果第一位能够, 那么持续转换第二位

○ 以此类推, 直到遇到不能转换的为止

● 留神:

○ 不意识小数点, 遇到小数点就认为不是一个数字前面的就不检测了返回的就是点后面的整数局部

○ 所以应用 parseInt() 还有一个取整性能

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(变量)
● 语法:

○ parseFloat(你要转换的数据)

● 返回值:

○ 转换好的数值类型数据

● 转换规则:

○ 和 parseInt 截然不同

○ 惟一的区别就是意识一位小数点

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

除了加法以外的数学运算
● 只有不是进行加法运算, 都能够进行转换数字

○ num – 0

○ num * 1

○ num / 1

○ …

● 转换规则:

○ 和 Number 办法截然不同

○ 把数据当做一个整体对待

○ 运算符两边都是可运算数字才行

○ 如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN

○ 加法不能够用

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

其余数据类型转成字符串
● 就是把其它的数据类型转换成字符串数据类型

toString()
● 语法:

○ 你要转换的数据.toString()

● 返回值:

○ 转换好的字符串类型数据

● 留神:

○ 除了 null 和 undefined 以外都行

// 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()
● 语法:

○ String(你要转换的数据)

● 返回值:

○ 转换好的字符串类型数据

● 能转换:

○ 所有数据都能转换

// 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)

应用加法运算
● 在 JS 外面，+ 由两个含意

● 字符串拼接：只有 + 任意一边是字符串，就会进行字符串拼接

● 加法运算：只有 + 两边都是数字或者是布尔值的时候，才会进行数学运算

● 如果想把一个数据转换成字符串, 那么只须要 + 字符串

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

其余数据类型转成布尔
● 语法：Boolean(要转换的数据)

● 返回值：就是你转换好的布尔值

● 在 js 中，只有 ”、0、null、undefined、NaN，这些是 false

● 其余都是 true

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

运算符
● 就是在代码外面进行运算的时候应用的符号

● 不光只是数学运算

● 咱们在 js 外面还有很多的运算形式

● 咱们所熟知的数学运算只是诸多运算符的一种

数学运算符
● +

○ 只有符号两边都是数字或者布尔值的时候才会进行加法运算

○ 只有符号任意一边是字符串类型，就会进行字符串拼接

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

● –

○ 会执行减法运算

○ 会主动把两边都转换成数字进行运算

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

● *

○ 会执行乘法运算

○ 会主动把两边都转换成数字进行运算

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

● /

○ 会执行除法运算

○ 会主动把两边都转换成数字进行运算

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

● %

○ 会执行取余运算

○ 会主动把两边都转换成数字进行运算

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

● **

○ 幂（**）运算符返回第一个操作数取第二个操作数的幂的后果

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

赋值运算符

1. =

○ 就是把 = 左边的赋值给等号右边的变量名

○ var num = 100

○ 就是把 100 赋值给 num 变量

○ 那么 num 变量的值就是 100

○ 留神：

■ 同一个变量只能赋值一次

■ 也就说给同一个变量第一次赋值当前就不能再次赋值了

■ 如果给同一个变量再次赋值会把后面的值笼罩掉

○ 变量值的替换

■ 借助第三个变量来做替换

// 替换变量
// 申明变量
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. +=

○ 就是赋值符号和加号的单干符号

○ 就是在本人的原来的根底上再加上多少

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

○ a += 10 等价于 a = a + 10

○ 不能写成 a = 10 + a

3. -=

○ 就是赋值符号和减号的单干符号

○ 就是在本人的原来的根底上再减去多少

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

4. *=

○ 就是赋值符号和乘号的单干符号

○ 就是在本人的原来的根底上再乘上多少

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

5. /+

○ 就是赋值符号和除号的单干符号

○ 就是在本人的原来的根底上再除上多少

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

6. %=

○ 就是赋值符号和取余符号的单干符号

○ 就是把本人和某个数取余后的后果在赋值给本人

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

比拟运算符
● 计算机除了可能解决数据的加减乘除运算外

● 还能对数据进行比拟，如大小比拟、类型比拟等

● 比拟运算的后果肯定为布尔类型

● 比拟运算符也叫关系运算符

1. ==

● 比拟符号两边的值是否相等，不论数据类型

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

2. ===

● 比拟符号两边的值和数据类型是否都相等

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

3. !=

● 比拟符号两边的值是否不等, 如果是返回 true 不论数据类型

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

4. !==

● 比拟符号两边的数据类型和值是否不等, 如果都满足返回 true

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

5.>=

● 比拟右边的值是否 大于或等于 左边的值

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

6. <=

● 比拟右边的值是否 小于或等于 左边的值

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

● 比拟右边的值是否 大于 左边的值

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

8. <

● 比拟右边的值是否 小于 左边的值

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

逻辑运算符
● 逻辑运算符个别是将多个表达式的值组合起来，再次运算产生的新的表达式的值，逻辑运算次要分 3 种情景：

○ 逻辑与（且）&&

○ 逻辑或 ||

○ 逻辑非（取反）!

1. 逻辑与（且）&&

○ 进行 且 的运算

○ 必须符号两边同时为 true，才会返回 true

○ 只有有一边不是 true，那么就会返回 false

○ 同真为真，一假则假

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

2. 逻辑或 ||

○ 进行 或 的运算

○ 符号两边任意一边为 true，都会返回 true

○ 只有两边都是 false 的时候才会返回 false

○ 一真为真，同假则假

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

3. 逻辑非（取反）!

○ 进行 取反 运算

○ 自身是 true 的，会变成 false

○ 自身是 false 的，会变成 true

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

短路运算

1. 逻辑且（与）&&

○ 当运算符右边为 false 的时候, 左边的代码不执行

○ 只有右边的代码为 true 的时候, 左边的代码才执行

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

2. 逻辑或 ||

○ 当运算符 右边为 true 的时候, 左边的代码不执行

○ 只有右边的代码为 false 的时候, 左边的代码才执行

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

自增自减运算符（一元运算符）

● 一个数据带一个运算符就能实现的运算就叫一元运算

1. ++

○ 进行自增运算

○ 分成两种，前置 ++ 和 后置 ++ 不论是前置还是后置，都是让本身的值 +1，只能+1

○ 前置 ++，会先把值主动 +1，在返回之后参加运算

`var a = 10;
console.log(++a);`
// 会返回 11，并且把 a 的值变成 11
○ 后置 ++，会先把值拿来参加运算，运算完结当前在主动 +1

`var a = 10;
console.log(a++);`
// 会返回 10，而后把 a 的值变成 11
○ 练习 – 求 n 和 res 的值

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

2. —

○ 进行自减运算

○ 分成两种，前置 – 和 后置 –

○ 和 ++ 运算符情理一样

○ 求 n 和 res 的值

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