7，前端学习-js-01js基础-CSDN博客

本文链接：https://blog.csdn.net/dashuaigeyyds/article/details/134521046

1. JavaScript的书写

行内式
内联式
外联式

2. 变量

在内存中存储数据的容器，也是内存中存储数据的标识

2.1 命名规则

+ 只能由字母数字 _ $
+ 不能数字开头
+ 不要使用中文
+ 严格区分大小写
+ 不能使用关键字和保留字

规范
- 语义化
- 小驼峰

2.2 数据类型

2.2.1 基本数据类型

+ number 数值 (数字，NaN)
+ string 字符串 (所有引号包裹的内容)
+ boolean 布尔 (true false)
+ undefined
+ null

2.2.2 复杂数据类型

+ object 键值对的数据集合
+ function 定义的函数
+ array

2.3 数据类型的转换

2.3.1 转数字

+ 强制转换
+ Number 空字符串转为0
+ parseInt 转为整数
+ parseFloat 转换为浮点数/小数
+ Math.round 转换为数字类型并且四舍五入，受小数点后一位影响
+ 隐式转换(使用了Number方法转换)
+ 非 + 的数学运算
+ ` '1'-0 `

2.3.2 转字符串

+ String(变量)
+ 变量.toString()
+ 隐式转换
+ `+号可以进行字符串拼接`

2.3.3 转布尔

+ Boolean()
+ 转布尔值为false
+ ` '' 0 NaN undefined null false `
+ 隐式转换(使用Boolean方法)
+ 常见的是条件判断中

2.4 数据类型的检测

typeof
- 只能检测字符串，数值，布尔， undefined，function
- 返回值是字符串表示的数据类型
  - string表示字符串;number数字 boolean布尔 undefined function
  - console.log(typeof(typeof(666)) )
isNaN
- true 说明检测的数据不是一个数字
- false 说明检测数据是一个数字
constructor
- 返回实例对象的构造函数
- null undefined 没有构造函数，不能判断
- constructor 可以被改写，不一定准确

console.log((1).constructor === Number) // true

console.log([1, 2, 3].constructor === Array) // true

console.log(undefined.constructor === Array) // 报错

Object.prototype.toString.call()
- 此方法是检测数据类型最准确的方法
- 返回的值是一个形如 [object Object] 的字符串

Array.isArray
- 专门用于检测数据类型的
- Array.isArray([ ]) // true

3. 运算符

3.1 数学运算符

+ - * / %

3.2 比较运算符

> >= < <= == === != !== undefined == null 为true

其他数据和undefined或null == 比较都是false

3.3 赋值运算符

= += -= *= /= %=

var str = '<ul>';
for(var i = 0;i<=5;i++){
str += '<li></li>';
}
str += '</ul>';

3.4 逻辑运算符

&& 并且 || 或 !取反
- console.log(1||0)
- console.log(666||999)
- console.log('' || 999)
- console.log(0&&666)
- console.log(666&&999)
- console.log(666&&0)
- ||和&& 运算的时候,会将运算符两边的内容进行布尔隐式转换(使用Boolean)
  - 当 || 左边布尔隐式转换为true的时候,则左边的就是表达式的运算结果
  - 当 || 左边布尔隐式转换为false的时候,则右边的就是表达式的运算结果
  - 当 && 左边布尔隐式转换为true的时候,则右边的就是表达式的运算结果
  - 当 && 左边布尔隐式转换为false的时候,则左边的就是表达式的运算结果
- !取反
  - 返回值：布尔
  - 运算过程：先将变量通过布尔隐式转换,转为布尔值,然后取反

3.5 自操作运算符

自增++，自减--
前置：先自己自增或者自减，然后再参与运算
后置：先参与运算，然后再自增或者自减

3.6 三元运算符

？ :
条件判断？条件为true执行的代码：条件为false执行的代码

4. js中流程控制的代码控制

+ 顺序结构 (js中的代码自上而下(左到右)的执行)
+ 选择结构(条件分支)
+ 循环结构(循环分支)

if语句
- if：条件满足就执行，不满足就不执行
- if-else：条件满足就执行if中的{}，条件不满足就执行else的{}
- if-else-if：那个条件满足，就执行哪一个的{}，前面的条件满足就不会执行后面的
switch-case 语句
- 只能按照全等（===）来判断内容
- 那个case满足条件就执行那个case后面的代码
- break 中断，没有break就穿透下去执行后面的case的代码
- default 所有的case 都不满足的时候执行
while 循环
- 先进行条件判断，再执行循环语句
do-while循环
- 先执行一遍后，再进行条件判断
for循环
- 根据判断来循环执行语句
循环中的跳转关键字
- break 终止循环代码
- continue 终止本次循环，跳转到下次循环

5. 函数

5.1 函数的两种定义方式

声明式定义函数：function fn（）{}
赋值式定义函数： var fn = function（）{}

5.2 函数调用方式

函数名（）
函数调用上的区别
1. 声明式函数：可以在定义前或者定义后调用
2. 赋值式函数：只能在定义之后调用

5.3 函数在两个阶段做的事情

定义阶段
1. 开空间
2. 把代码放进去（不解析变量）
3. 将空间的地址给函数名
调用阶段
1. 按照地址找到空间
2. 形参赋值
3. 预解析
4. 把刚存的代码拿出来执行一遍（解析变量）

5.4 函数的参数

形参
1. 就是在函数内部使用的变量
实参
1. 函数调用的时候给形参赋的值
arguments
1. 伪数组，所有实参的集合

5.5 函数的return

是给函数执行完毕后的一个结果
- 不写return 函数的返回值就是undefined
- 写了return，但是不写内容，函数的返回值是 undefined
- 写了return，写了内容，那么写了什么内容就返回什么
中断函数的执行
- 写在return 后面的代码不会执行

5.6 预解析

在执行代码之前对代码进行的解读和解释（变量提升，声明式函数提升）
1. 解释 var 关键字的内容，在代码执行之前声明变量可以使用，只不过是没有赋值
2. 解释声明式函数，就是告诉浏览器变量可用，而且变量的值是一个函数的地址

5.7 作用域 - 变量的使用范围

全局作用域
- 浏览器打开一个页面就生成一个全局作用域
- 浏览器关闭作用域就销毁
局部作用域(私有作用域)
- 只有函数才能决定一个私有作用域
- 函数执行完毕，作用域销毁
作用域的变量访问规则
- 变量的访问: 输出,运算的时候
  - 自己作用域有，就直接使用
  - 自己作用域没有，就向上一级查找
  - 直到全局作用域都没，那么就报错
作用域变量的赋值规则
- 变量赋值: = ,+=....
- 自己有就给自己的赋值
- 自己没有就向上一级查找，哪里有就给哪里的赋值
- 一直到全局都没有，把这个变量定义为全局变量，再赋值(这种定义变量的方式称之为隐式全局变量)