前端面试题整理
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&order=&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()
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,undefined3]
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:
● 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
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}%0AisIDCard1%3D%2F%5E%5B1-9%5D%5Cd%7B7%7D((0%5Cd)%7C(1%5B0-2%5D))((%5B0%7C1%7C2%5D%5Cd)%7C3%5B0-1%5D)%5Cd%7B3%7D#card=math&code=%2F%0A%E4%BB%A51%E5%BC%80%E5%A4%B4%EF%BC%8C%E7%AC%AC%E4%BA%8C%E4%BD%8D%E5%8F%AF%E8%83%BD%E6%98%AF3%2F4%2F5%2F7%2F8%E7%AD%89%E7%9A%84%E4%BB%BB%E6%84%8F%E4%B8%80%E4%B8%AA%EF%BC%8C%E5%9C%A8%E5%8A%A0%E4%B8%8A%E5%90%8E%E9%9D%A2%E7%9A%84%5Cd%E8%A1%A8%E7%A4%BA%E6%95%B0%E5%AD%97%5B0-9%5D%E7%9A%849%E4%BD%8D%EF%BC%8C%E6%80%BB%E5%85%B1%E5%8A%A0%E8%B5%B7%E6%9D%A511%E4%BD%8D%E7%BB%93%E6%9D%9F%E3%80%82%0A%E8%BA%AB%E4%BB%BD%E8%AF%81%EF%BC%9A%0A%2F%2F%E8%BA%AB%E4%BB%BD%E8%AF%81%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%2815%E4%BD%8D%29%0AisIDCard1%3D%2F%5E%5B1-9%5D%5Cd%7B7%7D%28%280%5Cd%29%7C%281%5B0-2%5D%29%29%28%28%5B0%7C1%7C2%5D%5Cd%29%7C3%5B0-1%5D%29%5Cd%7B3%7D&id=o924m)/;
//身份证正则表达式(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 ↩︎
若有收获，就点个赞吧
0 人点赞
