1-Symbol（es6提出）
Symbol的使用场景：1-用作对象的属性，避免多个模块继承的时候造成属性名被覆盖；
2-使用case的时候用于不同情况的区分
3-Symbol的属性名不能被Object.keys和for in这两个经常用于对象遍历的函数来枚举，所以可以将不对外访问操作的对象使用Symbol定义
因为不出现在属性遍历中，所以JSON.stringfy也不会出现Symbol变量
获取Symbol属性：Object.getOwnPropertySymbols和Reflect.ownKeys(obj)
<script>
let num1 = 12
let num2 = 23.5
let s = Symbol("a");
let s1 = Symbol("a")
console.log(typeof s)//symbol
console.log(s)//Symbol(a)
console.log(s1)//Symbol(a)
console.log(s == s1)//false
let s2 = s.toString()
console.log(s.toString() + "yyy")//Symbol(a)
console.log(s2 + "yyy")
//得到同一个Symbol值:Symbol.for()
let s3 = Symbol.for("a")
let s4 = Symbol.for("a")
console.log(s3)//Symbol(a)
console.log(s3 == s)//false
console.log(s3 == s1)//false
console.log(s3 == s4)//true
let a = {
["name"]: "yyy"
}
//不能通过.为对象添加Symbol属性
const age = Symbol("syc");
a.age = "yyy"
console.log(a)//"age":"yyy"
a[age] = "ok"//通过[]为对象追加Symbol属性
console.log(a)
// a["age"] = 20
//对象的继承
console.log(Object.keys(a))// ['name', 'age']
Object.keys(a).forEach(item => {
console.log(item)//name age
})
console.log(Object.getOwnPropertySymbols(a))//[Symbol(syc)]
console.log(Reflect.ownKeys(a))
</script>
2-整数浮点数number、字符串string、布尔值boolean、空值null、未声明的数据或者已经声明未初始化的数据undefined
对象类型Object、大数类型BigInt、符号类型Symbol
基本数据类型除了null，使用typeof判断；
对象数据类型：
null使用等于判断；
3-前自增和后自增的区别
前自增是在自身之后自增然后返回自身，后自增是在自身自增，返回没有自增的值。
4-==和 ===、&&和||
==普通相等，会在比较的时候进行隐式转换，所以只要值相等，哪怕类型不同也是可能返回true；
===严格相等，只有在两端数值和类型都相等的时候返回true；
&&和||将前面的数据转换为Boolean值，如果直到运算到最后一个值的时候返回最后一个值。
&&：短路与，两端都为true才返回true；前面的值为false，后面的不会运算；
||：短路或，与短路与相反，前面为true，后面不会运算；
//
let a = 10
//后自增是在自身自增，但是返回没有自增之前的值
console.log(a++)//10
console.log(++a)//12
let c = 10
// c++
console.log(c++, "ppp", c)//10-11
let b = 10
console.log(++b)//11
console.log(b++)//11
//
console.log(0 && "yyy")//0
console.log(1 || "yyy")//1
console.log(1 && "yyy")//yyy
console.log(0 || "yyy")//yyy
5-回调函数和匿名函数
回调函数也就是高阶函数，函数作为另一个函数的参数。
匿名函数，就是没有函数名的函数。
6-文档对象模型
DOM是文档对象模型的缩写。浏览器将我们编写的html文档中的内容抽象成对象，将每个元素抽象为一个个对象，这些对象可以通过javascript访问修改。
整个html网页被抽象成了Document节点，实例是document对象，也是DOM对象的入口，可以从document’对象节点开始访问到任何一个节点。
console.log(document)//#document
console.log(document.body)//<body>
console.log(document.head)//<head>
常见的节点属性：
和本身有关的属性，
nodeType\nodeName\nodeValue\tagName\data、hidden
和周围有关的属性
innerHTML、outerHTML、textContent
7-事件冒泡和事件捕获
事件发生之后会在根节点和目标节点之间按照顺序传播，途径节点都可以接收到事件，事件流就是用来描述事件在页面传播的顺序。
事件流的三个阶段，事件捕获、事件目标、事件冒泡阶段；
事件捕获阶段、不具体的元素先接收到事件，然后逐级向内传播；
事件目标：事件传播到用户产生行为的元素上，可能是事件捕获的最后一个阶段或者事件冒泡的第一个阶段。
事件冒泡：最具体的元素先接收到事件，逐级向外传播，不具体元素最后接收到事件。
而事件委托就是根据事件的冒泡机制+我们可以通过e.target获取触发事件的最具体元素，将具体子元素的事件委托给父元素进行处理。不需要为很多相同子元素绑定同一事件，可以把事件绑定在父元素上，在事件流进入到冒泡阶段时，通过事件对象event判断事件流进行的元素和目标元素是否一致，如果一致就触发对应的事件代码。
8-HTML页面生命周期
包括DOMContentLoad\load\beforeUnload\unload，通过addEventListener监听，
进行到DOMContentLoad的时候加载完成了html文档，并构建了DOM树，部分图片等外部资源没有加载完成。
9-json数据
json对象格式，用于前后端交互数据传输，配置文件，非关系型数据库的存储文件。
{
"name":"yyy",
"age":21,
"ok":true,
"arr":[1,2,3],
"obj":{"address":"ok"}
}
10-prefetch和preload
preload是一个rel属性的声明式描述，是一种预加载方式，向浏览器声明一个需要提前加载的资源，强制浏览器在不阻塞解析html的情况下请求资源。
prefetch告诉浏览器这个资源可能会被用到，浏览器决定什么时候加载这个资源，浏览器根据预测用户行为，比如懒加载就是点击到其他页面的链接的时候加载。
通过切分代码进行首屏加载优化之后，首屏js文件大小大大减少，但是跳转到其他页面的时候，还需要下载js文件，需要等待js代码下载，频繁loading，体验很差。进入首页之后的空闲时间，提前下载其他页面对应的js文件。
11-禁止默认复制：
设置CSSuser-select:none;
阻止js默认事件：selectstart\copy事件
document.body.onselectstart=function(e){e.preventDefault();}
扫一扫
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
