Shulou(Shulou.com)06/02 Report--

This article mainly explains "the analysis of problems caused by + + []] [+ []] + [+ []] = 10 in JS grammar. Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the problem analysis caused by + + [] [+ []] + [+ [] = 10 in JS grammar.

Explain: why + + []] [+ []] + [+ []] = 10

[0] is an array with a 0 member, and [0] [0] is the first member to fetch it, so it must be 0.

Although the value of the first member is changed with [0] [0] ='1', the next [0] [0] is an independent expression that takes the value of the member, so the numeric value of 0 is obtained.

[] = 1 is an error caused by the right value rather than iterable (iterable), which should be caused by "deconstructing assignment" to debug with different browsers:

/ / Chrome TypeError: undefined is not a function / / Firefox TypeError: 1 is not iterable / / Safari TypeError: [] is not a function. (In'[]','[]'is undefined)

For array deconstruction assignment, the right value must be iterable (iterable). The error in the following example is the same as that in [] = 1, so you should first check whether the right value is iterable and throw a type error first:

[] = {}; [] = undefined; [] = null

*, [] ='1' there is no error because the string belongs to iterable (iteratable).

What is the result of {} + {} and {} + [] of JS?

ToPrimitive internal operation

Therefore, the plus operator can only be used on the original data type, so how to convert the value of the object type to the original data type? The following shows how to convert to the original data type.

In ECMAScript 6th Edition # 7.1.1, there is an abstract ToPrimitive operation that is used to convert objects to primitive data types, not only in the plus operator, but also in relational comparisons or value equality comparisons. Here is an explanatory syntax for ToPrimitive:

ToPrimitive (input, PreferredType?) input represents the substituted value, and PreferredType can be one of the numbers (Number) or string (String), which represents the original type to which the "priority" or "* *" will be converted, and the conversion steps will vary depending on the value here. However, if this value is not provided, that is, by default, the converted Hint value is set to "default". The indication of the original type of conversion (hint value) is automatically added by JS during the internal conversion, which is usually the default value.

In the design of JS's Object prototype, there must be two valueOf and toString methods, so these two methods will exist in all objects, but they may exchange the order in which they are called in the transformation e.

When PreferredType is Number

When PreferredType is Number, input is the value to be converted. Here are the steps to convert this input value:

If input is the original data type, it returns input directly.

Otherwise, if input is an object, the object's valueOf () method is called, which is returned if the value of the original data type can be obtained.

Otherwise, if input is an object, call the object's toString () method and return this value if you can get the value of the original data type.

Otherwise, a TypeError error is thrown.

When PreferredType is a string (String)

Step 2 above is reversed with step 3.

When PreferredType is not provided, that is, when hint is "default"

The steps are the same as when PreferredType is Number.

The number is actually the default * * type, that is, in general, when the object in the plus sign operation wants to make a transformation, it will call valueOf first and then toString.

But there are two exceptions, one is the Date object, and the other is the Symbol object, which overrides the original PreferredType behavior, and the default * * type of the Date object is a String.

So you will see that some tutorial files will be divided into two categories of objects, one is Date objects, and the other is called non-Date (non-date) objects. Because when the objects of these two categories are converted to the original data type, the * type is just the opposite.

Simulation code description

A + b: pa = ToPrimitive (a) pb = ToPrimitive (b) if (pa is string | | pb is string) return concat (ToString (pa), ToString (pb)) else return add (ToNumber (pa), ToNumber (pb))

JS's Design for Object and Array

The valueOf and toString methods of Object pure object type designed in JS return as follows:

The valueOf method returns the value of the object itself. (so ToPrimitive*** is going to return the value of toString)

The toString method returns a string value of "[object Object]". The return value of different built-in objects is the "[object type]" string, and "type" refers to the type identification of the object itself, for example, the Math object returns the "[object Math]" string. However, some built-in objects do not have this value when called directly because they override this method. (note: the beginning of the "object" of the returned string is lowercase, and the beginning of the latter is uppercase.)

The unary plus sign (+) has the function of setting the * * type (that is, hint) to Number, so you can force the object to be converted to a numeric type, and the general object will be changed to:

Here the * * type is actually a number, and + causes the string output by toString to be forcibly reversed again.

> + {} / / is equivalent to + "[object Object]" NaN

Of course, both methods of the object can be overridden. You can use the following code to observe the running order of the two methods. The following is the case when valueOf is called first:

Let obj = {valueOf: function () {console.log ('valueOf'); return {}; / / object}, toString: function () {console.log (' toString'); return 'obj'; / / string}} console.log (1 + obj); / / valueOf-> toString->' 1obj' console.log (+ obj); / / valueOf-> toString-> NaN console.log ('+ obj) / / valueOf-> toString-> 'obj'

Example

Basic inter-type operation

String + other primitive types of strings have a priority operation in the plus sign operation.

>'1' + 123 "1123" >'1' + false "1false" >'1' + null "1null" >'1' + undefined "1undefined"

Numbers + other non-string raw data types numbers take precedence

> 1 + true / / true to 1, false to 0 2 > 1 + null / / null to 0 1 > 1 + undefined / / null to NaN NaN

The addition operation of the original data type other than the number / string is converted to digital re-operation.

> true + true 2 > true + null 1 > undefined + null NaN

Operation between object types

Empty array + empty array

> [] + [] ""

The addition of the two arrays is still in the order of valueOf-> toString, but because valueOf is the array itself, the return value of toString is the original data type, that is, the empty string, so this operation is equivalent to the addition of two empty strings. According to step 2 of the addition operation, it is the string concatenation operation (concatenation), and two empty strings are concatenated * * to get an empty string.

Empty object + empty object

Special note: {} + {} has different results in different browsers.

If you add parentheses (()) to the * (front) empty objects, JS will assume that the front is an object, and you can get the same result:

> ({}) + {} "[object Object] [object Object]"

Note: the behavior mentioned above has nothing to do with whether the literal value of the object of the plus sign operation is empty or not, even if the literal value of the object with a value in it, such as {aposition 1, bposition 2}, is the same result.

Date object

> 1 + (new Date ()) > "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"

To get the valueOf return value in the Date object, you need to use a unary plus sign (+) to cast it to a numeric type, such as the following code:

> + new Date () 1480180751492

Summary

Deconstructing the problems caused by assignment

> {name: 1} ['name'] =' 2' {name: 1} ['name'] =' 2' ^ SyntaxError: Invalid destructuring assignment target

The above error.

> {name: 1} [name] ='2''2'

{name: 1} [name] is equivalent to {name: 1}; [name]. Deconstruction assignment succeeded.

{} problem

> var name = 'test' > {[name]: 1} Object {1: 1} > {[name]: 1}; [name] =' 1' VM174:1 Uncaught SyntaxError: Unexpected token:

The above error is actually due to the fact that {} in {[name]: 1} is an expression and returns an object; {[name]: 1}; [name] ='1' {} is a statement, and "[name]: 1" is not allowed in the statement, in other words, "{name: 1}" is allowed in the statement.

{} + {}

The result of {} + {} will vary from browser to browser. Chrome (v55) is an object Object string concatenation, but other browsers think it is equivalent to + {} operation to get the NaN number type.

The result of {} + [] is equivalent to + [], and the result is a numeric type of 0.

Date object

The Date object mentioned above is an abnormal object of type "string". This is different from the behavior of other objects (the general object will call valueOf first and then toString). When performing the plus sign operation, it will give priority to using toString for conversion. * it must be a string concatenation operation (concatenation).

> 1 + (new Date ()) > "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"

ToString ()

Object.prototype.toString () is the type used to detect the variable itself, typeof is the basic type of detection, and instanceof is used to detect whether it is on the prototype chain. (note that Object.prototype.toString is different from Number.prototype.toString and Array.prototype.toString)

> var a = 1 undefined > a.toString ()'1' > Number.prototype.toString.call (a)'1' > Object.prototype.toString.call ([1rem 2])'[object Array]'> Array.prototype.toString.call ([1recorder 2]) '1Magi 2' > [1Mague 2]. Join () '1dint 2'

The toString method returns a string value of "[object Object]". The return value of different built-in objects is the "[object type]" string, and "type" refers to the type identification of the object itself, for example, the Math object returns the "[object Math]" string. However, some built-in objects do not have this value when called directly because they override this method. (note: the first "object" of the returned string begins in lowercase, and the beginning at the end is uppercase.

> Object.prototype.toString.call (null)'[object Null]'> typeof null 'object' > Object.prototype.toString.call (1)' [object Number]'

Number (), String () and Boolean ()

What is often confused is the direct use of the three cast functions, Number (), String (), and Boolean (), unlike wrapper objects, which must be instantiated using the new keyword, such as new Number (123), while Number ('123') is a function that casts other types to numeric types.

At this point, I believe you have a deeper understanding of "problem analysis caused by + + []] [+ []] + [+ []] = 10 in JS grammar, so you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.