摘要：一直對(duì)抱有敬畏的態(tài)度，也沒(méi)有一直深入學(xué)習(xí)。當(dāng)學(xué)到各種框架的時(shí)候才發(fā)現(xiàn)力不從心，感覺(jué)到了基礎(chǔ)的重要性，重新認(rèn)真的系統(tǒng)的學(xué)習(xí)一下。

一直對(duì)javscript抱有敬畏的態(tài)度，也沒(méi)有一直深入學(xué)習(xí)。當(dāng)學(xué)到各種js框架的時(shí)候才發(fā)現(xiàn)力不從心，感覺(jué)到了javascript基礎(chǔ)的重要性，重新認(rèn)真的系統(tǒng)的學(xué)習(xí)一下。

于是es6中有了let和var
模擬js的塊級(jí)作用域

  function outputNumbers(count){
    (function(){
      for(var i=0;i
2. javascipt中this用法不同
它指向調(diào)用它的那個(gè)對(duì)象
3. 閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。
  function createAFunction(){
    return function(){
      return "這是一個(gè)閉包";
    }
  }
二、基本數(shù)據(jù)類型
undefined、null、boolean、string、number 、object、function  
它們有對(duì)應(yīng)的方法
Boolean()、String()、Number() 、Object()
1. undefined

沒(méi)有被定義就會(huì)返回undefined,是null衍生出來(lái)的,因些undefined==null 返回true
2. null

由于歷史原因 typeof null返回object
3. boolean

Boolean()   
非0返回true  
0、null、undefined返回false
4. string

String()        
不管傳入什么都會(huì)原樣返回,但如果是function,會(huì)執(zhí)行該方法并返回undefined    
toString(參數(shù),進(jìn)制)   
toUpperCase()  
toLowerCase()   
substring(parm1,parm2)     
substr()   
charAt(1)    
charCodeAt(2)    
concat()  
slice()  
indexof()  
lastIndexOf  
trim()  
search(pattern)  //返回索引   
replcae("原","新") //第一個(gè)參數(shù)支持正則    第二個(gè)參數(shù)也可以是一個(gè)function     
splice(",")    //支持正則，支持指定長(zhǎng)度    
它只有l(wèi)ength屬性
5. number

Number()          true=>1 false=>0   null=>0 undefined=>NaN   
Number.MAX_VALUE  最大值    
Number.MIN_VALUE  最小值    
NaN  它是一個(gè)特例，不與任何值相等包括自己    
parseInt() //可以查找字符串中的數(shù)字并轉(zhuǎn)換   
parseFloat() //可以查找字符串中的數(shù)字并轉(zhuǎn)換   
inFinite() //是否在最大值和最小值之間   
toFixed(小數(shù)點(diǎn)位數(shù))
說(shuō)明：它能夠識(shí)別科學(xué)計(jì)數(shù)法 比如 2.15e5 => 215000
6. object

constructor  構(gòu)造函數(shù)   
obj.hasOwnProperty() 是否具有自己的方法  
obj.isProtoTypeOf(object)  檢查傳入的對(duì)象是否是另一個(gè)對(duì)象的原型   
ob.propertyIsEnumerable(propetyName)  檢查給定的屬性能否使用for-in
obj.toLocaleString() 返回執(zhí)行地區(qū)對(duì)應(yīng)的對(duì)象的字符串 =>["Object"]  
obj.toString()    返回執(zhí)行對(duì)象的字符串 =>["Object"]    
obj.valueOf()   返回對(duì)象序列化之后的結(jié)果
三、運(yùn)算符
1. 大于和小于
"23"<"3"   //true,字符串的比較跟數(shù)字的比較不同   
"a"<3   //false a會(huì)被轉(zhuǎn)成NaN   
特別注意:NaN和任何數(shù)比都是false
NaN>3 //false   
NaN<3 //false  
"23"<3 //false  "23"會(huì)被轉(zhuǎn)成23再與3比較
2. 全等和不全等
"55"==55 //true 不全等只判斷值不判斷類型  
"55"===55 //false  全等不僅判斷值還判斷類型
四、條件控制語(yǔ)句
  for(proertyName in global){
    console.log(proertyName)
  }
五、方法
注意：javascript和java不同，它沒(méi)有重載,定義兩個(gè)方法名相同的方法后面一個(gè)會(huì)覆蓋前面一個(gè)。
六、檢測(cè)類型
typeof xxx
// 返回?cái)?shù)據(jù)類型
七、引用類型
1. object

聲明對(duì)象的方法  
var obj = new Object();   
var obj = {};
賦值   
obj.name="xiaomo";   
使用對(duì)象的屬性
obj.name  
obj["name"]
2. Array

可以存任何類型    
聲明
var arr = new Array();   
var arr = new Array(3);   
var arr = [];  
添加對(duì)象   
arr.push("a",b",1,3,4,true)   
操作對(duì)象(刪除、插入、替換)     
刪除：起始位置，要?jiǎng)h除的個(gè)數(shù)       
arr.splice(起始位置,刪除的個(gè)數(shù))     
例子：arr.splice(2,1) //返回[1] 返回刪除的那個(gè)數(shù)   
插入：起始位置、要?jiǎng)h除的個(gè)數(shù)(0)、要插入的數(shù),可以是多個(gè),返回空數(shù)組    
arr.splice(起始位置,刪除的個(gè)數(shù),參數(shù)1,參數(shù)2,參數(shù)n)   
例子:arr.splice(1,0,"插入的值1","插入的值2","插入的值n")  
替換：起始位置、要?jiǎng)h除的項(xiàng)目、要插入的任意項(xiàng)，可以是多個(gè),返回被替換的值  
arr.splice(起始位置,刪除的個(gè)數(shù),參數(shù)1,參數(shù)2,參數(shù)n)  
例子:arr.splice(0,2,"test1","test2")    
其他數(shù)組操作
arr.push("test") 插入到數(shù)組的最后面   
arr.unshift("xiaomo") 插入到數(shù)組的最前面   
arr.pop()   //刪除數(shù)組的最后一個(gè)值   
arr.shift() //刪除數(shù)組第一個(gè)值
使用對(duì)象   
arr[1]   
數(shù)組自帶的方法
arr.reverse();   反轉(zhuǎn)數(shù)組
arr.sort()   默認(rèn)升序排列
arr.sort((a,b)=>{reutrn b-a})  傳入排序方法會(huì)按照自定義排序   
arr.concat(另一個(gè)數(shù)組或者單個(gè)參數(shù))  如果傳入數(shù)組也會(huì)被展開(kāi)拿出來(lái),不會(huì)影響原數(shù)組   
arr.slice(0,3)  會(huì)把選定的部分截取出來(lái)生成一個(gè)新的數(shù)組，不會(huì)影響原數(shù)組     
arr.indexOf(4)   返回該值存在的下標(biāo),不存在返回-1   
arr.lastIndexOf(4) 從倒數(shù)開(kāi)始查找,返回該值存在的下標(biāo),不存在返回-1
arr.every(fn)   對(duì)每個(gè)參數(shù)進(jìn)行處理，全部符合返回true
fn=(item,index,array){//當(dāng)前值、索引、該數(shù)組
  return item>2
}
arr.some(fn)   對(duì)每個(gè)參數(shù)進(jìn)行處理，有一個(gè)符合就返回true
fn=(item,index,array){//當(dāng)前值、索引、該數(shù)組
  return item>2
}
arr.filter(fn) 對(duì)每個(gè)參數(shù)進(jìn)行處理，返回過(guò)濾后的數(shù)組
fn=(item,index,array){//當(dāng)前值、索引、該數(shù)組
  return item>2
}
arr.map(fn)    對(duì)每個(gè)參數(shù)進(jìn)行處理，返回處理后的數(shù)組
fn=(item,index,array){//當(dāng)前值、索引、該數(shù)組
  return item*2
}
arr.forEach(fn)  對(duì)每個(gè)參數(shù)進(jìn)行處理，沒(méi)有返回值
arr.reduce(fn)    對(duì)每個(gè)參數(shù)進(jìn)行處理，迭代返回最終結(jié)果
fn=(prev,cur,index,array){//前一個(gè)值、當(dāng)前值、索引、數(shù)組
  return prev+cur
}
arr.reduceRight(fn)  從右邊對(duì)每個(gè)參數(shù)進(jìn)行處理，迭代返回最終結(jié)果
fn=(prev,cur,index,array){//前一個(gè)值、當(dāng)前值、索引、數(shù)組
  return prev+cur
}
3. Date類型
聲明:   
var date = new Date();  創(chuàng)建當(dāng)前時(shí)間 也可以接收參數(shù)     
Date.parse(pattern)    //   6/13/2016  May 25,2016  或者 yyyy-MM-dd hh:mm:ss格式的  返回時(shí)間戳   
new Date(Date.parse(pattern))   //   將時(shí)間戳格式化為正常的時(shí)間    
new Date(2016,5,19,20,49,15)  //也可以用逗號(hào) 2016-05-19 20:49:15
Date.now()  //當(dāng)前時(shí)間的時(shí)間戳    
toDateString() //返回時(shí)間的字符串 星期、日、月、年   
toTimeString() //時(shí)、分、秒、時(shí)區(qū)  
toLocaleDateString()   特定時(shí)區(qū)的星期、日、月、年
toLocaleTimeString()   特定時(shí)區(qū)的時(shí)、分、秒、時(shí)間    
時(shí)間格式
var date = new Date();
var time = date.getTime() //當(dāng)前時(shí)間的時(shí)間戳
var fullYear = date.getFullYear(); //2016
var year = date.getYear();   //116  
var month = date.getMonth(); //04 從0開(kāi)始
var d = date.getDate(); //日  19
var day = date.getDay();  //4 返回星期幾
var min = date.getMinitues(); //0
var sec = date.getSeconds() //秒
var mill = date.getMilliSeconds() //毫秒
4. 正則 RegExp類型
var re = new RegExp("pattern");
re.test(parm);

// exec 返回匹配的結(jié)果
var test = "abcdef.js";
var pattern = /.js$/
var matches = parrten.exec(test);
console.log(matches); // ".js" ,index:6 input:"abcdef.js"

//test 返回true/false
var text = "abcdef.js";
var pattern = /.js$/
pattern.test(text); // true
5. 方法　function
方法沒(méi)有重載,如果是同名,不管參數(shù)個(gè)數(shù)是不是相同,后面定義的方法都會(huì)覆蓋前面的方法  
每個(gè)方法都包含兩個(gè)屬性:length(參數(shù)個(gè)數(shù))和protoType(原型鏈)
  function test(a,b){
    return a+b;
  }
  function test(a){
    return a;
  }
  test(1)    //1
  test(1,2)  //1
你可以不按正常順序執(zhí)行方法,因?yàn)樵趫?zhí)行的時(shí)候 function都會(huì)被提前
test();
function test(){
  console.log("這是一個(gè)方法");
}
但如果是立即執(zhí)行的函數(shù)則不行
(
  function test(){

  }()
  )
