Js知識點集錦

時間 2019-11-15

原文原文鏈接

一、String類的經常使用方法

javascript

length（）：求字符串的長度
indexOf（）：求某個字符在字符串中的位置
charAt（）：求一個字符串中某個位置的值
equals（）：比較兩個字符串是否相同
replace（）：將字符串中的某些字符用別的字符替換掉。形如replace（「abc」,」ddd」）;字符串中的abc將會被ddd替換掉。
split（）:根據給定正則表達式的匹配拆分此字符串。形如 String s = "The time is going quickly！"; str1=s.split(" ");
substring（）：輸出一個新的字符串，它是此字符串中的子串，形如substring（3,7）；它將字符串中的第四個第五個第六個輸出。
trim（）：將字符串開頭的空白（空格）和尾部的空白去掉。
format（）:使用指定的語言環境、格式字符串和參數返回一個格式化字符串。
toLowerCase（）:將字符串中全部的大寫改變成小寫
toUpperCase（）：將字符串中全部的小寫改變爲大寫

https://cloud.tencent.com/dev...
https://www.cnblogs.com/YYvam...
二、數組的經常使用方法php

Push()尾部添加
pop()尾部刪除
Unshift()頭部添加
shift()頭部刪除

https://www.cnblogs.com/rongy...
https://blog.csdn.net/qq_3913...
https://www.jianshu.com/p/e1b...
https://www.cnblogs.com/songz...
三、JavaScript 數據類型css

值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。

undefined與null的區別: http://www.ruanyifeng.com/blo...html

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

Number(undefined)
NaN

Number(null)
0

null表示"沒有對象"，即該處不該該有值。
undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。前端

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。html5

（3）對象沒有賦值的屬性，該屬性的值爲undefined。java

（4）函數沒有返回值時，默認返回undefined。node

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

Undefine變量和undeclared變量分別指什麼jquery

undefined是Javascript中的語言類型之一，而undeclared是Javascript中的一種語法錯誤。
undefined的是聲明瞭可是沒有賦值，javascript在使用該變量是不會報錯。

var a=undefined; 
var b;

undeclared 是未聲明也未賦值的變量，JavaScript訪問會報錯。ios

a;
b=10;

須要說明一點的是變量沒有使用var 顯示聲明，可是在使用前已經賦值，這個值是被隱性聲明未全局變量。
https://www.jianshu.com/p/67f...
https://www.jianshu.com/p/3ad...
引用數據類型：對象(Object)、數組(Array)、函數(Function)。
注：Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值，能夠保證不會與其餘屬性名產生衝突。

Symbol（js的第七種數據類型）：https://www.cnblogs.com/sunsh...
https://segmentfault.com/a/11...

javascript的typeof返回哪些數據類型

1）返回數據類型

　　undefined，string，boolean，number，symbol(ES6)，Object，Function

2）強制類型轉換

Number(參數)把任何類型轉換成數值類型
parseInt（參數1，參數2）將字符串轉換成整數
parseFloat()將字符串轉換成浮點數字
string(參數)：能夠將任何類型轉換成字符串
Boolean()能夠將任何類型的值轉換成布爾值

3）隱式類型轉換
+，-，== ， ===

四、js事件

事件類型有：
UI（用戶界面）事件：用戶與頁面上元素交互時觸發；
焦點事件：當元素得到或失去焦點時觸發；
文本事件：當在文檔中輸入文本時觸發；
鍵盤事件：當用戶經過鍵盤在頁面上執行操做時觸發；
鼠標事件：當用戶經過鼠標在頁面上執行操做時觸發；
滾輪事件：當使用鼠標滾輪（或相似設備）時觸發。

它們之間是繼承的關係，以下圖：

https://www.cnblogs.com/jingw...

五、JS實現數組去重

一、遍歷數組法：新建一個數組，遍歷去要重的數組，當值不在新數組的時候（indexOf爲-1）就加入該新數組中。
將整個數組遍歷一遍，若是以前沒有出現過，將其放到一個新的數組中，最後返回這個數組。

var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
     }
  }
  return hash;
}

var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = []; //一個新的臨時數組
for(var i = 0,len = arr1.length; i< len; i++){
        //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
        //不然把當前項push到臨時數組裏面
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6

二、數組下標判斷法：若是當前數組的第 i 項在當前數組中第一次出現的位置不是 i，那麼表示第 i 項是重複的，忽略掉。不然存入結果數組。
好比2第一次出現時，下標是0，第二次出現時，下標倒是4，表示有重複的2

function unique2(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(arr.indexOf(arr[i])==i){
      hash.push(arr[i]);
     }
  }
  return hash;
}

三、排序後相鄰去除法：給傳入的數組排序，排序後相同的值會相鄰，而後遍歷排序後數組時，新數組只加入不與前一值重複的值

var arr=[2,8,5,0,5,2,6,7,2];
function unique3(arr){
  arr.sort();
  var hash=[arr[0]];
  for (var i = 1; i < arr.length; i++) {
     if(arr[i]!=hash[hash.length-1]){
      hash.push(arr[i]);
     }
  }
  return hash;
}
console.log(unique3(arr))// [0, 2, 5, 6, 7, 8]

四、ES6提供了新的數據結構Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。

var arr=[2,8,5,0,5,2,6,7,2];
function unique5(arr){
  var x = new Set(arr);
  return x;
}
console.log(unique5(arr)) //Set(6) {2, 8, 5, 0, 6,7}
let array = Array.from(unique5(arr));
console.log(array);//[2,8,5,0,6,7]

var arr=[2,8,5,0,5,2,6,7,2];
function unique(arr) {
  return Array.from(new Set(arr))
}
console.log(unique(arr))//[2,8,5,0,6,7]

Map是ES6 提供的新的數據結構。
Map 對象保存鍵值對。任何值(對象或者原始值) 均可以做爲一個鍵或一個值。
filter() 方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。

