ES6 face test questions (reference documents)

1、ES5、ES6 and ES2015 What's the difference? ?

ES2015 Especially in 2015 New generation released in JS Language standards ,ES6 The next generation JS Language standards , contain ES2015、ES2016、ES2017、ES2018 etc. . At this stage, in most scenes ,ES2015 Default equals ES6.ES5 Generally speaking, it refers to the previous generation of language standards .ES2015 It can be understood as ES5 and ES6 The time line

2、babel What is it? , What's the role ?

babel It's a ES6 Transcoder , Can be ES6 The code changes to ES5 Code , To be compatible with those not yet supported ES6 The platform of

3、let What's the usage? , With var Why use let？

stay ES6 Before , Declaration variables can only be used with var,var It's unreasonable to declare variables in a way , Accurately speaking , Because ES5 It's unreasonable not to have a block level scope inside . No block scope comes back with a lot of hard to understand problems , such as for loop var Variable leakage , Variable coverage and so on .let Declared variables have their own block level scope , And fixed var Variable promotion caused by declaring variables .

4、 Give me a few ES6 Yes String Common upgrade optimization for string type ?

Optimization part

ES6 Added string template , When splicing large strings , Use the backslash ()` Instead of adding strings , Can keep all spaces and line breaks , Make string splicing look more intuitive , More elegant

Upgrade part

ES6 stay String The prototype added includes() Method , What is used to replace tradition can only be used indexOf Find methods that contain characters (indexOf return -1 It's better to includes Method returns false More explicit , The meaning is clearer ), In addition, it added startsWith(), endsWith(), padStart(),padEnd(),repeat() Other methods , It can be easily used to find , Completion string

5、 Give me a few ES6 Yes Array Common upgrade and optimization of array type

Optimization part

• Array deconstruction assignment .ES6 You can use let [a,b,c] = [1,2,3] Form to assign variables , When declaring more variables , Don't write a lot more let(var), And the mapping is clear , And support to assign default value
• Extension operator .ES6 New extension operator (...)( important ), It can easily transform array and loose sequence , Can replace arguments Objects and apply Method , It is easy to get the parameter set in the case of unknown parameter number .（ Especially in ES5 in ,arguments It's not a real array , It's an array like object , But the inverse operation of the extension operator can return a real array ）. Extended operators can also easily and easily achieve array copy and deconstruction assignment （let a = [2,3,4]; let b = [...a]）

Upgrade part

ES6 stay Array The prototype added find() Method , What is used to replace tradition can only be used indexOf Find methods that contain array items , And fixed indexOf Can't find NaN Of bug([NaN].indexOf(NaN) === -1). In addition, it added copyWithin(),includes(), fill(),flat() Other methods , It can be used to find strings conveniently , completion , Conversion, etc

6、 Give me a few ES6 Yes Number Commonly used upgrading and optimization of digital type

Optimization part

ES6 stay Number The prototype added isFinite(), isNaN() Method , To replace the traditional global isFinite(), isNaN() Method to detect whether the value is limited 、 Whether it is NaN.ES5 Of isFinite(), isNaN() Methods first convert non numeric parameters to Number Make a judgment about the type , This is not reasonable , Most of all isNaN('NaN') === true The strange behavior of --'NaN' Is a string , however isNaN But this is NaN. and Number.isFinite() and Number.isNaN() Then there will be no such problem (Number.isNaN('NaN') === false).（isFinite() ditto ）

Upgrade part

ES6 stay Math Object added Math.cbrt(),trunc(),hypot() And so on many scientific counting methods , Can be more comprehensive cube root 、 Sum cube root and so on

7、 Give me a few ES6 Yes Object Common upgrade optimization done by type ?( important )

Optimization part

Object property variable declaration .ES6 Object properties or methods can be declared directly as variables ,. More concise than the traditional key value pair formal declaration , It is more convenient , Semantic clarity

let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {
    apple, orange};    // let myFruits = {apple: 'red appe', orange: 'yellow orange'};

Especially in object deconstruction assignment ( See optimization b.) Or when the module outputs variables , The benefits of this style of writing are most obvious

let {
    keys, values, entries} = Object;
let MyOwnMethods = {
    keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}

You can see that attribute variable declaration attributes look more concise . It can also be written in a simple way

let es5Fun = {
    
    method: function(){
    }
}; 
let es6Fun = {
    
    method(){
    }
}

Object's deconstruction assignment . ES6 Objects can also be like array unmarshalling assignments , To deconstruct and assign variables

let {
    apple, orange} = {
    apple: 'red appe', orange: 'yellow orange'};

Object's extension operator (...). ES6 The extension operator of an object is essentially the same as that of an array , After all, arrays are special objects . One of the most common and best uses of the object's extension operator is that it can easily take out all or part of the traversable properties inside a target object , So as to merge and decompose objects

let {
    apple, orange, ...otherFruits} = {
    apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'}; 
// otherFruits {grape: 'purple grape', peach: 'sweet peach'}
//  Be careful :  Object extension operators are used to deconstruct assignments , The extension operator can only be used with the most one parameter (otherFruits No more parameters )
let moreFruits = {
    watermelon: 'nice watermelon'};
let allFruits = {
    apple, orange, ...otherFruits, ...moreFruits};

super keyword .ES6 stay Class Class is added similar to this Key words of super. Same as this Always points to different objects in the current function ,super Keyword always points to the prototype object of the current function

Upgrade part

ES6` stay `Object` The prototype added `is()` Method , Make an equal comparison between two target objects , To perfect `'==='` Method .`'==='` In the method `NaN === NaN //false` In fact, it is unreasonable ,`Object.is` Fixed this little `bug`.`(Object.is(NaN, NaN) // true)

ES6 stay Object The prototype added assign() Method , Used for adding properties to objects or merging multiple objects

const target = {
     a: 1 };
const source1 = {
     b: 2 };
const source2 = {
     c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Be careful : assign Merged objects target Can only merge source1、source2 The self property of , It's not going to merge source1、source2 Inheritance properties in , It also doesn't merge properties that can't be enumerated , And can't copy correctly get and set attribute （ Will directly execute get/set function , take return Value ）

• ES6 stay Object The prototype added getOwnPropertyDescriptors() Method , This method enhances ES5 in getOwnPropertyDescriptor() Method , You can get the description object of all the properties of the specified object . combination defineProperties() Method , Perfect for copying objects , Including copying get and set attribute
• ES6 stay Object The prototype added getPrototypeOf() and setPrototypeOf() Method , Used to get or set the current object prototype object . The significance of this method lies in ,ES5 Get settings prototype Yes, like through __proto__ Property to implement , However __proto__ Attributes are not ES The attributes specified in the specification , It 's just browser manufacturers “ Privately ” Added properties , It's just that it's used by default because of its wide application , In a non browser environment, it doesn't necessarily work , So for the sake of security , Gets or sets the... Of the current object prototype Object time , All should adopt ES6 New standard usage
• ES6 stay Object There's something new on the prototype Object.keys(),Object.values(),Object.entries() Method , All the keys used to get the object 、 All values and all key value pairs array

8、 Give me a few ES6 Yes Function Common upgrade optimization of function types ?

Optimization part

Arrow function ( The core ). The arrow function is ES6 One of the core upgrades , There is no arrow function of its own this, This has changed the past JS The most incomprehensible of functions this Operating mechanism . Main optimization points

• In the arrow function this Point to the object where the function is defined , Instead of the object the function is executed on .ES5 Function this Always point to the object where the function is executed , This makes in many cases this It's hard to understand , Especially in the case of non strict mode ,this Sometimes it points to global objects , This can even be attributed to the language level bug One of .ES6 The arrow function of optimizes this , It doesn't have its own inside this, This leads to this Always pointing to the next level this, If the upper level is still an arrow function , Keep pointing up , Until you point to having yourself this So far , And as your own this
• Arrow functions cannot be used as constructors , Because it doesn't have its own this, Cannot instantiate
• It's also because the arrow function doesn't have its own this, So arrow function There is no such thing as arguments object .（ You can use extension operators instead of ）
• Function default assignment .ES6 Before , The parameter of a function cannot be given a default value , It can only be implemented inside a function through workarounds .ES6 Make the function default assignment in a more concise and clear way

function es6Fuc (x, y = 'default') {
    
    console.log(x, y);
}
es6Fuc(4) // 4, default

Upgrade part

ES6 Added double colon operator , To replace the old bind,call, and apply.( Browser does not support ,Babel Transcoding is already supported )

foo::bar;
//  Equate to 
bar.bind(foo);

foo::bar(...arguments);
//  Equate to 
bar.apply(foo, arguments);

9、Symbol What is it? , What's the role ？

Symbol yes ES6 The seventh type of raw data introduced （ The statement is not accurate , It should be the seventh data type ,Object Not one of the original data types , Corrected ）, all Symbol() The generated values are unique , It can fundamentally solve the problem that too many object properties lead to conflicting coverage of property names . In the object Symbol() Property cannot be for...in Traverse , But it's not a private property either

10、Set What is it? , What's the role ？

Set yes ES6 The introduction of a similar Array New data structure of ,Set The members of an instance are similar to arrays item member , The difference is that Set The members of the instance are all unique , Not repeated . This feature can easily implement array de duplication

11、Map What is it? , What's the role ？

Map yes ES6 The introduction of a similar Object New data structure of ,Map It can be understood as Object Superset , It breaks the traditional definition of objects in the form of key value pairs , Object's key No longer limited to strings , It can also be Object. It can describe the properties of objects more comprehensively

12、Proxy What is it? , What's the role ？

Proxy` yes `ES6` A new constructor , It can be understood as JS An agent of language , To change JS Some of the default language behaviors , Including intercepting the default `get/set` Wait for the bottom method , bring JS More freedom of use , It can meet the needs of developers to the greatest extent . For example, by intercepting objects `get/set` Method , You can easily customize what you want `key` perhaps `value`. The following example shows , Define any one `myOwnObj` Of `key`, Can become their own functions 