方法有兩個(gè)特殊的內(nèi)部屬性和兩個(gè)非繼承來(lái)的方法 call()、apply(),以及其他方法 toString()、valueOf()    
arguments和this   
arguments是類數(shù)組,保存著參數(shù)。它有arguments.callee()方法
  function factorial(num){
      if(num<=1){
        return 1;
      } else {
        return num * arguments.callee(num-1);
      }
  }

  factorial(5); // 5! 1*2*3*4*5

this在javascript中用法比較特殊,它指向它的調(diào)用者
var color="green";
function sayColor(){
    console.log(this.color);
  }
var o = {
  color="pink";
}
o.sayColor(); //pink
sayColor(); //green
protoType 原型鏈
  function sum (num1,num2){
    return num1+num2;
  }
  // call 參數(shù)1:運(yùn)行函數(shù)的作用域 參數(shù)2 agruments或者Array
  function callSum1(num1,num2){
    return sum.apply(this,arguments);
  }
  function callSum2(num1,num2){
    return sum.apply(this,[num1,num2])
  }
  // apply 參數(shù)1：運(yùn)行函數(shù)的作用域 其他參數(shù):就是把a(bǔ)pply中的數(shù)組拆開(kāi)
  function callSum2(num1,num2){
    return sum.apply(this,num1,num2)
  }
