js基礎&es6

1. 原生方法

   Array.prototype

   join() 方法將數(shù)組（或一個類數(shù)組對象）的所有元素連接到一個字符串中顷啼。
   concat() 方法用于合并兩個或多個數(shù)組当犯。此方法不會更改現(xiàn)有數(shù)組读串，而是返回一個新數(shù)組。
   forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)育拨。
   indexOf()方法返回在數(shù)組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1
   map() 方法創(chuàng)建一個新數(shù)組茁彭，其結果是該數(shù)組中的每個元素都調用一個提供的函數(shù)后返回的結果。
   pop()方法從數(shù)組中刪除最后一個元素扶歪，并返回該元素的值理肺。此方法更改數(shù)組的長度摄闸。
   push() 方法將一個或多個元素添加到數(shù)組的末尾，并返回數(shù)組的新長度妹萨。
   shift() 方法從數(shù)組中刪除第一個元素年枕，并返回該元素的值。此方法更改數(shù)組的長度乎完。
   unshift() 方法將一個或多個元素添加到數(shù)組的開頭熏兄，并返回新數(shù)組的長度。
   slice() 方法返回一個從開始到結束（不包括結束）選擇的數(shù)組的一部分淺拷貝到一個新數(shù)組對象树姨，元素組不修改
   splice() 方法通過刪除現(xiàn)有元素和/或添加新元素來更改一個數(shù)組的內容摩桶。

   String.prototype

   charAt() 方法從一個字符串中返回指定的字符。
   concat() 方法將一個或多個字符串與原字符串連接合并帽揪，形成一個新的字符串并返回硝清。
   indexOf() 方法返回調用 String 對象中第一次出現(xiàn)的指定值的索引，開始在fromIndex進行搜索转晰。如果未找到該值芦拿，則返回-1。
   lastIndexOf() 方法返回指定值在調用該方法的字符串中最后出現(xiàn)的位置挽霉，如果沒找到則返回 -1防嗡。從該字符串的后面向前查找惹苗，從 fromIndex 處開始虑凛。
   match() 當一個字符串與一個正則表達式匹配時固惯， match()方法檢索匹配項证膨。
   replace() 方法返回一個由替換值替換一些或所有匹配的模式后的新字符串士葫。模式可以是一個字符串或者一個正則表達式, 替換值可以是一個字符串或者一個每次匹配都要調用的函數(shù)择诈。
   slice() 方法提取一個字符串的一部分颖医，并返回一新的字符串备籽。新字符串包括beginSlice但不包括 endSlice庐完。
   substr() 方法返回一個字符串中從指定位置開始到指定字符數(shù)的字符钢属。
   substring() 方法返回一個字符串在開始索引到結束索引之間的一個子集, 或從開始索引直到字符串的末尾的一個子集。
   split() 方法使用指定的分隔符字符串將一個String對象分割成字符串數(shù)組门躯，以將字符串分隔為子字符串,以確定每個拆分的位置淆党。
   trim() 方法會從一個字符串的兩端刪除空白字符。在這個上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行終止符字符（如 LF讶凉，CR）染乌。

2. bind方法的實現(xiàn)

   可以通過（call, apply）封裝函數(shù)實現(xiàn)

   call,apply唯一區(qū)別在于call的參數(shù) 要平鋪，apply的參數(shù)放到一個數(shù)組里放到第二次參數(shù)的位置
   bind方法與call,apply的區(qū)別在于懂讯，生成一個新的函數(shù) 不執(zhí)行荷憋。

3. 閉包 和 原型鏈

   (閉包)是使用被作用域封閉的變量，函數(shù)褐望，閉包等執(zhí)行的一個函數(shù)的作用域

   • 性能考量
     如果不是因為某些特殊任務而需要閉包勒庄，在沒有必要的情況下串前，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的，因為閉包對腳本性能具有負面影響实蔽，包括處理速度和內存消耗.

   原型鏈: 每個對象都有一個私有屬性（稱之為 [[Prototype]]）荡碾，它持有一個連接到另一個稱為其 prototype 對象（原型對象）的鏈接。該 prototype 對象又具有一個自己的原型局装，層層向上直到一個對象的原型為 null玩荠。

4. 快速排序算法

    function quickSort(arr) {
        if(arr.length<=1) {
            return arr;
        }
   
        let leftArr = [];
        let rightArr = [];
        let q = arr[0];
        for(let i = 1,l=arr.length; i<l; i++) {
            if(arr[i]>q) {
                rightArr.push(arr[i]);
            }else{
                leftArr.push(arr[i]);
            }
        }
   
        return [].concat(quickSort(leftArr),[q],quickSort(rightArr));
    }
   

5. 瀏覽器回退

   history.pushState && window.onpopstate && window.hashchange

6. 箭頭函數(shù)的特點

   this指向的固定化，并不是因為箭頭函數(shù)內部有綁定this的機制贼邓，實際原因是箭頭函數(shù)根本沒有自己的this，導致內部的this就是外層代碼塊的this闷尿。正是因為它沒有this塑径，所以也就不能用作構造函數(shù)。