function createMyOwnObj() {
    
	// Want to put all of key All become functions , perhaps Promise, perhaps anything
	return new Proxy({
    }, {
    
		get(target, propKey, receiver) {
    
			return new Promise((resolve, reject) => {
    
				setTimeout(() => {
    
					let randomBoolean = Math.random() > 0.5;
					let Message;
					if (randomBoolean) {
    
						Message = ` Yours ${
      propKey} Good luck. , succeed `;
						resolve(Message);
					} else {
    
						Message = ` Yours ${
      propKey} No luck , failed `;
						reject(Message);
					}
				}, 1000);
			});
		}
	});
}

let myOwnObj = createMyOwnObj();

myOwnObj.hahaha.then(result => {
    
	console.log(result) // Yours hahaha Good luck. , succeed 
}).catch(error => {
    
	console.log(error) // Yours hahaha No luck , failed 
})

myOwnObj.wuwuwu.then(result => {
    
	console.log(result) // Yours wuwuwu Good luck. , succeed 
}).catch(error => {
    
	console.log(error) // Yours wuwuwu No luck , failed 
})

13、Reflect What is it? , What's the role ？

Reflect` yes `ES6` A new object introduced , There are two main functions of him , One is to distribute some of the original scattered in `Object`、`Function` Or methods in global functions ( Such as `apply`、`delete`、`get`、`set` wait ), To integrate into `Reflect` On , In this way, it can be more convenient and unified to manage some of the original `API`. The second is because `Proxy` Can override default native API, If once original `API` Don't rewrite, you may not find , therefore `Reflect` It can also backup the original API The role of , So that even if the original `API` After being rewritten , Can also be rewritten after `API` Use the default `API

