前端发展史
+ 了解重要的历史节点
+ 重点掌握WEB1.0~WEB3.0的进化史
+ 动态页面
+ 前后端分离
+ WebApp（NativeApp）
+ 全栈开发
+ ...
+ 前端需要掌握的技术栈
+ ECMAScript3 / ECMAScript5 / ECMAScript6（每年6月份在版本6的基础上继续完善一版ES7~9）
浏览器内核分类
+ webkit
+ gecko
+ trident
+ blink
+ ...
JS三部分
+ ECMAScript 语法规范
+ DOM
+ BOM
变量和变量定义
变量就是起了一个名字，用来存储（指向）或者代表某个值的（它是一个虚的东西，值才是实在的东西）
+ 命名规范
+ 严格区分大小写
+ 驼峰命名法
+ 基于“_、$、数字、字母” 命名，但是数字不能作为开头
+ 不能使用关键字和保留字
+ ***定义变量的几种方式***
+ var
+ let
+ const 定义的变量，变量指向不能随意被更改（理解为定义的是常量）
+ function
+ class
+ import
JS中的数据类型
+ 基本数据类型（值类型 / 原始值）
+ number
+ string
+ boolean
+ null
+ undefined
+ symbol
+ bigint
+ 引用数据类型
+ 对象数据类型
+ {} 普通对象
+ [] 数组对象
+ /^$/ 正则对象
+ 日期对象
+ Math数学函数对象
+ ...
+ 函数数据类型
数据类型的检测
+ **typeof**
+ 语法 => typeof [value]
+ 返回值首先是字符串，其次包含对应的类型 => typeof typeof [] === "string"
+ typeof null === "object"
+ 数组、正则、普通对象的最后检测结果都是"object"，所以基于此操作，无法细分对象
+ instanceof
+ constructor
+ Object.prototype.toString.call()
数字类型详解
+ NaN 和 isNaN
+ typeof NaN === "number"
+ NaN !== NaN
+ 基于isNaN检测值是否为有效数字（检测的值不是数字类型，需要默认基于Number()把其转换为数字类型，然后再检测）
+ 把其它数据类型转换为数字类型
+ Number([value])
+ 字符串转换为数字：空字符串是0，字符串中只要出现任意一个非有效数字字符，结果都是NaN
+ 布尔转换为数字：true是1 false是0
+ null变为数字0
+ undefined变为数字NaN
+ symbol不能转换为数字，否则会报错
+ 对象（或者函数）转换为数字：首先都是调用toString先转换且字符串，然后再转换为数字
+ 普通对象转换为字符串结果都是 "[object Object]"
+ 数组对象转换为字符串结果是：用逗号分隔数组中的每一项
+ [] -> ''
+ [10] -> '10'
+ [10,20] -> '10,20'
+ 正则或者函数转换为字符串和原始看到的内容类似
+ parseInt([value]) / parseFloat([value])
+ 首先把[value]值变为字符串，其次从字符串最左侧开始找，把找到的有效数字字符转换为数字，遇到一个非有效数字字符则结束查找（不论右侧是否还有数字，都不在查找了）
+ Number(true) -> 1
+ parseInt(true) -> NaN
+ Number('12px') -> NaN
+ parseInt('12px') -> 12
+ 一些常用的属性方法
+ 数字.toFixed(N) 保留小数点N位，返回结果是一个字符串
+ Infinity 无穷大
+ ...
字符串类型详解
+ 把其它数据类型转换为字符串
+ String([value])
+ [value].toString()
+ 加号在JS中除了数学运算，还有字符串拼接
+ 减乘除和取余都一定是数学运算（不是数字类型要转换为数字类型，然后再运算）
+ 加号两边的任意一边出现字符串，则为字符串拼接（如果加的是一个对象，其实最后也是字符串拼接，因为对象转换为数字，是先转换为字符串的）
+ 1 + '1' === '11'
+ 1 + [10] === '110'
+ 基于ES6中的模板字符串（反引号 或者叫 两个撇）可以方便字符串拼接
```
//=> ${} 就是把一个变量的值或者一个JS表达式运行的结果，拼接到模板字符串中
let n=10;
let str=`N的值是：${n}`;
```
布尔类型详解
+ 把其它数据类型转换为布尔类型
+ 规律：只有“0、NaN、null、undefined、空字符串”五个值最后变为FALSE，其余都会转换为TRUE
+ Boolean([value])
+ ![value] 转换为布尔再取反
+ !![value] 转换为布尔
+ ----
+ 在条件判断中，最后的结果都是转换为布尔
+ ...
对象数据类型详解
+ 对象的组成：零到多组键值对组成的（key:value / 属性名:属性值），每一组之间用逗号分隔
+ 关于对象键值对的操作（增删改查）
+ 对象的属性名不能重复
+ 对象.属性名 => 这样操作属性名不能是数字
+ 对象[属性名] => obj['n']和obj[n]是不一样的，前者属性名就是n，候着是把n变量存储的值作为属性名拿过来操作的（假设n是100，此时相当于obj[100]）
基本数据类型和引用数据类型的区别
+ 堆内存（HEAP）和栈内存（STACK）
+ 栈内存
+ ECStack 执行环境栈
+ EC(G) 全局执行上下文
+ VO(G) 全局变量对象
+ let a = 12
+ 创建12这个值，存放到栈内存中（栈内存是用来执行代码和存储基本类型值的）
+ 创建变量a存储到 VO(G)
+ 最后让a指向12这个值 （=赋值的意思就是值的指向）
+ 堆内存
+ let obj = {xxx:'xxx'}
+ 创建对象值（引用数据类型不能直接存储到栈内存中）
+ 创建一个堆内存，有一个16进制地址（AAAFFF000）
+ 把对象中的键值对存储到堆中
+ 把堆内存的地址存放到栈内存中，供变量指向
+ 创建变量obj，存储到VO(G)
+ 让obj指向堆内存的地址 AAAFFF000
+ 后期obj.xxx的所有操作，都是先基于地址找到堆内存，从而来操作堆内存中的内容
DOM的一些操作
+ document.getElementById
+ document.body
+ JS中获取的元素都是对象数据类型的（有自己对应的堆内存，堆内存中存储着很多内置的属性和方法，这些属性方法就是用来操作DOM元素的）
+ id
+ className
+ tagName
+ innerHTML
+ innerText
+ style = 对象 操作当前元素的“行内”样式
+ onclick
+ ...
+ context.getElementsByTagName
+ 获取到的是一个“类数组”元素集合 HTMLCollection
+ 操作起来和数组类似（基于索引获取某一项以及循环操作等）
JS中常用的操作语句
+ 判断语句
+ if、else if、else
+ 三元运算符
+ 语法 条件?成立:不成立;
+ 基于null/undefined占位
+ 多个事情基于括号包起来，逗号分隔
+ 三元嵌套
+ switch case
+ 每一种case都是===判断
+ == 和 === 的区别
+ 循环语句
+ for循环：指定循环次数或者遍历数组
+ 四步操作
+ break
+ continue
+ for in循环：变量对象中的键值对的
+ 优先按照从小到大遍历数字属性
+ ...
JS中常用的输出方式
+ console
+ .log
+ .dir
+ .table
+ .time / .timeEnd
+ .warn
+ ...
+ 浏览器弹出窗口（输出的结果都会变为字符串）
+ alert
+ confirm
+ prompt
+ 向页面中输出内容的（输出的结果都会变为字符串）
+ document.write
+ 元素.innerHTML
+ 元素.innerText
+ ...
网友评论