一脑慧、Vue 相關(guān)問題

1魄眉、如何理解Vue？

vue是一套構(gòu)建用戶界面的漸進(jìn)式框架闷袒，核心是數(shù)據(jù)模型與組件化設(shè)計(jì)坑律，是一款MVVM框架，基于雙向數(shù)據(jù)綁定囊骤，簡潔輕量晃择。兼容IE可以添加 babel-polyfill 插件。

• babel-polyfuu 插件的使用方法：在 build 文件里的 webpack.base.conf.js 文件里配置也物，然后在 main.js 文件里引入：

// webpack.base.conf.js:
module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
}

// main.js:
import 'babel-polyfill'

• promise 問題宫屠，axios 不兼容 ie 的使用方法：

import promise from 'es6-promise';
promise.polyfill();

• URLSearchParams 未定義的問題，IE9不支持URLSearchParams：

// 下載 qs
npm install qs

// 在 main.js 中引入
import qs from 'qs';

2滑蚯、什么是MVVM開發(fā)模式浪蹂？

M是Model代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層告材；V是View代表UI視圖坤次，負(fù)責(zé)數(shù)據(jù)的展示；VM是ViewModel負(fù)責(zé)監(jiān)聽Model中的數(shù)據(jù)變化并且對View的視圖更新斥赋，處理交互操作缰猴。

3、簡述Vue的響應(yīng)式原理疤剑。

當(dāng)一個(gè)vue實(shí)例被創(chuàng)建時(shí)洛波，vue會(huì)遍歷 data 中的屬性，用 Object.defineProperty 將它們轉(zhuǎn)化為 getter/setter 并在內(nèi)部追蹤相關(guān)依賴骚露，在屬性被訪問和修改時(shí)被通知。每個(gè)組件實(shí)例都有 watcher缚窿，它會(huì)在組件渲染的過程中把屬性記錄為依賴棘幸，當(dāng)依賴項(xiàng)的 setter 被調(diào)用的時(shí)候，會(huì)通知關(guān)聯(lián)組件更新倦零。

4误续、簡述Vue的雙向數(shù)據(jù)綁定原理吨悍。

vue通過 Object.defineProperty() 做數(shù)據(jù)劫持，重寫 data 的 getter/setter 蹋嵌，在數(shù)據(jù)變動(dòng)時(shí)觸發(fā) Watcher育瓜，改變虛擬dom中的數(shù)據(jù)更新dom樹，完成雙向數(shù)據(jù)綁定栽烂。

5躏仇、簡述Vue組件之間的數(shù)據(jù)傳遞。

• 父組件向子組件傳遞數(shù)據(jù)：
  子組件用 props 接收父組件傳來的數(shù)據(jù)腺办，在父組件中注冊子組件并賦值給聲明的屬性焰手。

• 子組件向父組件傳遞數(shù)據(jù)：
  子組件用 $emit 觸發(fā)一個(gè)自定義函數(shù)并傳遞參數(shù)，在父組件中注冊子組件并綁定方法接收數(shù)據(jù)怀喉。

• 兄弟組件之間傳遞數(shù)據(jù)：
  在簡單的場景下书妻，可以使用一個(gè)空的vue實(shí)例 Bus作為中央事件總線；在復(fù)雜的場景下躬拢，使用vuex躲履。

6、Vue中如何監(jiān)聽某個(gè)屬性值的變化聊闯？

比如現(xiàn)在需要監(jiān)聽data中工猜，obj.a 的變化：

• 用 watch 監(jiān)聽

watch: {
  obj: {
    handler (newValue, oldValue) {
      console.log('obj changed')
    },
    deep: true
  }
}

deep 屬性表示深層遍歷，這么寫會(huì)監(jiān)聽 obj 所有屬性變化馅袁，并不是我們想要的域慷，所以需要修改一下：

watch: {
  obj.a: {
    handler (newValue, oldValue) {
      console.log('obj.a changed')
    }
  }
}

• 用 computed 實(shí)現(xiàn)

computed: {
  a () {
    return this.obj.a
  }
}

