Js知识点集锦

头像
看煙花墜落的淺殤
    阅读 35 分钟
    1

    1、String类的常用方法
    图片描述
    图片描述

    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...
    2、数组的常用方法

    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...
    3、JavaScript 数据类型

    值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

    undefined与null的区别: http://www.ruanyifeng.com/blo...

    null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
    Number(undefined)
NaN

Number(null)
0
    null表示"没有对象"，即该处不应该有值。
    undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

    （1）变量被声明了，但没有赋值时，就等于undefined。

    （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

    （3）对象没有赋值的属性，该属性的值为undefined。

    （4）函数没有返回值时，默认返回undefined。

    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变量分别指什么

    undefined是Javascript中的语言类型之一，而undeclared是Javascript中的一种语法错误。
    undefined的是声明了但是没有赋值，javascript在使用该变量是不会报错。
    var a=undefined; 
var b;

    undeclared 是未声明也未赋值的变量，JavaScript访问会报错。

    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）隐式类型转换
    +，-，== ， ===

    4、js事件

    事件类型有：
    UI（用户界面）事件：用户与页面上元素交互时触发 ；
    焦点事件：当元素获得或失去焦点时触发 ；
    文本事件：当在文档中输入文本时触发；
    键盘事件：当用户通过键盘在页面上执行操作时触发；
    鼠标事件：当用户通过鼠标在页面上执行操作时触发；
    滚轮事件：当使用鼠标滚轮（或类似设备）时触发。

    它们之间是继承的关系，如下图：
    图片描述

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

    5、JS实现数组去重

    1、遍历数组法：新建一个数组，遍历去要重的数组，当值不在新数组的时候（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
    2、数组下标判断法：如果当前数组的第 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;
}
    3、排序后相邻去除法 ：给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值
    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]

    图片描述

    4、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...

    6、js 防止连续点击登录验证码
    https://www.cnblogs.com/yangs...
    7、如何用JS有效防止用户重复点击提交按钮？
    https://segmentfault.com/q/10...
    https://blog.csdn.net/iosbird...
    8、Input框防抖动
    https://segmentfault.com/a/11...
    9、如何压缩css,js

    性能一直是项目中比较重要的一点，尤其门户网站，对页面的响应要求是很高的，从性能角度上来讲，对于Web端的优化其中重要的一点无疑是JS、CSS文件压缩，图片的融合，尽量减小文件的大小，必免占加载时占用过多的带宽。yui compressor无疑是一个比较好的压缩工具，是yahoo的一个开源组件.

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

    10、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{
    //给用户一个错误提醒
}

    11、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...
    12、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...
    13、作用域

    作用域：即某些变量的适用范围
    function fun(){} ;// 这是指函数变量. 函数变量一般也说成函数声明。
ar getA=function fun(){}; //这也是函数表达式

    声明是在函数第一行代码执行之前就已经完成，而赋值是在函数执行时期才开始赋值。所以，声明总是存在于赋值之前。

    https://www.cnblogs.com/wupei...
    作用域链：https://www.cnblogs.com/renlo...
    javascript变量提升：https://www.cnblogs.com/ghost...

    14、prototype
    https://segmentfault.com/a/11...

    一、什么是原型(prototype)
    1、prototype本质上还是一个JavaScript对象；

2、每个函数都有一个默认的prototype属性；

3、通过prototype我们可以扩展Javascript的内建对象
    二. 原型链：

    常用原型来实现继承，其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单说，构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。假如我们让原型对象等于另一个类型的实例。那结果将是：此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系成立，如此层层递进，就构成了实例与原型的链接。这就是原型链的基本概念。

    15、继承
    https://www.cnblogs.com/humin...
    16、闭包

    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...

    17、事件委托/事件代理
    什么是事件冒泡？怎样阻止事件冒泡和默认事件？事件委托是什么？

    冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。
    那么如何有效的阻止冒泡事件的发生？其实在非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的事件流模型都有什么？如何阻止？

    两种事件模型：捕获型事件和冒泡型事件
    事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。
    1、事件：是文档或浏览器窗口中发生的一些特定的交互瞬间
    2、事件流：事件发生的顺序，页面中接受事件的顺序
    3、事件冒泡：(事件从最深的节点开始，然后逐步向上传播事件，)事件会从最内层的元素开始发生，一直向上传播，直到document对象。发生click事件的顺序应该是p -> div -> body -> html -> document
    4、事件捕获：事件会从最外层开始发生，直到最具体的元素。发生click事件的顺序应该是document -> html -> body -> div -> p
    5、事件代理（事件委托）：通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上，给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。

    事件委托的好处：

    事件委托技术可以避免对每个字元素添加事件监听器，减少操作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之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

    18、事件冒泡和事件捕获

    什么是事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
    1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
