Big challenge! JS front-end knowledge entry, how many pass you?

Small knowledge, big challenge! This article is participating in the “Essentials for Programmers” creative activity. This article has participated in the “Digitalstar Project” to win a creative gift package and challenge the creative incentive money.

preface

Basic knowledge is really interesting, 10 basic knowledge of the topic, please jun to fight!

1. a.x = a = {n:2}

var a = {n:1};
a.x = a = {n:2};

// 求a.x
alert(a.x); 
Copy the code

parsing

JavaScript always evaluates expressions in strict left-to-right order.

When a.x finally performs the assignment, it retains the reference to the original A. When alert, A is the reassigned A.

var a = {n:1}, ref = a;
a.x = a = {n:2};
console.log("a:", a); 
console.log("ref:",ref);
Copy the code

2. Use bits or integers

Evaluation:

100.8 | 0   
-101.6 | 0   
8589934592.8 | 0
Copy the code

parsing

The bitwise operator treats a number as a 32-bit signed integer that ranges from -2147483648 to 2147483647.

Numbers that exceed the range of 32 – bit signed integers are not accurate for bit or round operations.

 2147483647.1 | 0  / / 2147483647 is correct
 2147483648.1 | 0  / / - 2147483648 error
-2147483648.1 | 0  / / - 2147483648 is correct
-2147483649.1 | 0  / / 2147483647 error
Copy the code

Similarly, we can use ~~ to take the integer part, of course, there is still the problem of inaccurate beyond the range.

~ ~100.8 / / 100 is correct~ ~2147483649.1  / / - 2147483647 error
Copy the code

The answer

100.8 | 0    / / 100
-101.6 | 0   / / - 101
8589934592.8 | 0  / / 0
Copy the code

3. The Magic eval

var x = "global";
function log1(){
    var x = "local";
    return eval("x")}function log2(){
    var x = "local";
    return window.eval("x")}function log3(){
    var x = "local";
    var fn = eval
    return fn("x")}function log4(){
    var x = "local";
    return (0.eval)(x)
}

log1();
log2();
log3();
log4();
Copy the code

parsing

The eval function has the ability to access the entire scope that calls it. Indirect calls, such as binding eval to another variable name, deprive the code of all local scope access.

(0, eval) which is also an indirect call to eval.

log1();   // local
log2();   // global
log3();   // global
log4();   // global
Copy the code

The answer

4. How much do delete know

delete null;
delete undefined;
Copy the code

parsing

Undefined is implemented as a global property, while NULL is a keyword.

Oject.getOwnPropertyDescriptor(global.'undefined') Copy codeCopy the code

Null does not query the description globally:

Object. GetOwnPropertyDescriptor (global, 'null') duplicate codeCopy the code

The results of

delete null; // true
delete undefined; // false
Copy the code

5. Type conversion

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.valueOf = function () {
    return this.age;
}
Person.prototype.toString = function () {
    return this.name
}
Date.prototype.valueOf = function () {
    return this.getTime()
}
Date.prototype.toString = function () {
    return this.getTime() + ""
}

var person = new Person("tom".100);
console.log(person + 10);
console.log(`${person}`)
console.log("" + person)

var date = new Date(2001.0.0);
console.log(date + 0.typeof (date + 0))
console.log(date + date.getTime());
Copy the code

Analysis of the

Object to the underlying data type

• Symbol. ToPrimitive is preferred
• If the expectations to a string, Object. The prototype. ToString
• If no expectations to a string, go first Oject prototye. The valueOf, go Object. The prototype. ToString, special case is the Date type, is to the toString first, then the valueOf

Pay attention to two points

1. Expected conversion to stringThe words, for example`${person}`
2. Date is special and is a priority toString

The results of

var person = new Person("tom".100); 
console.log(person + 10);  / / 110
console.log(`${person}`)   // tom
console.log("" + person)   / / 100

var date = new Date(2001.0.0);
console.log(date + 0.typeof (date + 0)) 
// 9781920000000 string
console.log(date + date.getTime());
/ / 978192000000978192000000
Copy the code

