前端面试题整理
https://www.cnblogs.com/haoyijing/p/5789348.html#z1_6
阮一峰的 ES6 教程
http://es6.ruanyifeng.com/?search=map&x=0&y=0
前端仓库
https://github.com/wuhaohao1234
MDN-教程权威资料
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
HTTP 网络相关
URL 有哪些部分组成？
浏览器的引擎有哪些？
[1] IE 浏览器 (trident 内核) —trident 三叉戟
[2] Mozilla firefox (gecko 内核) —gecko 壁虎
[3] Safari (webkit 内核）
[4] Chrome Opera (Blink 内核) —blink 眨眼
浅谈 cookie 跨域的解决方案？
● domain-域
设置这个属性可以使多个 web 服务器共享 cookie。domain 属性的默认值是创建 cookie 的服务器的主机名。不能将一个 cookie 的域设置成服务器所在的域之外的域；
举个例子：
让位于 a.taotao.com 的服务器能够读取 b.taotao.com 设置的 cookie 值。如果 b.taotao.com 的页面创建的 cookie 把它的 path 属性设置为”/”，把 domain 属性设置成”.taotao.com”，那么所有位于 b.taotao.com 的网页和所有位于 a.taotao.com 的网页，以及位于 taotao.com 域的其他服务器上的网页都可以访问(或者说是得到)这个 cookie。
● path-路径
表示创建该 cookie 的服务器的哪些路径下的文件有权限读取该 cookie，默认为/，就是创建该 cookie 的服务器的根目录。
理解 JSONP 跨域原理？
https://blog.csdn.net/inite/article/details/80333130
前端优化方式有哪些？
● 降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，lazyLoad。
● 加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
● 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
● 渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline
http 请求头有哪些属性？
● content-type
● referer
● user-agent :Mozilla/5.0 appleWebkit
● cookie
● accept :text/html
● accept-encoding ：gzip
● accept-language ：zh-CN ,zh
● Origin
● host
● proxy
浏览器的回流和重绘
○ DOM 树和 render 树
从 MVC 的角度来说，可以将 render 树看成是 V，dom 树看成是 M，C 则是具体的调度者，比 HTMLDocumentParser 等。
何时发生回流重绘？？
● 添加、删除、修改(元素的尺寸（宽 高 margin padding border）或位置) 可见的 DOM 元素；
● 元素内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代；
● 页面一开始渲染的时候（这肯定避免不了）；
● 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）；
● 注意：回流一定会触发重绘，而重绘不一定会回流
如何减少回流和重绘？？
● 将多次 DOM 修改为一次
● 批量修改 DOM
● 使元素脱离文档流
● 对其进行多次修改
● 再将元素放回到文档中
● 对于复杂动画效果,使用绝对定位让其脱离文档流
● 对于复杂动画效果，由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流。否则会引起父元素以及后续元素频繁的回流。
这个我们就直接上个例子
https://www.cnblogs.com/chris-oil/p/10800961.html
举例浏览器兼容性问题的解决办法？
https://www.nowcoder.com/ta/front-end-interview/review?tpId=10&tqId=11094&query=&asc=trueℴ=&page=18
● png 24 位的图片在 iE6 浏览器上出现背景
○ 解决方案：做成 PNG 8 位，也可以引用一段脚本处理.
● 浏览器默认的 margin 和 padding 不同
○ 解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。
● IE 下，可以使用 getAttribute() 获取常规属性和自定义属性；Firefox 下,只能使用 getAttribute()获取自定义属性
○ 解决方法：统一通过 getAttribute()获取自定义属性。
● IE 下，event 对象有 x、y 属性，但是没有 pageX、pageY 属性; Firefox 下，event 对象有 pageX、pageY 属性，但是没有 x、y 属性
○ 解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
●
●
●
● Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
○ 解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none;
● 漏写 DOCTYPE 声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。
○ 解决方法：统一加上 DOCTYPE 声明
HTML
HTTP 状态码
https://www.runoob.com/http/http-status-codes.html
HTML 中的标签的功能
https://blog.csdn.net/Coding___Man/article/details/84103853
name 属性
● Keywords(关键字)
○ keywords 用来告诉搜索引擎你网页的关键字是什么
● description(网站内容描述)
○ description 用来告诉搜索引擎你的网站主要内容
● viewport(移动端窗口)
○ 主要用来设计移动端网页
● robots(定义搜索引擎爬虫的索引方式)
● author(作者)
● copyright(版权)
http-equiv 属性
● content-Type(显示字符集的设定)
○ 设定页面使用的字符集（ //HTML5 设定网页字符集的方式推荐使用 UTF-8）
● cache-control(指定请求和响应遵循的缓存机制)
○ 指导浏览器如何缓存某个响应以及缓存多长时间。用法：
● Expires(期限)
○ 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
● Refresh(刷新)
○ 说明：自动刷新并指向新页面。用法：＜ meta http-equiv=”Refresh” content=”2; URL=http://www.root.net"＞
● Set-Cookie(cookie 设定)
○ 说明：设置 cookie, 如果网页过期，那么存盘的 cookie 将被删除。用法：＜ meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/“＞
给 DOM 对象添加属性
系统内置的标签属性有：
id name type checked title src href style
其中 class 属性在 js 代码中通过 className 调用
- 通过 “.”+“属性名”设置的属性，也要通过 “.”+“属性名”获取；
- setAttribute(‘属性名’,’属性值’)，也要通过 getAttribute()获取；
- 直接在元素标签上加属性 如：
注意：
● 对于自定义属性，使用 . 运算符设置无法通过 getAttribute()获取，反之通过 setAttribute(‘self-attr’,’xiong’)设置也无法通过 . 运算符取得；
● 用 . 来引用，必须是内置的属性(IE 可以访问自定义属性)，而且引用的时候，区分大小写；
● 用 getAttribute 来引用，可以访问自定义属性，不区分大小写；
常见的 DOM 方法？
DOM（Document Object Model）是针对 HTML 和 XML 文档的 API
JavaScript
基本数据类型
js 基本数据类型类别
null 类型
https://www.jianshu.com/p/4841fcc6b4e7
&& 逻辑与和 || 逻辑或的用法
字符串对象
字符串对象的常用方法集
substr(start [，length]) //第一个字符的索引是 0，start 必选 length 可选
substring(start [, end]) //第一个字符的索引是 0，start 必选 end 可选
slice(start,end) //返回截取的元素，原始数组/字符串未发生变化
splice(start,deleteCount,item1,item2,item3…) //原始数组/字符串发生变化
indexOf(val) //数组/字符串中是否有某个值 没有返回-1，有返回下标
split(“&”) //以&符号分割字符串，返回数组
“xiong123juntao”.match(/\d+/) //正则匹配，返回[“123”, index: 5, input: “xiong123juntao”, groups: undefined]
str.replace(正则，替换/执行函数)
将原生的 Ajax 封装成 promise
var myNewAjax=function(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.open(‘get’,url);
xhr.send(‘data’);
xhr.onreadystatechange=function(){
if(xhr.status200&&xhr.readyState4){
var json=JSON.parse(xhr.responseText);
resolve(json)
}else if(xhr.readyState==4&&xhr.status!=200){
reject(‘error’);
}
}
})
};
js 监听对象属性的改变
https://www.jianshu.com/p/fce3a6a9f920
Object.defineProperty()的详细用法参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
(1)在 ES5 中可以通过 Object.defineProperty() 来实现已有属性的监听
(2)在 ES6 中可以通过 Proxy 来实现
如何实现一个私有变量，不能直接访问只能通过 getName()方法访问
(1)通过 defineProperty()来实现
obj={
name:’xiong’,
getName:function(){
return this.name
}
};
Object.defineProperty(obj,”name”,{
configurable: false, //不可配置
enumerable:false, //不可枚举
writable:false //不可修改
});
console.log(obj.name); //xiong
obj.name = “justin”;
console.log(obj.getName()); //xiong
(2)通过构造函数的创建形式（函数的局部变量）
function product(){
var name=’xiong’;
this.getName=function(){
return name;
}
}
var obj=new product();
obj.getName()
setTimeout、setInterval 和 requestAnimationFrame 之间的区别？
● setTimeout(func,300) 函数 func 等待 300ms 后执行；
● setInterval(func,300) 函数 func 每隔 300ms 执行一次；
● requestAnimationFrame(RAF)与 setTimeout 和 setInterval 不同，不需要设置时间间隔，大多数电脑显示器的刷新频率是 60Hz，大概相当于每秒钟重绘 60 次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是 1000ms/60，约等于 16.6ms。RAF 采用的是系统时间间隔不会因为前面的任务而影响 RAF，但是如果前面的任务多的话，会响应 setTimeout 和 setInterval 真正运行时的时间间隔。
RAF 特点：
（1）requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率；
（2）在隐藏或不可见的元素中，RAF 将不会进行重绘或回流，这当然就意味着更少的 CPU、GPU 和内存使用量；
（3）requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，如果页面不是激活状态下的话，动画会自动暂停 节省 CPU 的开销；
DOM 的宽高和位置
https://blog.csdn.net/qq_39840761/article/details/91620263
https://www.jianshu.com/p/44abcc626318
● clientHeight：表示的是内容可视区域的高度，不包含 border 和滚动条；
● offsetHeight：表示可视区域的高度，包含了 border 和滚动条；
● scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分；
● clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0；
● scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css 定位的元素或 body 元素)距离顶端的高度；
mouseEvent 对象的高度 宽度对比
用 setTimeout 来实现 setInterval
setTimeout(function(){
//do something
setTimeout(arguments.callee,200); //arguments.callee 指代引用函数自身
},200);
● arguments 是函数调用时创建的一个类似的数组但又不是数组的对象，并且它存储的是实际传递给函数的参数，并不局限于函数声明的参数列表；
● arguments.callee == 正被执行的 Function 对象;
● arguments.caller == 调用当前函数的函数对象；
● 在 JS 的非严格模式下，函数的实参和 arguments[index] 存在映射关系，严格模式下 arguments 和实参直接的映射被切断了；
arguments 用法参考： https://www.cnblogs.com/LMJBlogs/p/6024148.html
https://www.cnblogs.com/giggle/p/5280812.html
如何实现 sleep 的效果
● 方式 1：while 循环
function sleep(ms){
var start=Date.now(),expire=start+ms; //Date.now() 获取时间撮，另一种方法 var date = new Date();date.getTime()
while(Date.now()<expire);
console.log(‘1111’);
return;
}
sleep(2000)
● 方式二：通过 promise 来实现
function sleep(ms){
var temple=new Promise((resolve,reject)=>{
console.log(111);
setTimeout(resolve,ms)
});
return temple
}
sleep(1000).then(function(){
console.log(222)
})
● 方式三:通过 generator+promise 来实现
function* sleep(ms){
yield new Promise(function(resolve,reject){
console.log(111);
setTimeout(resolve,ms);
})
}
//sleep(500).next() //{value: Promise, done: false}
sleep(500).next().value.then(function () {
console.log(222)
})
JS 内存泄漏与垃圾回收机制
https://blog.csdn.net/qq_17550381/article/details/81126809
● 什么是内存泄漏？
● JavaScript 垃圾回收机制的原理
○ 垃圾回收机制会定期扫描那些不再用到的内存（变量），然后将其释放掉
● 垃圾回收机制的方法：
○ 标记清除
○ 引用计数
● WeakMap 对于值的引用都是不计入垃圾回收机制的，是弱引用
const wm = new WeakMap();
const element = document.getElementById(‘example’);
wm.set(element, ‘some information’);
wm.get(element) // “some information”
简单实现 Node 的 Events 模块
前端性能优化方案
● 减少 HTTP 请求
● 使用内容发布网络（CDN）
● 添加本地缓存
● 压缩资源文件
● 将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
● 避免使用 CSS 表达式
● 减少 DNS 查询
● 使用外部 javascript 和 CSS
● 避免重定向
● 图片 lazyLoad
JS 闭包
闭包就是一个函数，这个函数能够访问其他函数作用域中的变量。
function outer() {
var a = ‘变量 1’
var inner = function () {
console.info(a)
}
return inner // inner 就是一个闭包函数，因为他能够访问到 outer 函数的作用域
}
很多人会搞不懂匿名函数与闭包的关系，实际上，闭包是站在作用域的角度上来定义的，因为 inner 访问到 outer 作用域的变量，所以 inner 就是一个闭包函数。虽然定义很简单，但是有很多坑点，比如 this 指向、变量的作用域，稍微不注意可能就造成内存泄露。我们先把问题抛一边，思考一个问题：为什么闭包函数能够访问其他函数的作用域 ?
从堆栈的角度看待 js 函数
基本变量的值一般都是存在栈内存中，而对象类型的变量的值存储在堆内存中，栈内存存储对应空间地址。基本的数据类型: Number 、Boolean、Undefined、String、Null。
var a = 1 //a 是一个基本类型 var
b = {m: 20 } //b 是一个对象
当我们执行 b={m:30}时，堆内存就有新的对象{m：30}，栈内存的 b 指向新的空间地址( 指向{m：30} )，而堆内存中原来的{m：20}就会被程序引擎垃圾回收掉，节约内存空间。我们知道 js 函数也是对象，它也是在堆与栈内存中存储的，我们来看一下转化：
栈是一种先进后出的数据结构：
- 在执行 fn 前，此时我们在全局执行环境(浏览器就是 window 作用域)，全局作用域里有个变量 a；
- 进入 fn，此时栈内存就会 push 一个 fn 的执行环境，这个环境里有变量 b 和函数对象 fn1，这里可以访问自身执行环境和全局执行环境所定义的变量;
- 进入 fn1，此时栈内存就会 push 一个 fn1 的执行环境，这里面没有定义其他变量，但是我们可以访问到 fn 和全局执行环境里面的变量，因为程序在访问变量时，是向底层栈一个个找，如果找到全局执行环境里都没有对应变量，则程序抛出 underfined 的错误;
- 随着 fn1()执行完毕，fn1 的执行环境被销毁，接着执行完 fn()，fn 的执行环境也会被销毁，只剩全局的执行环境下，现在没有 b 变量和 fn1 函数对象了，只有 a 和 fn(函数声明作用域是 window 下);
链接：https://www.jianshu.com/p/26c81fde22fb
JS 语言的特性
● 运行在客户端浏览器上；
● 不用预编译，直接解析执行代码；
● 是弱类型语言，较为灵活；
○ 强类型语言(java、C++、Python)，当你定义一个变量是某个类型，如果不经过代码显式转换（强制转化），它就永远都是这个类型，如果把它当做其他类型来用，就会报错;
○ 弱类型语言(php js vb)，你想把这个变量当做什么类型来用，就当做什么类型来用，语言的解析器会自动（隐式）转换;
● 与操作系统无关，跨平台的语言；
● 脚本语言、解释性语言;
判断 JS 对象类型
● typeof
● instance of
● Object.prototype.toString.call()
https://www.jianshu.com/p/585926ae62cc
JS 中继承的方式有哪些？
1、原型链继承，将父类的实例作为子类的原型，他的特点是实例是子类的实例也是父类的实例，父类新增的原型方法/属性，子类都能够访问，并且原型链继承简单易于实现，缺点是来自原型对象的所有属性被所有实例共享，无法实现多继承，无法向父类构造函数传参；
2、构造继承，使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类，构造继承可以向父类传递参数，可以实现多继承，通过 call 多个父类对象。但是构造继承只能继承父类的实例属性和方法，不能继承原型属性和方法，无法实现函数服用，每个子类都有父类实例函数的副本，影响性能；
3、实例继承，为父类实例添加新特性，作为子类实例返回，实例继承的特点是不限制调用方法，不管是 new 子类（）还是子类（）返回的对象具有相同的效果，缺点是实例是父类的实例，不是子类的实例，不支持多继承；
4、拷贝继承：特点：支持多继承，缺点：效率较低，内存占用高（因为要拷贝父类的属性）无法获取父类不可枚举的方法（不可枚举方法，不能使用 for in 访问到）；
5、组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用；
6、寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点；
https://www.cnblogs.com/Grace-zyy/p/8206002.html
https://www.jianshu.com/p/129976ab0015 class 继承方式
浏览器加载文件的顺序?
什么是伪数组？
● 伪数组是带有 length 属性能通过 Array.prototype.slice 转换为真正的数组的对象
● 比如 arguments 对象,还有像调用 getElementsByTagName,document.childNodes 之类的，它们都返回 NodeList 对象都属于伪数组
● 我们可以通过 Array.prototype.slice.call(fakeArray)将伪数组转变为真正的 Array 对象: 返回新数组而不会修改原数组
https://www.cnblogs.com/fool/archive/2010/10/09/1846966.html
浏览器端的 js 包括哪些部分？
核心( ECMAScript) , 文档对象模型(DOM), 浏览器对象模型(BOM)
this 指向问题总结
普通函数 this 的概念是：this 是 JavaScript 的一个关键字，他是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this 对象是在运行时基于函数的执行环境绑定的：在全局函数中，this 指向的是 window；当函数被作为某个对象的方法调用时，this 就等于那个对象）。
● 普通函数调用，此时 this 指向 window
function fn(){
console.log(this);// window
}
fn(); //相当于 window.fn(),此处默认省略 window
● 构造函数调用时， this 指向实例对象
function Person(age, name){
this.age = age;
this.name = name
console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2
}
varp1 =newPerson(18,’zs’)
varp2 =newPerson(18,’ww’)
● 对象方法调用 时， this 指向该方法所属的对象
var obj = {
fn:function(){
console.log(this); // obj
}
}
obj.fn();
● 通过事件绑定的方法， this 指向绑定事件的对象
btn.onclick =function(e){
console.log(e) //e == MouseEvent 点击对象
console.log(this); // btn
}
● 定时器函数， this 指向 window
setInterval(function(){
console.log(this); // window
},1000);
箭头函数的 this 定义：箭头函数的 this 是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this 就继承了定义函数的对象。
所以，这会很好的解决匿名函数和 setTimeout 和 setInterval 的 this 指向问题。我们不用再去给其用 that 变量存储 this。
箭头函数和普通函数 this 指向问题？
普通函数： this 的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的。
箭头函数：this 指向是函数被创建时绑定的，它的指向就是当前词法作用域中的 this，并且不会因为被怎么样的方式调用改变绑定。
https://blog.csdn.net/w390058785/article/details/82884032
判断对象是否包含某个属性的方法?
● 最简单的方法，就是使用“!”进行判断，该方法既可以判断自身属性也可以判断继承来的属性;
let obj = { x: 1 };
obj.x ! undefined; // true 有 x 属性
obj.y !== undefined; // false 无 y 属性
obj.toString !== undefined; // true 从 Object 继承 toString 属性
● 使用 in 运算符，in 的语法是： attr in obj ， 同样，该表达式也返回一个布尔值;
let obj = { x: 1 };
‘x’ in obj; // true
‘y’ in obj; // false
‘toString’ in obj; // true
//in 运算符语法很简单，效果跟 undefined 是相同的，与 undefined 不同的是，in 可以区分存在但值为 undefined 的属性。话不多说，看代码：
let obj = { x: undefined };
obj.x !== undefined; // false，无法判断属性值为 undefined 的情况
‘x’ in obj; // true
● 对象的 hasOwnProperty() 方法可以检测指定属性名是否在对象内，同样返回是布尔值， 当检测属性为自有属性(非继承)的时候返回 true;
let obj = { x: 1, abc: 2 };
let a = ‘a’;
let b = ‘bc’;
obj.hasOwnProperty(‘x’); // true 包含
obj.hasOwnProperty(‘y’); // false 不包含
obj.hasOwnProperty(‘toString’); // false 继承属性
obj.hasOwnProperty(a + b); // true 判断的是属性 abc
//in 运算符和 hasOwnProperty() 的区别就在于 hasOwnProperty()能判断该属性是自身的还是继承的，而 in 不行
● propertyIsEnumerable() 是 hasOwnProperty() 的增强版，这个方法的用法与 hasOwnProperty()相同，但当检测属性是自有属性(非继承)且这个属性是可枚举的，才会返回 true;
//什么是可枚举属性？通俗的讲就是可以通过 for…in 遍历出来的属性就是可枚举属性。通常由 JS 代码创建出来的属性都是可枚举的.
let obj = Object.create({x: 1}); // 通过 create()创建一个继承了 X 属性的对象 obj
obj.propertyIsEnumerable(‘x’); // false x 是继承属性
obj.y = 1; // 给 obj 添加一个自有可枚举属性 y
obj.propertyIsEnumerable(‘y’); // true
Object.prototype.propertyIsEnumerable(‘toString’); // false 不可枚举
数组 length 属性特殊用法
var arr = [1,2,3];
arr.length = 6;
console.log(arr);//[1,2,3,undefined*3]
5 in arr; //false
arr[5] = undefined;
5 in arr; //true
Es6 中的模块化 Module 导入导出
https://www.jianshu.com/p/29f89e8b9cb6
// 导出暴露 name 变量
export var name = “随笔川迹”;
// 暴露 weChatPublic
export let weChatPublic = “itclanCoder”;
// 暴露 time
export const time = 2018;
// 上面的等价于下面的写法,以下这种是常见写法
var name = “随笔川迹”;
let weChatPublic = “itclanCoder”;
const time = 2018;
export {name,weChatPublic,time}
// 导出函数
export function sum(num1,num2){
return num1+num2;}/*
- 以上等价于
- function sum(num1,num2){
- return num1+num2;
- }
- export sum;
_/
// 导出类
export class People{
constructor(name,age){
this.name = name;
this.age = age;
}
info(){
return姓名：${this.name} 年龄：${this.age};
}}
导入模块
import { name, weChatPublic,time,sum,People} from “../modelTest1/exportExampleEs5.js”
var people = new People(“小美”,18); // 实例化 perople 对象
console.log(name);
console.log(weChatPublic);
console.log(time);
console.log(sum(1,2));
console.log(people.info());
//需要导入的属性和方法比较多时 _ 全部导入
import * as example from “../modelTest1/exportExampleEs5.js”
console.log(example.name);
JavaScript 的设计模式有哪些？
https://www.w3cschool.cn/zobyhd/3lt2rcqm.html
● JavaScript 构造器模式
● JavaScript 单例模式
● JavaScript 工厂模式
● JavaScript 发布者订阅者模式
● JavaScript 模块化模式
● JavaScript 原型模式
● JavaScript MVC 模式
● JavaScript MVVM 模式
● JavaScript Mixin 混入模式 —可以举 Vue 的 Mixin 混入
● JavaScript 装饰模式 —可以举 Python 的装饰器例子
单例模式和工厂模式
https://www.jianshu.com/p/dd1cd3a3267f
Flutter 的特点：
Flutter 框架分为三层，Framework 使用 Dart 语言实现，Engine 使用 C 实现， Embedder 是一个嵌入层，通过该层把 Flutter 嵌入到各个平台上去，Embedder 的主要工作包括渲染 Surface 设置, 线程设置，以及插件等。平台(如 iOS)只是提供一个画布，剩余的所有渲染相关的逻辑都在 Flutter 内部，这就使得它具有了很好的跨端一致性。
https://www.jianshu.com/p/1cea8c154ff8
● 跨平台：现在 flutter 至少可以跨 5 种平台，常见的平台：MacOS,Windows ,Linux ,Android ,iOS ,到目前为止，Flutter 算是支持平台最多的框架了。良好的跨平台性，大大减少了开发成本。
● 丝滑般的体验：使用 Flutter 内置的 Material Design（android 风格）和 Cupertino（ios 风格）风格组件，以及丰富的 motion API,平滑而自然的滑动效果和平台感知，为用户带来全新的体验。
● 响应式框架：使用一系列基础组件和响应式框架，可以轻松构建用户界面。使用功能强大且灵活的 API 可以实现复杂的界面效果。
● 支持插件：使用插件可以访问平台本地 API,如相机，蓝牙，WIFI 等等。借助现有的 Java，swift ,object c ， c 代码实现对原生系统的调用。
● 60fps 超高性能：Flutter 采用 GPU 渲染技术，编写 APP 的应用可以达到 60fps(每秒传输帧数)，完全可以胜任游戏开发。
一句话概括 restful
restful 是一种 http 请求分格，就是用 URL 定位资源，用 HTTP 描述操作
变量提升和函数提升
https://www.jianshu.com/p/5a5f6fb21fd3https://blog.csdn.net/sinat_41695090/article/details/81284355
所有的声明语句无论写在代码的什么位置(if 条件判断中的 var 变量声明也要提升)，在编译执行的时候，都会提升到最顶；
函数声明在前，变量声明在后；
console.log(foo);
foo();//可以执行
var foo=10;
foo();//foo 已经被赋值为一个变量，无法执行 foo 为函数
console.log(foo);
function foo(){
var a;
console.log(a);
a=12;
console.log(a);
}
console.log(foo);
实际的代码执行顺序是:
function foo(){
var a;
console.log(a); //undefined
a=12;
console.log(a); //12
}
var foo;
console.log(foo); //函数 foo
foo(); //执行函数
foo=10; //foo 设置为数值 10
foo(); //由于这里报错，foo 已经被赋值成为一个数值了，找不到这个函数，下面的都不会被执行
console.log(foo);
console.log(foo);
typeof 判断类型
typeof Symbol() //“symbol”
typeof Number() //“number”
typeof String() //“string”
typeof Function() //“function”
typeof Object() //“object”
typeof Boolean() //“boolean”
typeof null //“object”
typeof undefined //“undefined”
var aa = new Array()
typeof aa
“object”
typeof ‘’
“string”
typeof []
“object”
‘’false //true
0false //true
[]==false //true
undefined == false //false
null == false //false
NaN == false //false
new 创建对象内部是如何实现的？
● 创建一个空对象
● 将所 创建对象的proto属性值设置为构造函数的 prototype 的属性值
● 执行构造函数中的代码，构造函数中的 this 指向该对象
● 返回对象
var Person = function(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.show = function() {
console.log(this.name, this.age);
};
// var p = new Person(“bella”, 10);
var p = {};
p.proto = Person.prototype;
Person.call(p, “balle”, 10);
console.log(p);
CSS
CSS 选择器常用方法汇总
https://www.w3school.com.cn/cssref/css_selectors.asp
选择器 描述 例子
.class 类选择器,含有该类名的所有标签 class=”mycls” .mycls{}
#id id=”one” #one{}
- 匹配所有 *{}
element 标签选择器，匹配所有改标签 button{}
element1,element2 选择所有 元素 div,p{}
element1 element2 选择 div 内部的所有 p，p 的父级不一定是 div div p{}
element1>element2 选择父元素为 div 的所有 p 标签 div>p{}
element1+element2 选择紧接在 div 元素之后的所有 p 元素 div+p{}
[attribute] 选择带有 target 属性所有元素 [target]
元素的内容之前插入内容 p:before :after 在每个
元素的内容之后插入内容 p:after :nth-child(n) 选择属于父元素 p 的第二个子元素 p:nth-child(2) :last-child 选择属于父元素 p 的最后一个子元素 p:last-child :checked 选择每个被选中的 元素 input:checked :enabled 选择每个启用的 元素 input:enabled
CSS 实现水平居中和垂直居中的方法
https://www.cnblogs.com/haoyijing/p/5815394.html
方法 1：flex 布局
方法 2：display:table-cell
方法 3：父 relative 子 absolute(margin: auto;bottom: 0;top: 0;left: 0;right: 0;)
方法 4：父 relative 子 absolute(width: 300px;height: 200px;margin-left: -150px;margin-top: -100px;top: 50%;left: 50%;)
方法 5：文字居中
height:36px
text-align:center;
line-height:36px
伪类的用法详解
https://www.cnblogs.com/ghost-xyx/p/3763669.html
CSS 动画和 JS 动画的优缺点
https://www.cnblogs.com/haoyijing/p/5789348.html#z1_6
src 和 href 的区别
标签的 href 属性用于指定超链接目标的 URL，一般完成跳转功能。
src 是指向外部资源位置，主要用在 img script iframe 标签中，表示引用资源， 在请求 src 资源时会将其指向的资源下载并应用到当前文档中，例如 js 脚本，img 图片和 frame 等元素。
CSS 实现两列布局，左边固定宽度，右边自适应
CSS 哪些样式属性可以继承?
● 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before 和 unicode-bidi
● 所有元素可继承：visibility 和 cursor
● 内联元素可继承：white-space、line-height、color、font、 font-family、font-size、font-style、font-weight、 text- decoration、word-spacing、text-transform、direction、letter-spacing、
● 块状元素可继承：text-indent 和 text-align
● 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
● 表格元素可继承：border-collapse
BFC
(BlockFormatContext 块级格式化上下文，用于清除浮动防止 margin 重叠等）
BFC 是页面上的一个独立容器，不会与浮动 box 重叠，子元素不会影响到外面；计算 BFC 的高度时，内部的浮动元素也参与计算；
BFC 特性：
- 使 BFC 内部浮动元素不会到处乱跑；
- 和浮动元素产生边界。（margin-left = 浮动元素宽度+与浮动元素的左边距）
哪些元素会生成 BFC 呢？
● 根元素
● float 不为 none 的元素；
● position 为 fixed 和 absolute 的元素；
● display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素；
● overflow 不为 visible；
https://www.jianshu.com/p/0d713b32cd0d
Git
Git 常用指令
● git init
● git add .
● git commit -m ‘本次提交说明’
● git remote add origin git@github.com:<GitHub 账户名>/<仓库名>
● git push
● git checkout -b <分支名>
● git log
● git reset –hard HEAD^
● git rm text.txt
Linux 常用指令
● cd ..
● cd ./home
● pwd 显示工作路径
● ls 查看目录中的所有文件
● mkdir dir1 创建目录 dir1
● rm -f file1 删除文件名为 file1 的文件
● mv dir1 dir2 移动文件
● cp file1 file2 复制一个文件
● gzip file1 压缩文件
● rar
● tar
● zip
● touch 创建文件
● vi 编辑文件（vim 环境 :w 保存文件 :wq 保存退出 :q 不保存直接退出 ）
● cat 显示文件内容
// Debian, Ubuntu 系统的包管理工具 apt-get
● apt-get install package_name
● df 检查各个磁盘分区和已挂载上来的文件系统的磁盘空间
说一说 http2.0 的特点？
● 提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比 http1.0）；
● 允许多路复用：多路复用允许同时通过单一的 HTTP/2 连接发送多重请求-响应信息。改善了：在 http1.1 中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞；
● 二进制分帧：HTTP2.0 会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码；
● 首部压缩；
● 服务器端推送；
比较 Canvas 或者 SVG 渲染
Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些炫酷的视觉 特效（如粒子效果 鼠标跟随）。
SVG 具有的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时图片不会模糊。
二叉树的分类
● 完全二叉树：对于一颗二叉树，假设其深度为 d(d>1)。除了第 d 层外，其它各层的节点数目均已达最大值，且第 d 层所有节点从左向右连续地紧密排列；
● 满二叉树的定义是所有叶节点都在最底层的完全二叉树;
● 平衡二叉树（AVL 树）：当且仅当任何节点的两棵子树的高度差不大于 1 的二叉树；
五种进程调度的算法实现（一）
● 最短工作优先（SJF）；
● 最短剩余时间优先（SRTF）；
● 最高响应比优先（HRRF）；
● 优先级调度（Priority）；
● 轮转调度（RR）。
还有以下知识点：
1、进程
2、线程
3、同步与异步
4、并发与并行
5、死锁
https://www.cnblogs.com/bajdcc/p/4707544.html
认识哈希表
常见的哈希算法：
1） 直接定址法
2） 除留余数法
3） 数字分析法
4） 平方取中法
5） 随机数法
哪些操作会造成内存泄漏？
内存泄漏指对象在您不再引用或没有变量指向它时 它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
- setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
- 闭包
- 控制台日志
- 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
用 call 或 bind 实现 bind()
Function.prototype.bind2 = function (context) {
var self = this;
var args=Array.prototype.slice.call(arguments,1)//模拟 bind 时的传参
return function () {
var bindArgs=Array.prototype.slice(arguments)//模拟执行 bind 的返回函数时的传参
self.apply(context,args.concat(bindArgs));//修改返回函数的 this 指向为 context,并将 bind 时和执行 bind 的返回函数传入的参数 concat 后绑定给返回函数。
}
}
补充：
Array.prototype.slice.call(arguments,1) 把类数组 arguments 的参数截取出来，索引从 1 开始
异步加载 JS 的方式有哪些？
●
宏任务和微任务(是异步任务中的两种)
macro-task 宏任务：包括整体代码 script、setTimeout、setInterval
micro-task 微任务：Promise process.nextTick
原理：
示例：
彻底弄懂 JavaScript 执行机制 谈 Event Loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
https://juejin.im/post/59e85eebf265da430d571f89
● 同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入 Event Table 并注册函数。
● 当指定的事情完成时，Event Table 会将这个函数移入 Event Queue。
● 主线程内的任务执行完毕为空，会去 Event Queue 读取对应的函数，进入主线程执行。
● 上述过程会不断重复，也就是常说的 Event Loop(事件循环)。
比较 onclick 和 addEventListener？？
● onclick 它不可以一个事件函数处理多个事件，addEventListener 可以针对同一个对象做多个处理方法，$div0.onclick = function() $div0.onclick = function() 定义多个时后一个会覆盖前一个；
● onclick 不能设置捕获和冒泡阶段那个优先,addEventListener 可以设置捕获和冒泡优先级；
● onclick 这种事件没有自由度（侦听点击）,addEventListener 可以侦听所有自定义的事件；
阻止默认事件
e.preventDefault()
阻止事件冒泡
e.stopPropagation();//阻止冒泡
e.cancelBubble=true;//只适用于 IE8 及以下
webpack 和 gulp 区别（模块化与流的区别）
gulp 强调的是前端开发的流程化，首先定义一系列的 task，然后配置 task 要处理的事务（例如 ES6 转 ES5、雪碧图，图片压缩，scss 转成 css），最后让 gulp 来依次执行这些 task，从而构建项目的整个前端开发流程。
webpack 强调前端模块化开发，更侧重模块和打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 loader（加载器）和 plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
什么时候用 grunt/gulp 呢？
如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。只需要进行简单的合并、压缩，就使用 grunt/gulp 即可。
但是如果整个项目使用了模块化管理，而且相互依赖非常强， 我们就可以使用更加强大的 webpack 了。
所以，grunt/gulp 和 webpack 有什么不同呢？
grunt/gulp 更加强调的是前端流程的自动化，模块化不是它的核心。 webpack 更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。
知道 PWA 吗？
PWA 全称 Progressive Web App，即渐进式 WEB 应用。
特点：
- 可靠——即时加载，即使在不确定的网络条件下也不会受到影响。
- 快速———- 页面展现之后，用户期望有平滑的体验，过渡动画和快速响应。
- 沉浸式体验—— 感觉就像设备上的原生 APP，具有沉浸式的用户体验。
PWA 中包含的核心功能及特性如下： - Web App Manifest(表明 表现)
- Service Worker
- Cache API 缓存
- Push&Notification 推送与通知
- Background Sync 后台同步
- 响应式设计
https://www.jianshu.com/p/098af61bbe04
函数防抖：
函数防抖，就是指触发事件后在一定时间内（n 秒内）函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
函数节流：
控制函数不要频繁的执行。
节流 throttle：
防抖 debounce：
判断数据类型？？
typeof([1,2,3])
“object”
typeof(“12”)
“string”
[1,2] instanceof Array //true
Object.prototype.toString.call([1,2,3])
数组有哪些去重方法？？
● 双层 for 循环（效率最低）
for (let i=0, len=arr.length; i<len; i++) {
for (let j=i+1; j<len; j++) {
if (arr[i] == arr[j]) {
arr.splice(j, 1);
// splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
len–;
j–;
}
}
}
● ES6 Set
Array.from(new Set(arr))
//示例
var alist = [1,2,5,3,6,2,4,6,3]
Array.from(new Set(alist))
[1, 2, 5, 3, 6, 4]
● 一层 for 循环+indexOf
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) => {
let result = [];
for( var i = 0 ; i < arr.length ; i++){
if(result.indexOf(arr[i]) == -1){
result.push(arr[i])
}
};
return result;
};
unique(arr);
● filter+indexOf
let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) => {
return arr.filter((item,index) => {
return arr.indexOf(item) === index;
})
};
unique(arr);
● for of +includes
function distinct(a, b) {
let arr = a.concat(b)
let result = []
for (let i of arr) {
if(!result.includes(i)){
result.push(i)
}
}
return result
}
暂停死区(暂时性死区)
在代码块内，使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。
写一个函数，第一秒打印 1，第二秒打印 2
let 块级作用域写法
for(let i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},1000i)
}
闭包自执行函数写法
for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i)
},1000i)
})(i)
}
谈一谈 Symbol
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入 Symbol 的原因；
怎么获得对象上的属性？
for（let i in obj） //该方法依次访问一个对象及其原型链中所有可枚举的类型
obj1 = {name:’xiong’,age:18,gender:’man’}
Object.keys(obj1)
[“name”, “age”, “gender”]
Object.getOwnPropertyNames(obj1)
[“name”, “age”, “gender”]
JavaScript 正则表达式：
https://www.cnblogs.com/moqiutao/p/6513628.html
手机号：
/^1(3|4|5|7|8)\d{9}/;
//身份证正则表达式(18 位)
isIDCard2=/[1]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}|(^\d{17}([0-9]|X)
%0A%E5%85%B6%E4%BB%96%E4%B8%80%E4%BA%9B%E6%AD%A3%E5%88%99%EF%BC%9A%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E7%BD%91%E7%BB%9C%E9%93%BE%E6%8E%A5%3A(h%7CH)(r%7CR)(e%7CE)(f%7CF)%20*%3D%20*(‘%7C%22)%3F(%5Cw%7C%5C%5C%7C%5C%2F%7C%5C.)%2B(‘%7C%22%7C%20*%7C%3E)%3F%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E5%9C%B0%E5%9D%80%3A%5Cw%2B(%5B-%2B.%5D%5Cw%2B)%40%5Cw%2B(%5B-.%5D%5Cw%2B)%5C.%5Cw%2B(%5B-.%5D%5Cw%2B)%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%3A(s%7CS)(r%7CR)(c%7CC)%20%3D%20*(‘%7C%22)%3F(%5Cw%7C%5C%5C%7C%5C%2F%7C%5C.)%2B(‘%7C%22%7C%20*%7C%3E)%3F%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84IP%E5%9C%B0%E5%9D%80%3A(%5Cd%2B)%5C.(%5Cd%2B)%5C.(%5Cd%2B)%5C.(%5Cd%2B)%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E5%9B%BD%E7%94%B5%E8%AF%9D%E5%8F%B7%E7%A0%81%EF%BC%88%E5%8C%85%E6%8B%AC%E7%A7%BB%E5%8A%A8%E5%92%8C%E5%9B%BA%E5%AE%9A%E7%94%B5%E8%AF%9D%EF%BC%89%3A(%5C(%5Cd%7B3%2C4%7D%5C)%7C%5Cd%7B3%2C4%7D-%7C%5Cs)%3F%5Cd%7B7%2C14%7D%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E5%9B%BD%E9%82%AE%E6%94%BF%E7%BC%96%E7%A0%81%3A%5B1-9%5D%7B1%7D(%5Cd%2B)%7B5%7D%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E5%9B%BD%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%B7%E7%A0%81%3A%5Cd%7B18%7D%7C%5Cd%7B15%7D%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E6%95%B4%E6%95%B0%EF%BC%9A%5Cd%2B%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E6%B5%AE%E7%82%B9%E6%95%B0%EF%BC%88%E5%8D%B3%E5%B0%8F%E6%95%B0%EF%BC%89%EF%BC%9A(-%3F%5Cd*)%5C.%3F%5Cd%2B%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%BB%BB%E4%BD%95%E6%95%B0%E5%AD%97%20%EF%BC%9A(-%3F%5Cd*)(%5C.%5Cd%2B)%3F%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E6%96%87%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%9A%5B%5Cu4e00-%5Cu9fa5%5D*%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E5%8F%8C%E5%AD%97%E8%8A%82%E5%AD%97%E7%AC%A6%E4%B8%B2%20(%E6%B1%89%E5%AD%97)%EF%BC%9A%5B%5E%5Cx00-%5Cxff%5D*%0A%E5%8E%BB%E9%99%A4%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%A6%96%E5%B0%BE%E7%A9%BA%E6%A0%BC%EF%BC%9F%EF%BC%9F%0A%2F(%5E%5Cs*)%7C(%5Cs*#card=math&code=%29%0A%E5%85%B6%E4%BB%96%E4%B8%80%E4%BA%9B%E6%AD%A3%E5%88%99%EF%BC%9A%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E7%BD%91%E7%BB%9C%E9%93%BE%E6%8E%A5%3A%28h%7CH%29%28r%7CR%29%28e%7CE%29%28f%7CF%29%20%2A%3D%20%2A%28%27%7C%22%29%3F%28%5Cw%7C%5C%5C%7C%5C%2F%7C%5C.%29%2B%28%27%7C%22%7C%20%2A%7C%3E%29%3F%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E5%9C%B0%E5%9D%80%3A%5Cw%2B%28%5B-%2B.%5D%5Cw%2B%29%2A%40%5Cw%2B%28%5B-.%5D%5Cw%2B%29%2A%5C.%5Cw%2B%28%5B-.%5D%5Cw%2B%29%2A%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5%3A%28s%7CS%29%28r%7CR%29%28c%7CC%29%20%2A%3D%20%2A%28%27%7C%22%29%3F%28%5Cw%7C%5C%5C%7C%5C%2F%7C%5C.%29%2B%28%27%7C%22%7C%20%2A%7C%3E%29%3F%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84IP%E5%9C%B0%E5%9D%80%3A%28%5Cd%2B%29%5C.%28%5Cd%2B%29%5C.%28%5Cd%2B%29%5C.%28%5Cd%2B%29%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E5%9B%BD%E7%94%B5%E8%AF%9D%E5%8F%B7%E7%A0%81%EF%BC%88%E5%8C%85%E6%8B%AC%E7%A7%BB%E5%8A%A8%E5%92%8C%E5%9B%BA%E5%AE%9A%E7%94%B5%E8%AF%9D%EF%BC%89%3A%28%5C%28%5Cd%7B3%2C4%7D%5C%29%7C%5Cd%7B3%2C4%7D-%7C%5Cs%29%3F%5Cd%7B7%2C14%7D%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E5%9B%BD%E9%82%AE%E6%94%BF%E7%BC%96%E7%A0%81%3A%5B1-9%5D%7B1%7D%28%5Cd%2B%29%7B5%7D%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E5%9B%BD%E8%BA%AB%E4%BB%BD%E8%AF%81%E5%8F%B7%E7%A0%81%3A%5Cd%7B18%7D%7C%5Cd%7B15%7D%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E6%95%B4%E6%95%B0%EF%BC%9A%5Cd%2B%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E6%B5%AE%E7%82%B9%E6%95%B0%EF%BC%88%E5%8D%B3%E5%B0%8F%E6%95%B0%EF%BC%89%EF%BC%9A%28-%3F%5Cd%2A%29%5C.%3F%5Cd%2B%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%BB%BB%E4%BD%95%E6%95%B0%E5%AD%97%20%EF%BC%9A%28-%3F%5Cd%2A%29%28%5C.%5Cd%2B%29%3F%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E4%B8%AD%E6%96%87%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%9A%5B%5Cu4e00-%5Cu9fa5%5D%2A%0A%E6%8F%90%E5%8F%96%E4%BF%A1%E6%81%AF%E4%B8%AD%E7%9A%84%E5%8F%8C%E5%AD%97%E8%8A%82%E5%AD%97%E7%AC%A6%E4%B8%B2%20%28%E6%B1%89%E5%AD%97%29%EF%BC%9A%5B%5E%5Cx00-%5Cxff%5D%2A%0A%E5%8E%BB%E9%99%A4%E5%AD%97%E7%AC%A6%E4%B8%B2%E9%A6%96%E5%B0%BE%E7%A9%BA%E6%A0%BC%EF%BC%9F%EF%BC%9F%0A%2F%28%5E%5Cs%2A%29%7C%28%5Cs%2A&id=Hef1J))/g
“ xiong “.replace(/(^\s*)|(\s*$)/g,””)
“xiong”
$1 $2 $3 …$9 分别表示()分组匹配到的内容
var str = ‘123-mm’;
var strReg = str.replace(/(\d+)-([A-Za-z]+)/g,’$2’);
console.log(strReg)//mm 上面那段$2 这个就是表示正则第二组个匹配到的内容
var str = “Hellllo world”;
str = str.replace(/(l)\1/g, ‘$1’);
解析：
对于正则表达式 /(l)\1/g，其中(l)是第一个分组，\1 指向第一个分组，即\1 重复了第一个分组的内容，所以该正则表达式可以表示成/(ll)/g
而对于第二个参数$1，表示用第一个分组的内容 l 对匹配到的部分进行替换(即 ll 替换成 l )，同时正则表达式有 g 表示全局匹配，所以 4 个 ll 被替换成 2 个 ll。
- 1-9 ↩︎
