ES5語法


ES5新語法主要是體現在Object和、Array操作,同時涉及到JSON、 Function、Date 和 String類型上。

1.Object

   ES5最大的特點是對象擴展很多方法。

     新建對象:create( 新建一個"干凈"的對象,這里的“干凈”指的是沒有原型鏈。)

     語法:Object.create(proto, [ propertiesObject ]);

      proto是一個對象,作為新創建對象的原型。

      如果 proto 參數不是 null 或一個對象值,則拋出一個 TypeError 異常。null表示沒有原型對象(這樣就創建了一個”干凈的對象”) 

   看下面的例子:

var options = {
    'a':'A'
}
var obj = Object.create(options)
obj.b = 'B'
console.log(obj); //{b: 'B'}
console.log(obj.__proto__) // {a: 'A'}

           propertiesObject 是一個對, 它有4個值和兩個函數,分別是:

  • value : 設置屬性的值
  • writable : 布爾值,設置屬性是否可以被重寫,默認屬性值為false(不能被重寫)
  • enumerable : 布爾值,設置屬性是否可以被枚舉,默認屬性值為false(不能被枚舉)
  • configurable : 布爾值,設置屬性是否可以被刪除,默認屬性值為false(不能被刪除)

     兩個函數:

  • get : 函數,設置屬性返回結果
  • set : 函數,有一個參數

   來看看具體的用法:

   writable:

var account = Object.create(Object.prototype,{
   type: {
       value: "建設銀行",
       //enumerable: false
       //configurable: false
       writable: false
   }
   });
     account.type="交通銀行";
     console.log(account.type);  
    //建設銀行,因為writable設置為false表示該屬性不能被修改

  configurable:

var account = Object.create(Object.prototype,{
   type: {
       value: "建設銀行",
       //enumerable: false
       configurable: false,
       writable: false
   }
   });account.type="交通銀行";
      delete account.type;
     console.log(account.type);  
    //交通銀行,configurable: false表示不能刪除該屬性值

  enumerable:

var account = Object.create(Object.prototype,{
   type: {
       value: "建設銀行",
       enumerable: true,
       configurable: false,
       writable: false
   }
   });
for(var i in account){
    console.log(account[i]);   
   //建設銀行,如果enumerable為true,那么打印undefined
}

 get和set的用法

 注意:這個是用來獲取和設置屬性的值,它不能與writable用在一起,否則就報錯,如下:

function defineGetter(obj, name, getter) {
  Object.defineProperty(obj, name, {
    configurable: true,
    enumerable: true,
    get: getter
  });
}; 
var req = {};
defineGetter(req, 'xhr', function xhr(){
  var val = 'xmlhttprequestx' || '';
  return val.toLowerCase() === 'xmlhttprequest';
});
console.log(req.xhr);  
//false

 設置屬性:defineProperty(0bj)和設置多個屬性defineProperties(Obj)。

 凍結對象:

   seal(obj)  對應:   Object.isSealed

   freeze(obj)對應: Object.isFrozen(除了seal(obj)之外,其中的屬性值也不能修改,即:writable:false,configureable:false);

 遍歷屬性:

   Object.getOwnPropertyNames

   Object.keys

   keys是列出所有enumerable為true的值,用它可以方便判斷一個對象是否是空對象。如

(options.meta && Object.keys(options.meta).length)?“options非空”:options為空對象

又如:

var obj = {
    "x":"y",
    "x1":"y1"
};
var keys = Object.keys(obj);
console.log(keys);
//["x","x1"]  

而getOwnPropertyNames為列出所有defineProperty方法設置的值。

var obj ={"attr1":"xyz"};
Object.defineProperty(obj,'type',{
       value: "建設銀行",
       enumerable: false,
       configurable: true,
       writable: false
   });
var getPro = Object.getOwnPropertyNames(obj);
console.log(getPro); //["attr1","type"]
Object.keys(obj);// ["attr1"]

Object.defineProperty(obj,'type',{
       value: "建設銀行",
       enumerable: true,
       configurable: true,
       writable: false
   });
var getPro = Object.getOwnPropertyNames(obj);
console.log(getPro); //["attr1","type"]
Object.keys(obj);// ["attr1","type"]

 鎖住對象

  Object.preventExtensions(O) 對應Object.isExtensible:

    方法用於鎖住對象屬性,使其不能夠拓展,也就是不能增加新的屬性,但是屬性的值仍然可以更改,也可以把屬性刪除,Object.isExtensible用於判斷對象是否可以被拓展。

 1 var o = {};
 2 console.log(Object.isExtensible(o));   //true
 3 o.lastname ="yinlei";
 4 Object.preventExtensions(o);
 5 console.log(Object.isExtensible(o));   //false
 6 console.log(o.lastname);                  //yinlei
 7 o.firstname="liu";
 8 console.log(o.firstname);                //undefined
 9 delete o.lastname;                        
10 console.log("lastname="+o.lastname);   //undefined   

Object.getOwnPropertyDescriptor(O,property)

   這個方法用於獲取defineProperty方法設置的property 特性。

var account = Object.create(Object.prototype,{
   type: {
       value: "建設銀行",
       enumerable: false,
       configurable: false,
       writable: false
   }
   });
var getPro = Object.getOwnPropertyDescriptor(account,'type');
console.log(getPro);
//Object {value: "建設銀行", writable: false, enumerable: false, configurable: false}

2.use strict

"嚴格模式"規定:

  • 未聲明的變量賦值拋出一個ReferenceError, 而不是創建一個全局變量。
  • 不止一次對對象字面量分配相同的屬性會拋出SyntaxError。
  • 使用with語句拋出SyntaxError。
  • 變量必須在聲明后使用。

3.Array

 Array上構建了一個靜態方法,用來判斷數據類型是否為數組

Array.isArray(["3","4"]);
//true
Array.isArray({"x":"y"});
//false

同時還提供了很多操作數組的方法:

其中最有用的有以下五個: indexOf、map、reduce、filter、forEach,這五個方法根據字面意思就很好理解。

4.Date獲取時間戳

var date = new Date();
//1480312139830
console.log(date.getTime());

//ES5
Date.now()      //Date構造類型添加一個now()靜態方法
 

5.Function.prototype.bind(this,arg1,arg2)

1 function A(x){
2     this. x = x;  
3 }
4 
5 function B(y){
6     console.log(this.x + ":y=" + y );
7 }
8 B.bind(new A(5),6)();

另外還有一種寫法:

/*express-mysql-session源碼*/
var done = function() {
    this.setExpirationInterval();
    if (cb) {
        cb.apply(undefined, arguments);
    }
}.bind(this);

 

6.String.prototype.trim

var str = " hello world "; 
console.log(str.trim()); //可以忽略jquery的 $.trim() 了 
//hello world

7.JSON的兩個方法

//這兩個已經用到很多了
JSON.stringify(obj);  //obj ---> str
JSON.parse(str);   //str ---> json
JSON.stringify(value[, replacer[, space]])
value是需要轉換的值,必選。
replacer可以是函數,也可以是數組,如果是函數,則會顯示函數返回值,參數為value中的key和val,如果是數組,則只會顯示數組中與value對應的值。
space可選,文本添加縮進、空格和換行符
code:
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<p id="demo"></p>
<script>
var str = {"name":"菜鳥教程", "site":"http://www.runoob.com"}
//{"name":"菜鳥教程","site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一個參數情況:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
document.write( "<br>" );
//9
str_pretty2 = JSON.stringify(str, function(){return 9;}, 4) //使用四個空格縮進
document.write( "使用參數情況:" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用於格式化輸出
</script>

</body>
</html> 

    


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM