Essential JS basic knowledge—Systematic compilation of common interview questions

1.JS built-in types

are divided into basic data types and Object.
Basic data types include: null, undefined, string, boolean, number, symbol .

console.log(typeof null);//object console.log(typeof []);//object console.log(typeof {});//object

What should you do if you want to distinguish between null, array, and object?

console.log(Object.prototype.toString.call(null));//[object Null] console.log(Object.prototype.toString.call([]));//[object Array] console.log(Object.prototype.toString.call({}));//[object Object]

My simple understanding: toString (data); function: convert data into a string.

Recommended related articles:The most complete collection of js interview questions in 2020 (latest)

2. Type conversion

Type conversion: divided into explicit type conversion and implicit type conversion.

1.Number (data)

如果数据内容式纯粹的数字，才可以转化为数字，否则式NaN。

var str2="12px";//NaN var str2="1.2";//1.2 var str2="1.2.3";//NaN var str2=null;//0 console.log(Number(str2));

2.NaN

NaN的数据类型书Number。注意：NaN和任何东西都不相等，包括自己。

3.isNaN (data)

会先把数据用Number转化，转化完了之后在判断是不是NaN，如果是NaN则返回为true。否则返回为fasle。

console.log(isNaN(1));//false console.log(isNaN("123"));//false console.log(isNaN("abc"));//true

4.parseInt(data) and parseFloat(data)

parseInt(数据)：把数据变成整数，舍去小数点，取整数。 parseFloat(数据)：把数据转化为数字，可以是小数。 注意:这两个方法会从左往右开始，除去空格，找到第一位非0数字，开始进行转换，直到转换到不是数字的那位为止，或者，转换出合适的值为止。

console.log( parseInt( "1" ) );//1 console.log( parseInt( "1.9" ) );//1 console.log( parseInt( "20px" ) );//20 console.log( parseInt( " 25px" ) );//25 console.log( parseInt( " 0.0026px" ) );//0 console.log( parseFloat( " 0.0026px" ) );//0.0026

5.Stirng() and Boolean() can also be displayed Type conversion is not mentioned here

条件判断中，除了null,undefined,'',NaN,false,0都转化为false，其余都转化为true。

6. Implicit type conversion

只有当加法运算时，其中一方是字符串类型，就会把另一个也转为字符串类型。其他运算只要其中一方是数字，那么另一方就转为数字。并且加法运算会触发三种类型转换：将值转换为原始值，转换为数字，转换为字符串。

10.Copy inheritance

11. class inheritance

12. Function scope, execution context, variable promotion, closure

1. Scope

JS作用域分为全局作用域和函数作用域，函数作用域可以访问全局作用域中的变量，对象，函数等。但是函数作用域外部访问不到函数内部的变量，对象，函数。 但在ES6中新增了块级作用域。let，const在块中声明的变量，函数等，外部都访问不到。

{ var a=1; let b=2; console.log(b);//2 { console.log(b);//2 } } console.log(a);//1 console.log(b);//报错，b is not defined

2 .Execution contextHere is a very good article about js execution context, you can click the link to view

Summary:

1. 调用函数是会为其创建执行上下文，并压入执行环境栈的栈顶，执行完毕弹出，执行上下文被销毁，随之VO也被销毁 2. EC创建阶段分创建阶段和代码执行阶段 3. 创建阶段初始变量值为undefined，执行阶段才为变量赋值 4. 函数申明先于变量申明

3 .Variable promotion (domain resolution)

Key:During variable promotionThe function priority is higher than the variable priority

function foo() { console.log(f1); //f1() {} console.log(f2); //undefined var f1 = 'hosting'; var f2 = function() {} function f1() {} } foo();

4. Closure

Closure: Function A returns a function B, and function B uses the variables of function A, function B is called closure.

for ( var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); }

First of all, because setTimeout is an asynchronous function, all loops will be executed first. At this time, i is 6, so a bunch of 6s will be output.

Solution one:

for (var i = 1; i <= 5; i++) { (function(j) { setTimeout(function timer() { console.log(j); }, j * 1000); })(i); }

Solution two:

for ( var i=1; i<=5; i++) { setTimeout( function timer(j) { console.log( j ); }, i*1000, i); }

Solution three:

for ( let i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); }

Click here to learn more about closures

13. Deep and shallow copy

1.Shallow copy

First, you can solve this problem through Object.assign.

let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 console.log(b.age) // 1

Of course we can also solve it by using the expansion operator (…)

let a = { age: 1 } let b = {...a} a.age = 2 console.log(b.age) // 1

2. Deep copy

function cloneFn( sourse ){ var o = Object.prototype.toString.call(sourse).toLowerCase().indexOf("array")!==-1 ? [] : {}; for( var attr in sourse ){ if( (typeof sourse[attr] === "object") && sourse[attr] !== null ){ o[attr] = cloneFn( sourse[attr] ) ; }else{ o[attr] = sourse[attr]; } } return o; }

Related articles:

8 basic knowledge of JS that must be paid attention to

JS basic knowledge compilation

The above is the detailed content of Essential JS basic knowledge—Systematic compilation of common interview questions. For more information, please follow other related articles on the PHP Chinese website!