如"cbaacfdeaebb"，符合要求的是"f"，因为他只出现了一次（次数最少），并且比其他只出现一次的字符（如"d"）首次出现的位置最靠前。 注：字符串也包含length属性。
// 获取字符串中出现次数最少的字符 function getRareChar(str) { let hash = {}; // 将各个字符名字、首次出现位置及出现次数存到hash表 for(let i = 0, len = str.length; i < len; i++) { // 如果hash[str[i]]不存在，则对其进行初始化 hash[str[i]] = hash[str[i]] || {index: i, count: 0}; hash[str[i]].count++; // count计数自增 } // 因为哈希表不好排序，将它转成数组 return Object.keys(hash).map(function (key) { return Object.assign({char: key}, hash[key]); // 根据count属性进行升序排序 }).sort(function (a, b) { return a.count - b.count; // 取出count最小的 }).filter(function (e, i, arr) { return e.count === arr[0].count; // 在count值最小的集合里面再根据index属性进行升序排序 }).sort(function (a, b) { return a.index - b.index; })[0].char; } // 测试数据 var str = 'ablfdasfdarleoeorwqajhfdsafdlladaasrjhehafdalhewadadfahwesaew'; console.log(getRareChar(str));本问题用到知识点：
1 Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。 // simple array var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2'] // array like object with random key ordering var anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // console: ['2', '7', '100'] // getFoo is a property which isn't enumerable var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; console.log(Object.keys(myObj)); // console: ['foo'] 2 map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意： map() 不会对空数组进行检测。 注意： map() 不会改变原始数组。 array.map(function(currentValue,index,arr), thisValue) currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象 3 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); console.log(target); // expected output: Object { a: 1, b: 4, c: 5 } console.log(returnedTarget); // expected output: Object { a: 1, b: 4, c: 5 } 4 sort() 方法用于对数组的元素进行排序。 语法arrayObject.sort(sortby) sortby 可选。规定排序顺序。必须是函数。 function sortNumber(a, b) { return b - a } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) //10,5,40,25,1000,1 //1000,40,25,10,5,1 5 Array filter() 方法 array.filter(function(currentValue,index,arr), thisValue) filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意： filter() 不会对空数组进行检测。 注意： filter() 不会改变原始数组。 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象浏览器由shell+内核构成，Shell是指浏览器的外壳：例如菜单，工具栏 等，内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些 浏览器并不区分外壳和内核。从Mozilla将Gecko独立出来后，才有了外壳和内核的明确划分。目前主流的浏览器有IE6、IE8、FireFox、Opera、Safari、Chrome、Netscape等。
浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。 渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至 显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内 容的应用程序都需要内核。（参见维基百科） JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引 擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性 能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、 Presto、Webkit。
Trident又称MSHTML，是微软开发的渲染引 擎（包含了Javascript引擎JScript），他已经深入了Windows操作系统的骨髓，例如Windows Media Play，Windows Explorer，Outlook Express等都使用了。目前很多浏览器都使用这个引擎，例如IE，Maxthon(最新版已经不使用)等。
Gecko是C++开发的，Open Source的渲染引擎，包括了SpiderMonkey(Rhino)。主要的使用者有Firefox。
Webkit是苹果公司基于KHTML开发的。他包括Webcore和JavaScriptCore（SquirrelFish,V8）两个引擎。主要的使用者有Safari，Chrome。
Presto由Opera Software公司开始的，用于Opera的渲染引擎。Macromedia Dreamweaver （MX版本及以上）和Adobe Creative Suite 2也使用了Presto的内核。
主流浏览器所使用的内核分类 Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等 Gecko内核：Firefox,Netscape6及以上版本,MozillaSuite/SeaMonkey等 Presto内核：Opera7及以上 Webkit内核：Safari,Chrome等
Trident：这种浏览器内核是IE浏览器用 的内核，因为在早期IE占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准 支持不是很好，甚至在2005年，与网页标准制定组织(W3C理事会)所制定的标准发生了脱节，同时 Trident 内核本身的BUG比较多，对一些符合W3C标准的网页代码支持不是很好，这在早期的IE版本中比较明显，比如IE5.5以前(包括IE5.5)，其实IE6对W3C标准的支持也不是很好，而我们现在很多人都在使用IE6，事实上它也属于一个比较早的版本。
(1) 构建一个新的数组存放结果;for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比;若结果数组中没有该元素，则存到结果数组中.
Array.prototype.unique1 = function() { var res = [this[0]]; console.log(this[0]); for (var i = 1; i < this.length; i++) { var repeat = false; for (var j = 0; j < res.length; j++) { if (this[i] === res[j]) { repeat = true; break; } } if (!repeat) { res.push(this[i]); } } return res; } var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0] console.log(arr.unique1());(2) 先将原数组进行排序;检查原数组中的第i个元素与结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置;如果不相同，则将该元素存入结果数组中. 这种方法也会有一定的局限性，因为在去重前进行了排序，所以最后返回的去重结果也是排序后的。如果要求不改变数组的顺序去重，那这种方法便不可取了
Array.prototype.unique2 = function() { this.sort(); //先排序 var res = [this[0]]; for (var i = 1; i < this.length; i++) { if (this[i] !== res[res.length - 1]) { res.push(this[i]); } } return res; } var arr = [1, 'a', 'a', 'b', 'd', 'e', 'e', 1, 0] console.log(arr.unique2()); //[0, 1, "a", "b", "d", "e"](3).创建一个新的数组存放结果;创建一个空对象;for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。 说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。
Array.prototype.unique3 = function() { var res = []; var json = {}; for (var i = 0; i < this.length; i++) { console.log(json[this[i]]); if (!json[this[i]]) { res.push(this[i]); json[this[i]] = 1; } } console.log(json); //Object {34: 1, 112: 1, 你好: 1, str: 1, str1: 1} return res; } var arr = [112, 112, 34, '你好', 112, 112, 34, '你好', 'str', 'str1']; console.log(arr.unique3()); //[112, 34, "你好", "str", "str1"];1减少 HTTP 请求数量 在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。 （1）CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数。 （2）合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。 （3）采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
2控制资源文件加载优先级（ 引入CSS 在头部，JS 在底部。） 浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。
3利用浏览器缓存 浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
4减少重排（Reflow） 基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。 减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。 减少 DOM 操作 图标使用 IconFont 替换
Promise对象可以理解为一次执行的异步操作，使用promise对象之后可以使用一种链式调用的方式来组织代码；让代码更加的直观。
Promise是一个构造函数，自己身上有all、race、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解，后面再细究概念。
Promise链式操作经典案例：
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); return p; } function runAsync3(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); return p; } runAsync1() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); return '直接返回数据'; //这里直接返回数据 }) .then(function(data){ console.log(data); });resolve是执行成功，resolve是将Promise的状态置为fullfiled reject是执行失败，reject是把Promise的状态置为rejected
catch用来指定reject的回调，效果和写在then的第二个参数里面一样。 不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
经典案例：
function getNumber(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ var num = Math.ceil(Math.random()*10); //生成1-10的随机数 if(num<=5){ resolve(num); } else{ reject('数字太大了'); } }, 2000); }); return p; } // getNumber() // .then(function(data){ // console.log('resolved'); // console.log(data); // }) // .catch(function(reason){ // console.log('rejected'); // console.log(reason); // }); getNumber() .then(function(data){ console.log('resolved'); console.log(data); console.log(somedata); //此处的somedata未定义 }) .catch(function(reason){ console.log('rejected'); console.log(reason); });Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
经典案例：
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); return p; } function runAsync3(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); return p; } Promise .all([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法
经典案例：
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); return p; } function runAsync3(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); return p; } Promise .race([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });Sass是一种CSS预处理器语言，通过编程方式生成CSS代码。因为可编程，所以操控灵活性自由度高，方便实现一些直接编写CSS代码较困难的代码。 同时，因为Sass是生成CSS的语言，所以写出来的Sass文件是不能直接用的，必须经过编译器编译成CSS文件才能使用。 CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。最常用的css预处理器有sass、less css、 stylus。
一、MVC（Model-View-Controller）
MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式： 1 Model（模型）表示应用程序核心（比如数据库记录列表）。 2 View（视图）显示数据（数据库记录）。 3 Controller（控制器）处理输入（写入数据库记录）。
二、MVVM（Model-View-ViewModel）也是3个模块
MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份
注：SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层对网络连接进行加密。