7、Vue中如何給 data 中的對象添加一個(gè)新的屬性汗销？

this.$set(this.obj, 'b', 'obj.b')

8犹褒、delete 和 Vue.delete 刪除數(shù)組有什么區(qū)別？

• delete被刪除的元素只是變成了 empty 或 undefined 其他元素的鍵值都不變弛针。

let a = [1, 2, 3, 4]
delete a[1]
console.log(a)

• Vue.delete直接刪除了數(shù)組叠骑，改變了數(shù)組原來的鍵值。

let b = [1, 2, 3, 4]
this.$delete(b, 1)
console.log(b)

9削茁、簡述Vue的生命周期宙枷。

• beforeCreate：完成實(shí)例初始化，掛載沒開始茧跋，DOM沒有初始化慰丛，loading 事件可以放在這里。

• created：實(shí)例創(chuàng)建完成瘾杭，完成數(shù)據(jù)初始化诅病，未掛載DOM不能訪問 el，若要訪問DOM一定要放在 Vue.nextTick() 的回調(diào)函數(shù)中，$ref 為空數(shù)組贤笆，可以對 data 數(shù)據(jù)進(jìn)行操作但請求不宜過多避免白屏?xí)r間太長蝇棉，loading 結(jié)束放在這里。

• beforeMount：數(shù)據(jù)初始化完成芥永，找到對應(yīng)的 template篡殷，并編譯成 render 函數(shù)。

• mounted：完成掛載DOM和渲染埋涧，完成雙向綁定板辽，可發(fā)起后端請求，對DOM進(jìn)行操作飞袋。

• beforeUpdate：數(shù)據(jù)更新前觸發(fā)戳气，可在更新前訪問現(xiàn)有的DOM，如手動(dòng)移除事件監(jiān)聽器巧鸭。

• updated：數(shù)據(jù)更新完成瓶您，不要隨意在這里操作數(shù)據(jù)，會(huì)陷入死循環(huán)纲仍。

• activated：keep-alive 組件激活時(shí)調(diào)用（用來緩存組件狀態(tài)）呀袱，這個(gè)時(shí)候 created 鉤子就不會(huì)被重復(fù)調(diào)用了，如果子組件需要在每次加載的時(shí)候進(jìn)行某些操作郑叠，可以使用 activated 鉤子觸發(fā)夜赵。

• deactivated：keep-alive 組件停用時(shí)調(diào)用。

• beforeDestroy：實(shí)例銷毀之前調(diào)用乡革，但實(shí)例仍然可用寇僧，可以在這里銷毀定時(shí)器、解綁全局時(shí)間沸版、銷毀插件對象嘁傀。

• destroyed：實(shí)例銷毀后調(diào)用，Vue 實(shí)例指示的所有東西都會(huì)解除綁定视粮，所有的事件監(jiān)聽器會(huì)被移除细办，所有的子實(shí)例也會(huì)被銷毀。

10蕾殴、<keep-alive></keep-alive>的作用是什么笑撞？

<keep-alive></keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例钓觉，主要用于保留組件狀態(tài)或避免重新渲染茴肥。
比如有一個(gè)列表和一個(gè)詳情頁，那么用戶會(huì)經(jīng)常打開詳情=>返回列表=>打開詳情…這樣列表和詳情都是一個(gè)頻率很高的頁面荡灾，那么就可以對列表組件使用<keep-alive></keep-alive>進(jìn)行緩存炉爆，用戶每次返回列表的時(shí)候堕虹，都能從緩存中快速渲染，而不是重新渲染芬首，可以減輕服務(wù)器壓力，提高性能逼裆。

11郁稍、Vue有哪些修飾符？

事件修飾符：stop（阻止冒泡）胜宇、prevent（提交事件不再重載頁面）耀怜、once、left桐愉、right
鍵盤修飾符：up财破、down、enter从诲、space
表單修飾符：number（輸入字符串轉(zhuǎn)為有效的數(shù)字）左痢、trim（輸入首尾空格過濾）、lazy（取代input監(jiān)聽change時(shí)間）

12系洛、Vue中 $mount 與 el 區(qū)別俊性？

