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