encodeURIComponent() //encode字符串          
decodeURICopmonent() //decode字符串   
eval(express) //解析字符串表達(dá)式   
eval("console.log("我是被解析的表達(dá)式")")
6. Math

Math.E //e   
Math.LN10 //10的自然對(duì)數(shù)  
Math.LOG10E //以10為底e的對(duì)數(shù)   
Math.PI  //PI  
Math.SQRT2 //2的平方根   
Math.SQRT1_2  // 1/2的平方根   
方法：
Math.min(Array)    
Math.max(Array)    
Math.ceil(parm) //向上取整  
Math.floor(parm) //向下取整   
Math.round(parm) //標(biāo)準(zhǔn)的四舍五入   
Math.random()  // 0-1之間的數(shù)   
Math.abs(parm) //絕對(duì)值
八、面向?qū)ο蟮木幊谭椒?/b>
  var person = {
    name:"xiaomo",
    age:25，
    sayHello:function(){
      console.log(this.name);
    }
  }
工廠模式
  function createPerson(name,age,job){
      var o = new Object();
      o.name = name;
      o.age= age;
      o.job =job;
      o.sayName=function(){
        console.log(this.name);
      }
      return o;
  }
  var person1 = createPerson("xiaomo",25,"programer");
  var person2 = createPerson("xiaoming",20,"it");