var arr=[2,8,5,0,5,2,6,7,2];
function unique(arr) {
  //定義常量 res,值爲一個Map對象實例
  const res = new Map();
  //返回arr數組過濾後的結果，結果爲一個數組
  //過濾條件是，若是res中沒有某個鍵，就設置這個鍵的值爲1
  return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
console.log(unique(arr))//[2,8,5,0,6,7]

https://www.cnblogs.com/jiayu...
https://blog.csdn.net/fe_dev/...

數組的from方法--Array.from()
數組的from方法能夠把一個類數組(僞數組)或者可遍歷(可循環)的對象轉化成一個真正的數組,例如

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

var a = {
    0: 'a',
    1: '90',
    2: '88',
    3: ['mm', 'nn', 'hh'],
    'length': 4 // 不帶引號直接 length: 4 也是行的
}
var b = Array.from(a);
console.log(b) // ['a','90','88',['mm','nn','hh']]

function unique(arr) {
    //經過Set對象，對數組去重，結果又返回一個Set對象
    //經過from方法，將Set對象轉爲數組
    return Array.from(new Set(arr))
}

ES6去重：
http://blog.csdn.net/FE_dev/a...
https://my.oschina.net/u/3946...

六、js 防止連續點擊登陸驗證碼
https://www.cnblogs.com/yangs...
七、如何用JS有效防止用戶重複點擊提交按鈕？
https://segmentfault.com/q/10...
https://blog.csdn.net/iosbird...
八、Input框防抖動
https://segmentfault.com/a/11...
九、如何壓縮css,js

性能一直是項目中比較重要的一點，尤爲門戶網站，對頁面的響應要求是很高的，從性能角度上來說，對於Web端的優化其中重要的一點無疑是JS、CSS文件壓縮，圖片的融合，儘可能減少文件的大小，必免佔加載時佔用過多的帶寬。yui compressor無疑是一個比較好的壓縮工具，是yahoo的一個開源組件.

https://www.cnblogs.com/cbing...
https://blog.csdn.net/weixin_...

十、ES6 數組some()和every()使用:

用於檢測數組中的元素是否知足指定條件（函數提供）

every:一假即假:
some:一真即真

some（）方法只要其中一個爲true 就會返回true；
every（）方法必須全部都返回true纔會返回true，哪怕有一個false，就會返回false；
every（）和 some（）目的：肯定數組的全部成員是否知足指定的測試。

var ages = [23,44,3]
if (ages.some(age => age < 10)) {
//console.log('true')
}

/** 
 * 計算對象數組中每一個電腦的扣件系統是否可用,大於16位操做系統表示可用,不然不可用
*/
var computers = [
    {name:"Apple",ram:8},
    {name:"IBM",ram:4},
    {name:"Acer",ram:32},
];
 var result= computers.every(function(computer){
   return computer.ram > 16
})
console.log(result)//false;
var some = computers.some(function(computer){
   return computer.ram > 16
})
console.log(some)//true;

/**
 * 假定有一個註冊頁面,判斷全部Input內容的長度是否大於0
 * 
 */
function Field(value){
    this.value = value
}
// 在原型上定義方法
Field.prototype.validate = function(){
    return this.value.length > 0;
}
var username = new Field('2131');
var telephone  = new Field('8888888888888')
console.log(username.validate() && telephone.validate())//true
 
 
//二`:
var username = new Field('2131');
var telephone  = new Field('8888888888888')
let password  = new Field('');
//console.log(username.validate() && telephone.validate())//只要一個爲空就爲false
// 簡化方式
var fields = [username, telephone,password];
console.log(fields)
var formIsValid = fields.every(function(field){
    return field.validate()
});
console.log(formIsValid)
 
if(formIsValid){
    //註冊成功
}else{
    //給用戶一個錯誤提醒
}

十一、es6中import、export和export default的做用、區別

做用：export和export default實現的功能相同，即：可用於導出（暴露）常量、函數、文件、模塊等，以便其餘文件調用。

區別：

export導出多個對象，export default只能導出一個對象
export導出對象須要用{ }，export default不須要{ }，使用export default命令，爲模塊指定默認輸出，這樣就不須要知道所要加載模塊的變量名。

如：

export {A,B,C};
export default A;

在其餘文件引用export default導出的對象時不必定使用導出時的名字。由於這種方式其實是將該導出對象設置爲默認導出對象，如：
假設文件A、B在同級目錄，實現文件B引入文件A的導出對象deObject：

文件A：export default deObject
文件B：import deObject from './A'
       或者：
　　 　import newDeObject from './A'

export和import（一個導出一個導入）
export用於對外輸出本模塊（一個文件能夠理解爲一個模塊）變量的接口
import用於在一個模塊中加載另外一個含有export接口的模塊。
也就是說使用export命令定義了模塊的對外接口之後，其餘JS文件就能夠經過import命令加載這個模塊（文件）。這幾個都是ES6的語法。

var name1="李四";
 var name2="張三";
 export { name1 ,name2 }

import { name1 , name2 } from "/.a.js" //路徑根據你的實際狀況填寫
export default {
  data () {
    return { }
  },
  created:function(){
    alert(name1)//能夠彈出來「李四」
    alert(name2)//能夠彈出來「張三」
  }
 }

https://www.cnblogs.com/xiaot...
十二、call和applay

它們各自的定義：

apply：應用某一對象的一個方法，用另外一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。
call：調用一個對象的一個方法，以另外一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。

它們的共同之處：

均可以用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象。

它們的不一樣之處：

call：call方法從第二個參數開始能夠接收任意個參數，每一個參數會映射到相應位置的func的參數上，能夠經過參數名調用，可是若是將全部的參數做爲數組傳入，它們會做爲一個總體映射到func對應的第一個參數上，以後參數都爲空.

function func (a,b,c) {}

func.call(obj, 1,2,3)
// function接收到的參數其實是 1,2,3

func.call(obj, [1,2,3])
// function接收到的參數其實是 [1,2,3],undefined,undefined

apply：apply方法最多隻有兩個參數，第二個參數接收數組或者類數組，可是都會被轉換成類數組傳入func中，而且會被映射到func對應的參數上.

func.apply(obj, [1,2,3])
// function接收到的參數其實是 1,2,3

func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// function接收到的參數其實是 1,2,3

實際上，apply和call的功能是同樣的，只是傳入的參數列表形式不一樣。

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

function add(a,b){
  return a+b;  
}
function sub(a,b){
  return a-b;  
}

/*apply的用法*/
var a1 = add.apply(sub,[4,2]);　　//sub調用add的方法
var a2 = sub.apply(add,[4,2]);
alert(a1);  //6     
alert(a2);  //2

/*call的用法*/
var a1 = add.call(sub,4,2); //6

Array.prototype.push能夠實現兩個數組的合併
一樣push方法沒有提供push一個數組，可是它提供了push(param1,param2...paramN)，一樣也能夠用apply來轉換一下這個數組，即：

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);    //6  獲得合併後數組的長度，由於push就是返回一個數組的長度

怎麼讓類數組使用forEach? 讓類數組綁定數組的方法

<div>1</div>
<div>2</div>

方法1：

let div = document.getElementsByTagName('div');
 
div.forEach = Array.prototype.forEach;
 
div.forEach(item=>{
    console.log(item);
});

方法2：

[].forEach.call(document.getElementsByTagName("div"), (item) => console.log(item))

方法3：

[].forEach.apply(document.getElementsByTagName("div"), [(item) => console.log(item)])

方法4：

var getDivs = [].forEach.bind(document.getElementsByTagName("div"))
getDivs(item => console.log(item))

方法5：

document.querySelectorAll('div').forEach(item => console.log(item))

bind（）方法，他是直接改變這個函數的this指向而且返回一個新的函數，以後再次調用這個函數的時候this都是指向bind綁定的第一個參數。bind傳餐方式跟call方法一致。

// 若是你想將某個函數綁定新的`this`指向而且固定先傳入幾個變量能夠在綁定的時候就傳入，以後調用新函數傳入的參數都會排在以後
const obj = {}
function test(...args) {console.log(args)}
const newFn = test.bind(obj, '靜態參數1', '靜態參數2')
newFn('動態參數3', '動態參數4')

總結

當咱們使用一個函數須要改變this指向的時候纔會用到call、 apply、 bind
若是你要傳遞的參數很少，則能夠使用fn.call(thisObj, arg1, arg2 ...)
若是你要傳遞的參數不少，則能夠用數組將參數整理好調用fn.apply(thisObj, [arg1, arg2 ...])
若是你想生成一個新的函數長期綁定某個函數給某個對象使用，則能夠使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

https://www.jianshu.com/p/131...
https://www.jianshu.com/p/bc5...
1三、做用域

做用域：即某些變量的適用範圍

function fun(){} ;// 這是指函數變量. 函數變量通常也說成函數聲明。
ar getA=function fun(){}; //這也是函數表達式

聲明是在函數第一行代碼執行以前就已經完成，而賦值是在函數執行時期纔開始賦值。因此，聲明老是存在於賦值以前。

https://www.cnblogs.com/wupei...
做用域鏈：https://www.cnblogs.com/renlo...
javascript變量提高：https://www.cnblogs.com/ghost...

1四、prototype
https://segmentfault.com/a/11...

1、什麼是原型(prototype)

一、prototype本質上仍是一個JavaScript對象；

二、每一個函數都有一個默認的prototype屬性；

三、經過prototype咱們能夠擴展Javascript的內建對象

二. 原型鏈：

經常使用原型來實現繼承，其基本思想是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。簡單說，構造函數、原型和實例的關係：每一個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。假如咱們讓原型對象等於另外一個類型的實例。那結果將是：此時的原型對象將包含一個指向另外一個原型的指針，相應地，另外一個原型中也包含着一個指向另外一個構造函數的指針。假如另外一個原型又是另外一個類型的實例，那麼上述關係成立，如此層層遞進，就構成了實例與原型的連接。這就是原型鏈的基本概念。

1五、繼承
https://www.cnblogs.com/humin...
1六、閉包

http://www.ruanyifeng.com/blo...

帶你一分鐘理解閉包--js面向對象編程：http://cnblogs.com/qieguo/p/5...

閉包的概念:有權訪問另外一個做用域的函數。
第一，閉包是一個函數。第二，閉包是一個可以訪問另外一個函數做用域

