JavaScript基础

数据类型

number 数字型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

通过typeof关键字检测数据类型

// 1. number类型
let pi = 3.14
console.log(pi)
// typeof  查看类型
console.log(typeof pi)

string 字符串型

JS中的字符串:

• 通过单引号（ ‘’） 、双引号（ “”）或反引号( `` ) 包裹的数据都属于字符串。

• 单引号和双引号没有本质上的区别，推荐使用单引号。

// 2. string 类型
let uname = 'niuniu'
let news = "'大甩卖'是个好消息"
console.log(uname)
console.log(news)

注意事项：

1. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
2. 一定注意变量名不要加引号，否则认为是字符串

模板字符串

1. 使用场景: 拼接字符串和变量。
2. 语法：
   • ``(反引号)
   • 内容拼接变量时，用 **$\ast \ast 包住变量（口诀：反引中间变量套，直接$大括号）

// 2. string 类型
let uname = 'niuniu'
let age = 80
// 字符串拼接
console.log(uname + '18岁')
// 模板字符串
console.log(`pink老师今年${age}岁了`)

注意：反引号中间的字符串可以换行的。

boolean 布尔型

1. 用于判断真假的数据类型，通常用来判断条件是否成立 。
2. 有两个固定的值 true 和 false。

undefined 未定义型

1. 比较特殊的类型，只有一个值 undefined。

2. 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

3. 适用场景：通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

null 空类型

1. JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值。
2. null 和 undefined 区别：
   • undefined 表示没有赋值, 不存在 （期房）
   • null 表示赋值了，但是内容为空 （毛坯房）

注意：typeof null 返回的是 ‘object’ 返回的是对象类型 但这只是JavaScript 存在的一个悠久 Bug，不代表null就是引用数据类型,null 属于基本数据类型。

运算符

算术运算符

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

注意：在计算失败时，显示的结果是 NaN （not a number）

赋值运算符

赋值运算符：对变量进行赋值的运算符

自增/自减运算符

1. ++在前和++在后在单独使用时二者并没有差别，而且一般开发中我们都是独立使用
2. ++在后（后缀式）我们会使用更多

注意：

1. 只有变量能够使用自增和自减运算符
2. ++、-- 可以在变量前面也可以在变量后面，比如:
   • 前缀式 x++ ： 先对变量值+1， 然后拿着变量值做运算
   • 后缀式 ++x ： 先拿着变量值运算，再对变量值+1

比较运算符

使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

运算符优先级

逻辑运算符优先级： ！> && > ||

类型转换

显示转换

自己手动写代码告诉系统该转成什么类型（数据类型明确、程序员主导）

转为数字型

1. Number(数据)
   • 转换成功返回一个数字类型
   • 转换失败则返回 NaN (例如数据里面包含非数字）
2. parseInt(数据)
   • 只保留整数
   • 如果数字开头的字符串，只保留整数数字 比如 12px 返回 12
3. parseFloat(数据)
   • 可以保留小数
   • 如果数字开头的字符串，可以保留小数 比如 12.5px 返回 12.5

// 转换为数字型
// 1.  Number(数据)
let num = Number('1')
console.log(num);
console.log(Number('12px'))
console.log('-----');

// 2. parseInt(数据)
console.log(parseInt('10'))
console.log(parseInt('10.44'))
console.log(parseInt('12px'))
console.log(parseInt('12px22'))
console.log('-----');

// 3. parseFloat(数据)
console.log(parseFloat('3'))
console.log(parseFloat('3.14'))
console.log(parseFloat('3.14px'))
console.log(parseFloat('3.14.33px'))
console.log('-----');

// 4. 特殊情况
console.log(Number(true))
console.log(Number(false))
console.log(Number(null))
console.log(Number(undefined))
console.log('-----');

转换为字符串和布尔型

// 转换为字符串
// 1. String(数据)
let str = String(123)
console.log(str)
console.log(typeof str)
console.log(String(true) ) //'true'
console.log('-----');

// 2. 变量.toString(进制)
let num1 = 10
let str1 = num1.toString()
let str2 = num1.toString(2)
console.log(str1) 
console.log(str2) 
console.log('-----');


// 转为布尔值
// Boolean(数据)
console.log(Boolean(10));
console.log(Boolean('牛牛'));
// 转化为 false 的情况
console.log(Boolean(0));
console.log(Boolean(false));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean(NaN));
console.log(Boolean('')); //如果引号里面有内容 包括空格符 ，则值为 true

隐式转换

// 1. 转为数字型
// 算术运算符 - * / % == +变量
console.log('10' - '5')
console.log('10' - 5)
let num = '10'
console.log(+ num + 5); //+num 
console.log('---------')

// 2. 字符串
// 拼接字符串
let count = 10
console.log(count + '')
console.log(1000 + '')
console.log('' + 3)
console.log('---------')

// 3. 布尔类型
// 逻辑非 !
console.log(!10);
console.log(!-10);
console.log(!true);
console.log(!false);
console.log(!null);
console.log(!undefined);
console.log(!'');
console.log(!' ');

注意：隐式转换类型不明确，靠经验才能总结，尽量数据类型统一再做计算