構(gòu)造函數(shù)(不用顯式的創(chuàng)建對(duì)象，不用返回值，直接把屬性賦給this)
  function Person(name,age,job){
    this.name = name;
    this.age = age,
    this.job = job;
    this.sayName = function(){
      console.log(this.name);
    }
  }

var person1 = new Person("xiaomo",25,"programer");
var person2 = new Person("xiaoming",20,"it");
判斷類型 instanceof
  person1 instanceof Object //true
  person1 instanceof Person //true
原型模式
  function Person(){}
  //實(shí)際上隱式的創(chuàng)建一個(gè)構(gòu)造函數(shù)constructor
  Person.prototype.name="xiaomo";
  Person.prototype.age=25;
  Person.prototype.job="programmer";
  Person.prototype.sayName=function(){
    console.log(this.name);
  }

  //當(dāng)前也可以這樣
  Person.prototype={
    name="xiaomo";
    age=25;
    job="programmer";
    sayName=function(){
      console.log(this.name);
    }
  }

  var person1 = new Person();
  Person.prototype.isPrototypeOf(person1); //true
  Object.getPrototypeOf(person1.name); //xiaomo
  person1.hasOwnProperty("name") //false 存在于protoType中，不存在于實(shí)例中
  "name" in person1 //true  雖然實(shí)例中沒(méi)有,但是它的原型鏈有,所以返回true
  Object.keys(person1) //會(huì)枚舉出實(shí)例中所有的屬性
九、定時(shí)器和延遲執(zhí)行
//延遲一秒執(zhí)行fn函數(shù)，只執(zhí)行一次
  let timeout = 1000;
  var fn = function(){
    console.log("hello");
  }
  var timeoutId = setTimeout(fn,timeout)
  //清除間歇執(zhí)行函數(shù)
  clearTimeout(timeoutId);


  //定時(shí)器，每秒執(zhí)行fn函數(shù)，直到清除定時(shí)器
  var timeout = 1000;
  var fn = function(){
    console.log("定時(shí)器")
  }
  var intervalId = setInterval(fn,timout)
  //清除定時(shí)器
  clearInterval(itervalId);