14、Promise What is it? , What's the role ？

Promise yes ES6 A new object introduced , His main function is to solve JS Asynchronous mechanism , The callback mechanism produces “ Back to hell ”. It's not a breakthrough API, It just encapsulates the asynchronous callback form , Make asynchronous callbacks more elegant to write , More readable , And can chain call

15、Iterator What is it? , What's the role ？( important )

• Iterator yes ES6 One of the most important concepts , It's not the object , It's not any kind of data type . because ES6 Added Set、Map type , They and Array、Object The type is very similar ,Array、Object It can be traversed , however Set、Map Can't use for Loop traversal , There are two solutions to this problem , One is for Set、Map Add a new one for traversal API, The other is for Set、Map、Array、Object Add a uniform traversal API, obviously , The second is better ,ES6 It also needs a design standard to let it go , To unify the traversal methods of all traversable types .Iterator It is such a standard . Or a normative idea
• It's like JavaScript yes ECMAScript A specific implementation of the standard is the same ,Iterator The specific implementation of the standard is Iterator Iterator .Iterator The standard stipulates , All deployed key The value is [Symbol.iterator], And [Symbol.iterator] Of value It's standard Iterator The interface function ( The standard Iterator The interface function : This function must return an object , And the object contains next Method , And execute next() Can return include value/done Attribute Iterator object ) The object of , They are called traversable objects ,next() After the return of Iterator The object is Iterator Iterator

//obj It's ergodic , Because it follows Iterator standard , And contains [Symbol.iterator] Method , The method functions also conform to the standard Iterator The interface specification .
//obj.[Symbol.iterator]()  Namely Iterator Iterator 
let obj = {
    
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    
    const self = this;
    let index = 0;
    return {
    
      next() {
    
        if (index < self.data.length) {
    
          return {
    
            value: self.data[index++],
            done: false
          };
        } else {
    
          return {
     value: undefined, done: true };
        }
      }
    };
  }
};