兩者在使用中沒有什么區(qū)別，都是將實(shí)例化后的vue掛載到指定的DOM元素中描扯，如果指定了 el 則渲染在 el 對應(yīng)的DOM中定页，沒有指定 el 就用 $mount 手動(dòng)掛載。

13绽诚、Vue中 key 值和 is 的作用典徊？

使用 key，vue會(huì)基于 key 的變化重新排列元素恩够，并且移出 key 不存在的元素卒落，可以做優(yōu)化處理；is 可以擴(kuò)展原生 html 元素玫鸟，也可以綁定動(dòng)態(tài)組件导绷。

14、組件中 data 為什么是函數(shù)屎飘？

組件是用來復(fù)用的妥曲，Js 中對象是引用關(guān)系，作用域沒有隔離钦购，而vue的實(shí)例是不會(huì)被復(fù)用的檐盟，因此不存在引用對象的問題。

15押桃、什么是單向數(shù)據(jù)流葵萎？

單向數(shù)據(jù)流出現(xiàn)在組件通信，數(shù)據(jù)從父級流向子級，數(shù)據(jù)本身還是父級的羡忘，如果操作子級要改變父級的數(shù)據(jù)谎痢，只能通過子級告訴父級要操作哪個(gè)數(shù)據(jù)，然后父級修改數(shù)據(jù)卷雕，再傳給子級节猿。

16、Vue中 $router 和 $route 的區(qū)別漫雕？

• router 是 VueRouter 的一個(gè)實(shí)例滨嘱，相當(dāng)于一個(gè)全局的路由器對象，包含了所有的路由浸间、路由的關(guān)鍵屬性及方法太雨，經(jīng)常用的跳轉(zhuǎn)鏈接 $router.push({path:'/login',query:{name:'userName'}})

• route 是一個(gè)跳轉(zhuǎn)的路由對象（局部變量），每一個(gè)路由都有一個(gè)自己的 route魁蒜，可以獲取本次路由跳轉(zhuǎn)的 name囊扳、path、params梅惯、query 等參數(shù)宪拥，用法 let query=this.$route.query

17、vue-router 中 query 和 params 的區(qū)別铣减？

兩者都是在路由中傳參她君，query 用 path 引入，參數(shù)在地址欄中顯示葫哗；params 用 name 傳遞缔刹，參數(shù)不會(huì)在地址欄中顯示。

18劣针、vue-router有哪幾種導(dǎo)航鉤子校镐？

• 第一種：全局導(dǎo)航鉤子（全局守衛(wèi)）：router.beforeEach(to,from,next)，跳轉(zhuǎn)前進(jìn)行判斷攔截捺典；
• 第 二種：全局解析守衛(wèi)：router.beforeResolve鸟廓，在導(dǎo)航被確認(rèn)前，所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后襟己，解析守衛(wèi)就被調(diào)用引谜；
• 第三種：單獨(dú)路由獨(dú)享的守衛(wèi)：beforeEnter，在路由配置時(shí)定義擎浴，與全局守衛(wèi)的方法是一樣的员咽。
• 第四種：組件內(nèi)的守衛(wèi)。直接在路由組件內(nèi)定義守衛(wèi)贮预，

beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
    // 不贝室！能契讲！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
},
beforeRouteUpdate (to, from, next) {
   // 在當(dāng)前路由改變滑频，但是該組件被復(fù)用時(shí)調(diào)用
   // 舉例來說捡偏，對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
   // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用跪但。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用夯到。
   // 可以訪問組件實(shí)例 `this`
},
beforeRouteLeave (to, from, next) {
   // 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
   // 可以訪問組件實(shí)例 `this`
}

19、vue.cli 中怎樣使用自定義的組件

• 在 components 目錄新建組件頁面
• 在需要用的頁面中導(dǎo)入
• 注入到vue的子組件的 components 屬性上面
• 在視圖中使用

20售葡、簡書Vue中的 slot 插槽看杭。

