A review of the important characteristics of "translation" ES5

Preface: The author has a point of view, before learning ES6, must first understand ES5, coincides with my point of view, here to find the author's 2014-year-written ES5 of the article, thus translated down. The following content to pick the key translation, not important to skip, the text ES5 and ES5.1 the same meaning.

Original: Thinking about ECMAScript 5 Parts

ES5.1 Browser Support situation

　　All modern browsers support ECMAScript 5.1 (ie9+, Chrome 19+, Safari 5+, Firefox 4+, opera 12+, Android, Blackberry Browser 7+, IOS Safari 5+, Opera Mobile 12+, ie mobile + +), except IE9 does not support strict mode (until IE10 is supported).

　

IE8 only supports ES3

IE8 only supports partial ES5.1 features, such as Json,object.defineproperty,object.getownpropertydescriptor, so IE8 is considered to be a browser that only supports ES3.

Trailing comma

　　ES5 specifies that the last attribute of the object, followed by the last element of the array, allows a comma to exist.

var myObject = {    foo:' foo ',    bar://no error}; var = [MyArray,];                //

To construct a multiline string with a backslash \

To construct a multiline text string, simply write a backslash \ At the end of each line.

var stringliteral = "Lorem ipsum dolor sit amet, consectetur \ elit, sed do eiusmod tempor incididunt ut labore et dolore Magna Aliqua. UT enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea ";

It's not the best way, but it's much better than ES3.

Object properties can use reserved keywords

　Here's an example:

var MyObject = {function: ' function ', New: ' New '};console.log (myobject.function,myobject.new); Logs ' function new '

JSON objects and their methods

ES5 prescribes the Json.parse and Json.stringify methods.

The Trim method of the string

Return '   foo   '. Trim ();//returns ' foo '

Strings can access characters using an array-like subscript

　

Return ' ES5 ' [1]; Returns "S"

　　

Undefined,nan,infinity is a read-only constant

　　In ES5, these are read-only constants and cannot be redefined in a way like undefined= "foo bar".

Use Array.isarray to determine if an array is

return Array.isarray ([]); Returns True

　　

The new array method

ES5 defines the following 8 array methods.

Array.prototype.every () Array.prototype.filter () Array.prototype.forEach () Array.prototype.indexOf () Array.prototype.lastIndexOf () Array.prototype.map () Array.prototype.reduce () Array.prototype.some ()

These methods can be used on other class array objects through the call method of the function, which can be thought of as "generic method".

// Use ForEach on string, logging each character in string [].foreach.call (' ABC ', console.log); // user ForEach on Array-like object (i.e. arguments), logging each argument passed var function (a,b,c) {    [].foreach.call (Arguments,console.log);}; MyFunction (a);

The parameter types of the above foreach,every,some,filter,map are functions, they also receive an optional parameter of the object type as the this object of its function arguments (that is, the context of the function).

var arraylikeobject = {0: ' F ', 1: ' O ', 2: ' G ', Length:3}; // Call foreach, set the callback this value to Arraylikeobject   [].foreach.call (Arraylikeobject,function(item) {        //inside of function this = ArraylikeobjectThis    . length);     // Notice third argument, passing Arraylikeobject

New Object Accessor Properties

　　There are only data properties in ES3, and accessors are added in ES5, and functions can be called when reading or writing object properties. The syntax examples are as follows:

var myObject = {    //name: ', would cause ERROR    //         Console.log (' read name ');    },    //notice use of theset to indicate accessor property         Console.log (' wrote to name ' the value: ' + value '    ); //  //invokes get    

Configurable properties of object properties

ES5 has new configurable properties for object properties that allow you to configure whether the property is writable (writable), enumerable (enumerable), and removable (configurable) when defining object properties. Use Object.getownpropertydescriptor () to get an attribute description of the property.

　　

var accessor = {    get name () {},    set name () {}}; var data = {name: ' Cody Lindley '}; // logs {get:function, set:function, Enumerable:true, configurable:true}Console.log ( Object.getownpropertydescriptor (accessor, ' name '));     // Logs {value: "Cody Lindley", Writable:true, Enumerable:true, configurable:true}Console.log ( Object.getownpropertydescriptor (data, ' name '));

New ways to define object properties

ES5 adds the Object.defineproperty and object.defineproperties two methods that define the properties of an object, which defines a single property, which defines multiple properties.

vardata = {};//Create data ObjectObject.defineproperty (//define properties on data Objectdata,"Age", {value:38, writable:true, Enumerable:true, Configurable:true    });varaccessor = {};//Create accessor ObjectObject.defineproperty (//define properties on accessor objectAccessor,"Name", {get:function() {}, set:function(value) {}, enumerable:true, Configurable:true    });//logs {value:38, writable:true, Enumerable:true, configurable:true}Console.log (Object.getownpropertydescriptor (data, ' age ')));//logs {get:function, set:function, Enumerable:true, configurable:true}Console.log (Object.getownpropertydescriptor (accessor, ' name '));

The example above uses Object.defineproperty to define the data attribute age and accessor property name separately, and defines the writable, enumerable, and removable attributes of the property.

var cody = {}; Create Cody Objectobject.defineproperties (//define Age and Name properties on Cody Object    Cody,     {        ' age ': {            value:38,            writable:true,            enumerable:true,            configurable:true        },        "name": {            get: function () {},            Set:function (value) {},            enumerable:true,            configurable:true        }    });//logs { value:38, Writable:true, Enumerable:true, configurable:true} console.log (Object.getownpropertydescriptor (Cody, ' age ');//logs {get:function, set:function, Enumerable:true, Configurable:true}console.log ( Object.getownpropertydescriptor (Cody, ' name '));

Note the properties that are defined by using Object.defineproperty and object.defineproperties are not writable (writable), non-enumerable (Enumerable), and cannot be deleted (configurable).

Traversing Object Properties

ES5 adds the Object.keys and object.getownpropertynames two methods for traversing object properties. The common denominator of the two methods is that none of the inherited properties are traversed, and the Object.keys only returns the enumerable property, and Object.getownpropertynames returns all properties, including non-enumerable properties.

　　

var person = {};object.defineproperties (person,     {        true},          False}    }); // return array of all properties that is enumerable // logs ["name"] // return array of all properties, including ones that is non-enumerable // returns ["Name", "Age"]

Protection methods for objects

ES5 has added object.preventextensions,object.seal,object.freeze three methods to protect objects from being changed, from low to high.

1) object.preventextensions, prevents the addition of new properties into the object, but the original property can be written to delete

