刷题2022-2

js array
css

正则
- [abc]
- [^abc]
- {n,m} n至m次
- {n,}n次以上（包括n）
- {,m}m次以内（不包括m）
- 并集 [a-z[A-Z]] 即 [a-zA-Z]
- 交集[a-z&&[^bc]] 即[ad-z]
- . 任意字符
- \d 数字0-9
- \D 非数字
- \w 字符数字下划线
- \W 非字符/数字/下划线
- \s 空白字符
- \S 非空白字符
- ^ 开头
- $ 结尾
- \b 单词边界
- \B 非单词边界
- ？至多一次
- *零次或多次
- - 至少一次
执行上下文
- 全局执行上下文
- 函数执行上下文
只有函数表达式会被加入到

function Person(){ }

每个函数都有一个prototype属性能够指向原型（只有函数才有prototype属性）
- prototype 属性指向一个对象，这个对象正是调用该构造函数而创建的实例的原型
每个对象（除了null）都有一个属性 proto会指向原型
- p.proto=== Person.prototype
每个原型都有一个constructor属性指向关联的构造函数
- 构造函数： Person.prototype.constructor === Person
- p.constructor == Person.prototype.constructor
给原型增加方法
- Person.prototype.say = ()=>{ }
数组拷贝
- 浅拷贝
  - arr.concat() 或 arr.slice()
- 深拷贝
  - JSON.parse(JSON.stringify(arr)) 但是这种方法不能拷贝函数
  - 用递归调用一个深拷贝函数，但是会降低性能，根据实际开发选择
window对象的常用方法和函数都可以用self代替window
self 指窗口本身，它返回的对象跟window对象是一模一样的
js是单线程的，但异步非阻塞。浏览器是多线程的
类继承 function Animal(){ }
- 创建一个对象给原型赋值： Animal.prototype = new Person(); 这种继承方式有可能继承了太多
- 借用构造函数：Animal = Person.constructor;
- 借用并设置原型
- 共享原型 Animal.prototype = Person.prototype
- 复制属性
Symbol 是基本数据类型，但作为构造函数它并不完整，因为它不支持语法new Symbol()，Corome认为它不是构造函数。如果要生成实例直接使用Symbol()就行
宏任务微任务
- 先执行微任务：promise.then process.nextTick
- 再执行宏任务：setTimeout,setInterval（定时器类） I/O,UI Rendering等
- 再遵循先进先出原则
对于基本类型来说 contructor构造函数是只读的
service workder生命周期
- 下载：包含service worker的 .js 文件
- 安装：监听页面加载=》navigator.serviceWorkder.register(文件路由)
- 激活：这是处理旧缓存管理的机会，激活后，将控制所有属于其范围的页面
H5 提供了web worker 来引入js‘多线程’技术。它和传统线程语言不同，不会共享任何域或者资源，唯一互通的就是基于事件监听的message，
- 特点：有同源限制，无法访问DOM节点，运行在另一个上下文时无法使用window对象
- 初始化Worker：var worker = new Worker(‘/worker.js’)
- worker.addEventListener(‘message’,function(e){ console.log(e.data) }) 或 worker.onmessage
- 触发事件：worker.postMessage(任意类型的数据)
- 终止worker：worder.terminate() 等等其他，参看具体的技术文档
- 专用线程有93%的浏览器支持，IE10包括以下不支持，共享线程有42%浏览器支持
- 线程的构造方法包含在window中，可以借此来判断对浏览器的支持
函数式编程
- 例子=》 fn(json => callback(json));应该改成：fn(callback);
- 不依赖外部变量
- 声明式编程
- 函数组合
- 反正就是更高效的编程，减少字段的维护，精简代码便于阅读和移植
- 由于函数不修改外部变量，所以不存在进程锁的问题。
js的执行和运行是两个概念，执行一般依赖于环境，有node，浏览器，ringo等。js在不同的环境下的执行机制可能不一样。而运行是js的解析引擎，这是统一的。
js是单线程语言，无论是h5里的web-workder还是node里的cluster都是纸老虎，而且cluster还是进程管理相关
ES5:2009