2、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/...
    19、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...

    21、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中。

    22、http协议中除了get和post之外还有哪些

    图片描述

    根据HTTP标准，HTTP请求可以使用多种方法，其功能描述如下所示。
    HTTP1.0定义了三种请求方法： GET、POST、HEAD
    HTTP1.1新增了五种请求方法：OPTIONS、PUT、DELETE、TRACE 、CONNECT

    23、前端缓存（cookies、localStorage、sessionStorage）:https://segmentfault.com/a/11...

    1、cookies是服务器发送给客户端的特殊信息，只能保存字符串类型，以文本的形式保存在客户端，每次请求都带着它；如果不在浏览器设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称为会话cookie；如果浏览器设置了过期时间，cookie被保存在硬盘中，关闭浏览器，cookie仍存在，直到过期时间结束才消失。

    cookie的应用场景：

    （1）判断用户是否登陆过网站，以便下次实现自动登录（或记住密码）。如果我们删除cookie，每次登录都必须重新填写登录信息，
    （2）保存上次登录时间等信息。
    （3）保存上次查看的页面。
    （4）浏览计数。

    2、localStorage 的生命周期是永久的，关闭页面或浏览器之后localStorage的数据也不会消失。除非localStorage主动删除数据。否则数据永远不会消失。
    3、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的工作原理是什么

    区别：
    1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
    2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。
    3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
    4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
    5、所以个人建议：
    将登陆信息等重要信息存放为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...

    24、常用的本地存储-----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...
    25、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...

    26、谈谈你对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...

    27、如何规避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里面，因此就不会再污染全局命名空间

    28、编写自己的jquery组件
    https://blog.csdn.net/54power...
    29、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);
    };
}

    31、封装一个简单的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());

    32、答案是多少？

    (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...
    33、模块化怎么做？

    立即执行函数,不暴露私有成员
    var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

    34、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...

    35、new操作符具体干了什么

    new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

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

    1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
    2、属性和方法被加入到 this 引用的对象中。
    3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
    var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

    36、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...

    37、js的常见内置对象类：

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

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

    38、如何判断一个对象是否属于某个类？

    instanceof 运算符：instanceof 运算符要求其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，或者 object 为 null，则返回 false。instanceof方法可以判断变量是否是数组类型，但是只限同一全局环境之内，在一个页面有多个iframe的情况下，instanceof失效。
           if(a instanceof Person){
           alert('yes');
       }

    39、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引擎更好）

    41、前后端分离技术都知道哪些？哪些是比较精通，请详细说明

    后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。
    前后端分离分两类：
    第一类，通过nodejs作为一个中转站，nodejs虽然运行在服务器上，但是它处理的是前端显示的业务，例如路由，所以它是前端的一部分，后端使用其他的语言来处理数据问题，然后与nodejs通信。
    第二类，通过前端框架来实现显示逻辑，例如路由，读取api等，这些任务都是浏览器来完成的。然后后端用其他任何语言来提供前端所需要的api。

    42、js的常用方法

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

    43、设置一个已知ID的DIV的html内容为XXXX,字体颜色设置为黑色（不使用第三方框架）

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

    44、下面的语句返回值是什么？

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

split()将字符串分割成数组
reverse()用来颠倒数组中的元素，该方法会改变原来的数组，而不会创建新的数组
join()用于把数组中的所有元素放入一个字符串中

    45、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; 
 })

    46、看下面代码，给出输出结果

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


结果：4  4  4

    47、用纯JS实现，点击一个列表时，输出对应的索引：https://www.jianshu.com/p/4b5...
    49、Web服务器主要用于哪些模块。优点和缺点分别是什么

    Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，[1] 也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。目前最主流的三个Web服务器是Apache Nginx IIS。

    优点：

    异构平台的互通性 
更广泛的软件复用  
普通的通信能力 
迅捷的软件发行方式 
方便的商务的商务的集成

    缺点：

    单机应用程序
局域网的同构应用程序

    50、说明以下http响应码的意义，304。408。

    http响应码
    304 Not Modified 自从上次请求后，请求的网页未修改过。
    408 Request Timeout 请求超时。客户端没有在服务器预备等待的时间内完成一个请求的发送。客户端可以随时再次提交这一请求而无需进行任何更改。

    51、Iframe有哪些缺点，如果真要使用又如何避免

    优点：
    解决加载缓慢的第三方内容如图标和广告等的加载问题
    Security sandbox
    并行加载脚本
    缺点：
    *iframe会阻塞主页面的Onload事件；
    *即时内容为空，加载也需要时间
    *没有语意
    避免：
    使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

    52、什么是三元条件语句，请写出一个简单的三元条件语句

    condition ? expr1 : expr2 用来简化条件判断
    var i=0;