ES6 to Set、Map、Array、String All added [Symbol.iterator] Method , And [Symbol.iterator] The method functions also conform to the standard Iterator The interface specification , therefore Set、Map、Array、String By default, it can be traversed

//Array
let array = ['red', 'green', 'blue'];
array[Symbol.iterator]() //Iterator Iterator 
array[Symbol.iterator]().next() //{value: "red", done: false}

//String
let string = '1122334455';
string[Symbol.iterator]() //Iterator Iterator 
string[Symbol.iterator]().next() //{value: "1", done: false}

//set
let set = new Set(['red', 'green', 'blue']);
set[Symbol.iterator]() //Iterator Iterator 
set[Symbol.iterator]().next() //{value: "red", done: false}

//Map
let map = new Map();
let obj= {
    map: 'map'};
map.set(obj, 'mapValue');
map[Symbol.iterator]().next()  {
    value: Array(2), done: false}

16、for…in and for…of What's the difference? ？

If you see question 16 , So it's a good answer . Question 16 refers to ES6 Unified traversal standard , Made traversable objects , So how to traverse it ？ The answer is to use for...of.ES6 Regulations , It's been deployed Iterator Object of the interface ( Traversable objects ) Both can pass for...of To traverse the , and for..in Only objects can be traversed

• That means , Arrays can also be used for...of Traverse , This greatly facilitates the value of the array , And avoid a lot of procedures for..in The bad habit of traversing arrays

17、Generator What is a function , What's the role ？

• if JavaScript yes ECMAScript A concrete realization of the standard 、Iterator Ergodic is Iterator The concrete realization of , that Generator Function can be said to be Iterator Specific implementation of the interface .
• perform Generator Function returns a traverser object , every time Generator Inside the function yield All of them are equal to the next() Method , And through next(value) Method passed in custom value, To change Generator Behavior of functions .
• Generator Functions can be matched by Thunk Functions make asynchronous programming and control flow management easier and more elegant .

18、async What is a function , What's the role ？

async Functions can be interpreted as built-in automatic actuators Generator Function grammar sugar , It matches ES6 Of Promise Almost perfect implementation of asynchronous programming solutions

19、Class、extends What is it? , What's the role ？

ES6 Of class Can be seen as just a ES5 Generate the syntax sugar of the instance object's constructor . It refers to java Language , Defines the concept of a class , Make the object prototype more clear , Object instantiation is more like object-oriented programming .Class Class can pass through extends Implementation inheritance . It and ES5 The difference between constructors

All methods defined within the class , It's all inestimable

///ES5
function ES5Fun (x, y) {
    
	this.x = x;
	this.y = y;
}
ES5Fun.prototype.toString = function () {
    
	 return '(' + this.x + ', ' + this.y + ')';
}
var p = new ES5Fun(1, 3);
p.toString();
Object.keys(ES5Fun.prototype); //['toString']

//ES6
class ES6Fun {
    
	constructor (x, y) {
    
		this.x = x;
		this.y = y;
	}
	toString () {
    
		return '(' + this.x + ', ' + this.y + ')';
	}
}

Object.keys(ES6Fun.prototype); //[]

• ES6 Of class Class must use new The command operation , and ES5 The constructor of does not use new It can also be executed .
• ES6 Of class Class does not have variable Promotion , Must be defined first class Then instantiate , Unlike ES5 Constructor can be written after instantiation .
• ES5 Inheritance , The essence is to create the instance object of the subclass first this, Then add the method of the parent class to this above .ES6 The inheritance mechanism is quite different , The essence is to first instance the parent class object's properties and methods , Add to this above （ So you have to call it first super Method ）, And then modify it with the constructor of the subclass this.

20、module、export、import What is it? , What's the role ？

• module、export、import yes ES6 It is used to unify the design idea and implementation scheme of front-end modularization scheme .export、import The emergence of a unified front-end modular implementation , Integration standardizes browsers / The modularization method of the server , To replace the traditional AMD/CMD、requireJS、seaJS、commondJS And a series of different front-end modules , Make the front-end modularization more unified ,JS Can also be more able to achieve large-scale application development .
• import The introduced module is static loading （ Load during compilation ） Instead of dynamic loading （ Load at run time ）.
• import introduce export The exported interface value is a dynamic binding relationship , Through this interface , It can get the real-time value inside the module