ES6:2015 箭头函数模块化导出导入类函数默认参数解构赋值延展操作符 let const块级作用域

模板字符串 my name is ${name}
箭头函数相当于匿名函数，不能作为构造函数，不能使用new
箭头函数不能绑定arguments，需要展开运算符解决
箭头函数不绑定this，会使用上下文的this作为自己的
箭头函数没有原型属性prototype

class

class PauseMenu extends React.Component{
constructor(props){
super(props)
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener('change',this._onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener('change',this._onAppPaused);
}
onAppPaused(event){}
}
//==============或者=============
class PauseMenu extends React.Component{
componentWillMount(){
   AppStateIOS.addEventListener('change', this.onAppPaused);
}
componentWillUnmount(){
   AppStateIOS.removeEventListener('change', this.onAppPaused);
}
onAppPaused = (event) => {
   //把函数直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
}
}

ES7:2016 includes 指数操作符
ES8:2017 sync/await Object.values() Object.entries() String padding等
function和class的异同
- class的是一个特殊的方法，只能有一个
- class必须使用new操作符，而普通的function如果不使用new调用，那么会以全局的this作为内部对象; class如果忘了使用new会抛出错误；
- function构造函数存在提升，也就是定义构造函数的部分可以在实例化对象的后面。class不存在
- class不能使用call，apply，bind改变执行上下文
  - function函数调用时可以使用call，apply，bind改变this指向，调用fun的同时，通过call改变this指向
assign 将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象
- Object.assign(target,…sources)
- 在大量合并的情况下，Object.assign的性能要远高于… obj = {…obj, key : value }
- 该方法会忽略值为null或者undefined的对象
webpack如何实现模块之间的变量污染
- 这些模块会生成一个模块对象，值是一个函数
null,undedined,symbol, String,boolean, Object,Number，bigInt

js array
.indexOf 和 .includes
.find 和 .filter
.find 和 .some
.reduce 和 .filter、.map

css
position
- position
- static
- fixed
- absolute
- sticky 基于用户的滚动位置来定位; 页面滚动没超出时如同 static；否则如同 fixed
  - 父级元素不能有任何overflow:visible 以外的overflow，否则没有效果
flex 父元素 flex 只支持 ie 10+
- display: flex | inline-flex;
- flex-wrap: nowrap | wrap | wrap-reverse;
- flex-direction: row | row-reverse | column | column-reverse;
- flex-flow: flew-wrap和flex-direction的属性都可以写也可以一起写用空格分开
- justify-content: center | space-around | space-between | flex-start | flex-end
- align-items: flex-start | flex-end | center | stretch | baseline（以项目中第一行文字的基线对齐）
flex 子元素
- order: 变换位置
- flex: | auto（自动扩充）
移动端1px解决方案
- 0.5px 边框粗细
- 使用图片
- 使用after before这样的伪元素 height 1px 缩放transform: scale(1, 0.5);
- 宽高200% 边框1px 缩放0.5% :after absolute 但是有些浏览器不支持空元素的伪元素
z-index
- 它仅在定位元素上有效果,且position属性为非static值的元素
- 判断元素在z轴上的堆叠顺序不仅是比较两个元素的值大小，还由元素的层叠上下文，层叠等级共同决定
- DOM结构中如果z-index一样，那么后面的元素覆盖前面的
- 产生层叠上下文的条件
  - 父元素为flex|inline-flex，子元素z-index不为auto的时候
  - 元素的opacity不为1
  - 元素的transform属性不是normal
  - 元素的filter属性值不是none
  - 元素的isolation属性值是isolate
  - 等
锚点定位的时候平滑移动位置：scroll-behavior: smooth;
vue组件通信方式
- props / $emit
- inject / provide
- $parent / $children
- $attars 和 $listeners
- $ref
- localStorage / sessionStorage 缓存
Flux是一种思想，它把一个应用分成了4个部分:
- action 修改数据
- dispatcher 事件
- store 数据
- view 视图
Redux 和 Flux类似但是Redux里面只有一个Store;Redux和React没有关系，它支持React，Angular，Ember，Jquery甚至纯js

js array

css