var fee;
if(isMember){
    fee="$2.00";
}else{
    fee="$10.00";
}


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

    54、请实现，鼠标点击页面中的任意标签，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);
}

    55、网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“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);

    56、用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);

    57、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

    58、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都是宿主对象。

    59、请举出一个匿名函数的典型用例:
    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')});

    61、哪种方法更高效：document.getElementbyId(“myId”)还是$(“#myId”)?

    第一种，因为它直接调用了 JavaScript 引擎。

    62、“==”和“===”的不同

    ”==”与”===”是不同的, ”==”是判断值是否相等, ”===”是判断值及类型是否完全相等。
    第一个是相等符，第二个全等符。
    其中 ”==”在比较的时候，会进行类型转换，而”===”则不会，如：
    alert('55' == 55);//true
alert('55' === 55);//false 类型不同，所以不相等

    63、添加 删除 替换 插入到某个节点的方法

    （1）创建新节点
      createDocumentFragment()    //创建一个DOM片段
      createElement()   //创建一个具体的元素
      createTextNode()   //创建一个文本节点
（2）添加、移除、替换、插入
      appendChild()
      removeChild()
      replaceChild()
      insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
      getElementById()    //通过元素Id，唯一性

    65、求从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 );//打印到控制台

    67、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的逆操作。

    68、列举3种强制类型转换和2种隐式类型转换

    强制（parseInt,parseFloat,number）
    隐式（== – ===）

    71、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);

    72、简单用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 = '>';
    }
});

    73、javascript的同源策略

    一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

    76、写一个获取非行间样式的函数

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

    78、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标签

    1. 通过异步模式，提升了用户体验
    2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
    3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
    ajax的最大的特点是什么。

    Ajax可以实现动态不刷新（局部刷新）
    readyState属性 状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

    ajax的缺点
    1、ajax不支持浏览器back按钮。
    2、安全问题 AJAX暴露了与服务器交互的细节。
    3、对搜索引擎的支持比较弱。
    4、破坏了程序的异常机制。
    5、不容易调试。

    跨域： 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("请求失败！");
        }
     });

    79、简述什么是跨域，有哪些常用的跨域方法

    概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

    通过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）解析，支持复合数据类型（数组、对象、字符串、数字）

    81、JSON 的了解

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
    {'age':'12', 'name':'back'}

    82、解释jsonp的原理，以及为什么不是真正的ajax

    Jsonp是动态创建script标签，回调函数
    Ajax是页面无刷新请求数据操作

    83、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()实际功能一个去单引号,一个加单引号

    97、对象数组通过对象的属性进行排序：
    https://blog.csdn.net/xiaobin...
    98、HTML中如何实现更换网页皮肤
    https://blog.csdn.net/suwu150...
    99、事件绑定的方式
    (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(){})

    101、最近遇到ajax获取数据出现中文乱码问题
    https://blog.csdn.net/u014656...

    103、JavaScript 重排与重绘
    https://www.cnblogs.com/zichi...

    重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
    触发重绘的条件：改变元素外观属性。如：color，background-color等。

    注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

    重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

    重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。所以，重排必定会引发重绘，但重绘不一定会引发重排。

    重构、回流

    浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，

    回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。

    107、首屏、白屏时间如何计算：https://www.cnblogs.com/longm...
    111、restful的method解释：http://www.ruanyifeng.com/blo...
    114、编写一个元素拖拽的插件： https://www.cnblogs.com/lrzw3...
    116、兼容ie的事件封装：https://blog.csdn.net/DLGDark...
    117、delegate如何实现：https://www.jianshu.com/p/ee8...
    https://www.jianshu.com/p/358...
    118、jsonp有什么安全问题？为什么有这些安全问题？：https://www.jianshu.com/p/14f...
    119、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...
    121、五种前端开发必备的调试技术：https://segmentfault.com/a/11...
    122、unique()

    $.unique() 函数用于对DOM元素数组进行排序，并移除重复的元素。
    Array.prototype.unique：自定义的方法名，在Array对象中添加了一个unique( )方法，这个是往数组原型上添加一个函数(属性)，这样的话，以后各个你定义的数组都可以直接使用这个函数(属性)，就只能是数组才能用这个方法
    var a=[];
a.unique();

    124、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表示服务器端处理错误

    126、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
    javascript
    看煙花墜落的淺殤
    182 声望6 粉丝
    « 上一篇
    前端开发面试题链接
    下一篇 »
    css实现一个垂直水平居中弹窗的三种方式

    引用和评论

    推荐阅读
    头像
    css实现一个垂直水平居中弹窗的三种方式

    看煙花墜落的淺殤赞 5阅读 7.5k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新