插槽是Vue實(shí)現(xiàn)內(nèi)容分發(fā)的API，將插槽元素作為分發(fā)內(nèi)容的出口（子組件中給父組件提供一個(gè)占位符slot挟伙，父組件可以在組件標(biāo)簽中放任何內(nèi)容）楼雹。

• 匿名插槽：沒有插槽時(shí)，在組件標(biāo)簽寫入內(nèi)容是不起作用的尖阔，當(dāng)在組件中聲明了slot元素后贮缅，在組件標(biāo)簽中寫入內(nèi)容起了作用。

沒有使用slot時(shí)

使用了slot

• 具名插槽：就是在父組件中添加一個(gè) slot = '自定義名字' 的屬性介却，在子組件中的 slot 元素里面添加 name = '自定義名字' 即可谴供。

• 作用域插槽：就是組件上的屬性，可以在組件元素內(nèi)使用齿坷。

例一

例二

例三

21桂肌、如何理解Vue中的 Render 渲染函數(shù)？

Vue一般使用 template 來創(chuàng)建 html永淌，有的時(shí)候需要使用javascript 來創(chuàng)建 html崎场，這時(shí)候我們需要使用 render 函數(shù)，render 函數(shù) return 一個(gè) createElement 組件中的子元素存儲(chǔ)在組件實(shí)列中遂蛀，createElement 返回的是包含的信息會(huì)告訴Vue頁面上需要渲染什么樣的節(jié)點(diǎn)谭跨。我們稱這樣的節(jié)點(diǎn)為虛擬DOM

22、如何解決在加載頁面時(shí)出現(xiàn)的閃爍問題李滴？

使用 v-cloak螃宙。
出現(xiàn)閃爍的原因可能有二：

• 加載時(shí)遇到 {{value.name}} 閃爍
• 加載時(shí)遇到一個(gè)空盒子里邊什么也沒有 <p v-html="value.name"></p>

解決方法：

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

// css 中要添加
[v-cloak] {
    display: none;
}

如果還是閃爍，那可能是 v-cloak 的 display 屬性被層級更高的給覆蓋掉了悬嗓；或者 v-cloak 的樣式放在 @import 引入的css文件中不起作用污呼，可以放在 link 引入的 css 文件里或者內(nèi)聯(lián)樣式中。

23包竹、vuex是什么燕酷？

是一個(gè)專為vue應(yīng)用程序開發(fā)的狀態(tài)管理模式籍凝。

24、vuex有哪幾種狀態(tài)和屬性苗缩？

• state：存儲(chǔ)數(shù)據(jù)饵蒂，在根實(shí)例中注冊了 store 后，用 this.$store.state 來訪問酱讶；
• getter：可以認(rèn)為是 store 的計(jì)算屬性退盯，它的返回值會(huì)根據(jù)它的依賴被緩存起來，而且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算泻肯；
• mutation：更改 Vuex 的 store 中的狀態(tài)唯一方法是提交 mutation渊迁；
• action：包含任意異步操作，通過提交 mutation 間接更變狀態(tài)灶挟；
• module：將 store 分割成模塊琉朽，每個(gè)模塊都具有state、mutation稚铣、action箱叁、getter、甚至是嵌套子模塊惕医。

vuex的流程：
頁面通過 mapAction 異步提交事件到 action耕漱；action 通過 commit 把對應(yīng)參數(shù)同步提交到 mutation；mutation 會(huì)修改 state 中對于的值抬伺。螟够；最后通過 getter 把對應(yīng)值拋出去，在頁面的計(jì)算屬性中沛简，通過 mapGetter 動(dòng)態(tài)獲取 stat e中的值齐鲤。

二、javaScript 和 Jquery 相關(guān)問題

1椒楣、javascript 的數(shù)據(jù)類型有哪些给郊？

• 基本數(shù)據(jù)類型：number、boolean捧灰、string淆九、array、null毛俏、undefined
• 復(fù)合型數(shù)據(jù)類型：object炭庙、function、array

2煌寇、什么是window對象焕蹄？什么是document對象？

• window 對象是指瀏覽器打開的窗口阀溶；
• document 對象是 HTML 文檔對象的一個(gè)只讀引用腻脏，window 對象的一個(gè)屬性鸦泳。