function A(){

  var a=1;
  
  function B(){  //閉包函數，函數b可以訪問函數a的做用域。因此，像相似這麼樣的函數，咱們就稱爲閉包
  
  }
}

閉包是指有權訪問另外一個函數做用域中的變量的函數。
閉包就是可以讀取其餘函數內部變量的函數。"定義在一個函數內部的函數"
它的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。
閉包：一個函數有權訪問另外一個函數做用域中的變量，即在一個函數內部建立另外一個函數

function sayHi(name) {
    return () => {
       console.log(`Hi! ${name}`)
    }
}
const test = sayHi('xiaoming')
test() // Hi! xiaoming

嚴格來講，JS中全部的函數都是閉包，由於 JS 裏並無語法關鍵字限制哪些函數能夠訪問外部變量哪些不能，因此全部函數都會建立獨立做用域，亦即全部函數都是閉包。
JS 的閉包包含如下要點：

函數聲明的時候，會生成一個獨立的做用域
同一做用域的對象能夠互相訪問
做用域呈層級包含狀態，造成做用域鏈，子做用域的對象能夠訪問父做用域的對象，反之不能；另外子做用域會使用最近的父做用域的對象

https://www.cnblogs.com/wangf...
https://blog.csdn.net/gaoshan...
https://www.jianshu.com/p/26c...
https://www.cnblogs.com/cxyin...
http://www.cnblogs.com/xiaoru...
http://www.cnblogs.com/lulupi...

閉包的應用場景
https://blog.csdn.net/qq_2113...
https://segmentfault.com/a/11...
https://blog.csdn.net/yingziz...

1七、事件委託/事件代理
什麼是事件冒泡？怎樣阻止事件冒泡和默認事件？事件委託是什麼？

冒泡事件便是事件從最底層逐個通過上面一級級事件的過程，就是冒泡事件。
那麼如何有效的阻止冒泡事件的發生？其實在非IE瀏覽器中提供了一個事件對象 stopPropagation，那麼在IE瀏覽器中經過cancelBubble事件對象能夠阻止。
瀏覽器的默認事件就是瀏覽器本身的行爲，好比咱們在點擊 <a href="#">的時候，瀏覽器跳轉到指定頁面。還有，當咱們滾動鼠標時頁面會向下滾動，但咱們按空格鍵和按方向鍵時頁面也會向下滾動，爲了更好的用戶體驗，這時咱們就須要阻止這種行爲的發生。

// 阻止事件冒泡  
function stopBubble(e) {  
  if(e && e.stopPropagation){  
      e.stopPropagation();  
  } else {  
    window.event.cancelBubble = true;  
  }  
};  
// 阻止瀏覽器的默認事件  
function stopDefault(e){  
  if(e && e.preventDefault) {  
    e.preventDefault();  
  } else {  
    window.event.returnValue = false;  
  }  
  return false;  
};

事件模型解釋： https://segmentfault.com/a/11...
Javascript的事件流模型都有什麼？如何阻止？

兩種事件模型：捕獲型事件和冒泡型事件
事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。首先發生的是事件捕獲，而後是實際的目標接收到事件，最後階段是冒泡階段。
一、事件：是文檔或瀏覽器窗口中發生的一些特定的交互瞬間
二、事件流：事件發生的順序，頁面中接受事件的順序
三、事件冒泡：(事件從最深的節點開始，而後逐步向上傳播事件，)事件會從最內層的元素開始發生，一直向上傳播，直到document對象。發生click事件的順序應該是p -> div -> body -> html -> document
四、事件捕獲：事件會從最外層開始發生，直到最具體的元素。發生click事件的順序應該是document -> html -> body -> div -> p
五、事件代理（事件委託）：經過它你能夠把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上，給父元素綁定事件，用來監聽子元素的冒泡事件，並找到是哪一個子元素的事件。

事件委託的好處：

事件委託技術能夠避免對每一個字元素添加事件監聽器，減小操做DOM節點的次數，從而減小瀏覽器的重繪和重排，提升代碼的性能。
使用事件委託，只有父元素與DOM存在交互，其餘的操做都是在JS虛擬內存中完成的，這樣就大大提升了性能。

https://zhuanlan.zhihu.com/p/...
https://www.cnblogs.com/zhana...
https://www.cnblogs.com/liuga...

