JavaSctipt高級程序設計讀書筆記(一)

JavaScript簡史

表單驗證，value需要發(fā)送到服務器端判斷

JavaScript組成
  1. 核心：ECMAScript（ECMA-262）
  2. 文檔對象模型：DOM
  3. 瀏覽器對象模型：BOM
JavaScript語言特性
  1. 單線程（異步實現并發(fā)）
  2. 解釋性
  3. 事件驅動
  4. 面向對象
  5. 弱類型
JavaScript在HTML中的使用

  1. 嵌入腳本：<script>標簽引入放置于<head>標簽內部</br>
    ?? 不要在<script>標簽內部嵌入</script>瀏覽器會認為是結束標簽，發(fā)生編譯錯誤

  2. 外部腳本：通過<script>標簽的src屬性

<script>元素的6個屬性
  1. async：異步下載腳本啊送，立即下載腳本舶吗，只對外部腳本文件有效(不能保證腳本的執(zhí)行順序)
  2. charset：通過src屬性指定的代碼的字符集裳扯，charset='UTF-8'(中文字符集)
  3. defer：延遲腳本到文檔完全解析或顯示再執(zhí)行菩颖，僅支持外部腳本(IE7及IE瀏覽器更早版本嵌入腳本也支持這個屬性)
  4. language：已廢棄。編譯代碼所使用的語言
  5. src：外部腳本文件鏈接
  6. type：編寫代碼使用的腳本語言類型撞秋，text/javascript
文檔類型（doctype）
  1. 混雜模式
  2. 標準模式
<noscript>元素
  1. 瀏覽器不支持腳本
  2. 瀏覽器支持腳本但腳本被禁用
JavaScript的語法
  1. 區(qū)分大小寫
  2. 標識符：駝峰式
  • 以字母长捧，下劃線或美元符開頭
  • 其他可以是數字，美元符吻贿，字母和下劃線
  • 不能是關鍵字串结，保留字，true舅列，false肌割，null
  1. 注釋：單行注釋；多行注釋
  2. 嚴格模式：use strict（ES5引入）
  3. 語句：以分號結尾帐要；代碼塊更容易解析（{}）
關鍵字和保留字
  • 關鍵字
break     do        instanceof      typeof
case      else      new             var
catch     finally   return          void
continue  for       switch          while
debugger  function  this            with
default   if        throw      
delete    in        try
// 第五版新增
debugger
  • 保留字：可能在將來作為關鍵字
abstract     enum        int         short
boolean      export      interface   static
bite         extends     long        super
char         final       native      synchronized
class        float       package     throws
const        goto        private     transient      
debugger     implements  protected   volatile
double       import      public
  • 第五版非嚴格模式下保留字
class        enum       extends     super
const        export     import
  • 第五版嚴格模式下保留字
implements   public     package     protected
interface    private    static 
// 第五版新增
let          yield

==除了關鍵字和保留字把敞，eval和arguments在第五版嚴格模式下也不能作為標志符或屬性名==

變量
  1. 聲明變量的值但不限制數據類型
var message = 'test';
message = 11; // 數據類型可以從string變?yōu)閚umber
  1. 局部變量和全局變量
// 局部變量
function test() {
    var message = 'test';
}
test();
alert(message) // error

// 全局變量
fucntion test() {
    message = 'test';
}
test();
alert(message) // test
  1. 變量提升(先使用后聲明)
  2. 一條語句定義多個變量
var message = 'hi',
    found = false,
    age = 29

==嚴格模式下，不能定義名為eval或arguments的變量==

變量的聲明(初始化)方式

  1. var
  2. let
  3. const
數據類型
  • 基本數據類型
  1. undefined
  2. null（可以用于清空變量）
  3. boolean
  4. number
  5. string
  • 引用數據類型
  1. object
數據類型檢測
  1. typeof
  • 無法判斷具體的引用類型數據榨惠，如數組
console.log(typeof "");   //string
console.log(typeof 1);  //number
console.log(typeof true);  //boolean
console.log(typeof null);  //object
console.log(typeof undefined);  //undefined
console.log(typeof []);   //object
console.log(typeof function(){});   //function
console.log(typeof {});   //object
  1. instanceof
  • 能夠判斷具體的引用類型(不能判斷null和undefined)
  • 不能檢測基本數據類型
console.log("1" instanceof String);   //flase
console.log(new String("1") instanceof String);  //true
console.log(1 instanceof Number);   //false
console.log(new Number(1) instanceof Number); //true
console.log(true instanceof Boolean);   //false
console.log(new Boolean(true) instanceof Boolean); //true
console.log([] instanceof Array);  //true
console.log(function(){} instanceof Function);  //true
console.log({} instanceof Object);  //true
  1. constructor