2) object.seal contains functions of object.preventextensions, and also makes all properties non-deleted (non-configurable)

3) Objec.freeze contains functions of object.preventextensions and Object.seal, and all properties become non-writable (non-writable)

In addition to the above three methods, several methods are defined to determine the state of an object.

Object.isextensible () object.issealed () Object.isfrozen ()

Object inheritance

ES5 new method for object inheritance object.create, he can specify which object the newly created object is created from, and if the method does not specify the first parameter, the default is Object.prototype, and if the first argument is null, the new object does not inherit any objects.

var // same as {} or New Object ()

The second parameter of the method is the definition of a new property, defined in the same way as object.defineproperties.

var true }; var cody = object.create (person, {    name: {        true,        true ,         true ,        ' Cody '    //logs true//because//logs True

Get Object Prototypes

ES5 new method of adding standard Access object prototypes, Object.getprototypeof, and previous methods are non-standard __proto__.

Object.getprototypeof (new//return True

The context of the function

In ES3 middle age, the function's apply,call is used to define the context of the function, and in ES5 there is a new method of bind.

varMyObject = {foo: ' foo '};varMyFunction =function(){    //Note I am logging this and arguments hereConsole.log ( This, arguments[0],arguments[1],arguments[2]);};varUsingbind = Myfunction.bind (myobject,1,2,3);//Create new function//When Usingbind () was called the This reference, references MyObjectUsingbind ();//logs {foo= "foo"} 1 2 3//Note, that any additional argumetns sent to bind, is also sent to the original function, i.e. the 1 2 4

Finish

A review of the important characteristics of "translation" ES5