jQuery中實現事件委託的三種方法：
1) $.on: 基本用法:$('.parent').on('click', 'a', function () { console.log('click event on tag a'); })，它是 .parent 元素之下的 a 元素的事件代理到$('.parent')之上，只要在這個元素上有點擊事件，就會自動尋找到.parent元素下的a元素，而後響應事件；
2) $.delegate: 基本用法:$('.parent').delegate('a', 'click', function () { console.log('click event on tag a'); })，同上，而且還有相對應的$.delegate來刪除代理的事件；
3) $.live: 基本使用方法:$('a', $('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而若是沒有傳入父層元素$(.parent)，那事件會默認委託到$(document)上；(已廢除)

事件委託原理：

事件委託是經過事件冒泡的原理，利用父級去觸發子級的事件。
若是不用事件委託，將ul下每個li都去添加click事件監聽，很是麻煩，並且對於內存消耗是很是大的，效率上須要消耗不少性能；
另外就是若是經過js動態建立的子節點，須要從新綁定事件。
而利用事件委託的話，只須要給父級綁定一個事件監聽，便可讓每一個li都綁定上相應的事件，讓你避免對特定的每一個節點添加事件監聽器；事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪一個子元素的事件。

適合用事件委託的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout雖然也有事件冒泡，可是處理它們的時候須要特別的注意，由於須要常常計算它們的位置，處理起來不太容易。

不適合的就有不少了，舉個例子，mousemove，每次都要計算它的位置，很是很差把控，在不如說focus，blur之類的，自己就沒用冒泡的特性，天然就不能用事件委託了。

1八、事件冒泡和事件捕獲

什麼是事件，IE與火狐的事件機制有什麼區別？如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。  
二、ie支持事件冒泡，火狐支持捕獲和冒泡兩種
3.  w3c支持 e.stopPropagation()，IE則是使用e.cancelBubble = true

https://blog.csdn.net/cyqzy/a...
https://www.cnblogs.com/linxu...
https://www.cnblogs.com/alsy/...

IE和DOM事件流的區別
https://www.cnblogs.com/lucky...

執行順序不同、
參數不同
事件偵聽函數不同
this指向不同

https://www.cnblogs.com/amcy/...
1九、JavaScript防XSS攻擊

XSS（Cross Site Scripting），跨站腳本攻擊，是一種容許攻擊者在另一個用戶的瀏覽器中執行惡意代碼腳本的腳本注入式攻擊。XSS攻擊其實就是代碼的注入。

XSS危害

經過document.cookie盜取cookie
使用js或css破壞頁面正常的結構與樣式
流量劫持（經過訪問某段具備window.location.href定位到其餘頁面）
Dos攻擊：利用合理的客戶端請求來佔用過多的服務器資源，從而使合法用戶沒法獲得服務器響應。
利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻擊）用戶的身份執行一些管理動做，或執行一些通常的如發微博、加好友、發私信等操做。
利用可被攻擊的域受到其餘域信任的特色，以受信任來源的身份請求一些平時不容許的操做，如進行不當的投票活動。

如何防止攻擊

編碼，就是轉義用戶的輸入，把用戶的輸入解讀爲數據而不是代碼
校驗，對用戶的輸入及請求都進行過濾檢查，如對特殊字符進行過濾，設置輸入域的匹配規則等。
設置CSP：CSP也是採用白名單的方式來匹配網頁的解析和代碼的執行，只不過，執行的層次上升到了瀏覽器的高度

http://www.cnblogs.com/caizhe...
http://www.cnblogs.com/unclek...
20、適配方案fontsize爲何設在html不是body

使用rem佈局，實質都是經過動態改寫html的font-size基準值，來實現不一樣設備下的良好統一適配

rem是基於root根元素(html)計算的,html{font-size:62.5%} body{font-size:3rem}，rem的實質是等比縮放

https://www.cnblogs.com/axl23...
https://segmentfault.com/a/11...

2一、get和post
https://www.cnblogs.com/logsh...

HTTP是什麼？HTTP是基於TCP/IP的關於數據如何在萬維網中如何通訊的協議。
HTTP的底層是TCP/IP。因此GET和POST的底層也是TCP/IP，也就是說，GET/POST都是TCP連接

GET和POST本質上就是TCP連接，並沒有差異。可是因爲HTTP的規定和瀏覽器/服務器的限制，致使他們在應用過程當中體現出一些不一樣。
GET和POST是HTTP請求的兩種基本方法，最直觀的區別就是GET把參數包含在URL中，POST經過request body傳遞參數
GET和POST還有一個重大區別，簡單的說：GET產生一個TCP數據包；POST產生兩個TCP數據包。
長的說：對於GET方式的請求，瀏覽器會把http header和data一併發送出去，服務器響應200（返回數據）；而對於POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據）。
注意： 並非全部瀏覽器都會在POST中發送兩次包，Firefox就只發送一次。

GET在瀏覽器回退時是無害的，而POST會再次提交請求。
GET產生的URL地址能夠被Bookmark，而POST不能夠。
GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。
GET請求只能進行url編碼，而POST支持多種編碼方式。
GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。
GET請求在URL中傳送的參數是有長度限制的，而POST麼有。
對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。
GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息。
GET參數經過URL傳遞，POST放在Request body中。

2二、http協議中除了get和post以外還有哪些

根據HTTP標準，HTTP請求能夠使用多種方法，其功能描述以下所示。
HTTP1.0定義了三種請求方法： GET、POST、HEAD
HTTP1.1新增了五種請求方法：OPTIONS、PUT、DELETE、TRACE 、CONNECT

2三、前端緩存（cookies、localStorage、sessionStorage）:https://segmentfault.com/a/11...

一、cookies是服務器發送給客戶端的特殊信息，只能保存字符串類型，以文本的形式保存在客戶端，每次請求都帶着它；若是不在瀏覽器設置過時時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱爲會話cookie；若是瀏覽器設置了過時時間，cookie被保存在硬盤中，關閉瀏覽器，cookie仍存在，直到過時時間結束才消失。

cookie的應用場景：

（1）判斷用戶是否登錄過網站，以便下次實現自動登陸（或記住密碼）。若是咱們刪除cookie，每次登陸都必須從新填寫登陸信息，
（2）保存上次登陸時間等信息。
（3）保存上次查看的頁面。
（4）瀏覽計數。

二、localStorage 的生命週期是永久的，關閉頁面或瀏覽器以後localStorage的數據也不會消失。除非localStorage主動刪除數據。不然數據永遠不會消失。
三、sessionStorage 的生命週期僅在當前會話下有效，sessionStorage是在同源窗口中始終保存數據，只要瀏覽器沒有關閉，即便刷新頁面或進入同源的另外一個頁面，數據依然存在。可是sessionStorage在瀏覽器關閉後就會被銷燬。同時獨立打開同一個頁面或同一個窗口，sessionStorage也不是同樣的。
其中localStorage 和 sessionStorage 都保存在客戶端，不與服務器進行交互通訊。

localStorage 和 sessionStorage 的應用場景：

（1）localStorage 經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據。
（2）sessionStorage適用於敏感帳號一次性登陸。

cookie和session的區別

cookie數據存放在客戶的瀏覽器上，session數據放在服務器上
cookie不是很安全，別人能夠分析存放在本地的cookie並進行cookie欺騙，考慮*到安全應當使用session
session會在必定時間內保存在服務器上，當訪問增多，會比較佔用你服務器的性能，考慮到減輕服務器性能方面，應當使用cookie
單個cookie保存的數*據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie
建議將登陸信息等重要信息存放爲session，其餘信息若是須要保留，能夠放在cookie中
session保存在服務器，客戶端不知道其中的信息；cookie保存在客戶端，服務器可以知道其中的信息
session中保存的是對象，cookie中保存的是字符串
session不能區分路徑，同一個用戶在訪問一個網站期間，全部的session在任何一個地方均可以訪問到，而cookie中若是設置了路徑參數，那麼同一個網站中不一樣路徑下的cookie互相是訪問不到的

Cookie和session的做用。區別、應用範圍。Session的工做原理是什麼

區別：
一、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
二、cookie不是很安全，別人能夠分析存放在本地的COOKIE並進行COOKIE欺騙考慮到安全應當使用session。
三、session會在必定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能考慮到減輕服務器性能方面，應當使用COOKIE。
四、單個cookie保存的數據不能超過4K，不少瀏覽器都限制一個站點最多保存20個cookie。
五、因此我的建議：
將登錄信息等重要信息存放爲SESSION
其餘信息若是須要保留，能夠放在COOKIE中

描述一下cookies，sessionStorage，localStorage的區別

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。
所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

**web storage和cookie的區別**

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。
除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。

localStorage、sessionStorage、Cookie的區別及用法:https://segmentfault.com/a/11...

淺談session,cookie,sessionStorage,localStorage的區別及應用場景:https://www.cnblogs.com/cence...

2四、經常使用的本地存儲-----cookie篇
https://www.cnblogs.com/cxyin...
怎麼設置cookie，怎麼設置cookie以及刪除cookie和cookie詳解：https://www.cnblogs.com/mader...
編寫web端cookie的設置和獲取方法：https://blog.csdn.net/u010081...
設置獲取cookie，setCookie，getCookie
https://www.cnblogs.com/zmj-b...
2五、javascript用戶密碼加密

md5加密是單向不可逆的，md5 是一種 hash 算法

MD5：信息摘要的一種實現，它能夠從任意長度的明文字符串生成128位的哈希值。即便明文消息只改動了一點點，生成的結果也會徹底不一樣。

第三方支付平臺如何驗證請求的簽名？
1.發送方和請求方約定相同的字符串拼接規則，約定相同的密鑰。
2.第三方平臺接到支付請求，按規則拼接業務參數和密鑰，利用 MD5 算法生成 Sign。
3.用第三方平臺本身生成的 Sign 和請求發送過來的 Sign 作對比，若是兩個 Sign 值如出一轍，則簽名無誤，若是兩個 Sign 值不一樣，則信息作了篡改。這個過程叫作驗籤。

md5原理：https://www.cnblogs.com/secon...

DES對稱加密

DES加密原理：https://www.cnblogs.com/xqxac...

2六、談談你對this的理解

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。可是總有一個原則，那就是this指的是調用函數的那個對象。this通常狀況下：是全局對象Global。做爲方法調用，那麼this就是指這個對象。

我的建議，能夠先回答this在不一樣的場合指向的是什麼，在來回答何時用到this，這樣回答的邏輯會比較好。

this表示當前對象，this的指向是根據調用的上下文來決定的，默認指向window對象，指向window對象時能夠省略不寫。
this是對應執行環境，在全局做用域下，this默認指向window對象。全局環境的this始終指向的是window對象；局部環境下，對象函數調用，this指向的永遠是調用該方法的對象，哪一個對象調用就指向哪一個對象
顯示綁定就是經過apply，call，bind，直接將函數中的this綁定到想要的對象上
建立一個構造函數的實例，構造函數中的this會綁定到這個實例對象上

This指針做用域：
1）、在全局執行環境中使用this，表示Global對象，在瀏覽器中就是window對象。
2）、當在函數執行環境中使用this時，狀況就有些複雜了。若是函數沒有明顯的做爲非window對象的屬性，而只是定義了函數，無論這個函數是否是定義在另外一個函數中，這個函數中的this仍然表示window對象。若是函數顯示地做爲一個非window對象的屬性，那麼函數中的this就表明這個對象。
3）、當經過new運算符來調用函數時，函數被當作一個構造函數，this指向構造函數建立出來的對象。
注：當函數被調用時，咱們看緊鄰括號「()」的左邊。若是在括號的左側存在一個引用，傳遞給調用函數的「this」值是引用所屬於的那個對象，不然this的值就是全局對象。

var name = 'window在手，天下我有！';
var obj = {
  name: '敲代碼的怪蜀黍',
  objBar: {
    name: 'BOBO',
    barFun: function(){
      console.log(this.name);
    }
  }
};
 
//()左側是barFun引用，它指向objBar對象，因此打印出 「BOBO」
var test1 = obj.objBar.barFun(); //BOBO
 
//()左側是test2，test2它並非某個對象的引用，因此打印出 「window在手，天下我有！」
var test2 = obj.objBar.barFun;
test2(); //window在手，天下我有！
 
//下面這個看起來複雜，其實抓住一點就好了：()左側是testBar，testBar並不屬於某個對象的引用，固然打印出來的仍是 「window在手，天下我有！」
var test3 = obj.objBar;
var testBar = test3.barFun;
testBar(); //window在手，天下我有！

http://www.ruanyifeng.com/blo...
https://blog.csdn.net/lxcao/a...
https://www.cnblogs.com/liubi...
https://www.cnblogs.com/banzh...
https://www.cnblogs.com/yuanb...

和箭頭函數的區別

箭頭函數中的this:

1.箭頭函數會捕獲其所在上下文的 this 值，做爲本身的 this 值，本身自己並無this值；
2.箭頭函數的this永遠指向其上下文的this，任何方法都改變不了其指向，如call(), bind(), apply()。
3.箭頭函數做爲匿名函數,是不能做爲構造函數的,不能使用new
4.箭頭函數沒有原型屬性

https://www.jianshu.com/p/8f7...

2七、如何規避javascript多人開發函數重名問題
https://www.cnblogs.com/zhuzh...

能夠開發前規定命名規範,根據不一樣開發人員開發的功能在函數前加前綴;
將每一個開發人員的函數封裝到類中,調用的時候就調用類的函數,即便函數重名只要類名不重複就行;
JS中是沒有塊級做用域的只有函數做用域，儘可能少的使用全局變量，儘量使用局部變量，這不只會減小變量重名的概率，更會減小內存開銷，由於局部變量通常都會在函數結束後自動銷燬釋放出內存，而全局變量會直到進程結束纔會被銷燬,其次，當咱們須要一個做用域來關住變量時通常會用一個匿名函數來充當這個做用域。

用類來封裝子頁, 定義一個空對象，變量和方法都掛載到了不一樣的對象上，這無形中就給每一個同名變量和方法增長了一個頂部命名空間，這樣能夠最大化的減小代碼耦合的概率，項目也容易維護。

// A同窗負責的工做人員信息
var A = {} //定義一個空對象
A.name = 'tom';
A.gender = 'male';
A.age = 30;
A.showName = function() {
    alert(this.name);
}
A.showAge = function() {
    alert(this.age);
}

// B同窗負責的老師信息
var B = {}
B.name = 'Jack';
B.gender = 'male';
B.age = 28;
B.showName = function() {
    alert(this.name);
}
B.showAge = function() {
    alert(this.age);
}

// C同窗負責的學生信息
var C = {}
C.name = 'Lucy';
C.gender = 'female';
C.age = 17;
C.showName = function() {
    alert(this.name);
}
C.showAge = function() {
    alert(this.age);
}

https://www.cnblogs.com/leftf...
https://www.cnblogs.com/luoge...

命名空間
封閉空間
js模塊化mvc（數據層、表現層、控制層）
seajs
變量轉換成對象的屬性
對象化

解決全局變量命名空間變量名重複衝突（技巧）

只在函數裏面聲明變量。雖然有時候也不是絕對可行，可是函數級做用域能夠防止其本地變量跟其餘變量發生衝突。
只聲明一個全局對象，而後把原本想做爲全局變量的值都做爲這個對象的屬性。

var Vis = {};   //聲明空的全局對象
Vis.id = 1;
Vis.name = 'dashuaibi';
// 這樣全部的變量都被關在了全局對象Vis裏面，所以就不會再污染全局命名空間

2八、編寫本身的jquery組件
https://blog.csdn.net/54power...
2九、javascript標籤究竟是應該放在頭部仍是尾部？

通常地：
js是當即交互性優先的頂部
延遲交互性稍後的尾部。
javascript標籤放在尾部當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。
但在某種狀況下也以爲放在頭部比較好，好比一個給頁面中的某個元素添加了事件的js腳本。頁面出來了可是js沒加載完的那段時間，用戶對此元素作事件操做的時候就出不來應該有的效果。
如今比較傾向於放在頭部，作一些優化的工做盡可能讓js加載快一點。
若是放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行javascript的代碼~~~ 因此咱們能夠把js外部引入的文件放到頁面底部，來讓js最後引入，從而加快頁面加載速度

30、建立一個對象

function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sing = function() { 
        alert(this.name)
         } 
 }

var Person = function(name, age){
    //共有屬性
    this.name = name;
    this.age = age;
    //共有方法
    this.sayName = function(){
        console.log(this.name);
    };
}

3一、封裝一個簡單的javascript類

//函數聲明,而後使用對象或數組訪問
function Person() {
   this.name = "jee";
   this.age = 25;
   this.getName = function() {
      return this.name;
   }
} 
var person = new Person();
alert(person.age);
alert(person.getName());

3二、答案是多少？

(function(x){
    delete x;
    alert(x);
})(1+5);

1）delete是用來刪除對象的屬性的，它不可以刪除函數中傳遞的參數
2）因此這裏delete x這句其實並無什麼軟用，函數正常執行傳參及返回參數；
固然，刪除失敗也不會報錯，因此代碼運行會彈出「6」。

var Employee = {
  age: 28,
  name: 'abc',
  designation: 'developer'
}

console.log(delete Employee.name);   // returns true
console.log(delete Employee.age);    // returns true

// 當試着刪除一個不存在的屬性時
// 一樣會返回true
console.log(delete Employee.salary); // returns true

https://blog.csdn.net/travelz...
3三、模塊化怎麼作？

當即執行函數,不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

3四、js延遲加載的方式有哪些(寫出異步加載js方案)？

JS延遲加載，也就是等頁面加載完成以後再加載 JavaScript 文件。
JS延遲加載有助於提升頁面加載速度。

http://www.php.cn/js-tutorial...

defer和async

<script type="text/javascript" src="demo_async.js" async="async"></script>

註釋：有多種執行外部腳本的方法：
若是 async="async"：腳本相對於頁面的其他部分異步地執行（當頁面繼續進行解析時，腳本將被執行）
若是不使用 async 且 defer="defer"：腳本將在頁面完成解析時執行
若是既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面以前，當即讀取並執行腳本

動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack,用的最多）
按需異步載入js（ajax異步加載）：http://blog.csdn.net/lxcao/ar...

異步加載和延遲加載
https://www.cnblogs.com/mylan...

3五、new操做符具體幹了什麼

new 操做符新建了一個空對象，這個對象原型指向構造函數的prototype，執行構造函數後返回這個對象。

https://www.jianshu.com/p/354...
https://developer.mozilla.org...
https://www.cnblogs.com/onepi...

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

3六、stopPropagation, preventDefault 和 return false 的區別

事件在特定節點執行完以後再也不傳遞,能夠使用事件對象的 stopPropagation() 方法。

// 在彈出對話框上點擊時, 不進行任何頁面操做, 並阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
    ev.stopPropagation();
};
// 在 documentElement 節點上監聽到點擊事件時, 隱藏對話框
document.documentElement.onclick = function(ev) {
    document.getElementById('dialog').style.display = 'none';
};