21、 In daily front-end code development , What are worth using ES6 To improve programming optimization or specification ？

• Use arrow function instead of var self = this; How to do it .
• Commonly used let replace var command .
• Common arrays / Object to name variables , Structure is clearer , The meaning is clearer , Better readability .
• In the case of long string multivariable combination , Replace string accumulation with template string , Can achieve better results and reading experience .
• use Class Class to replace the traditional constructor , The next generation is the instantiation object .
• In large application development , To maintain module Modular development thinking , Distinguish the relationship between modules , Commonly used import、export Method .

22、ES6 Understanding

New template string （ by JavaScript Provides a simple string interpolation function ）、 Arrow function （ The left side of the operator is the input parameter , On the right is the operation performed and the value returned Inputs=>outputs.）、for-of（ To traverse data — For example, the value in the array .）arguments Object can be perfectly replaced by indefinite parameters and default parameters .ES6 take promise Objects are included in the specification , Native is provided Promise object . Added let and const command , Used to declare variables . Added block level scope .let The command actually adds block level scope .ES6 Regulations ,var Command and function Global variables declared by the command , Properties that belong to global objects ;let command 、const command 、class Global variables declared by the command , Properties that do not belong to global objects .. There is also the introduction of module The concept of modules

23、 Tell me about your right Promise The understanding of the

• according to Promise/A+ The definition of ,Promise There are four states ：
  • pending: The initial state , Not fulfilled or rejected.
  • fulfilled: Successful operation .
  • rejected: Failed operation .
  • settled: Promise Has been fulfilled or rejected, It's not pending
• in addition , fulfilled And rejected Together, they are called settled
• Promise Object is used to delay (deferred) And asynchronous (asynchronous ) Calculation

24、Promise Constructor for

• Construct a Promise, The basic usage is as follows ：

var promise = new Promise(function(resolve, reject) {
    

        if (...) {
      // succeed

            resolve(result);

        } else {
       // fails

            reject(Error(errMessage));

        }
    });

• Promise Instance has then Method （ have then Object of method , Usually called thenable）. Its usage is as follows ：

promise.then(onFulfilled, onRejected)

• Take two functions as arguments , In a fulfilled Is called when , In a rejected Is called when , The received parameter is future,onFulfilled Corresponding resolve, onRejected Corresponding reject

What is? Promise ？

• Promise It's an object , Used to represent and pass the final result of asynchronous operation
• Promise The main way of interaction ： Pass the callback function into then Method to get the final result or the cause of the error
• Promise Performance in code writing ： With “ call chaining ” Instead of the callback function, it is nested layer by layer （ Back to hell ）

Deconstruct assignment ：
As long as it is determined that the patterns on both sides of the equal sign are the same （ deconstruction ）, The variable on the left is given the corresponding value （ assignment ）, Assign a value to a variable at a time , Deconstruction assignment can assign values to multiple variables at one time .

25、 Talk about what you know ECMAScript6 New features ？

• Block level action area let a = 1;
• You can define constants const PI = 3.141592654;
• Variable deconstruction assignment var [a, b, c] = [1, 2, 3];
• String extension ( Template string ) var sum =${a + b};
• Extension of arrays ( Convert array type ) Array.from($('li'));
• Function extension ( Extension operator ) [1, 2].push(...[3, 4, 5]);
• Object extension ( Equal value algorithm ) Object.is(NaN, NaN);
• New data type (Symbol) let uid = Symbol('uid');
• New data structure (Map) let set = new Set([1, 2, 2, 3]);
• for…of loop for(let val of arr){};
• Promise object var promise = new Promise(func);
• Generator function function* foo(x){yield x; return x*x;}
• introduce Class( class ) class Foo {}
• Introduce module system export default func;
• introduce async function [ES7]

async function asyncPrint(value, ms) {
    
      await timeout(ms);
      console.log(value)
     }

26、Object.is() Compared with the original comparison operator =、 The difference between ？

• == Equality operator , Data type conversion will be performed automatically during comparison
• === Strict equality operator , Compare without implicit type conversion
• Object.is Equal value algorithm , stay === On the basis of 0 and NaN Special treatment

async function asyncPrint(value, ms) {
    
      await timeout(ms);
      console.log(value)
     }

27、 What is? Babel

• Babel It's a JS compiler , Bring your own set ES6 Grammar Converter , Used to transform JS Code .
  These converters allow developers to use the latest in advance JS grammar (ES6/ES7), Instead of waiting for the browser to be fully compatible .
• Babel Only new is converted by default JS syntax (syntax), Instead of converting new ones API.