javascript -- 初步学习总结

Javascript

语法

• JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{…}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

• 缩进不必要

• //为注释，/**/也是
• 变量类型:number sring bool Array object
• ==自动转换数据类型比较
  ===不自动转换数据类型的比较
• NaN特殊的number与其他所有值都不相等，判断方法为isNaN
• 创建新数组new Array( )或者 [ , , , ,]
• array可通过index访问
• object是一组有键-值得无序集合
• 变量名可含$_
• “use strict”以防止未申明变量变为全局变量造成冲突的情况
• 支持转义字符
• `多行字符串
• 字符串相加变为新的字符串
• 模板字符串
• “内${变量}将会被自动替代

• 操作字符串

  • s.length 用于求字符串长度
  • 字符串不可变 对字符串某个索引赋值将不会发生任何改变
  • s.toUpperCase()将一个字符串全部变为大写
  • s.toLowerCase()将一份字符串全部变为小写
  • s.indexOf()搜索指定字符串出现的位置,若无则返回-1
  • s.substring(a,b) 返回指定索引区间的子串
  • s.split(”,maxNum)将string从字符或正则表达式处进行分割 分割最大段数为maxNum

  • s.CharAt()等价于s[];

  • 操作数组

  • a.length
  • a.indexOf()
  • a.slice()切片
  • a.push(,,)末尾添加若干元素pop删掉末尾最后一个元素
  • a.unshift头部添加若干元素和shift把a第一个元素删掉
  • a.sort 排序
  • a.reverse反转
  • a.splice(index,num,”,”,…)从index开始删除num个元素并从该位置添加元素
  • a.concat(s) 把a、s连接起来返回一个新的数组 不改变a,s

  • a.join(”)把a的每个每个元素用指定字符连接返回一个字符串

  • 多维数组

  • 对象
    无序的集合数据类型，它由若干键值对组成

   var xiaoming = {
      name: '小明',
      birth: 1990,
      school: 'No.1   Middle School',
      height: 1.70,
      weight: 65,
      score: null
      };

  • 其中name是xiaoming的一个属性，访问方法 xiaoming.name
  • 若属性名不是一个有效的变量名，需要用‘’括起来，访问方法 xiaoming[‘xxx’]
  • 操作对象
    
    • delete o.s
      delete o[”]
    • ‘属性名’ in o
    • object对象有自己的自带属性 例如‘toString’不是小明的属性但是使用in判断会显示true
    • 使用o.hasOwnProperty(‘name’)可以解决上面那个问题
• 条件判断
  
  • if(){}else(){}
• 循环
  
  • for(i=0; i<n ;i++)三个条件皆可省略
  • for(var i in a) 可以循环输出一个对象的属性名称。若要输出对应值需使用a[i]
    由于array也是一个对象，它的每个索引被视为对象的属性
  • while(){}
  • do…while
• Map javascript对象键必须为字符串,为解决这个问题引入Map数据类型
  
  • 初始化 m=new Map([[‘index1’,key1],[‘index2’,key2],[‘index3’,key3]]) 需要一个二维数组
  • 初始化一个空的Map new Map()
  • m.set(‘index’,value)添加新的键值对
  • m.has(‘index’)判断是否有该键值
  • m.delete(‘index’)
  • m.get(‘index’)取出键所对应的值
• Set是一组key的集合不存在value，无重复key
  
  • s.add(key)
  • s.delete(key);
  • s.has（key）

• iterable 类型 array map set都属于

  • for （i of a） 遍历
    
    • 历史遗留问题 for(i in a)是对属性的遍历，当对array添加了新的属性时也会被包含其中
    • 解决了Map Set的遍历问题
    • 对array而言i为值
  • 内置forEach函数
    var a=[‘A’,’B’,’C’]
    a.forEach(function(element,index,array){})
    
    • 注意回调函数的参数分别为value key 和iterable本身

• 函数

  • 定义及调用
  • 允许传入任意个参数，多余参数自动忽略
  • arguments关键字，只在函数内部起作用，并永远指向传入的参数。有点像一个array，也就是说函数不定义任何参数还是可以拿到所有传入参数的值
  • rest 参数除已定参数外的剩余参数
    定义为 function foo(a,b,…rest){}

• 变量作用域

  • 在函数体内部申明，作用域为整个函数体
  • 内部函数可以访问外部函数定义的变量
  • 若内部函数变量与外部函数变量重名，优先考虑内部函数的变量
  • 全局作用域 不在任何函数内定义的变量就具有全局作用域。实际上Javascript默认有一个全局对象window，全局作用域的变量实际上是window的一个属性
  • 用变量方式定义的函数实际上也是一个全局变量
  • 全局变量会绑定到window上，会造成冲突；减少冲突的方法是把自己的变量和函数全不绑定到一个全局变量中
  • for循环中无法定义局部变量，局部变量作用域为函数内部，
  • 为解决在for中定义块级作用域变量的问题，ES6引入新的关键字let
  • 常量
    
    • ES6引入关键字const来定义常量

  • 解构赋值

    • 数组var[x,y,z]=[”,”,”]
      注意当有数组嵌套时需保持左右结构一致方可完成赋值；

    • 对象
      var{‘属性1’，‘属性2’，‘属性3’}=object；嵌套时{，，属性{‘’，‘’}}；

      let {name, passport:id} = person;

    可以把passport的属性值赋给id

    • 结构赋值可以使用默认值
      let {name,simple=true} =person; //person若无simple属性则赋值为simple
    • {x,y}={}有时会报错，因为javascript引擎吧{开头的语句当做块处理

    • 使用案例

      • [x,y] = [y,x]

      • 快速获得当前页面的域名和路径

        var {hostname:domain, pathname:path} = location;
        

      • 如果一个函数接受一个对象作为参数，可以直接将对象的属性绑定到变量中

        function buildDate({year, month, day, hour=0, minute=0, second=0}) {
        return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
        }
        

• 方法

  • 给一个对象绑定函数就称为这个对象的方法
  • 在一个方法内部，this是一个特殊变量，它始终指向当前对象

  • 注意

    var fn=object.method;
    fun();
    

    是不被允许的这是一个设计上的错误；

  • 注意 在一个方法内定义另一个函数，在此函数内使用的this已经不是原来的this（strict模式下为undefined，非strict模式下为window）；
    为解决这一问题可以在方法一开始捕获this指针

        var that = this;
    

  • 若将方法写在对象外部，为控制this指针的走向，提供以下两个函数本身的方法

    • apply(object,[]);参数1为函数中this指向的对象，参数2是函数本身需要的参数
    • call(object, , ,…);参数1为函数this指向的对象，其余参数为函数本身需要的参数；
      对普通函数的调用可以设置object为null；
    • js所有对象都是动态的，即使是内置的函数，我们也可以重新指向新的函数（保存旧的函数，修改新的函数）
    • 在js中函数名即函数对象本身，加上括号代表调用此函数；
    • 函数parseInt( ， )两个参数，参数1为要变为10进制的数字字符串，参数2为进制；

• 高阶函数

  • 接受另一个函数作为参数的高阶函数；
  • map()方法定义在Array中
    用法：Array.map(function);对Array中每一项进行function操作后返回一个数组；切记map的参数为一个函数而不是一个方法；arr.map(String)✔️arr.map(toString)×；
    
    • map可以接受两个参数 element和index
  • Array.reduce()等价于
    [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
  • Array.filter(function)用于把Array的某些元素过滤掉然后返回剩余的元素，是否过滤掉的依据是function的返回值是true还是false

  • filter的回调函数实际上传入了三个参数element、index、self

    • 可以利用回调函数巧妙地去除Array中的重复元素

      r = arr.filter(function (element, index, self) {
      return self.indexOf(element) === index;
      });
      

      indexOf(element)总返回第一个元素所在的位置

  • sort();排序，默认显摆所有元素转换为string类，再按首字母ascii码值进行排序；
    
    • 可以接受函数作为参数，函数应为二参数函数
      返回正交换
• 闭包
  
  • 返回值为一个函数的函数
  • 用途：延迟函数的执行;private；可以用闭包创建新的函数详见廖雪峰
    *匿名函数 (function (x){})();
• 箭头函数
  
  • 相当于一种匿名函数
  • 两种表达形式
    
    • x => x*x 只有一个表达式的情况（可省略{…}和return） 两个参数(x,y,…rest)=>…
    • 有多条语句
    • 注意当要返回一个对象时需要x=>{{foo:x}};以免{}与箭头函数本身的{}冲突
  • =>箭头函数修复了this的指向问题，可以在方法内部的函数内使用this，仍然指向对象本身；
    
    • 由于this问题被解决，call和apply的第一个参数被忽略；

• generator生成器

  • 由function*定义
  • 和调用函数不同的是generator()只创建了一个generator对象还没去执行它
    *执行的两种方法
    
    • next()方法 每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。
      当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。
    • for … of循环迭代generator对象，这种方式不需要我们自己判断done
  • generator的好处：实现了一部反可以用面对对象写法的；就是把异步回调代码变成“同步”代码，AJAX；

• 标准对象

  • typeof操作符获取对象类型
  • null、Array的类型也是object；
  • 包装对象 New Number()/Boolean()/String(),若使用===判断new Number(123)和123会返回false；
  • 所以不要使用包装对象，可以不加new此时Number()/String()/Boolean()被视为普通函数
  • 转换为number parseInt()parseFloat()
  • 转换为string toString();
  • 判断Array Array.isArray();
  • 判断null myVar=== null;
  • 判断某个全局变量是否存在 window.myVar === ‘undefined’
  • 123.toString()❌
    123..toString()✔️
    （123）..toString();✔️

• Date

  • Date对象用来表示日期和时间

  • 函数

    now.getFullYear(); // 2015, 年份
    now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
    now.getDate(); // 24, 表示24号
    now.getDay(); // 3, 表示星期三
    now.getHours(); // 19, 24小时制
    now.getMinutes(); // 49, 分钟
    now.getSeconds(); // 22, 秒
    now.getMilliseconds(); // 875, 毫秒数
    now.getTime(); // 1435146562875, 以number形式表示的时间戳  
    

  • 注意月份值从0开始，0~11；

  • 创建一个指定日期时间的方法是解析一个符合ISO 8601格式的字符串；返回一个时间戳

    var d = Date.parse('2015-06-24T19:49:22.875+08:00');
    d; // 1435146562875
    

  • 使用时间戳可以很轻易的把它转换成一个Date

    var d = new Date(1435146562875);
    

  • 时区

    var d = new Date(1435146562875);
    d.toLocaleString(); // '2015/6/24 下午7:49:22'，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关
    d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT'，UTC时间，与本地时间相差8小时
    

  • 时间戳是从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数
  • 要获取当前时间戳可以使用Date.now();或者new Date.getTime();

• RegExp

  • 正则表达式可以用于判断一个字符串是否合法
  • 正则表达式可以用字符串表示,如果给出字符就是精确匹配
    
    • \d可以匹配一个数字 ‘00\d’ ‘\d\d\d’
    • \w可以匹配一个字母或数字 ‘\w\w’
    • \s可以匹配一个空格
    • .可以匹配任意字符
    • 特殊字符如‘-’需要转义 -
  • 要匹配变长的字符，*表示任意个字(包括0)，+表示至少一个字符，?表示1或0个字符，{n}表示n个字符，{n-m}表示n-m个字符；
    
    • \d{3}\s+\d{3，8}
      \d{3}三个数字；\s+至少一个空格；\d{3-8}3-8个数字；
  • 进阶：要做更精确的匹配，可以用[]表示范围
    
    • [0-9a-zA-Z_]一个字母、数字或下划线
    • [0-9a-zA-Z_]+至少一个
    • [a-zA-Z_$][0-9a-zA-Z_$]*一个字母_$开头+任意个数字字母$
  • A|B可以匹配A或B 如(J|j)ava(S|s)cript
  • ^表示行的开头 ^\d表示必须以数字开头
  • $表示行的结尾 \d$表示必须以数字结束。
  • RegExp 在js中使用正则表达式的两种方法；
    
    • /正则表达式/
    • new RegExp(‘正则表达式’)；
    • 注意使用第二种方式 字符串内需要转义\所以\
  • 切分字符串 s.split(”)比用固定字符更灵活
    
    • split(/\s+/)识别多个空格键进行切分
  • 分组
    
    • ()表示的就是要提取的分组；
    • ^(\d{3})-(\d{3,8})$分别定义了两个组，可以从匹配字符串中提取出符合要求的子串；
    • 使用re.exec(s)方法 匹配成功返回一个Array 0元素为匹配字符串，其余元素依次为分组字符串
  • 贪婪匹配 注意正则匹配默认贪婪匹配 如\d+会尽量匹配多的字符 要想使用非贪婪匹配需要写成\d+?
  • 全局搜索 几个特殊字符
    
    • g全局索引 定义方式/test/g或new RegExp('test','g')
      
      • 当我们指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引。下次匹配从上一次的lastIndex开始
      • 不能使用/^…$/
• JSON JavaScript Object Notation
  
  • 超轻量级的数据交换格式
    
    • 数据类型: number boolean string null array objext
    • object key必须用”“,字符串“”，字符集UTF-8
    • js中可直接使用json，内置了json的库
    • 序列化(js的对象变为json格式的字符串)
      
      • JSON.stringify(object,,)
      • 第一个参数用于选择对象；第二个参数用于输入指定的属性输出，可以穿入array，还可以传入一个函数function(key.value)，这样每个键值对都会被函数先处理；
      • 如果想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON方法，直接返回JSON应该序列化的数据
    • 反序列化
      
      • 拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个js对象
      • 还可以接受一个函数，用于转换解析出的属性

• 面对对象编程

  • 在c#中类是对象的类型模板；实例是根据类创建的对象
  • 在Javascript中，不区分类和实例的概念，而是通过原型(prototype)来实现面向对象编程
  • xiaoming.proto = Student;

  • 在编写时不要直接使用proto；使用Object.creat()方法可以传入一个原型对象

    function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
    }
    

  • 原型链 obj.xxx访问一个对象时，js一直沿原型链上溯，如果没找到就返回undefined
  • 构造函数
    
    • 可以写一个函数(大写开头)，var x = new Function( , )的形式.
    • x,y 的原型都是对象o ，o自带一个属性constructor指向Function， Function.prototype 为o,
    • 如果x，y共用了某个方法（代码相同），写在Function中new时一般为不同的函数。为了节约内存，可以使用原型链的查找规则，向该方法写在x,y共同的原型链下即Function.prototype
    • 所以你可以把原型需要的属性写在Function中，然后将原型需要的方法写在Function.prototype.method = functin( ){}
    • 为了防止你忘记写new，你可以写一个createFunction()的函数return new Function()详见廖雪峰教程，传入参数最好是一个对象

  • 原型继承

    • 在一个类下细分出另一个类
    • 还是使用构造函数创造出一个类，并使用formerF.call(this,props)继承上一级类的属性.但是在这个构造函数内我们仅仅是简单调用了上一级的构造函数，F.prototype并未成功指向formerF.prototype.

    • 想要解决这一问题可以使用类似指针的方法定义一个空的函数指向，可以将这个过程打包成一个函数

                  function inherits(Child, Parent) {
                  var F = function () {};
                  F.prototype = Parent.prototype;
                  Child.prototype = new F();
                  Child.prototype.constructor = Child;
                  }
      

    • 总结 ：定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；
      借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；
      继续在新的构造函数的原型上定义新方法

  • class继承

    • 从ES6开始正式被引入到js中
    • 创建一个新的class
      

                  class Student {
                  constructor(name) {
                  this.name = name;
                  }
      
                  hello() {
                      alert('Hello, ' + this.name + '!');
                  }
                  }

    使用new创建一个对象

    • 要创建一个子类变得更简单了

      • 使用extends关键词实现，记得用super()调用父类的构造方法。

        class PrimaryStudent            extends Student {
        constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
        }
        
        myGrade() {
            alert('I am at grade ' + this.grade);
            }
        }
        

• 浏览器

  • 不同的浏览器对JavaScript支持的差异主要是，有些API的接口不一样，比如AJAX，File接口。对于ES6标准，不同的浏览器对各个特性支持也不一样。

  • 浏览器对象

    • window对象不但充当全局作用域，而且表示浏览器窗口。

      • innerWidth innerHeight
      • outerWidth outerHeight
      • confirm(”)用于显示带有该字符串的确认否认按钮对话框。

    • navigator对象表示浏览器的信息，最常用的属性包括

      • navigator.appName：浏览器名称；
      • navigator.appVersion：浏览器版本；
      • navigator.language：浏览器设置的语言；
      • navigator.platform：操作系统类型；
      • navigator.userAgent：浏览器设定的User-Agent字符串。

    注意：navigator值可以很容易地被用户修改，所以JS读取的值不一定是正确的

    • screen对象表示屏幕的信息
      
      • screen.width: 屏幕宽度，以像素为单位
      • screen.height: 屏幕高度，以像素为单位
      • screen.colorDepth: 返回颜色位数， 如8，16，24.
    • location对象表示当前页面的url信息
      
      • location.href完整url
      • location.protocal;//http
      • location.host
      • location.port
      • location.pathname
      • location.search
      • location.hash
      • location.reload()重新加载当前页
      • location.assign(‘/’)新加载一个页面
    • document当前页面 DOM根节点
      
      • document.getElementById()
      • document.getElementsByTagName()
      • document.cookie 获取Cookie
        
        • 服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分
        • 存储网站的一些设置
        • 用户的登录信息
        • 安全问题：如果第三方的js中存在恶意代码，第三方将获取到用户的登录信息
        • 解决方案 ：服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项
    • history保存了浏览器的历史记录
      
      • history.back()
      • history.forward()
      • 历史遗留对象，任何情况下都不应该使用

  • 操作DOM

    • DOM是一个树形结构

      • 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；

      • 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；

      • 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；

      • 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

    • 选择DOM结点

      • querySelector() querySelectorAll()
        了解selector语法
      • getElementById() getElementsByTagName() getElementsByClassName() firstElementChild lastElementChild
      • 注意getElementsxxx()返回符合标准的结点数组

      以上方法的对象可以使DOM树的任意结点

    • 更新DOM

      • 修改结点的文本
        
        • .innerHTML属性修改DOM节点内部的子树(避免XSS攻击)
        • .innerText属性或.textContent属性自动对字符串进行HTML编码，保证无法设置任何HTML标签
      • .style对应所有的css。注意把’-‘连接的属性名改为驼峰式命名。

    • 插入DOM

      • 如果选中的节点不是空的，使用innerHTML会替换掉原来所有的子节点
      • note.appendChild(new note);如果插入的节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。
      • document.createElement(‘p’);会创建一个新的

        节点；再插入即可

      • d.setAttribute(‘type’, ‘text/css’);可以添加属性及属性内容
      • parentElement.insertBefore(newElement,referenceElement)
        把newElement插入到referenceElement之前
      • insertBefore需要一个父节点。很多时候需要循环一个父节点的所有子节点可以通过迭代parentnode.children属性实现。
    • 删除DOM
      
      • parent.removeChild();就可以删除父节点的子节点
      • 注意删除后的节点虽然不在文档树中，但它仍在内存中，可以随时再次被添加到别的位置
      • children是一个只读属性，在子节点变化时会更新

  • 操作表单

    • 表单 input type=”text/password/radio/checkbox” select type=hidden
    • input.value属性可以获得对应的用户输入值
    • 可以设置value的值
    • html5加入了color date datetime-local等控件

    • js有两种方式响应表单的提交

      • 元素的submit()方法提交 按钮的onclick事件（缺点扰乱了浏览器对form的正常提交）

        <!-- HTML -->
        <form id="test-form">
            <input type="text" name="test">
            <button type="button" onclick="doSubmitForm()">Submit</button>
        </form>
        
        <script>
            function doSubmitForm() {
            var form = document.getElementById('test-form');
            // 可以在此修改form的input...
            // 提交form:
             form.submit();
        }
        

      • 浏览器表单的onsubmit事件 若return true则提交 return false则为用户输入错误不允许提交。
      • 为了保证用户安全可以将用户密码修改为MD5进行提交。
        
        • 普通直接修改value会使*数突然变多
        • 更好的方式是实现提交
      • 注意 没有name属性的input不会被提交

  • 操作文件

    • 注意：当一个表单包含时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。此时用value赋值没有任何效果。

    • js可以对文件扩展名做检查

      
              var f = document.getElementById('test-file-upload');
              var filename = f.value; // 'C:\fakepath\test.png'
              if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
                  alert('Can only upload image file.');
                  return false;
              }

    • 很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

    • 随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
    • 详见廖雪峰教程如何显示上传文件信息，和显示上传图片的预览。
      以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk…(base64编码)…，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
    • 回调：使用异步操作读取文件内容不知道什么时候结束所以需要设置一个回调函数。
      执行回调函数时文件已经读取完毕。

• AJAX

  • web运作原理一次http请求对应一个页面。如果想要发送请求单用户仍留在当前页面，就需要用AJAX更新数据。（注意AJAX是异步执行的，需要回调函数获得响应）。

  • 在现代浏览器上写AJAX主要依靠XMLHttpRequest对象；

    var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
    

  • 低版本IE需要换成ActiveXObject对象

  • 如果想把高低版本混在一起写可以通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest（不要使用可伪造的navigator.userAgent）

    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject('Microsoft.XMLHTTP');
    } 
    

  • 步骤

    • 创建对象
    • 设置onreadystatechange的回调函数；request.readyState === 4判断请求是否完成 status === 200判断是否是一个成功的响应。
    • request.open();有三个参数 第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。（注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。）
    • request.send()发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
    • Js请求外域的URL：JSONP 不是很懂 之后补坑
    • 新建一个script scr=url通过？callback=…得到一个JSON格式的数据
    • 在页面中准备好回调函数
    • CORS
    • 在引用外域资源时，除了JavaScript和CSS外，都要验证CORS
    • 待填坑
• Promise
  
  • js是单线程执行的，为解决这个问题你可以使用callback即将函数作为参数传入
  • 对象promise也可以解决
  • new promise(test).then(p1).catch(p2)
    
    • 先执行test，若成功执行p1，否则p2
  • setTimeout（funclcode,delay,…回调函数的参数)计时一次可以看成一个模拟网络等异步执行的函数。
    (setInterval()循环计时函数)
  • promise可用于执行并行异步任务
    
    • promise.all(p1,p2).then().catch()执行p1、p2;完成后执行then和catch
    • promise.race(p1,p2)
• canvas
  
  • 画布
  • 创建2d对象canvas.getContext('2d') 创建3d对象canvas.getContext("webg1")
  • 绘制形状、填写文字
• jQuery
  
  • $著名的jQuery符号，本质上是一个函数；如果被占用了则jQuery.noConflict()将$变量交出之后只能使用jQuery这个变量。
  • jQuery对象 不存在则返回[]和DOM对象的相互转换get()方法
  • 选择器
    
    • /#id
    • .class
    • tag
    • []属性
    • 组合查找直接连接
    • 对象选择，连接
    • 层级选择器 ‘ ’隔开
    • 子选择器 >
    • 过滤器 :first-child last-child nth-child() nth-child(even) nth-child(odd) filter()
    • 其他选择器:focus :check :checkbox :enabled :disabled :input :file :visible
    • 子节点find() 父节点parent() 同层节点next() prev()
  • 操作DOM
    
    • text() html() jq可以为你省去很多的if判断是否存在节点
    • css（‘’，‘’）将样式变为
    • hasclass() removeclass()
    • show() hide()
    • width() height() 查看和设置宽高
    • attr() removeAttr()
    • prop() is()是否有属性
    • val() 设置表单value
    • append() 添加片段
    • remove() 删除
    • 事件
      
      • on(‘事件’，方法)方法用于绑定一个事件 或者直接使用click(function)
      • 事件：
        
        • 鼠标事件:click: 鼠标单击时触发；dblclick：鼠标双击时触发；mouseenter：鼠标进入时触发；mouseleave：鼠标移出时触发；mousemove：鼠标在DOM内部移动时触发；hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
        • 键盘事件 键盘事件仅作用在当前焦点的DOM上，通常是input和textarea。keydown：键盘按下时触发；keyup：键盘松开时触发；keypress：按一次键后触发。
        • 其他事件focus：当DOM获得焦点时触发；
          blur：当DOM失去焦点时触发；
          change：当input、select或textarea的内容改变时触发；
          submit：当form提交时触发；
          ready：当页面被载入并且DOM树完成初始化后触发。必须放在document对象
        • $(document).ready(function()) 简化为$(function())
        • 事件参数 mousemove和keypress，我们需要获取鼠标位置和按键的值所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：
      • 取消绑定 off(‘事件’，function)
      • 事件触发条件
        
        • 用户操作出发的，代码操作的不会触发事件
        • 如果需要手动触发事件 change()
          
          • .change()
          • .trigger(‘change’)
      • 有的js代码只能用户事件触发
    • 动画
      
      • show() hide() toggle()参数为毫秒或快慢 左上角展开
      • slidUp() slideDown()slideToggle()
      • fadeIn() fadeOut() fadeToggle()
      • 自定义动画
        animate({末状态,时间,动画结束后调用的函数})
      • 使用delay实现暂停，实现复杂串行动画
      • 有的动画没效果可以考虑使用css
    • ajax
      
      • 全局对象jQuery（也就是$）绑定了ajax()函数
        
        • ajax(url,settings) 常用settings
          
          • async
          • method
          • contendType
          • data
          • headers
          • dataType
        • get()
        • post()
        • getJSON()
        • 安全限制 在ajax()设置jsonp:’callback’ 实现跨平台加载数据
    • 扩展
      
      • 给JQuery对象绑定一个新的方法通过扩展$.fn对象实现,记得return this以支持链式操作

• 错误处理

  • try… catch…finally
  • 错误类型 Error 派生的 TypeError、ReferenceError等错误对象instanceOf
  • try中抛出错误 throw new Error() 直接转到catch
  • 错误传播：如果在一个函数内部发生了错误，它自身没有捕获，错误就会被抛到外层调用函数，如果外层函数也没有捕获，该错误会一直沿着函数调用链向上抛出；我们不必在每一个函数内部捕获错误，只需要在合适的地方来个统一捕获，一网打尽
  • 异步错误处理
    
    • sentTimeout()内的函数不会立即执行，throw的错误不会被catch
    • 类似的绑定事件的代码处也需注意

• underscore 第三方库 把自身绑定到唯一的全局变量_上

  • map/filter，every/some, max/min, groupBy, shuffle/sample
  • Arrays:first/last, flatten, zip/unzip, object, range 官网
  • function: bind, partial, memorize, once, delay,
  • object: keys/allKeys, values, mapObject, invert, extend/extendOwn, clone浅复制, isEqual,
  • 链式调用.chain 由于每一步都是返回对象，最后需要使用.value返回最终值
• Node.js & npm
  
  • 安装