使用 preventDefault() 阻止後面將要執行的瀏覽器默認動做。

<a id="link" href="http://w3c.org">W3C 首頁連接</a>
<script>
    //在新窗口, 打開頁面
    document.getElementById('link').onclick = function(ev) {
        // 阻止瀏覽器默認動做 (頁面跳轉)
        ev.preventDefault();
        // 在新窗口打開頁面
        window.open(this.href);
    };
</script>

return false的做用
退出執行,return false 以後的全部觸發事件和動做都不會被執行。有時候 return false 能夠用來替代 stopPropagation() 和preventDefault()。return false 不但阻止事件,還能夠返回對象,跳出循環等... 方便地一刀切而不夠靈活,濫用易出錯.

https://segmentfault.com/a/11...

3七、js的常見內置對象類：

Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

http://www.cnblogs.com/lianqi...
https://www.cnblogs.com/wqc57...

3八、如何判斷一個對象是否屬於某個類？

instanceof 運算符：instanceof 運算符要求其左邊的運算數是一個對象，右邊的運算數是對象類的名字或構造函數。若是 object 是 class 或構造函數的實例，則 instanceof 運算符返回 true。若是 object 不是指定類或函數的實例，或者 object 爲 null，則返回 false。instanceof方法能夠判斷變量是不是數組類型，可是隻限同一全局環境以內，在一個頁面有多個iframe的狀況下，instanceof失效。