3、call 和 apply 的區(qū)別永品？

call 與 apply 的相同點(diǎn)：

• 方法功能是一樣的做鹰，都是調(diào)用一個(gè)對象的一個(gè)方法，用另一個(gè)對象替換當(dāng)前對象鼎姐；
• 第一個(gè)參數(shù)的作用是一樣的钾麸；

call 與 apply 的不同點(diǎn)：兩者傳入的列表形式不一樣

• call 可以傳入多個(gè)參數(shù)；
• apply 只能傳入兩個(gè)參數(shù)炕桨，所以其第二個(gè)參數(shù)往往是作為數(shù)組形式傳入饭尝。

4、document.load 和 document.ready 的區(qū)別献宫？

document.load 是當(dāng)頁面全部內(nèi)容都加載完再執(zhí)行芋肠；
document.ready 是當(dāng)頁面的DOM數(shù)渲染完就執(zhí)行；

5遵蚜、JS如何阻止事件冒泡和阻止默認(rèn)事件？

• 阻止事件冒泡：e.stopPropagation()
• 阻止默認(rèn)事件：e.preventDefault()

6奈惑、如何將 arguments 轉(zhuǎn)化為數(shù)組吭净？

// 方法一：
function toArr1 () {
  var arr = [];
  for (var i = 0; i < arguments.length; i ++){
    arr.push(arguments[i]);
  }
return arr;
}
console.log(toArr1('你好', 100)); //  ["你好", 100]

// 方法二：
function toArr2 () {
  return [].slice.call(arguments);
}
console.log(toArr2('你好', 200));  //  ["你好", 200]

// 方法三：
function toArr3 () {
  return Array.prototype.slice.apply(arguments);
}
console.log(toArr3('你好', 300));  //  ["你好", 300]

// 方法四：es6
function toArr4 () {
  return Array.from(arguments);
}
console.log(toArr4('你好', 400));  //  ["你好", 400]

// 方法五：es6擴(kuò)展運(yùn)算符
function toArr5 () {
  return [...arguments];
}
console.log(toArr5('你好', 500));  //  ["你好", 500]

7、列舉js跨域的方法肴甸，并對其原理加以解釋寂殉？

同源策略：就是瀏覽器為了保證用戶的信息安全，防止惡意網(wǎng)站竊取數(shù)據(jù)原在，禁止不同域之間的JS進(jìn)行交互友扰。
同源策略限制了以下行為：
① Cookie、LocalStorage 和 IndexDB 無法讀仁痢村怪；
② DOM 無法獲得；
③ AJAX 請求不能發(fā)送浮庐。

• jsonp 跨域：插入 script 標(biāo)簽甚负，引入一個(gè)js文件，當(dāng)js文件加載成功后审残，會(huì)執(zhí)行callback對應(yīng)的方法梭域，并把我們需要的 jsonp 數(shù)據(jù)作為參數(shù)傳入（需要后端配合）。

// 方法一：在 aja x函數(shù)中設(shè)置 dataType 為 'jsonp'
$.ajax({
  dataType: 'jsonp',
  url: 'http://www.a.com/user?id=123',
  success: function (data) {
    // 處理data數(shù)據(jù)
  }
});

// 方法二：用 getJSON 來實(shí)現(xiàn)搅轿，只要在地址中加上 callback=? 參數(shù)即可
$.getJSON('http://www.a.com/user?id=123&callback=?', function (data) {
  // 處理data數(shù)據(jù)
});

• 跨域資源共享 CORS：基本思想就是使用自定義的HTTP頭讓瀏覽器與服務(wù)器進(jìn)行溝通病涨，從而決定請求或響應(yīng)是成功還是失敗璧坟；服務(wù)器端對于CORS的支持既穆，主要是通過設(shè)置 Access-Control-Allow-Origin 來進(jìn)行的赎懦，如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許 Ajax 進(jìn)行跨域的訪問循衰。

