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

JavaScript簡史

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

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

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

  2. 外部腳本：通過<script>標(biāo)簽的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. 標(biāo)準(zhǔn)模式
<noscript>元素
  1. 瀏覽器不支持腳本
  2. 瀏覽器支持腳本但腳本被禁用
JavaScript的語法
  1. 區(qū)分大小寫
  2. 標(biāo)識符：駝峰式
  • 以字母，下劃線或美元符開頭
  • 其他可以是數(shù)字，美元符，字母和下劃線
  • 不能是關(guān)鍵字，保留字，true，false，null
  1. 注釋：單行注釋；多行注釋
  2. 嚴(yán)格模式：use strict（ES5引入）
  3. 語句：以分號結(jié)尾；代碼塊更容易解析（{}）
關(guān)鍵字和保留字
  • 關(guān)鍵字
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
  • 保留字：可能在將來作為關(guān)鍵字
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
  • 第五版非嚴(yán)格模式下保留字
class        enum       extends     super
const        export     import
  • 第五版嚴(yán)格模式下保留字
implements   public     package     protected
interface    private    static 
// 第五版新增
let          yield

==除了關(guān)鍵字和保留字，eval和arguments在第五版嚴(yán)格模式下也不能作為標(biāo)志符或?qū)傩悦?=

變量
  1. 聲明變量的值但不限制數(shù)據(jù)類型
var message = 'test';
message = 11; // 數(shù)據(jù)類型可以從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

==嚴(yán)格模式下，不能定義名為eval或arguments的變量==

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

  1. var
  2. let
  3. const
數(shù)據(jù)類型
  • 基本數(shù)據(jù)類型
  1. undefined
  2. null（可以用于清空變量）
  3. boolean
  4. number
  5. string
  • 引用數(shù)據(jù)類型
  1. object
數(shù)據(jù)類型檢測
  1. typeof
  • 無法判斷具體的引用類型數(shù)據(jù)，如數(shù)組
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)
  • 不能檢測基本數(shù)據(jù)類型
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();   //函數(shù)的原型指向數(shù)組

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
數(shù)據(jù)類型轉(zhuǎn)換
  1. Boolean()：轉(zhuǎn)換為boolean類型
  2. toString()：轉(zhuǎn)換為string類型
  3. Number()：轉(zhuǎn)換為number類型，適用于轉(zhuǎn)換任何數(shù)據(jù)類型
  4. parseInt(), parseFloat()：轉(zhuǎn)換為number類型，僅適用于轉(zhuǎn)換字符串類型
  5. String()：轉(zhuǎn)換為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類型進(jìn)行遞增或遞減：

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轉(zhuǎn)換為0再自增；1
f--; // 0.1
o--; // 調(diào)用對象的valueOf()或toString()方法后自減；-2
  1. 一元加和減操作符(+, -)：正負(fù)，沒有遞增遞減的作用
  • 位操作符
  1. 按位非(NOT ~)：操作數(shù)的負(fù)值減一
    負(fù)數(shù)的二進(jìn)制碼：正數(shù)的二進(jìn)制反碼加一
var num1 = 25;  // 二進(jìn)制000000000000000000011001
var num2 = ~num1;  // 二進(jìn)制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. 無符號右移(>>>)：會把負(fù)數(shù)的二進(jìn)制碼當(dāng)正數(shù)的二進(jìn)制碼，結(jié)果非常大
  • 布爾操作符
  1. 邏輯非(!)
alert(!false); // true
alert(!"blue"); // 非空字符串 false
alert(!0); // true
alert(!NaN); // true
alert(!""); // 空字符串 true
alert(!123); // false
  1. 邏輯與(&&)
  2. 邏輯或(||)
  • 乘性操作符
  1. 乘法(*)
    乘積超過ECMAScript數(shù)值范圍，返回Infinity或-Infinity；

有一個操作數(shù)為NaN，結(jié)果為NaN；

Infinity與0相乘，結(jié)果為NaN；

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

0被0除，返回NaN；

Infinity被Infinity除，返回NaN；

  1. 求模(%)：取余
  • 加性操作符
  1. 加法
  2. 減法
  • 關(guān)系操作符
    小于(<)，大于(>)，小于等于(<=)，大于等于(>=)
  • 相等操作符(區(qū)別于是否比較數(shù)據(jù)類型)
  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 逗號操作符總是返回表達(dá)式的最后一項
語句
  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語句(將代碼的作用域設(shè)置到一個特定的對象中)
  2. switch語句
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容