console.log(("1").constructor === String);  //true
console.log((1).constructor === Number);   //true
console.log((true).constructor === Boolean);    //true
console.log(([]).constructor === Array);    //true
console.log((function() {}).constructor === Function);    //true
console.log(({}).constructor === Object);    //true

不適用情況

function Fn(){};

Fn.prototype=new Array();   //函數的原型指向數組

var f=new Fn();   //實例化

console.log(f.constructor===Fn);   //false
console.log(f.constructor===Array);   //true
  1. Object.prototype.toString.call()
var a = Object.prototype.toString;

console.log(a.call("aaa"));    //[object String]
console.log(a.call(1));        //[object Number]
console.log(a.call(true));       //[object Boolean]
console.log(a.call(null));       //[object Null]
console.log(a.call(undefined));   //[object Undefined]
console.log(a.call([]));         //[object Array]
console.log(a.call(function() {}));    //[object Function]
console.log(a.call({}));     //[object Object]
  1. isNaN,isBoolean…
console.log(isObject({}));     //true
console.log(isDate(new Date()));    //true
console.log(isBoolean(false));   //true
console.log(isString(1));     //false
console.log(isError(1));      //false
console.log(isError(new Error()));   //true
console.log(isArray([]));     //true
console.log(isArray(1));  //false
數據類型轉換
  1. Boolean()：轉換為boolean類型
  2. toString()：轉換為string類型
  3. Number()：轉換為number類型奋早，適用于轉換任何數據類型
  4. parseInt(), parseFloat()：轉換為number類型，僅適用于轉換字符串類型
  5. String()：轉換為string類型
  6. 與字符串拼接(+ "")
console.log(String(10));     // "10"
console.log(String(true));    // "true"
console.log(String(null));   // "null"
console.log(String(undefined));     // "undefined"
操作符
  • 一元操作符
  1. 遞增和遞減運算符(++, --)
++a // 先自增再使用
--a // 先自減再使用
a++ // 先使用再自增
a-- // 先使用再自減

var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2; // 22
var num4 = --num1 + num2; // 20

非Number類型進行遞增或遞減：

var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
var 0 = {
    valueOf: function() {
        return -1;
    }
};
s1++; // 3
s2++; // NaN
b++; // false轉換為0再自增赠橙；1
f--; // 0.1
o--; // 調用對象的valueOf()或toString()方法后自減耽装；-2
  1. 一元加和減操作符(+, -)：正負，沒有遞增遞減的作用
  • 位操作符
  1. 按位非(NOT ~)：操作數的負值減一
    負數的二進制碼：正數的二進制反碼加一
var num1 = 25;  // 二進制000000000000000000011001
var num2 = ~num1;  // 二進制111111111111111111100110
alert(num2); // -26
  1. 按位與(AND &)：
var result = 25 & 3;
11001
00011
00001
alert(result); // 1
  1. 按位或(OR |)：
var result = 25 | 3;
11001
00011
11011
alert(result); // 27
  1. 按位異或(XOR ^)：都是1或都是0 -> 返回0
var result = 25 ^ 3;
11001
00011
11010
alert(result); // 26
  1. 左移(<<)：
var oldValue = 2;
var newValue = oldValue << 5; // 64
10
1000000 === 64
  1. 有符號右移(>>)：
var oldValue = 64;
var newValue = oldValue << 5; // 2
1000000
10
  1. 無符號右移(>>>)：會把負數的二進制碼當正數的二進制碼期揪，結果非常大
  • 布爾操作符
  1. 邏輯非(!)
alert(!false); // true
alert(!"blue"); // 非空字符串 false
alert(!0); // true
alert(!NaN); // true
alert(!""); // 空字符串 true
alert(!123); // false
  1. 邏輯與(&&)
  2. 邏輯或(||)
  • 乘性操作符
  1. 乘法(*)
    乘積超過ECMAScript數值范圍掉奄，返回Infinity或-Infinity；

有一個操作數為NaN横侦，結果為NaN挥萌；

Infinity與0相乘，結果為NaN枉侧；

  1. 除法(/)
    商超過ECMAScript數值范圍引瀑，返回Infinity或-Infinity；

0被0除榨馁，返回NaN憨栽；

