Learn the Web from scratch ES6 (ii) some extensions of ES5

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

One, JSON object extension

• Convert a JSON object to a string

JSON.stringify(js对象/数组);

• Converts a JSON-formatted string into a JSON object

JSON.parse(json对象/数组);

Example:

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

Ii. Object Extension 1, method one

Creates a new object with the specified prototype object.

Object.create(prototype, [descriptors])

prototype: Specifying a prototype object

descriptors: (optional) sets a new property for the new object that is created.

Example:

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

Printing results: Obj2 The following __proto__ point in the prototype object has the Obj1 attribute, which is equivalent to inheriting the Obj1 property.

When adding a new property to a newly created object :

The new property added is to be added as an object with four properties that describe the current Property object:

• value: Specifies the value of the property
• writable: Identifies whether the current property value is modifiable and defaults to False
• configurable: Identifies whether the current property can be deleted by default to False
• enumerable: Identifies whether the current property can be enumerated by default to 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>

Printing results:

2. Method Two

Object.defineProperties(object, descriptors)

Extends multiple properties for the specified object definition.

• object: Specify the Object
• descriptors: the attribute that needs to be extended (is an object).

This Property object also has: Value, Writable,configurable,enumerable property.

In addition to these 4 attributes. And also:

• get: The callback function used to get the current property.
• set: Modifies the callback function that the current property is worth triggering, and the argument is the modified value.

It is known that directly modifying the value of an object is not possible, you must set the setting property so that when the current property value is repaired, set will be called automatically. Similarly, when accessing the current property, the get is automatically called

3. Method Three

The two methods of the object itself:

• get propertyName(){}: The callback function used to get the current property value
• set propertyName(){}: A callback function to monitor changes in the current property value

Third, the expansion of the array

These extended methods are in the prototype object of the 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的值