基礎

1. 可選的分號

只有在缺少了分號就無法正確解析代碼的時候,javascript,才會在一行的最后自動添加;

a = 3 //自動填充
b = 4;

var a
a
=
3
console.log(a)

//自動填充為 var a ; a = 3; console.log(a);

var y =x +f 
(a+b).toString()

//解析后 var y =x+f(a+b).toString();

//當然 return break continue除外后面會緊跟分號
return
ture;

//解析為 return ; ture;

//++ -- 例外
x
++
y

//解析為 : x; ++y;

2. 二進制浮點數和四舍五入錯誤

javascript只能表示1/2,1/8,1/1024等浮點數,但是1/10等是不精確的

var x =.3 -.2;
x == .1 //false

3. 日期和時間

var then =new Date(2011,0,1);
var later =new Date(2011,0,1,17,10,30);
var now = new Date();

4. 模式匹配

var text = "texting : 1 ,2, 3";
var pattern = /\d/g; //匹配所有包含一個/多個數字的實例
pattern.test(text) ; //=> true 匹配成功
text.search(pattern); // =>9:首次匹配成功的位置
text.match(pattern); //=>["1","2","3"] 所有匹配組成的數組
text.replace(pattern,"#"); // =>"testing: #,#,#"
text.split(/\D+/); // =>["","1","2","3"]:用非數字字符截取字符串.

5. 布爾值

undefined
null
0
-0
NaN
""

以上自動轉為布爾為false

其他所有值,包括對象和數組都為轉為true

6 null和undefined

alert(typeof null) //=>object
alert(typeof undefined) // ES5中 =>undefined
null == undefined // => true
null === undefined // => false

只有null和undefined無法擁有方法的值

7 全局對象

Window對象定義了核心全局屬性,它也針對瀏覽器和客戶端javascript定義了一少部分其他全局屬性.

8 包裝對象

var s = "test"
s.len =4;
var t = s.len // =>undefined;

在讀取字符串/數組/布爾的屬性和方法是可行的,

但你給她們賦屬性值,就是不可行的,因為他們只是臨時對象,你給她們賦值只是給她們臨時值賦值.而且他們是只讀的,不能修改

存取字符串/數組/布爾的屬性時創建的臨時對象叫做包裝對象.

String(),Number(),Boolean(),構造函數就是用來顯示創建包裝對象的.

var s = "test"; //字符串值
var S = new String(s); //字符串對象
s == S //false;
s === S //true;

9 不可變的原始值和可變的對象引用

原始值 : undefined null 布爾值數字字符串對象引用 : 對象數組

var s = "hello";
s.toUpperCase();
s                // hello

var a =[];
var b = 啊;
b[0] = 1;
a[0]  // 1
a === b //true

10 類型轉換

"7" * "4" //28
var n = 1-"x" //NaN "x"無法轉為數字的
n + "object" //NaN object

數組轉String 會使用join()方法

11 轉換和相等性

null == undefined //true 以下皆為true
//以下相等是因為false轉為了數字
"0" == 0
0 == false
"0" == false

但是==從不會將操作數轉為布爾值

undefined == false //false

12 顯示的類型轉換

Number("3");
String(false); //false.toString()
Boolean([]); //true
Object(3); //new Number(3);

x+"" // String(x);
+x or -x //Number(x)
!!x //Boolean(x);

進制轉換

var n =17;
binary_string =n.toString(2); //10001
octal_stirng = "0" + n.toString(8) //021
hex_string ="0x"+n.toString(16); //0x11

數字 => 字符串處理

var n =123456.789;
n.toFixed(0); //"123457"
n.toFixed(2); //"12345679"
n.toExponential(1) //"1.2e+5"
//toPrecision方法將有效數字為轉換為字符串,如果有效數字少于數字證書部分的位數,則轉為指數形式
n.toPrecision(4); //"1.235e+5"
n.toPrecision(10); //"123456.7890"

字符串 => 數字

parseInt("3 blind mice") //3 會自動跳過前導空格和忽略后面的內容
parseInt("0xFF") //255
parseInt(".1") //NaN
parseInt("0.1") //0
parseFloat(".1") //0.1

//指定基數
parseInt("11",2) //3
parseInt("ff",16) //255

對象轉換為原始值