// 指定允許其他域名訪問
Access-Control-Allow-Origin:*
// 響應(yīng)類型
Access-Control-Allow-Methods:GET,POST
// 響應(yīng)頭設(shè)置
Access-Control-Allow-Headers:x-requested-with,content-type

• window.name：window 對象有個(gè) name 屬性铲敛，在一個(gè)窗口的生命周期內(nèi)，窗口載入的所有頁面無論是否同源都共享一個(gè) window.name 并且都有讀寫的權(quán)限会钝，name 的值只能是字符串的形式伐蒋。

• window.postMessage：H5為了解決跨域問題，引入了一個(gè)全新的API：跨文檔通信 API（Cross-document messaging）迁酸，這個(gè)API為 window 對象新增了一個(gè) window.postMessage 方法先鱼，允許跨窗口通信，不論這兩個(gè)窗口是否同源奸鬓；有兩個(gè)參數(shù)焙畔，第一個(gè)參數(shù)是要發(fā)送的數(shù)據(jù)，第二個(gè)參數(shù)是接收消息的域串远，用 onMessage 接收宏多。

• document.domain：兩個(gè)網(wǎng)頁一級域名相同，只是二級域名不同澡罚，瀏覽器允許通過設(shè)置 document.domain 共享 Cookie 或者處理 iframe伸但。

?document.domain = 'example.com';
// 現(xiàn)在，A網(wǎng)頁通過腳本設(shè)置一個(gè) Cookie
document.cookie = "test1=hello";
// B網(wǎng)頁就可以讀到這個(gè) Cookie
var allCookie = document.cookie;

• WebSocket：是一種瀏覽器 API留搔，在js創(chuàng)建了 websocket 之后更胖，會(huì)有一個(gè)HTTP請求發(fā)送到瀏覽器以發(fā)起連接，在取得服務(wù)器響應(yīng)后隔显，建立的連接會(huì)使用HTTP協(xié)議交換為websocket協(xié)議却妨，只有在支持 websocket 協(xié)議的服務(wù)器上才能正常工作。

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
    var data = event.data;
}

8括眠、排序

// 方法一:
function fnSort1 (arr) {
  if (arr.length <= 1) {
    return arr;
  }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [], right = [];
  for (var i = 0; i < arr.length; i++) {
     if (arr[i] <= pivot) {
        left.push(arr[i]); 
     } else {
        right.push(arr[i]);
     }
  }
  return sort(left).concat([pivot], sort(right));
}

// 方法二：冒泡排序
function fnSort2 (arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

9彪标、去重

// 方法一：
function deRepet1 (arr) {
  arr.sort();
  for (var i = 0; i < arr.length-1; i > 0; i--) {
    if (arr[i] == arr[i - 1]) {
      arr.splice(i, 1);
    }
  }
  return arr;
}

// 方法二：es6
function deReprt2 (arr) {
    return Array.from(new Set(arr));
}

// 方法三：
function deRepet3 (arr) {
  var newArr = [];
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

// 方法四：雙重遍歷
function deRepet4 (arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

// 方法五：for...of
function deRepet5 (arr) {
  var result = [],obj = {};
  for (var i of arr) {
    if (!obj[i]) {
      result.push(arr[i]);
      obj[i] = 1;
    }
  }
  return return;
}

10、Session 和 Cookie 的區(qū)別掷豺？

• cookie 數(shù)據(jù)存放在客戶的瀏覽器上捐下，session 數(shù)據(jù)放在服務(wù)器上。
• cookie 不是很安全萌业，別人可以分析存放在本地的 cookie 并進(jìn)行 cookie 欺騙坷襟，考慮到安全應(yīng)當(dāng)使用 session。
• session 會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上生年。當(dāng)訪問增多婴程，會(huì)比較占用你服務(wù)器的性能，考慮到減輕服務(wù)器性能方面抱婉，應(yīng)當(dāng)使用 cookie档叔。
• 單個(gè) cookie 保存的數(shù)據(jù)不能超過 4K桌粉，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存 20 個(gè) cookie。
• 可以考慮將登陸信息等重要信息存放為 session衙四，其他信息如果需要保留铃肯，可以放在 cookie 中。