快速复习
一句话总结昨天的知识点
- 多参加面试，不参加面试你根本不想去实践新技术
20.3.10
1、元素父节点
JavaScript_Content.parentNode
2、js 类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
3、<noscript>
用来定义脚本未被执行时的替代内容
4、回流（reflow） 重绘（repaint）
5、Math.round()
如果参数的小数部分大于 0.5，则舍入到相邻的绝对值更大的整数。 如果参数的小数部分小于 0.5，则舍入到相邻的绝对值更小的整数。如果参数的小数部分恰好等于0.5，则舍入到相邻的在正无穷（+∞）方向上的整数。
Math.round(.5)
> 1
Math.round(-.5)
> -0
Math.round(-.500000001)
> -1
-0 === +0
> true
20.3.8
1、字符串与ascll码互转换
'A'.charCodeAt()
> 65
String.fromCharCode(69);
> 'E'
2、判断字符串只能包含数字
isNaN(Number('2s')) // 不是number
> true
3、箭头函数
箭头函数捕捉闭包上下文的this值。
箭头函数的this，就是捕获闭包里面的this. 箭头函数隐形运行了一句
const this = this
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}
var p = new Person();
function tiger() {
(() => {
console.log(this)
})()
}
tiger.call({})
> {}
4、事件池
SyntheticEvent 是合并而来。
这意味着 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件。
function onClick(event) {
console.log(event); // => nullified object.
console.log(event.type); // => "click"
const eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);
// 不起作用，this.state.clickEvent 的值将会只包含 null
this.setState({clickEvent: event});
// 你仍然可以导出事件属性
this.setState({eventType: event.type});
}
20.3.7
1、大佬也是这样写的条件渲染
{isLoading ? (
<div>Loading ...</div>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
2、ToBoolean
ToBoolean 抽象操作根据下表将其参数转换为布尔值类型的值:
输入类型 结果
未定义 false
空值 false
布尔值 结果等于输入的参数（不转换）。
数值 如果参数是 +0, -0, 或 NaN，结果为 false ；否则结果为 true。
字符串 如果参数是空字符串（其长度为零），结果为 false，否则结果为 true。
对象 true
3、不支持冒泡的事件
①focus
②blur
③mouseenter
④mouseleave
⑤load
⑥unload
⑦resize
5、外边框合并
使用bfc，创建一个独立的渲染区域，并规定了 block-level box 如何布局，且与这个区域外部毫不相关。
一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
- 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
css:
overflow: hidden;// 解决外边框合并
20.3.6
1、css轮播
@keyframes go {
0% {
left: 0;
}
15% {
left: -100%;
}
50% {
left: -100%;
}
65% {
left: -200%;
}
100% {
left: -200%;
}
}
.solider{
width: 100vw;
overflow: hidden;
.soliderInner{
white-space: nowrap;
animation-duration: 7s;
animation-timing-function: cubic-bezier(0.11, 0.21, 0.58, 1);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: go;
position: relative;
transform: scale3d(1, 1, 1);
img{
width: 100vw;
}
}
}
20.3.5
1、输入框input[type=number]
首先为何输入框input[type=number]能输入e呢？ 究竟这个e是何方神圣，查阅资料得知，原来e = 2.71828...
2、页面平滑滚动：scroll
html { scroll-behavior: smooth; }
20.3.4
1、Date
创建一个新Date对象的唯一方法是通过new 操作符若将它作为常规函数调用（即不加 new 操作符），则将会返回一个字符串，而非 Date 对象 let now = new Date();
2、原型链
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
[] instanceof Array // true
3、null 和 undefined
+null ： 0
+undefined ： NaN
20.3.2
1、闭包
闭包就是函数在创建的时候会形成闭包，这个闭包会包含创建时所能访问的所有变量。
2、js编译
- let 的「创建」过程被提升了，但是初始化没有提升。
- var 的「创建」和「初始化」都被提升了。
- function 的「创建」「初始化」和「赋值」都被提升了。
函数的声明就是一段代码，执行的时候才会去运行
全局编译（GO）
- 页面产生便创建了GO全局对象（Global Object）（也就是window对象）；
- 第一个脚本文件加载；
- 脚本加载完毕后，分析语法是否合法；
- 开始预编译 查找变量声明，作为GO属性，值赋予undefined；
- 查找函数声明，作为GO属性，值赋予函数体；
函数编译（AO）
- 创建AO活动对象（Active Object）；
- 查找形参和变量声明，值赋予undefined；
- 实参值赋给形参；
- 查找函数声明，值赋予函数体；
3、异步
异步是指执行耗时的任务时，先让它去执行，我就不管你了，我去干其他事情了，但是我会指定执行完后该做什么，执行完之后，去执行相应的操作就行了 (promise then后面的方法都是异步调用)
4、运算符号优先级
- 三元运算符号优先级比+ - 低
var value = 100
console.log('value' + (value !== 0) ? 'define' : 'not define')
> define
