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