7. 跨域與同源

具體的思路：由于瀏覽器有同源策略限制 填具，所以想要跨域訪問其他域下的資源统舀，需要繞開瀏覽器的這個限制，可以在服務器端設置一個代理劳景，由服務器端向跨域下的網(wǎng)站發(fā)出請求誉简，再將請求結果返回給前端，成功避免同源策略的限制盟广。

8. 事件機制

他們是描述事件觸發(fā)時序問題的術語闷串。事件捕獲指的是從document到觸發(fā)事件的那個節(jié)點，即自上而下的去觸發(fā)事件筋量。相反的烹吵，事件冒泡是自下而上的去觸發(fā)事件。事件代理就是利用事件冒泡原理.

html5新增的屬性

• 根據(jù)其功能分為幾個組:

  語義：能夠讓你更恰當?shù)孛枋瞿愕膬热菔鞘裁础?br> 連通性：能夠讓你和服務器之間通過創(chuàng)新的新技術方法進行通信桨武。
  離線 & 存儲：能夠讓網(wǎng)頁在客戶端本地存儲數(shù)據(jù)以及更高效地離線運行肋拔。
  多媒體：使 video 和 audio 成為了在所有 Web 中的一等公民。
  2D/3D 繪圖 & 效果：提供了一個更加分化范圍的呈現(xiàn)選擇呀酸。
  性能 & 集成：提供了非常顯著的性能優(yōu)化和更有效的計算機硬件使用凉蜂。
  設備訪問 Device Access：能夠處理各種輸入和輸出設備。
  樣式設計: 讓作者們來創(chuàng)作更加復雜的主題吧性誉！

• 關于 Cookie窿吩、localStoragee和sessionStorage

項目構建webpack, gulp, grunt

• Gulp與Grunt

1. 任務運行器(task runner)菜循，例如 Gulp翘地，可以處理許多不同的預處理器(preprocesser)和轉換器(transpiler)，但是在所有的情景下癌幕，它都需要一個輸入源并將其壓縮到一個編譯好的輸出文件中衙耕。然而，它是在每個部分的基礎上這樣做的勺远，而沒有考慮到整個系統(tǒng)橙喘。這就造成了開發(fā)者的負擔：找到任務運行器所不能處理的地方，并找到適當?shù)姆绞綄⑺羞@些模塊在生產(chǎn)環(huán)境中聯(lián)合在一起胶逢。
2. Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具厅瞎，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具初坠。
3. Grunt和Gulp的工作方式是：在一個配置文件中和簸，指明對某些文件進行類似編譯，組合碟刺，壓縮等任務的具體步驟锁保，工具之后可以自動替你完成這些任務。

• Gulp相比Grunt

• 易用 Gulp相比Grunt更簡潔南誊，而且遵循代碼優(yōu)于配置策略身诺，維護Gulp更像是寫代碼。
• 高效 Gulp相比Grunt更有設計感抄囚，核心設計基于Unix流的概念霉赡，通過管道連接，不需要寫中間文件幔托。
• 高質量 Gulp的每個插件只完成一個功能穴亏，這也是Unix的設計原則之一，各個功能通過流進行整合并完成復雜的任務重挑。例如：Grunt的imagemin插件不僅壓縮圖片嗓化，同時還包括緩存功能。他表示谬哀，在Gulp中刺覆，緩存是另一個插件，可以被別的插件使用史煎，這樣就促進了插件的可重用性谦屑。目前官方列出的有673個插件驳糯。
• 易學 Gulp的核心API只有5個，掌握了5個API就學會了Gulp氢橙，之后便可以通過管道流組合自己想要的任務酝枢。gulp.task
  gulp.run
  gulp.watch
  gulp.src
  gulp.dest

• Webpack

• Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js）悍手，Webpack將從這個文件開始找到你的項目的所有依賴文件帘睦，使用loaders處理它們，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件坦康。
• Webpack 試圖通過提出一個大膽的想法來減輕開發(fā)者的負擔：如果有一部分開發(fā)過程可以自動處理依賴關系會怎樣竣付？如果我們可以簡單地寫代碼，讓構建過程最終只根據(jù)需求管理自己會怎樣滞欠？
• WebPack可以看做是模塊打包機：它做的事情是卑笨，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss仑撞，TypeScript等），并將其轉換和打包為合適的格式供瀏覽器使用妖滔。

框架React,Vue,Angular

• Vue 的一些語法和 AngularJS 的很相似 (例如 v-if vs ng-if)隧哮。因為 AngularJS 是 Vue 早期開發(fā)的靈感來源。然而座舍，AngularJS 中存在的許多問題沮翔，在 Vue 中已經(jīng)得到解決。

• Angular2 它具有優(yōu)秀的組件系統(tǒng)曲秉，并且許多實現(xiàn)已經(jīng)完全重寫采蚀，API 也完全改變了。Angular 事實上必須用 TypeScript 來開發(fā)承二，因為它的文檔和學習資源幾乎全部是面向 TS 的

    TypeScript: function (person : Person) {}

react相比Vue

