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

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

• github：https://github.com/Daotin/Web
• 微信公衆號：Web前端之巔
• 博客園：http://www.cnblogs.com/lvonve/
• CSDN：https://blog.csdn.net/lvonve/

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

1、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>

2、Object對象擴展

一、方法一

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

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>

打印結果：

二、方法二

Object.defineProperties(object, descriptors)

爲指定對象定義擴展多個屬性.

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

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

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

• get ：用來獲取當前屬性的回調函數。
• set ：修改當前屬性值得觸發的回調函數，而且實參即爲修改後的值。

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

三、方法三

對象自己的兩個方法：

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

3、數組的擴展

這些擴展的方法都在 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的值