資訊專欄INFORMATION COLUMN
摘要：構造函數用于檢測給定的屬性在當前對象實例中而不是原型中是否存在。返回對象的字符串表示。創建的實例化對象，構造函數指向的是繼承的對象的類的構造函數。
數組
在ECMAScript中數組是非常常用的引用類型
ECMAScript所定義的數組和其他語言中的數組有著很大的區別
數組也是一種對象
//方法一 var arr = new Array(); //方法二 var arr1 = [];特點
數組即一組數據的集合
js數組更加類似java的map容器。長度可變，元素類型任意
數組長度隨時可變！隨時可以修改！(length屬性)
var arr1 = [123,324,true,"abc",1,4,5,new Date()];
arr1.length = 5;
console.log( arr1 );
//log 里面是傳遞的字符串 ， JS引擎默認會調用.toString(); 隱式的調用.
push、pop
shift、unshift
splice、slice
concat、join、sort、reverse(逆序)
影響原數組 splice() arr.splice(開始項,[控制幾位數,值]); //statr ,count , var arr = [1,2,3,4,5,6,7]; var zf = arr.splice(3); //控制幾位數， 默認值 :arr.length-1 //包括3 原來項數 console.log( arr ); //[1,2,3] console.log( zf ); //[4,5,6,7] //返回值 -- 取出的內容 var arr = [1,2,3,4,5,6,7]; var zf = arr.splice(3,2); //截取 console.log( arr ); //[1, 2, 3, 6, 7] console.log( zf ); //[4,5] var arr = [1,2,3,4,5,6,7]; var t = arr.splice(3,2,"zf","dd"); //替換 console.log( arr ); //[1,2,"zf","dd",6,7] console.log( t ); //[4,5] var arr = [1,2,3,4,5,6,7]; var t = arr.splice(3,0,"zf","dd"); //插入 console.log(arr); //[1,2,3,"zf","dd",4,5,6,7] console.log( t ); //[] //如果為0 ,去除空數組 var arr = [1,2,3,4,5,6,7]; var 12 = arr.splice(-4); //截取 console.log( arr ); //[1,2,3] console.log( zf ); //[4,5,6,7]
// slice(stat,end) //去出了end-stat 項。 不包括end項。
var zf = arr.sort(function ( a,b ) { //傳遞匿名函數，通過匿名函數參數判斷大小。
if( a>b ){
return 1;
} else if( a
ES5數組新特性
位置方法：indexOf lastIndexOf
迭代方法：every filter forEach some map
縮小方法：reduce reduceRight
// indexOf(); //查找位置
var arr = [234,23,45,46,45,645,56];
//1個參數的時候，表示傳值 返回索引位置
var idxVal = arr.indexOf(45);
//2個參數的時候， 第一個表示查詢的值，第二個參數是 傳值,表示起始開始查詢的起始位置
var idxVal = arr.indexOf(2,3);
//查找數組比較的時候 是 "==="
//找不到返回 -1
//迭代方法
//every : 對于數組每一個元素進行一個函數的運行 如果函數都返回true， 最后則返回true。 如果有一個返回false 最后結果則返回false。
// 測試數組的所有元素是否都通過了指定函數的測試
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.every(function ( item,index,array ) {
return item > 0;
});
console.log( reslut ); //true
//filter : 對于數組的每一個元素進行一個函數的運行 給定的函數執行， 把過濾后的結果返回。
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.filter(function ( item,index,array ) {
return item > 2; //所有大于2 的過濾出來
})
console.log( reslut ); //[3, 4, 3, 4, 6]
//forEach : 循環數組每一項， 并執行一個方法
// 方法中的參數：數組成員的值，數組成員的索引，原數組（修改原數組會影響原來遍歷的數組）
var arr = [1,2,3,4,3,2,4,6];
arr.forEach(function ( item,index,array ) {
console.log( item );
});
var arr1 = ["tan", "cyan", "pink", "red"];
arr1.forEach(function ( val, idx, arrs ) {
return 1; // 返回返回并不會影響原數組
});
console.log(arr);
//map : 對于數組的每一個元素進行一個函數的運行 可以經過函數執行完畢 把新的結果返回， 原數組不變。
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.map(function ( item,index,array ) {
return item * 3;
});
console.log( reslut ); //[3, 6, 9, 12, 9, 6, 12, 18]
//some : 對于數組每一個元素進行一個函數的運行 如果有一項返回true 最后則返回true 如果每一項都返回false， 最后才返回false。
var arr = [1,2,3,4,3,2,4,6];
var reslut = arr.some(function ( item,index,array ) {
return item > 5; //有一個返回true， 就返回true
});
console.log( reslut ); //true
//模擬filter方法
Array.prototype.filter = function ( cb ) {
var reslut = [];
try{
if ( cb && cb.constructor === Function ) {
for ( var i=0; i 2;
});
console.log( a );
// 模擬some
Array.prototype.some = function ( fn ) {
try{
if ( fn && fn.constructor === Function ) {
for ( var i=0; i
var arr = [1,2,3,4,3,2,4,6];
// reduce reduceRight
// 前一個值， 當前值， 索引位置， array
// 數組中的每個值（從左到右）開始合并，最終為一個值。
// 接收一個函數作為累加器，數組中的每一個值(從左到右)開始合并，最終為一個值。
var reslut = arr.reduce(function ( prev,cur,index,array ) {
return prev + cur;
});
console.log( reslut ); //25
// reduceRight 從右開始遍歷
var reslut1 = arr.reduceRight(function ( prev,cur,index,array ) {
return prev + cur;
});
console.log( reslut ); //25
// 得到接口的對象
var o = (function() {
var person = {
name: "xixi",
age: 22,
}
return {
sayName: function(k) {
return person[k];
},
}
}());
var person = ["name", "age"].reduce(function (obj, k) {
// console.log(obj, k,"--");
obj[k] = o.sayName(k);
return obj;
},{});
console.log(person);
數組判斷方法：
Array.isArray();
判斷是否為數組，如果是，則返回true，否則返回false。
var arr = [];
console.log( Array.isArray(arr) );
填充方法：
fill();
實現對數組的填充
參數：接受值，直接填充，如果是函數，也是直接填充
// arr.fill(1);
// arr.fill(function () {
// return 2;
// });
// arr.fill([1,2,3]);
arr.fill({x: 1});
console.log(arr);
Object
引用類型都是Object類型的實例，Object也是ECMAScript中使用最多的一種類型（就像java.lang.Object一樣，Object類型是所有它的實例的基礎） //所有類的 基礎類。
Object類型的創建方式、使用
對于Object類型應用for in 枚舉循環
Obj每個實例都具有屬性和方法
Constructor: 保存著用于創建當前對象的函數。（構造函數）
hasOwnProperty(propertyName):用于檢測給定的屬性在當前對象實例中(而不是原型中)是否存在。
isPrototypeOf(Object): 用于檢查傳入的對象是否是另外一個對象的原型。
propertyIsEnumerable(propertyName):用于檢查給定的屬性是否能夠使用for-in語句來枚舉。
toLocaleString()：返回對象的字符串表示。該字符串與執行環境的地區對應.
toString():返回對象的字符串表示。
valueOf():返回對象的字符串、數值或布爾表示。
OBject.prototype.toString()
Object.prototype.toString
作用：根據內部的this返回一個類似于這樣的字符串 [object constructorName]
這個方法有個缺點，不能獲取用戶自定義對象的具體類型.
只能獲取內置對象的類型.
自定義對象類型都返回:[object Object]
console.log(Object.prototype.toString.call([])); // [object Array]
console.log(Object.prototype.toString.call(Array)); // [object Fcuntion]
console.log(Object.prototype.toString.call(new Date())); // [object Date]
// 簡寫方式
console.log(({}).toString.call([])); // [object Array]
toString();
// 字符串 ==> String.prototype.toString();
var a = "t";
console.log(a.toString()); // t
var a = new String();
console.log(a.toString()); // 空字符串
var a = new String("string");
console.log(a.toString()); // string
// 數組 ==> Array.prototype.toString();
var b = [1, 2, 3, 4];
console.log(b.toString()); // 1,2,3,4
var b = [];
console.log(b.toString()); // 空字符串
var b = new Array();
console.log(b.toString()); // 空字符串
var b = new Array(3, 5);
console.log(b.toString()); // 3,5
// 對象 ==> Object.prototype.toString();
var c = {};
console.log(c.toString()); // [object Object]
// 函數
console.log(Function.toString()); // function Function() { [native code] }
console.log(Array.toString()); // function Array() { [native code] }
console.log(RegExp.toString()); // function RegExp() { [navtive code] }
關于JSON函數
JSON.parse()
作用：將JSON字符串解析成JavaScirpt值。在解析過程中，可以選擇性的修改某些屬性的原始解析值。
參數1：JSON字符串
參數2： reviver 函數，用來轉換解析出的屬性值。(可選參數)
返回值：解析出的一個 Object
console.log(JSON.parse(10)); // 10
console.log(JSON.parse(true)); // true
console.log(JSON.parse(""xixi"")); // xixi
console.log(JSON.parse(null)); // null
console.log(JSON.parse(""undefined"")); // undefined
console.log(JSON.parse("[]")); // []
如果指定了 reviver 函數，解析的出的Object, 解析值本身以及它所包含的所有屬性，會按照一定的順序(從最最里層的屬性開始，一級級往外，最終到達頂層)分別去調用 指定的reviver 函數。
在調用過程中，當前屬性所屬的對象會作為this值，當前屬性名和屬性值會分別作為第一個參數和第二個參數傳入 reviver 函數中，如果 reviver 函數返回undefeind，則當前屬性會從屬性對象中刪除，如果返回了其它值，則返回的值會成為當前屬性新的屬性值。
當遍歷到最頂層的值(解析值)時，傳入reviver函數的參數會是空字符串""(因為此時已經沒有真正的屬性)和當前的解析值(有可能已經被修改過)，當前的this值會是{"":修改過的解析值},
JSON.parse("{"p": 5}", function (key, val) {
if(key === "") return val; // 如果到了最頂層，則直接返回屬性值
return val * 2;
});
JSON.stringify();
stringify(value [,replacer, [space]]);
將任意的JavaScript值序列化成JSON字符
參數1：value: 將序列化成JSON字符串的值
參數2：replacer: 可選，如果是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理。 如果是一個數組，則暴行在這數組中的屬性名才會被序列化到最終的JSON字符串中。
參數3：space， 指定縮進可通的空白字符串，用于美化輸出。 控制結果字符串里的間距。
注意：
不可枚舉的屬性會被忽略
非數組對象的屬性不能保證以特定的順序出現的序列化后的字符串中。
布爾值，數字，字符串的包裝對象在序列化過程中會自動裝換成對應的原始值。
undefeind，任意的函數，以及symbol值，在徐淚花過程橫縱揮別忽略（出現在非數組對象的屬性值中時）或者被轉換成null（出現在數組中時）
所有以symbol為屬性鍵的屬性值都會被完全忽略掉，即便 replacer參數中強制指定包含了它們
console.log(JSON.stringify([undefined, Object, Symbol()])); // null, null, null
console.log(JSON.stringify({x: undefined, y: Object, z: Symbol()})); // {}
Object.create
ES5為對象提供了一個Object.create();
作用：創建一個類，是一種寄生式繼承。
返回一個類，這個類的原型指向傳遞進來的對象。
創建的實例化對象，構造函數指向的是繼承的對象的類的構造函數。本身沒有原型，可以通過原型鏈找到繼承的對象類中的原型。具有繼承對象上的屬性以及方法。
因此，創建的實例化對象可以使用繼承對象上的屬性和方法。
var Book = function (title, price) {
this.title = title;
this.price = price;
}
Book.prototype.sayTitle = function () {
return this.price;
}
var book = new Book("one", 10);
// 創建一個繼承類
var NewBook = Object.create(book);
console.log(NewBook.constructor);
var price = NewBook.sayTitle();
console.log(price);
// 模擬 Object.create();
// 寄生式繼承
Object.prototype.create = function ( obj ) {
try{
if ( obj && obj.constructor === Object ) {
function F () {}
F.prototype = obj;
return F;
}
}catch(e){
//TODO handle the exception
}
}
// 創建一個繼承類
var NewBook = Object.create(book);
console.log(NewBook.constructor);
var price = NewBook.sayTitle();
console.log(price);
Object.defineProperty
Object.defineProperty();
直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性，并返回這個對象。
參數1：需要被設置的對象
參數2：設置的屬性名
參數3：配置項，添加屬性的特性屬性
特性屬性：
value：該屬性值，默認值:undefeind
writable: 可否被修改，默認值：false （不能被修改）
configuarable: 能否通過delete刪除屬性從而重新定義屬性，能夠修改屬性的特性，或者能否把屬性修改為訪問屬性。 默認值：false;(不可以重新定義或刪除)
enumerable: 是否可以被for-in枚舉。默認值：false
var obj = {};
Object.defineProperty(obj, "title", {
value: "tan",
// writable: true,
configurable: false,
// enumerable: true
});
delete obj.title;
// obj.title = "pink";
// for ( var i in obj ) {
//
// console.log(obj[i]);
//
// }
console.log(obj);
特性方法：
set：給屬性提供setter的方法，如果沒有setter則為undefined。默認值undefiend。
參數：該參數的新值分配給該屬性。默認：undefined
Object.defineProperty(obj, "title", {
get: function () {
console.log("get");
return this._title;
},
set: function ( val ) {
this._title = val;
}
});
obj.title = "pink";
var t = obj.title;
defineProperties
在一個對象上添加或修改一個或多個自有屬性，并返回該對象。
參數1：表示要被處理的對象
參數2：定義多個屬性特性對象
var obj = {}
Object.defineProperties(obj, {
color: {
value: "tan"
},
names: {
value: "zf"
}
});
console.log( obj );
getOwnPropertyNames
Object.getOwnPropertyNames();
返回一個由指定對象的所有自身屬性的屬性名(包括不可枚舉屬性)組成的數組。
參數：需要獲取的對象。
getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor();
指定對象上一個自由屬性對應的屬性描述符。(自由屬性指的直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性)
參數1： 獲取的對象。
參數2：獲取的屬性值
模擬map
模擬java中的Map
//簡單實現 map
function Map () {
//priveate 的對象來保存 key 和 val
var obj = {};
// put 方法
this.put = function ( key,val ) {
obj[key] = val; //把鍵值對 綁定到object上.
}
//獲得map 容器的個數
this.size = function () {
var count = 0;
for ( var i in obj ) {
count++;
}
return count;
}
//根據key 得到 val
this.get = function ( key ) {
return obj[key] || (obj[key] === 0) || (obj[key] === false) ? obj[key] : null;
}
// remove 刪除方法
this.remove = function ( key ) {
if ( obj[key] || obj[key] === 0 || obj[key] === false ) delete obj[key];
}
//eachMap 遍歷 map 容器的方法
this.eachMap = function ( cb ) {
if ( cb && cb.constructor === Function ) {
for ( var i in obj ) {
cb.call(this,i,obj[i]);
}
}
}
}
var m = new Map();
m.put("01",120);
m.put("02","tan");
// console.log( m.size() );
//
// console.log( m.get("0") );
// m.remove("01");
// console.log( m.get("01"),"--" );
m.eachMap(function ( key,val ) {
console.log( key,val,"---" );
});
去掉數組的重復項
var arr = [1,2,4,2,3,4,5,546,57,6,5,4,31,57];
//js 對象特性， 數組去重
// 在 js 對象 中 key 是永遠 不會重復的.
// 1， 把數組轉成一個js的對象
// 2，把數組中的值，變成js 對象當中的key
// 3，把對象再還原成數組
//數組轉對象
var toObject = function ( arr ) {
var reslutObj = {};
for ( var i=0; i
其他引用類型
單體對象(不需要實例化對象，就可以使用的方法)：
Global對象（全局）這個對象不存在，無形的對象(特別的，特殊的存在)
其內部定義了一些方法和屬性：encodeURI 、encodeURIComponent、decodeURI、decodeURIComponent、eval、parseInt、parseFloat、isNaN（在js 里面 只有NaN 自己不等于自己本身的）、Escape、 unescape
// encodeURI 、encodeURIComponent、
var uri = "http://www.baidu.com cn";
var str1 = encodeURI(uri); //http://www.baidu.com%20cn //(url: //不會進行編碼)
var str2 = encodeURIComponent(uri); //http%3A%2F%2Fwww.baidu.com%20cn //任何不標準的文字都會進行編碼
console.log( str1 );
console.log( str2 );
// decodeURI、decodeURIComponent、
console.log( decodeURI(str1) ); // http://www.baidu.com cn
console.log( decodeURIComponent(str2) ); // http://www.baidu.com cn
//eval(string) 方法 無形的javascript 解析器
var str1 = "var a = 10; var b = 20;";
eval(str1);
console.log( a+b );
//數組字符串 直接使用: eval(strArr);
var arr = "[10,203,345,45,6]";
var evalArr = eval(arr);
console.log( evalArr );
//對象字符串
var obj = "{name: "123", age: 20}";
var evalObj = eval("(" + obj + ")" );
console.log( evalObj );//Object {name: "123", age: 20}
//escape unescape URI 轉碼
var str = "八百米";
var str2 = escape(str); //%u516B%u767E%u7C73
console.log( str2 );
Math對象
內置的Math對象可以用來處理各種數學運算
可以直接調用的方法：Math.數學函數（參數）
求隨機數方法：Math.random(),產生 [0，1) 范圍一個任意數
Date對象
獲取當前時間的一系列詳細方法
var date = new Date();
console.log( date.getTime() ); //當前時間的毫秒數
基本包裝類型：Boolean、String、Number
Function類型、RegExp類型
簡單單體和閉包單體
單體（singleton）模式是js中最基本但又最有用的模式之一，它可能比其他任何模式都常用。
這種模式提供了一種將代碼組織為一個邏輯單元的手段，這個邏輯單元中的代碼可以通過單一的變量進行訪問。通過確保單體對象只存在一份實例，就可以確信自己的所有代碼使用的都是同樣的全局資源。
簡單單體
// 簡單單體模式 （只能創建一個實例）//無法通過new 關鍵字來實例化.
var Singleton = { //當成模板類
attr1: true,
attr2: 10,
method1: function () {
console.log( this.attr1 );
}
}
Singleton.method1();
//劃分命名空間（區分代碼）
閉包單體
// 利用閉包來創建單體 , 閉包主要的目的 ， 保護數據
var alogy = {};
alogy.singleton = (function () {
//添加私有成員
var a = 100;
var fn1 = function () {
console.log( a );
}
// 塊級作用域里的執行結果賦值 單體對象
return {
attr1: 10,
attr2: 20,
method: function () {
console.log( this.attr1 );
},
fn1: fn1
}
})();
alogy.singleton.method();
alogy.singleton.fn1();
惰性單體
//惰性單體 (和閉包單體類似)
//通過 一個私有變量來控制是否 實例化對象， 初始化一個 init。
var Ext = {};
Ext.Base = (function () {
//私有變量 控制返回的單體對象
var uniqInstance;
//需要一個構造器 init 初始化單體對象的方法
function Init () {
//私有成員
var a1 = 10;
var a2 = true;
var fun1 = function () {
console.log( a1 );
}
return {
attr1: a1,
attr2: a2,
fun1: fun1
}
}
return {
getInstance: function () {
if ( !uniqInstance ) { //不存在 ，創建單體實例
uniqInstance = new Init();
}
return uniqInstance;
}
}
})()
var init = Ext.Base.getInstance();
init.fun1(); //10
分支單體
//分支單體 (判斷程序的分支 - 瀏覽器差異的檢測)
//簡單判斷
var Ext = {};
var def = true;
Ext.More = (function () {
var ff = {
attr1: "ff"
};
var ie = {
attr1: "ie"
}
return def ? ff : ie;
})()
console.log( Ext.More.attr1 ); //ff
簡單鏈式編程實現
簡單鏈式調用。 return this;
//簡單函數鏈式調用
function Dog () {
this.run = function () {
console.log( "dog is run..." );
return this;
}
this.eat = function () {
console.log( "dog is eat..." );
return this;
}
this.slepp = function () {
console.log("dog is sleep");
return this;
}
}
var d1 = new Dog();
d1.run().eat().slepp();
模擬jquery底層代碼
//模擬jquery底層鏈式編程
// 函數自執行 特點：
// 1： 程序啟動時候 里面代碼自動執行
// 2： 內部的成員變量 外部無法訪問 (除了不加var修飾的變量)
//塊級 作用域
(function ( window,undefined ) {
//$ 最常用的對象 返回給外界 //大型程序開發 一般使用 "_"作為私有的對象
function _$ ( args ) {
// 匹配id 選擇器
var idSelect = /^#[w+]?/;
this.dom; // 接收所得到的元素
if ( idSelect.test(args) ) { //匹配成功接收元素 // #div
this.dom = document.getElementById(arguments[0].substr(1));
} else {
throw new Error("選擇器不正確！");
}
}
//在Function類上 擴展 一個可以實現 鏈式編程的方法
Function.prototype.method = function ( methodName,fn ) { //實現鏈式編程， 方法的名字 和 進行調用的函數是什么
this.prototype[methodName] = fn;
return this; //鏈式編程
}
// 在 _$ 原型對象上 加一些公共的方法
_$.prototype = {
constructor: _$,
addEvent: function ( type,cb ) {
//ff chrome
if ( window.addEventListener ) {
this.dom.addEventListener(type,cb,false);
//ie
} else if ( window.attachEvent ) {
this.dom.attachEvent("on"+type,cb);
}
return this;
},
setStyle: function ( key,val ) {
this.dom.style[key] = val;
return this;
}
}
//window上注冊 一個 全局變量
window.$ = _$;
//準備方法
_$.onReady = function ( cb ) {
//1,實例化 _$ 對象 ，注冊到 window上
window.$ = function ( args ) {
return new _$(args);
}
//2： 執行傳入的代碼
cb.call(window);
//3： 實現鏈式編程
_$.method("addEvent",function () {}).method("setStyle",function () {});
}
})( window ) //程序的入口 window傳入作用域中
$.onReady(function () {
$("#div")
.addEvent("click",function () {
console.log("點擊了");
})
.setStyle("background","pink")
});
嚴格模式
嚴格模式是JavaScript中的一種限制性更強的變種方式。
嚴格模式與非嚴格模式可以共存，可以逐漸的選擇性加入嚴格模式。
全局作用域
定義變量必須通過var。
嚴格模式禁止刪除聲明變量。
delete關鍵字
使用delete刪除一個變量名(而不是屬性名)： delete myVariable
"use strict";
delete Object.prototype; // error .
// 刪除一個不可配置的屬性
函數參數
定義相同名稱的參數
要求參數名唯一。
在正常模式下，最后一個重名參數名諱覆蓋之前的重名參數，之前的參數仍然可以通過arguments[i]來訪問，還不是完全無法訪問。
關鍵字，保留字
使用eval或arguments作為變量名或函數名
嚴格模式下：
訪問arguments.callee, arguments.caller, anyFunction.caller以及anyFunction.arguments都會拋出異常
禁止使用八進制
瀏覽器都支持以零(0)開頭的八進制語法：0644 == 420 還有 "