• 在 React 應用中榆鼠，當某個組件的狀態(tài)發(fā)生變化時，它會以該組件為根亥鸠，重新渲染整個組件子樹妆够。PureComponent 和 shouldComponentUpdate需要保證該組件的整個子樹的渲染輸出都是由該組件的 props 所決定的。

• 在 Vue 應用中负蚊，組件的依賴是在渲染過程中自動追蹤的神妹，所以系統(tǒng)能精確知曉哪個組件確實需要被重渲染。你可以理解為每一個組件都已經(jīng)自動獲得了 shouldComponentUpdate家妆，并且沒有上述的子樹問題限制鸵荠。

react生命周期函數(shù)

• 初始化階段：

constructor(props, context) 構造函數(shù)，在創(chuàng)建組件的時候調用一次伤极。
getDefaultProps: 獲取實例的默認屬性(即使沒有生成實例蛹找，組件的第一個實例被初始化CreateClass的時候調用姨伤，只調用一次,)
getInitialState:獲取每個實例的初始化狀態(tài)（每個實例自己維護）
componentWillMount：組件即將被裝載、渲染到頁面上（render之前最好一次修改狀態(tài)的機會）
render:組件在這里生成虛擬的DOM節(jié)點（只能訪問this.props和this.state熄赡；只有一個頂層組件姜挺，也就是 說render返回值值職能是一個組件；不允許修改狀態(tài)和DOM輸出）
componentDidMount:組件真正在被裝載之后彼硫，可以修改DOM

• 運行中狀態(tài)：

componentWillReceiveProps:組件將要接收到屬性的時候調用（趕在父組件修改真正發(fā)生之前,可以修改屬性和狀態(tài)）
shouldComponentUpdate:組件接受到新屬性或者新狀態(tài)的時候（可以返回false炊豪，接收數(shù)據(jù)后不更新，阻止re nder調用拧篮，后面的函數(shù)不會被繼續(xù)執(zhí)行了）
componentWillUpdate: 不能修改屬性和狀態(tài)
render: 只能訪問this.props和this.state词渤；只有一個頂層組件，也就是說render返回值只能是一個組件串绩；不 允許修改狀態(tài)和DOM輸出
componentDidUpdate:可以修改DOM

• 銷毀階段：

componentWillUnmount:開發(fā)者需要來銷毀（組件真正刪除之前調用缺虐，比如計時器和事件監(jiān)聽器）

為什么要用Redux

props意味著父級分發(fā)下來的屬性，state意味著組件內部可以自行管理的狀態(tài)礁凡，并且整個React沒有數(shù)據(jù)向上回溯的能力高氮，也就是說數(shù)據(jù)只能單向向下分發(fā)，或者自行內部消化顷牌。
為了有更好的state管理剪芍，就需要一個庫來作為更專業(yè)的頂層state分發(fā)給所有React應用，這就是Redux

前端模塊化規(guī)范（ES6模塊化以及CommonJs,AMD和CMD）(RequireJS 和 SeaJS)

CommonJS規(guī)范主要用于服務端編程窟蓝，加載模塊是同步的罪裹，這并不適合在瀏覽器環(huán)境，因為同步意味著阻塞加載运挫，瀏覽器資源是異步加載的状共，因此有了AMD CMD解決方案。
AMD規(guī)范在瀏覽器環(huán)境中異步加載模塊谁帕，而且可以并行加載多個模塊峡继。不過，AMD規(guī)范開發(fā)成本高匈挖，代碼的閱讀和書寫比較困難鬓椭，模塊定義方式的語義不順暢。
CMD規(guī)范與AMD規(guī)范很相似关划，都用于瀏覽器編程小染，依賴就近，延遲執(zhí)行贮折，可以很容易在Node.js中運行裤翩。不過，依賴SPM 打包，模塊的加載邏輯偏重
ES6 在語言標準的層面上踊赠，實現(xiàn)了模塊功能呵扛，而且實現(xiàn)得相當簡單，完全可以取代 CommonJS 和 AMD 規(guī)范筐带，成為瀏覽器和服務器通用的模塊解決方案今穿。

ES6 模塊的設計思想，是盡量的靜態(tài)化伦籍，使得編譯時就能確定模塊的依賴關系蓝晒，以及輸入和輸出的變量。CommonJS 和 AMD 模塊帖鸦，都只能在運行時確定這些東西芝薇。比如，CommonJS 模塊就是對象作儿，輸入時必須查找對象屬性洛二。

CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
CommonJS是主要為了JS在后端的表現(xiàn)制定的，他是不適合前端的

AMD(異步模塊定義)出現(xiàn)攻锰，它就主要為前端JS的表現(xiàn)制定規(guī)范晾嘶。

RequireJS 遵循 AMD（異步模塊定義）規(guī)范，Sea.js 遵循 CMD （通用模塊定義）規(guī)范娶吞。規(guī)范的不同变擒，導致了兩者 API 不同。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規(guī)范寝志。

SeaJS對模塊的態(tài)度是懶執(zhí)行, 而RequireJS對模塊的態(tài)度是預執(zhí)行

庫jquery,Bootstrap,Lodash,swiper

nodejs