Infinity被Infinity除，返回NaN；

  1. 求模(%)：取余
  • 加性操作符
  1. 加法
  2. 減法
  • 關系操作符
    小于(<)屑柔，大于(>)屡萤，小于等于(<=)，大于等于(>=)
  • 相等操作符(區(qū)別于是否比較數據類型)
  1. 相等和不相等(== 和 !=)
  2. 全等和不全等(=== 和 !==)
  • 條件操作符(三目運算符)

(如果)?(就):(否則)

  • 賦值操作符
  1. =
  2. *=
  3. /=
  4. %=
  5. +=
  6. -=
  7. <<=
  8. 有符號右移賦值(>>=)
  9. 無符號右移賦值(>>>=)
  • 逗號操作符

在一條語句中執(zhí)行多個操作

var num1=1, num2=2, num3=3;

var num = (5, 1, 4, 3, 0); // 0 逗號操作符總是返回表達式的最后一項
語句
  1. if語句

if (condition) statement1 else statement2

?? 推薦始終使用代碼塊即使只有一行語句

  1. do-while語句

do {
statement
} while (condition)

  1. while語句

while (condition) statement

  1. for語句

  2. for-in語句(用于枚舉對象的屬性)

  3. label語句

  4. break,continue語句

  • break：立即退出循環(huán)掸宛，強制繼續(xù)執(zhí)行循環(huán)后面的語句
  • continue：立即退出循環(huán)死陆，從循環(huán)頂部繼續(xù)執(zhí)行
var num = 0;
for (var i=1;i<10;i++){
    if(i%5 === 0){
        break; // 5
    }
    num++;
}
// 執(zhí)行4次

console.log(num) // 4

var num = 0;
for (var i=1;i<10;i++){
    if(i%5 === 0){
        continue; // 5
    }
    num++;
}
// 執(zhí)行8次

console.log(num) // 8
  1. with語句(將代碼的作用域設置到一個特定的對象中)
  2. switch語句
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市唧瘾，隨后出現的幾起案子措译，更是在濱河造成了極大的恐慌，老刑警劉巖饰序，帶你破解...
    沈念sama閱讀 211,817評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件领虹，死亡現場離奇詭異，居然都是意外死亡求豫，警方通過查閱死者的電腦和手機塌衰，發(fā)現死者居然都...
    沈念sama閱讀 90,329評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來蝠嘉，“玉大人最疆，你說我怎么就攤上這事∈浅浚” “怎么了肚菠？”我有些...
    開封第一講書人閱讀 157,354評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵舔箭，是天一觀的道長罩缴。 經常有香客問我，道長层扶，這世上最難降的妖魔是什么箫章？ 我笑而不...
    開封第一講書人閱讀 56,498評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮镜会，結果婚禮上檬寂，老公的妹妹穿的比我還像新娘。我一直安慰自己戳表，他們只是感情好桶至，可當我...
    茶點故事閱讀 65,600評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著匾旭，像睡著了一般镣屹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上价涝，一...
    開封第一講書人閱讀 49,829評論 1贊 290
  • 城市分裂傳說
    那天女蜈，我揣著相機與錄音，去河邊找鬼。 笑死伪窖，一個胖子當著我的面吹牛逸寓，可吹牛的內容都是我干的。 我是一名探鬼主播覆山，決...
    沈念sama閱讀 38,979評論 3贊 408
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼竹伸，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了簇宽？” 一聲冷哼從身側響起佩伤，我...
    開封第一講書人閱讀 37,722評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎晦毙，沒想到半個月后生巡，有當地人在樹林里發(fā)現了一具尸體，經...
    沈念sama閱讀 44,189評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡见妒，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年孤荣，在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片须揣。...
    茶點故事閱讀 38,654評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡盐股，死狀恐怖，靈堂內的尸體忽然破棺而出耻卡，到底是詐尸還是另有隱情疯汁，我是刑警寧澤，帶...
    沈念sama閱讀 34,329評論 4贊 330
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布卵酪，位于F島的核電站幌蚊，受9級特大地震影響，放射性物質發(fā)生泄漏溃卡。R本人自食惡果不足惜溢豆，卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3贊 313
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望瘸羡。 院中可真熱鬧漩仙，春花似錦、人聲如沸犹赖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0贊 21
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽峻村。三九已至麸折，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間雀哨，已是汗流浹背磕谅。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工私爷， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人膊夹。 一個月前我還...
    沈念sama閱讀 46,382評論 2贊 360
  • 代替公主和親
    正文 我出身青樓衬浑，卻偏偏與公主長得像，于是被迫代替她去往敵國和親放刨。 傳聞我的和親對象是個殘疾皇子工秩，可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2贊 349