if(a instanceof Person){
           alert('yes');
       }

3九、WEB應用從服務器主動推送Data到客戶端有那些方式？

html5 websoket
WebSocket經過Flash
XHR長時間鏈接
XHR Multipart Streaming
不可見的Iframe
<script>標籤的長時間鏈接(可跨域)

40、常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤爲是jQuery，超過91%。
輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，加載器，js引擎更好）

4一、先後端分離技術都知道哪些？哪些是比較精通，請詳細說明

後臺只管數據輸出和業務邏輯處理，前端負責交互邏輯和界面展現。
先後端分離分兩類：
第一類，經過nodejs做爲一箇中轉站，nodejs雖然運行在服務器上，可是它處理的是前端顯示的業務，例如路由，因此它是前端的一部分，後端使用其餘的語言來處理數據問題，而後與nodejs通訊。
第二類，經過前端框架來實現顯示邏輯，例如路由，讀取api等，這些任務都是瀏覽器來完成的。而後後端用其餘任何語言來提供前端所須要的api。

4二、js的經常使用方法

Val(),append(),get(),split(),substr(),each(),html(),keyup(),trim(),show(),hide(),indexOf()

4三、設置一個已知ID的DIV的html內容爲XXXX,字體顏色設置爲黑色（不使用第三方框架）

vardom = document.getElementById(「ID」); 
dom.innerHTML = 「xxxx」; 
dom.style.color = 「#000」;

4四、下面的語句返回值是什麼？

"i'm a lasagna hog".split("").reverse().join("");

goh angasal a m'i

split()將字符串分割成數組
reverse()用來顛倒數組中的元素，該方法會改變原來的數組，而不會建立新的數組
join()用於把數組中的全部元素放入一個字符串中

4五、var numberArray = [3,6,2,4,1,5];

1) 實現對該數組的倒排，輸出[5,1,4,2,6,3]
2) 實現對該數組的降序排列，輸出[6,5,4,3,2,1]

var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){  //6,5,4,3,2,1
  return b-a; 
 })

4六、看下面代碼，給出輸出結果

for(var i=1; i<=3; i++){
  setTimeout(function(){
      console.log(i);   
  },0); 
};


結果：4  4  4

4七、用純JS實現，點擊一個列表時，輸出對應的索引：https://www.jianshu.com/p/4b5...
4九、Web服務器主要用於哪些模塊。優勢和缺點分別是什麼

Web服務器通常指網站服務器，是指駐留於因特網上某種類型計算機的程序，能夠向瀏覽器等Web客戶端提供文檔，[1] 也能夠放置網站文件，讓全世界瀏覽；能夠放置數據文件，讓全世界下載。目前最主流的三個Web服務器是Apache Nginx IIS。

優勢：

異構平臺的互通性 
更普遍的軟件複用  
普通的通訊能力 
迅捷的軟件發行方式 
方便的商務的商務的集成

缺點：

單機應用程序
局域網的同構應用程序

50、說明如下http響應碼的意義，304。408。

http響應碼
304 Not Modified 自從上次請求後，請求的網頁未修改過。
408 Request Timeout 請求超時。客戶端沒有在服務器預備等待的時間內完成一個請求的發送。客戶端能夠隨時再次提交這一請求而無需進行任何更改。

5一、Iframe有哪些缺點，若是真要使用又如何避免

優勢：
解決加載緩慢的第三方內容如圖標和廣告等的加載問題
Security sandbox
並行加載腳本
缺點：
*iframe會阻塞主頁面的Onload事件；
*即時內容爲空，加載也須要時間
*沒有語意
避免：
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

5二、什麼是三元條件語句，請寫出一個簡單的三元條件語句

condition ? expr1 : expr2 用來簡化條件判斷

var i=0;
var fee;
if(isMember){
    fee="$2.00";
}else{
    fee="$10.00";
}

fee=isMember ? "$2.00" : "$10.00";

5四、請實現，鼠標點擊頁面中的任意標籤，alert該標籤的名稱。(注意兼容性)

document.onclick=function(e){
//e對象存在時返回e,當window.event存在時返回event，區分ff,ie
  e=e||window.event;    
 //ie下支持e.srcElement，ff支持e.target
  var o=e.srcElement||e.target;  
  alert(o.tagName);
}

5五、網頁中實現一個計算當年還剩多少時間的倒數計時程序，要求網頁上實時動態顯示「XX年還剩XX天XX時XX分XX秒」

function counter() {  
  var date = new Date();  
  var year = date.getFullYear();  
  var date2 = new Date(year, 12, 31, 23, 59, 59);  
    /*轉換成秒*/  
  var time = (date2 - date) / 1000;  
  var day = Math.floor(time / (24 * 60 * 60))  
  var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))  
  var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);  
  var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);  
  var str = year + "年還剩" + day + "天" + hour + "時" + minute + "分" + second + "秒";  
    console.log(str);  
}  
window.setInterval("counter()", 1000);

5六、用js實現隨機選取10-100之間的10個數字，存入一個數組，並排序

//首先建立一個空數組，用來放10個數字
  var Array = [];
  //接下來定義一個函數，這個函數是寫10~100的隨機數，咱們如今把他封裝成一個函數
  function getRandom(num1,num2){
    var transition = num2 - num1 + 1;//這裏面的加1是爲了可以取到100
    var res = Math.floor(Math.random() * transition + num1);
    return res;
  }
  //上面的代碼已經獲取了num1~num2的隨機數
  //下面是遍歷出10個隨機數,並把十個數用push放法放到新定義的數組裏面
  for(var i = 0; i < 10; i++){
    Array.push(getRandom(10,100));
  }
  //最後用sort方法進行排序
  Array.sort()
  //打印數組Array
  console.log(Array);

5七、Eval是作什麼的

它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（執行2次，一次解析成js語句，一次執行）。

eval("x=10;y=20;document.write(x*y)") // 200
 
document.write(eval("2+2"))  // 4

var x=10
document.write(eval(x+17)) // 27

5八、javascript的本地對象，內置對象和宿主對象
https://www.jianshu.com/p/7d6...

js中的內部對象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各類錯誤類對象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError。
其中Global和Math這兩個對象又被稱爲「內置對象」，這兩個對象在腳本程序初始化時被建立，沒必要實例化這兩個對象
本地對象爲array obj regexp等能夠new實例化
內置對象爲gload Math 等不能夠實例化的
宿主爲瀏覽器自帶的document,window等，能夠理解爲瀏覽器提供的對象。全部的BOM和DOM都是宿主對象。

5九、請舉出一個匿名函數的典型用例:
http://www.cnblogs.com/jessie...
https://blog.csdn.net/xixiruy...

關於函數聲明，它最重要的一個特徵就是函數聲明提高，意思是執行代碼以前先讀取函數聲明。這意味着能夠把函數聲明放在調用它的語句以後。以下代碼能夠正確執行：

sum(1,2); //3
 function sum(x,y){
     alert(x+y);
 }

匿名函數，顧名思義就是沒有名字的函數。上面的函數表達式中的建立，即建立一個匿名函數，並將匿名函數賦值給變量ss，用ss來進行函數的調用，調用的方式就是在變量ss後面加上一對括號()，若是有參數傳入的話就是ss(1,2)，這就是匿名函數的一種調用方式。

var ss = function(x,y){
         alert(x+y);
     };
     ss(1,2);

如下代碼定義並當即調用了一個匿名函數。經函數聲明包含在一對圓括號中，表示它其實是一個函數表達式。而緊隨其後的另外一對圓括號會當即調用這個函數。

(function(){
         //這裏是塊級做用域
     })();