6. the length of the function

function add(num1, num2, num3=1. args){}const boundAdd = add.bind(null.10);
console.log(boundAdd.length)

Copy the code

Problem resolution

1. Parameters with default values are not counted in length
2. The remaining parameters are not included in the length
3. After bind, reduce the corresponding length

The answer

console.log(boundAdd.length) / / 1
Copy the code

7. The direction of this

var value = 1;

var foo = {
  value: 2.bar: function () {
    return this.value; }}console.log(foo.bar());
console.log((foo.bar)());
console.log((foo.bar = foo.bar)());
console.log((false || foo.bar)());
console.log((foo.bar, foo.bar)());
Copy the code

parsing

In the ES specification, Reference types have a method to get the corresponding value: GetValue. Simple simulation of GetValue use:

var foo = 1;

var fooReference = {
    base: EnvironmentRecord,
    name: 'foo'.strict: false
};

GetValue(fooReference) / / 1.
Copy the code

GetValue returns the real value of the object property, but be careful: when you call GetValue, you return a concrete value, not a Reference

If this topic calls GetValue, its scope becomes global.

(foo.bar) does not call the value operation, while the others all call the value operation.

More details: JavaScript digs into this from the ECMAScript specification

The answer

console.log(foo.bar());   / / 2
console.log((foo.bar)());  / / 2
console.log((foo.bar = foo.bar)());  / / 1
console.log((false || foo.bar)());   / / 1
console.log((foo.bar, foo.bar)());   / / 1
Copy the code

8. Parameter transfer

function test(param1, param2, param3) {
    param1 = "new param1";
    param3  = "new param3"

    console.log(param1 == arguments[0]);
    console.log(param3 == arguments[2]);
}


function test_strict(param1, param2, param3) {
    "use strict"
    param1 = "new param1";
    param3  = "new param3"

    console.log(param1 == arguments[0]);
    console.log(param3 == arguments[2]);
}

test('param1'.'param2')
test_strict('param1'.'param2');
Copy the code

parsing

In non-strict mode: The values of arguments, arguments, and arguments passed in are shared. If no arguments are passed in, the arguments values are not shared.

In strict mode, arguments and arguments are not shared.

The answer

test('param1'.'param2')
test_strict('param1'.'param2');
// true
// false
// false
// false
Copy the code

9. Add decimals

(0.1 + 0.2) + 0.3= = =0.1 + 0.2 + 0.3 
Copy the code

parsing

A short answer is a precise question. More answers IEEE 754, double-precision floating point numbers (64-bit), represented by 1 as the sign bit, 11 as the exponent bit, and 52 as the mantissa bit.

With the aid of: www.binaryconvert.com/result_doub…

0.1 0-01111111011-1001100110011001100110011001100110011001100110011010
0.2 0-01111111100-1001100110011001100110011001100110011001100110011010
0.3 0-01111111101-0011001100110011001100110011001100110011001100110011
Copy the code

Of course, there are several more steps in the calculation

• Opposite order (large order to small order)
• Digits in arithmetic
• Normalization of results
• Rounding processing
• Remove the check

Of course, in this case, neither of the latter two items exists. Specific details, change the article goodbye!

The answer

(0.1 + 0.2) + 0.3= = =0.1 + 0.2 + 0.3  // false

0.6000000000000001= = =0.6 // false
Copy the code

10. Automatic completion

The value is output by the following code

var a = [[1.2].2.3]
console.log(a)
[0.2.3].map(v= > console.log(v*v))
console.log(a)
Copy the code

parsing

Javascript can insert semicolons intelligently, but there are five problematic characters to watch out for: (,[, +, -, /), which, as the beginning of a line of code, can cause accidents, so it’s safe to end code with a semicolon.

The answer

Write in the last

Please go to the technical exchange groupCome here,. Or add my wechat Dirge-Cloud and take me to learn together.

reference

This << An effective way to write high quality JavaScript code 68 >>