十、BOM(瀏覽器相關(guān))
1. 系統(tǒng)對(duì)話框
  alert(); //彈出框

  confirm();//確認(rèn)框
  if(confirm("are you sure?")){
    console.log("sure");
  } else{
    console.log("I am not sure!");
  }

  prompt();//交互框
  var result = promot("what"s up?"，"默認(rèn)值");
  if(result!=null){
    alert(result);
  }

2. location對(duì)象
參數(shù)
location.hash //#contents url的hash值
location.host // ip
location.hostname //域名
location.href //http域名
location.pathname //url的目錄
location.port //8080
location.protocool //協(xié)議
location.search //?q=search
location.reload() //可能從緩存加載
location.reload(true) //重新加載
3. navigator對(duì)象
檢測(cè)瀏覽器屬性
navigator.appCodeName //瀏覽器的名字
navigator.appName //完整的瀏覽器名稱
navigator.appVersion //瀏覽器的版本
navigator.cookieEnabled //cookie是否啟用
navigator.javaEnabled() //java是否啟用
navigator.language //主語(yǔ)言 zh-CH
navigator.languages //支持的語(yǔ)言
navigator.onLine //瀏覽器是否連接到了internet
navigator.platofrm //瀏覽器的平臺(tái) "Win32"
navigator.plugins //返回瀏覽器安裝的插件的數(shù)組
function hasPlugin(name){
  name  = name.toLowerCase();
  for(var i = 0 ; i-1表示找到了
    var isTrue = navigator.plugins[i].name.toLowerCase().indexOf(name)>-1;
    if(isTrue){
      return true;
    }
  }
  return false ;
}
4. history對(duì)象
  history.go(-1);//后退一頁(yè)
  history.back();

  history.go(1);//前進(jìn)一頁(yè)
  history.forward();

  history.go("xiaomo.info")//跳轉(zhuǎn)到最近訪問(wèn)過(guò)的該頁(yè)面
  history.length==0 //表示這是用戶打開(kāi)瀏覽器的第一個(gè)頁(yè)面
十一、表單
1. 表單屬性
  acceptCharset 服務(wù)器能夠處理的字符集
  action 接受請(qǐng)求的url
  elements 表單所有控件的集合
  enctype 請(qǐng)求的編碼類型
  length 表單中控件的數(shù)量
  method get/post
  name 表單的名字
  reset() 重置
  submit() 提交
  target
document.forms 可以取到表單的所有控件
2. 控件
  disabled 當(dāng)前字段是否禁用
  form 指向當(dāng)前字段所屬表單的指針:只讀
  name 當(dāng)前字段的名字
  readOnly 當(dāng)前字段只讀
  tabIndex tab切換的序號(hào)
  type 當(dāng)前字段的類型
  value 當(dāng)前字段提交給服務(wù)器的值
修改控件的值
  var input = document.getElementById("name");
  name.value="xiaomo"
  name.focus(); //把焦點(diǎn)設(shè)置到當(dāng)前字段
  //在控件中加入 autofocus="focus" 是一樣的效果
選擇文本   
element.select()     
取得選中的文本
    function alertText(username){
      var username = document.getElementById("username");
      alert(getSelectText(username));
      }
    function getSelectText(textbox){
      return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    }

    // html
  
  
3. 剪貼板事件
  beforecopy
  copy
  cut
  beforepaste
  paste

  //寫一個(gè)公用方
  var EventUtil = {

    getClipboardText:function(event){
      var clipboardData  = (event.clipboardData || window.clipboardData);
      return clipboardData.getData("text");
    }

    setClipboardText:function(event,value){
      if(event.clipboardData){
        return event.clipboardData.setData("text/plain",value);
      } else if (window.clipboardData){
        return window.clipboardData.setData("txt",value);
      }
    }

  }

  EventUtil.addHander(txtbox,"paste",function(event)){
    event  = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if(!/^d*$/.test(text)){
      EventUtil.preventDefault(event);
    }
  }

EventUtil
自動(dòng)切換焦點(diǎn)
  (function(){
    function tabForward(event){
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      if(target.value.length = target.maxLength){
        var form = target.form;
        for( var i =0; len = form.elements.length;i
4. 下拉框 select
  add(newOption,relOption) 插入一個(gè)option
  //最佳做法(在列表最后插入一個(gè)option)
  var newOption = new Option("text","value");
  selectBox.add(newOption,undefined);

  multiple 是否允許多選
  options 控件中所有options的HTMLCollection
  remove(index) 移除指定位置的選項(xiàng)
  //移除指定的選項(xiàng)(這里移除的是第一項(xiàng))
  var index = 0
  selectBox.remove(selectBox.options[index])
  selectedIndex 基于0的選中項(xiàng)的索引,沒(méi)有選中項(xiàng)-1
  size 選擇框中可見(jiàn)的行數(shù)
  text 選中項(xiàng)的文本內(nèi)容
  value 選項(xiàng)的值
  //移動(dòng)一個(gè)選項(xiàng)到特定位置(將第2個(gè)選項(xiàng)移動(dòng)到最后一個(gè)選項(xiàng))
  var optionToMove = selectBox.options[1];
  selectBox.insertBefore(optionToMove,selectBox.options[optionToMove.index-1])
  /添加一個(gè)選項(xiàng)(把當(dāng)前列表中的第一個(gè)選項(xiàng)添加到當(dāng)前列表的最后)
  selectBox.appendChind(selectBox.options[0]);
5. 表單序列化
原則：   
對(duì)表單字段的名字和值進(jìn)行url編碼,使用&分割    
不發(fā)送禁用的表單字段    
只發(fā)送勾選的單選按鈕和復(fù)選框   
不發(fā)送type為reset和button的按鈕   
多選框中的每選中的值多帶帶一個(gè)條目    
submit的時(shí)候,本按鈕也會(huì)被提交   
select發(fā)送的時(shí)候如果有value就發(fā)value的值 沒(méi)有就發(fā)text內(nèi)容  
form.serialize()
6. 富文本編輯器
只要加上contenteditable就可以讓div可以編輯   

也可以用js控制

  var richedit = document.getElementById("richedit");
  richedit.contenteditable="true";
  // true false inherit
  document.exexCommand(命令,false,值);
  //document.exexCommand("bold",false,null);
十二、canvas
  //定義一個(gè)canvas   
  
      您的瀏覽器不支持canvas
  
  //獲取canvas
  document.getElementById("drawing");
  if(drawing.getContext){
    var context = drawing.getContext("2d");
    context.fillReact(30,30,30,30); //畫了一個(gè)正方形
    context.fillStyle="#fff"; //填充
    context.strokeStyle="red"; //描邊
    // todo
  }
十三、html5腳本編程
  //跨文檔消息傳送
  EventUtil.addHander(window,"message",function(event){
      if(event.origin="http://www.wrox.com"){//發(fā)送消息的文檔所在的域
        //接受參數(shù)
        processMessage(event.data);
        //可選:向窗口來(lái)源發(fā)送回執(zhí)
        event.source.postMessage("Receiived","http://xiaomo.info")
      }


    })
十四、本地存儲(chǔ)
1. cookie
var CookieUtil = {
//根據(jù)key讀取cookie
    get: function (name){
         //注意對(duì)鍵編碼
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd;
        //找到cookie鍵
        if (cookieStart > -1){
             //鍵后面第一個(gè)分號(hào)位置
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            //cookie值解碼
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    //設(shè)置cookie
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        //失效時(shí)間，GMT時(shí)間格式
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    //刪除cookie，保持相同的鍵、域、路徑、安全選項(xiàng)，然后設(shè)置失效時(shí)間即可
    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }
};
使用util方法
  CookieUtil.set("name","xiaomo");
  CookieUtil.set("age",26);

  console.log(CookieUtil.get("name"));
  console.log(CookieUtil.get("age"));

  CookieUtil.unset("name");
  CookieUtil.unset("age");
2. localStorage
Window.localStorage.setItem(key,value);//存儲(chǔ)數(shù)據(jù)
Window.localStorage.getItem(key);//讀取數(shù)據(jù)，返回string類型
Window.localStorage.removeItem(key);//刪除數(shù)據(jù)項(xiàng)
Window.localStorage.clear();//刪除所有數(shù)據(jù)