[1,2,3].toString() //"1,2,3"
(function(x) { f(x) ;}).toString(); //function(x) {\n f(x); \n}
/\d+/g.toString() //"/\\d+/g"
new Date(2010,0,1).toString*( // Fri Jan 01 2010 00:00:00 GMT-0800 (PST)

var d= new Date(2010,0,1);
d.valueOf(); //1262332800000

對象轉字符串有toString就執行toString,無toString就執行valueOf,若兩者都無,報錯.

數組轉字符串,同理.不過先嘗試valueOf

13作用屬性的變量

聲明一個全局變量時,用var聲明的話是不可配置的

但是沒用var 是可以配置的

var truevar = 1; 
fakevar = 2;
this.fakevar2 = 3;
delete truevar //false
delete fakevar // true
delete this.fakevar2 // true

14 `+`運算符

如果其中一個操作數是對象,則日期對象通過toString()方法轉換,其他對象通過valueOf();
如果其中一個曹所長是字符串,另外一個操作數也會變成字符串.
否則,都轉為數字進行運輸

1 + {} //1[object Object]
true + true //2
2+null = 2;
2+undefined = NaN

15 比較運算符

>=和<=不依賴于==和===,而只是簡單的不小于和不大于這樣判斷,除了出現NaN,都會返回false;

16 `typeof`運算符

x	typeof x
undefined	"undefiend"
null	"object"
true/false	"boolean"
任意數字和NaN	"number"
任意字符串	"string"
任意函數	"function"
任意內置對象(非函數)	"object"
任意宿主對象	編譯器各自實現,但不是"undefined boolean number string"

17 `delete`運算符

var o = {x:1};
delete 0.x;
"x" in o //false

var a = [1,2,3,];
delete a[2];
2 in a; //false
a.length //3 會留個洞

delete只能刪除自身的屬性,不能刪除繼承的`屬性

delete刪除不存在的屬性也返回true

delete不能刪除全局屬性

18 `use strict`

在不支持ECMA 5的瀏覽器下use strict無任何作用.

支持的話表示代碼執行嚴格模式,滿足

禁止使用with
所有變量都要先聲明,否則報錯.
調用函數(不是方法)中的this值是undefined,(非嚴格this值總數全局對象) javascript //判斷是否嚴格模式 var has_strict_mode = (function() {"use stricut"; return this === undefiend});
通過call或apply調用函數時,this值就是通過call和apply傳入的第一個參數;(非揚模式,null和undefined值會被全局對象轉換為對象的非對象值代替)
給補課操作的值創建新成員會報錯(非嚴格止只是操作失敗,不會報錯)
eval()的代碼不能在調用程序所在的上下文聲明/定義函數,非嚴格模式是可以的,相反,變量和函數定義在eval()創建的新作用域中,這個作用域在eval()返回時棄用了
函數中的arguments對象擁有傳入函數值的靜態副本,在非嚴格模式下,arguments里的數組元素和函數參數都是指向同一個值的引用.
delete運算符后面跟非法標識符(變量,函數,函數參數)時,報錯,非嚴格模式下什么也沒做,只返回false
試圖刪除不可配置的屬性將報錯
不允許不進制速
嚴格模式下arguments.caller和arguments.callee,會報錯.

19 對象

對象類型

內置對象: ECMAScript定義的對象/類
宿主對象: JavaScript解析器嵌入的宿主環境(瀏覽器)
自定義對象

20 `in` `hasOwnPreperty` `propertyIsEnumerable`

in 檢測自有屬性/繼承屬性返回true
hasOwnPreperty 檢測自身屬性
propertyIsEnumberable 檢測自身屬性 & 可枚舉

21 `getter` `setter`

var p = {
    x:1,
    get r(){return Math(this.x*this.x + this.y*this.y)},
    set r(new_value){
        var old_value = Math.sqrt(this.x*this.x + this.y*this.y );
        var ratio = new_value/old_value;
        this.x *=ratio;
        this.y *=ratio;
    },
    //只讀
    get theta(return Math.atan2(this.y,this.x));
}

22 屬性的特性

ECMAScript5新增

可以給原型對象添加方法,并設置成不可枚舉
給對象定義不可刪除的屬性

屬性的特性 1. 值 value 2. 可寫性 writable 3. 可枚舉性 enumerable 4. 可配置性 configurable

可通過Object.getOwnPropertyDescriptor訪問

//{value: 1,writable:true,enumerable:true,configurable:true}
Object.getOwnPropertyDescriptor({x:1},"x");

配置屬性描述符
var o ={}
Object.defineProperty(o,"x",{
                        value :1,
                        writable :true,
                        enumerable:false,
                        configurable:true
                    });

o.x //1
Object.keys(o) //[]不可枚舉

//修改可寫性
Object.defineProperty(o,'x',{writeable:false})

o.x =2 //報錯

Object.definePropery(o,'x',{value : 2})//這樣修改是OK的

//修改讀寫器
Object.definePropery(o,'x',{get: function(){return 0;}});

//當`Object.defineProery`要修改多個屬性
var p =Object.definePropery({},{
        x :{ value:1},//其他符默認為false或undefined
        y :{value :2}
    }
);

23 對象的三個屬性

原型屬性

原型屬性實在實例對象創建之初就設置好的.
1. 將對象直接量創建的對象使用Object.prototype作為它們的原型.
2. 通過new創建的對象使用構造函數的prototype屬性作為它們的原型.
3. 通過Object.create()創建的對象使用第一個參數(也可以是null)作為它們的原型

類屬性

類屬性只可以通過toString方式訪問.

返回類似的字符串[object class]

以下方法可獲取class

function class_of(o){
    if (o === null) return "null";
    if(o === undefiend) return "undefiend";
    return Object.prototype.toString.call(o).slice(8,-1);
}

可拓展性

24 數組

24.1 數組方法

遍歷數組之forEach

function logArrayElements(element, index, array) {
    console.log('a[' + index + '] = ' + element);
}

// Note elision, there is no member at 2 so it isn't visited
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

數組方法

join() : 將數組中的所有元素轉換為字符串連接在一起,方法第一個參數可以設置分隔符.
reverse() : 返回逆序數組
sort() : 默認按照字母表排序.

//自定義排序
var k =[33,4,111,222];
k.sort(); //1111 222 33 4
//想第一個參數在前面,返回負數,想在后面,返回正數.
k.sort(function(a,b){ // 4 33 222 1111 
    return a-b;
});

concat() : 創建并返回一個新數組.

var a = [1,2,3];
a.concat(4,5); // [1,2,3,4,5]
a.concat([4.5]) // [1,2,3,4,5]
a.concat([4,5],[6,7]) //[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]) //[1,2,3,4,5,[6,7]];

slice() : 返回指定數組的一個片段/子數組

var a = [1,2,3,4,5];
a.slice(0,3); //[1,2,3]
a.slice(3); //[4,5]
a.slice(1,-1) // [2,3,4]
a.slice(-3,-2) //[3]

splice() : 在數組插入/刪除元素的通用方法

var a = [1,2,3,4,5,6,7,8];
a.splice(4); //返回[5,6,7,8] a為[1,2,3,4]
a.splice(1,2) //返回[2,3] a為[1,4]
a.splice(1,1) //返回[4] a為[1]

var a = [1,2,3,4,5];
a.splice(2,0,'a','b');// 返回[] ,a為[1,2,'a','b',3,4,5]
a.splice(2,2,[1,2],3) //返回[1,2,[1,2],3,3,4,5]

concat和splice插入時的區別在于splice會插入數組本身.

push pop 在棧尾操作
unshift & shift : 在棧頭操作. 注意unshift中的參數是按順序插入的.
toString toLocaleString

toString和不使用參數的join作用一致

toLocacleString 能返回自定義的本地化方法返回字符串.

ECMAScript 5的數組方法

這些數組方法一般有3個參數,一個個參數
1. forEach()
```
var data = [1,2,3,4,5];
var sum =0;
data.forEach(function(value){
    sum += value;
});

data.forEach(function(value,index,array){
   a[i] = v+1; 
});
data //[2,3,4,5,6]
```
注意forEach無法break停止遍歷.,除非放在try里,然后拋出異常
1. map() : 和forEach類似,但是會把結果放入到一個新數組返回,不會影響舊數組
```
a = [1,2,3,];
b =a.map(function(x){
    return x*x;
});
```
3.fliter() 返回過濾數組,當returntrue時,不過濾此元素
```
a = [5,4,3,2,1];
small_values = a.filter(function(x){ //[2,1]
    return x< 3 ;
});
```
1. every() 和 some() : 判斷數組是否全部滿足/至少一個滿足
```
a = [1,2,3,4,5];
a.every(function(x){ //true
    return x <10;
});

a.some(function(x){ //true
    return x%2 ==0;
});
```
這兩個方法當能覺得返回什么結果時就結束循環
1. reduce() 和 reduceRight()
2. indexOf() 和 lastIndexOf() : 返回索引

24.2 數組類型

判斷數組類型,typeof對對象除了function都返回object

ECMAScript5 提供 Array.isArray(參數)判斷是否為數組

##25 函數

當函數掛載在一個對象上,作為對象的一個屬性,當通過這個對象來調用這個函數,該對象就是此次函數調用的上下文,即this

###25.1 創建函數

函數表達式

var f =function(){...}

//定義時即調用一次
var tensquared = (function(x){return x*x;}(10));

該方式無法在定義之前的語句使用.

函數聲明式
```
function distance(x1,y1,x2,y2){...}
```
該方式可以在定義之前的語句中調用.

25.2 函數調用

作為函數
```
distance(1,2,3,4,);
```
ECMAScript3和非嚴格ECMAScript5 this的值為全局對象

嚴格的ECMAScript5無法調用this
```
//判斷是否為嚴格的ECMAScript5
var strict (function(){return !this;}());
```

作為方法

object_k.method_k();

作為函數和作為方法調用最大的區別是this

作為方法調用this為對象的上下文

var calculator = {
    operand_1 :1,
    operand_2 :1,
    add :function(){
        this.result = this.apperand_1 + this.aperand_2;
    }
}
calculator.add();
//or 下面這種調用好處在于動態選擇調用的方法.
calculator["add"]();
calculator.result ; //2

每次用方法調用,都會隱式傳入一個實參(調用者的上下文);

作為構造函數

var o =new Object();
//構造函數先創建一個新的空對象
//這個對象繼承構造函數的prototype
//這個對象的上下文為本對象,而非o
var new o.m();

通過它們的call()和apply()調用

在嚴格模式下,這兩個方法第一個實參都會變為this的值.

//將o中的m方法替換為新方法
function trace(o,m){
    var =original =o[m];
    o[m] = function(){
        //增加log操作. this指調用trace的對象.
        return original.apply(this,arguments);
    };
}

25.3命名空間

(function(){
    模塊代碼;
}());

實例: 檢測在IE下是否缺少某些變量,有就返回補丁

var extend = (function(){
    for (var p in {toString:null}){
        return function extend(o){
            for(var i =1 length = arguments.length;i<length;i++){
                var source =arguments[i];
                for (var prop in source) o[prop] = source[prop];
            }        
            return o;
        };
    }

    return function patched_extend(o){
        for(var i =1 length = arguments.length;i<length;i++){
            var source =arguments[i];
            for (var prop in source) o[prop] = source[prop];
        }

        for(var j=0 ;j<protoprops.length;j++){
            prop =protoprops[j];
            if(source.hasOwnProperty(prop)) o[prop] = source[prop];
        }
        return o;
    };

    var protoprops = ["toString","valueOf","constructor","hasOwnProperty",
        "isPrototypeof","propertyIsEnumerable","toLocalString"
    ];
}());

25.4 閉包

function counter(){
    var n = 0;
    return {
        count:function(){return n++;}
    };
}

var c =counter(), d =counter();
c.count() //0
d.count() //0
d.count() //1
c.count() //1

閉包主要作用是為了讓內部嵌套的函數能使用外部的局部變量,并該對象能保持局部變量.當創建了一個對象以后,因為作用域鏈的原因,對象執行完沒有被釋放.

JavaScript 核心基礎

基礎

1. 可選的分號

2. 二進制浮點數和四舍五入錯誤

3. 日期和時間

4. 模式匹配

5. 布爾值

6 null和undefined

7 全局對象

8 包裝對象

9 不可變的原始值和可變的對象引用

10 類型轉換

11 轉換和相等性

12 顯示的類型轉換

13作用屬性的變量

14 `+`運算符

15 比較運算符

16 `typeof`運算符

17 `delete`運算符

18 `use strict`

19 對象

20 `in` `hasOwnPreperty` `propertyIsEnumerable`

21 `getter` `setter`

22 屬性的特性

23 對象的三個屬性

24 數組

24.1 數組方法

24.2 數組類型

25.2 函數調用

25.3命名空間

25.4 閉包

相關經驗

相關資訊

相關文檔

目錄

JavaScript 核心基礎

基礎

1. 可選的分號

2. 二進制浮點數和四舍五入錯誤

3. 日期和時間

4. 模式匹配

5. 布爾值

6 null和undefined

7 全局對象

8 包裝對象

9 不可變的原始值和可變的對象引用

10 類型轉換

11 轉換和相等性

12 顯示的類型轉換

13作用屬性的變量

14 +運算符

15 比較運算符

16 typeof運算符

17 delete運算符

18 use strict

19 對象

20 in hasOwnPreperty propertyIsEnumerable

21 getter setter

22 屬性的特性

23 對象的三個屬性

24 數組

24.1 數組方法

24.2 數組類型

25.2 函數調用

25.3命名空間

25.4 閉包

相關經驗

相關資訊

相關文檔

目錄

14 `+`運算符

16 `typeof`運算符

17 `delete`運算符

18 `use strict`

20 `in` `hasOwnPreperty` `propertyIsEnumerable`

21 `getter` `setter`