從零開始學 Web 之 ES6（二）ES5的一些擴充

大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

• github：github.com/Daotin/Web
• 公眾號：Web前端之巔
• 部落格園：http://www.cnblogs.com/lvonve/
• CSDN：blog.csdn.net/lvonve/

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！

一、json對象擴充

• 把一個Json對象轉換成字串

JSON.stringify(js對象/數組);

• 把一個json格式的字串轉換成Json對象

JSON.parse(json對象/數組);

樣本：

<script type="text/javascript">    var obj = {        name : 'Daotin',        age : 18    };    obj = JSON.stringify(obj);    console.log( typeof obj); // string    obj = JSON.parse(obj);    console.log(obj);</script>

二、Object對象擴充1、方法一

以指定原型對象建立新的對象。

Object.create(prototype, [descriptors])

prototype：指定原型對象

descriptors：（可選）設定建立的新的對象的新屬性。

樣本：

  <script type="text/javascript">    var Obj1 = {      userName: "Daotin"    };    var Obj2 = Object.create(Obj1);    console.log(Obj2);  </script>

列印結果：Obj2下面的__proto__指向的原型對象中有Obj1的屬性，相當於繼承了Obj1屬性。

當為新建立的對象添加新屬性的時候：

添加的新屬性要以對象的方式來添加，這個對象其中有四個屬性來描述當前屬性對象：

• value : 指定屬性的值
• writable : 標識當前屬性值是否是可修改的, 預設為false
• configurable: 標識當前屬性是否可以被刪除 預設為false
• enumerable： 標識當前屬性是否能用for in 枚舉 預設為false

  <script type="text/javascript">    var Obj1 = {      userName: "Daotin"    };    var Obj2 = Object.create(Obj1, {      age: {        value: 18,        writable: true,        configurable: true,        enumerable: true      }    });    console.log(Obj2);    Obj2.age = 19;    console.log(Obj2);    delete Obj2.age;    console.log(Obj2);    for (var i in Obj2) {      console.log(i);    }  </script>

列印結果：

2、方法二

Object.defineProperties(object, descriptors)

為指定對象定義擴充多個屬性.

• object：指定對象
• descriptors：需要擴充的屬性（是一個對象）。

這個屬性對象同樣有：value， writable，configurable，enumerable 屬性。

除了這4個屬性外。還有：

• get ：用來擷取當前屬性的回呼函數。
• set ：修改當前屬性值得觸發的回呼函數，並且實參即為修改後的值。

由可知，直接修改對象的值是不可以的，必須設定set屬性，這樣在修當前屬性值的時候，會自動調用 set 。類似的，在訪問當前屬性的時候，會自動調用 get

3、方法三

對象本身的兩個方法：

• get propertyName(){} ：用來得到當前屬性值的回呼函數
• set propertyName(){} ：用來監視當前屬性值變化的回呼函數

三、數組的擴充

這些擴充的方法都在 Array 的原型對象中。

1. Array.prototype.indexOf(value) : 得到值在數組中的第一個下標2. Array.prototype.lastIndexOf(value) : 得到值在數組中的最後一個下標3. Array.prototype.forEach(function(item, index){}) : 遍曆數組4. Array.prototype.map(function(item, index){}) : 遍曆數組返回一個新的數組，返回加工之後的值5. Array.prototype.filter(function(item, index){}) : 遍曆過濾出一個新的子數組， 返回條件為true的值