$.("input").each(function(e){this.val('OK')});

6一、哪一種方法更高效：document.getElementbyId(「myId」)仍是$(「#myId」)?

第一種，由於它直接調用了 JavaScript 引擎。

6二、「==」和「===」的不一樣

」==」與」===」是不一樣的, 」==」是判斷值是否相等, 」===」是判斷值及類型是否徹底相等。
第一個是相等符，第二個全等符。
其中」==」在比較的時候，會進行類型轉換，而」===」則不會，如：

alert('55' == 55);//true
alert('55' === 55);//false 類型不一樣，因此不相等

6三、添加刪除替換插入到某個節點的方法

（1）建立新節點
      createDocumentFragment()    //建立一個DOM片斷
      createElement()   //建立一個具體的元素
      createTextNode()   //建立一個文本節點
（2）添加、移除、替換、插入
      appendChild()
      removeChild()
      replaceChild()
      insertBefore() //在已有的子節點前插入一個新的子節點
（3）查找
      getElementsByTagName()    //經過標籤名稱
      getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)
      getElementById()    //經過元素Id，惟一性

6五、求從1到100中不能被3整除的數字的和

var sum=0;//空籮筐
  for(var i=1;i<=100;i++){//遍歷1-100之間的數據
        if(i%5==0)  {//判斷能被5整除的數
            sum+=i;//放入籮筐
        }
      }
console.log ( sum );//打印到控制檯

6七、Split()和join()的區別

Split()是切割成數組的形式，join()是將數組轉換成字符串
join() 方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的

var a=new Array();
    a[0]="XHTML";
    a[1]="CSS";
    a[2]="JavaScript";
    alert(a.join("#")); //XHTML#css#JavaScript

split(a,b)方法：用於把一個字符串分割成字符串數組. a是必須的,決定個從a這裏開始分割
b不是必須的，可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度。
注意返回的數組中不包括a自己；

var str="how are you?";
 document.write(str.split("")+"<br />");//h,o,w, ,a,r,e, ,y,o,u,?
 document.write(str.split("a")+"<br />");//how ,re you? 不包含a自己
 document.write(str.split(" ")+"<br />");//how,are,you?
 document.write(str.split("",3)+"<br />");//h,o,w

join函數獲取一批字符串，而後用分隔符字符串將它們鏈接起來，從而返回一個字符串。
split()函數獲取一個字符串，而後在分隔符處將其斷開，從而返回一批字符串。
可是，這兩個函數之間的區別在於join能夠使用任何分割字符串將多個字符串鏈接起來，而split()只能使用一個字符分隔符將字符串斷開。
簡單地說，若是你用split()，是把一串字符串(根據某個分隔符)分紅若干個元素存放在一個數組裏。
而join是把數組中的字符串鏈接成一個長串，能夠大致上認爲是split的逆操做。

6八、列舉3種強制類型轉換和2種隱式類型轉換

強制（parseInt,parseFloat,number）
隱式（== – ===）

7一、http://item.taobao.com/item.h...，請寫一段 JavaScript 程序提取 URL 中的各個GET參數（參數名和參數個數不肯定），並將其按 key-value 形式返回到一個 JSON 結構中，如{a:'1', b:'2', c:'', d:'xxx', e:undefined}。

var url="http://www.taobao.com/index.php?keya=00&keyb=11&keyc=22";
      function parseQueryString(url){
        var str=url.split("?")[1];
        var iterms = str.split("&");
        var arr,Json={};
        for(var i=0;i<iterms.length;i++){
          arr=iterms[i].split("=");
          Json[arr[0]]=arr[1];
        }
        return Json;
      }

      var obj= parseQueryString(URL);
      console.log(obj);

7二、簡單用HTML5實現視頻的播放控制

video 的 play()、pause() 方法分別用於實現視頻的播放、暫停。
經過對 video 標籤的 paused 屬性進行判斷，能夠知道當前視頻的播放狀態。視頻處於播放狀態時，paused 爲 false；處於暫停狀態時， paused 爲 true。

<video id="video" preloader poster="../video/show.png" height="480" width="640">
    <source src="../video/trailer.MP4" type="video/mp4">
</video>
<button id="play_btn" type="button"></button>
var v = document.getElementById('video');
var playBtn = document.getElementById('play_btn');
playBtn.textContent = '>';
playBtn.addEventListener("click", function(){
    if(v.paused){
      v.play();
      playBtn.textContent = '||';
    }else{
      v.pause();
      playBtn.textContent = '>';
    }
});

7三、javascript的同源策略

一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

7六、寫一個獲取非行間樣式的函數

function getStyle(obj,attr,value)
{
if(!value){
    if(obj.currentStyle){
    return obj.currentStyle(attr)
      }
    else{
    obj.getComputedStyle(attr,false)
      }
  }
else{
obj.style[attr]=value
   }
}

7八、Ajax是什麼？Ajax的交互模型？如何解決跨域問題？

Ajax是多種技術組合起來的一種瀏覽器和服務器交互技術，基本思想是容許一個互聯網瀏覽器向一個遠程頁面/服務作異步的http調用，而且用收到的數據來更新一個當前web頁面而沒必要刷新整個頁面。該技術可以改進客戶端的體驗。包含的技術：
XHTML：對應W3C的XHTML規範，目前是XHTML1.0。
CSS：對應W3C的CSS規範，目前是CSS2.0
DOM：這裏的DOM主要是指HTML DOM，XML DOM包括在下面的XML中
JavaScript：對應於ECMA的ECMAScript規範
XML：對應W3C的XML DOM、XSLT、XPath等等規範
XMLHttpRequest：對應WhatWG的Web Applications1.0規範

跨域問題簡單的理解就是由於JS同源策略的限制，a.com域名下的JS沒法操做b.com或c.a.com下的對象

(1)若是是端口或者協議形成的跨域問題前端是無能爲力的
(2) 在跨域問題上，域僅僅經過URL的首部來識別而不會嘗試判斷相同的IP地址對應的域或者兩個域是否對應一個IP

前端對於跨域的解決辦法：
(1) document.domain+iframe
(2) 動態建立script標籤

經過異步模式，提高了用戶體驗
優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用
Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

ajax的最大的特色是什麼。

Ajax能夠實現動態不刷新（局部刷新）
readyState屬性狀態有5個可取值： 0=未初始化，1=正在加載 2=以加載，3=交互中，4=完成

ajax的缺點
一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。
五、不容易調試。

跨域： jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

對ajax的理解：

什麼是同步什麼是異步？
同步，是發送方發送數據以後，必須等接收方接收數據必須作出迴應以後，才能夠進行下一步。
異步的話則是發送方發送數據以後不需等接收方作出迴應，能夠進行下一步操做。

Ajax原理
簡單來講，就是經過XMLHttpRequest對象像服務器發送異步請求，從服務器獲取數據以後，再經過JS來操做DOM節點。

XMLHttpRequest對象
方法：
1.open（請求類型，url，布爾值）
2.send（）參數爲做爲請求主體發送的數據，若是不須要請求主體發送數據，則傳入null
3.abort（）取消異步請求
4.getAllResponseHeaders()把HTTP請求的全部響應首部做爲鍵/值對返回
5.getResponseHeader("header")返回指定首部的串值
6.setRequestHeader("header", "value")把指定首部設置爲所提供的值。在設置任何首部以前必須先調用open()。設置header並和請求一塊兒發送 ('post'方法必定要 )

ajax如何實現、readyState五中狀態的含義：https://www.cnblogs.com/sivku...

經常使用屬性
1.readyState 表示請求/響應過程的當前活動階段（0：未初始化，還沒有調用open方法；1：啓動，已調用open方法，未調用send方法；2：發送：已調用send，未接到響應；3：接收，已經接收部分響應數據；4.完成，能夠在客戶端使用）
2.onreadystatechange readyState的值改變一次就會調用一次這個方法
3.responseText 做爲響應主體被返回的文本
4.responseXML 保存響應類型爲「text/xml」或"application/xml"的響應數據的XML DOM文檔
5.status 響應的HTTP狀態
6.statusText Http狀態的說明

ajax優勢：
1.無刷新更新數據，減小用戶等到時間，更好的用戶體驗
2.異步與服務器通訊，無需打斷用戶，響應更加迅速
3.能夠把服務器的一些負擔轉到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，AJAX的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔，提高站點性能。
4.基於標準化，普遍被支持

ajax缺點
1.破壞了前進後退功能，用戶每每經過後退按鈕來取消上一步操做，可是使用ajax沒法實現。能夠使用Gmail來解決這個問題，它只是採用的一個比較笨可是有效的辦法，即用戶單擊後退按鈕訪問歷史記錄時，經過建立或使用一個隱藏的IFRAME來重現頁面上的變動。
2.安全問題。ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有自身受到如跨站腳本攻擊，SQL注入等攻擊。
3.對搜索引擎支持較弱
4.一些手持設備不能很好的支持等

語法：

$.ajax({
        type: "post",
        url:  "/test/check",
        data: {
          "para":1
        },
        dataType: "json",
        cache: false,
        async : false,
        success: function (result){
             alert("請求成功！");
        },
        error:function (result) {      
            alert("請求失敗！");
        }
     });

7九、簡述什麼是跨域，有哪些經常使用的跨域方法

概念：只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域。
經過jsonp跨域
跨域資源共享（CORS）

jsonp如何實現：https://segmentfault.com/a/11...
怎麼處理跨域：https://segmentfault.com/a/11...
80、什麼是Ajax和JSON，簡單談一下他們的優缺點

ajax和jsonp其實本質上是不一樣的東西，ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。
Ajax是異步JavaScript和XML，用於在Web頁面中實現異步數據交互。

優勢：能夠使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量
　避免用戶不斷刷新或者跳轉頁面，提升用戶體驗
缺點：
　對搜索引擎不友好（
　要實現ajax下的先後退功能成本較大
　可能形成請求數的增長
　跨域問題限制

JSON是一種輕量級的數據交換格式，ECMA的一個子集
優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）

8一、JSON 的瞭解

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

{'age':'12', 'name':'back'}

8二、解釋jsonp的原理，以及爲何不是真正的ajax

Jsonp是動態建立script標籤，回調函數
Ajax是頁面無刷新請求數據操做

8三、ajax請求時,如何解析json數據?
json是一種輕量級交互格式,本質上都是字符串,經常使用於先後端的數據交互,本質上就是字符串.

前端解析後端數據

前端在解析後端發來的數據,使用JSON.parse()方法把字符串轉爲json對象.

前端向後端發送數據

前端在向後端發送數據,使用JSON.stringify()方法把json對象轉爲字符串.
(使用jquery或者axios時,這些庫內置了這些方法,只需設置配置項便可.)

var jsonDate = '{ "name":"hello","age":23 }';
var jsonObj = JSON.parse( jsonDate ); 
// jsonObj爲{ "name":alert("hello"),"age":23 }
//JSON.parse()與JSON.stringify()實際功能一個去單引號,一個加單引號

9七、對象數組經過對象的屬性進行排序：
https://blog.csdn.net/xiaobin...
9八、HTML中如何實現更換網頁皮膚
https://blog.csdn.net/suwu150...
9九、事件綁定的方式
(1) 爲 HTML 元素的事件屬性賦值 <div style="width:100px;" onclick="alert()" ></div>;
(2) 在js中使用 ele.oncolick=function(){}
(3) 使用添加事件的方法 addEventListener(DOM兼容的瀏覽器) 或 attachEvent(IE);

嵌入dom
<button onclick="func()">按鈕</button>
直接綁定
btn.onclick = function(){}
事件監聽
btn.addEventListener('click',function(){})

10一、最近遇到ajax獲取數據出現中文亂碼問題
https://blog.csdn.net/u014656...

10三、JavaScript 重排與重繪
https://www.cnblogs.com/zichi...

重繪（repaint或redraw）：當盒子的位置、大小以及其餘屬性，例如顏色、字體大小等都肯定下來以後，瀏覽器便把這些原色都按照各自的特性繪製一遍，將內容呈如今頁面上。重繪是指一個元素外觀的改變所觸發的瀏覽器行爲，瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀。
觸發重繪的條件：改變元素外觀屬性。如：color，background-color等。

注意：table及其內部元素可能須要屢次計算才能肯定好其在渲染樹中節點的屬性值，比同等元素要多花兩倍時間，這就是咱們儘可能避免使用table佈局頁面的緣由之一。

重排（重構/迴流/reflow）：當渲染樹中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建, 這就稱爲迴流(reflow)。每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。

重繪和重排的關係：在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程稱爲重繪。因此，重排一定會引起重繪，但重繪不必定會引起重排。

重構、迴流

瀏覽器的重構指的是改變每一個元素外觀時所觸發的瀏覽器行爲，好比顏色，背景等樣式發生了改變而進行的從新構造新外觀的過程。重構不會引起頁面的從新佈局，不必定伴隨着迴流，

迴流指的是瀏覽器爲了從新渲染頁面的須要而進行的從新計算元素的幾何大小和位置的，他的開銷是很是大的，迴流能夠理解爲渲染樹須要從新進行計算，通常最好觸發元素的重構，避免元素的迴流；好比經過經過添加類來添加css樣式，而不是直接在DOM上設置，當須要操做某一塊元素時候，最好使其脫離文檔流，這樣就不會引發迴流了，好比設置position：absolute或者fixed，或者display：none，等操做結束後在顯示。

10七、首屏、白屏時間如何計算：https://www.cnblogs.com/longm...
1十一、restful的method解釋：http://www.ruanyifeng.com/blo...
11四、編寫一個元素拖拽的插件： https://www.cnblogs.com/lrzw3...
11六、兼容ie的事件封裝：https://blog.csdn.net/DLGDark...
11七、delegate如何實現：https://www.jianshu.com/p/ee8...
https://www.jianshu.com/p/358...
11八、jsonp有什麼安全問題？爲何有這些安全問題？：https://www.jianshu.com/p/14f...
11九、Java中幾種常見的排序方式：https://www.cnblogs.com/xijin...
js幾種常見排序的實現:https://blog.csdn.net/qq_3305...
120、prototype和__proto__的關係是什麼：https://www.cnblogs.com/wuwen...
https://www.jianshu.com/p/7d5...
12一、五種前端開發必備的調試技術：https://segmentfault.com/a/11...
12二、unique()

$.unique() 函數用於對DOM元素數組進行排序，並移除重複的元素。
Array.prototype.unique：自定義的方法名，在Array對象中添加了一個unique( )方法，這個是往數組原型上添加一個函數(屬性)，這樣的話，之後各個你定義的數組均可以直接使用這個函數(屬性)，就只能是數組才能用這個方法

var a=[];
a.unique();

12四、RESTful架構以及HTTP協議：https://www.jianshu.com/p/63f...

一般，由HTTP客戶端發起一個請求，創建一個到服務器指定端口（默認是80端口）的TCP鏈接。HTTP服務器則在那個端口監聽客戶端發送過來的請求。一旦收到請求，服務器（向客戶端）發回一個狀態行，好比"HTTP/1.1 200 OK"，和（響應的）消息，消息的消息體多是請求的文件、錯誤消息、或者其它一些信息。

HTTP協議
Accept表示但願接受什麼樣的數據，Accept: application/json, text/plain, /
Content-Type表示當前請求中Body的編碼方式 Content-Type: application/x-www-form-urlencoded
2XX表示執行成功，4XX表示客戶端數據錯誤(例如參數校驗不經過)，5XX表示服務器端處理錯誤

12六、for..in和for..of

對於純對象的遍歷，for..in要厲害一些，對於數組遍歷，若是不須要知道索引，for..of迭代更合適，由於還能夠中斷；若是須要知道索引，則forEach()更合適；對於其餘字符串，類數組，類型數組的迭代，for..of更佔上風

//枚舉數組
var arr = [3, 5, 7];
for (var i in arr) {
   console.log(i);
}
// 結果是：
// 0
// 1
// 2

//迭代數組
var arr = [3, 5, 7];
for (var i of arr) {
   console.log(i);
}
// 結果是：
// 3
// 5
// 7

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。