This is a common question in front interviews, asking you what new features are coming out of ES6 and what you’ve been using. When writing this tutorial, the first sentence is usually the one that is often asked in the interview, followed by a detailed explanation of the interview requirements, which I will mark with *. Writing technical documents is really tired, although it is to read other people’s documents, but you have to read a lot, but also have to summarize their own ah. So if you think it’s useful to you or order me a star on https://github.com/skychenbo

1, arrow function needs attention 2, ES6 let, const 3, set data structure 4, promise object usage, write a promise 5, class understanding 6, template syntax understanding 7, rest parameter 8, Module systemCopy the code

The arrow function needs to be noticed

* Arrow functions cannot be used when dynamic context is required. => this => this => this => this => this => this => this You can’t use the “this” command at first sight. You can’t use the “this” command at first sight. You can’t use the “this” command at first sight

class Animal { constructor(){ this.type = 'animal' } says(say) { setTimeout(function () { console.log(this.type + 'says'  + say) },1000) } } var animal = new Animal() animal.says('hi') // undefined says hiCopy the code

Let’s look at =>

class Animal() {
	constructor() {
		this.type = 'animal'
	}
	says(say) {
		setTimeout(() => {
			console.log(this.type + ' says ' + say)
		}, 1000)
	}
}
var animal = new Animal()
animal.says('hi') // animal says hi
Copy the code

ES6 let, const *let is a more perfect var. It is not a global variable and has block-level function scope. In most cases, variable promotion does not occur. If the value is an object, you can change the value of the property in the object. If the value is an object, you can change the value of the property in the object. 3, for(let x..) Each iteration creates a new binding for X. Here are the irrational scenarios that var brings

var a = []
for (var i = 0; i < i; i++) {
	a[i] = function () {
		console.log(i)
	}
}
a[5]() // 10
Copy the code

In the above code, the variable I is declared by var and is valid for all globally scoped classes. So each iteration, the new value of I overwrites the old value, so that the final output is always 10. In the case of the let statement on the loop, each iteration creates a new binding for x as follows

var a = []
for (let i = 0; i < 10; i++) {
	a[i] = function () {
		console.log(i)
	}
}
a[5]() // 5
Copy the code

And, of course, in addition to making each element of the array a different function, we can also use closures and immediate functions and this is the closure method

function showNum(i) {
	return function () {
		console.log(i)
	}
}
var a = []
for (var i = 0; i < 5; i++) {
	a[i] = showNum(i)
}
Copy the code

This is the immediate function method

var a = []
for (var i = 0; i < 5; i++) {
	a[i] = (function (i) {
		return function () {
			console.log(i)
		}
	})(i)
}
a[2]()
Copy the code

Set data structure

The es6 method,Set itself, is a constructor that is similar to an array, but whose member values are unique

Const set = new set (,2,3,4,4 [1]) set [...] / / [1, 2, 3, 4] Array. The from (new set ()) is set to goCopy the code

To use the Promise object, write a promise by hand

Promise is a constructor. Here is a simple example

Var promise = new promise ((resolve,reject) => {if (success) {resolve(value)} else {reject(error)}}) promise.then(function (value) { // success },function (value) { // failure })Copy the code

The interpretation of the Class

* Class syntax is closer to traditional syntax than stereotypes, constructors, and inheritance. It is written in a way that makes object prototypes clearer and object-oriented programming syntax more common

class Animal {
	constructor () {
		this.type = 'animal'
	}
	says(say) {
		console.log(this.type + 'says' + say)
	}
}
 let animal = new Animal()
 animal.says('hello') // animal says hello

 class Cat extends Animal {
 	constructor() {
 		super()
 		this.type = 'cat'
 	}
 }
 let cat = new Cat()
 cat.says('hello') // cat says hello
Copy the code

We can see that when we use the extend structure the output is cat says hello instead of Animal says hello. Methods and properties defined internally by Contructor are the instance object’s own and cannot be inherited through extends. In ES6, the constructor of a subclass must contain a super function, which means that it calls the constructor of the superclass, even though it’s the constructor of the superclass, Var n = object.assign (a,b,c) adds attributes of a,b,c to n

Template syntax

${varible} is the same as ${varible}. In the past, we used to concatenate strings and variables with ‘string’ + varible + ‘string’, but with the template language we can use string${varible}string

Rest parameters

* Es6 introduces rest arguments to get redundant arguments to the function, so that the arguments object is not required ex:

function add(... values) { let sum = 0 for(var val of values) { sum += val } return sum }Copy the code

The module system

* Historically, JS has no module system to break a large program into smaller programs. Before ES6, there were both commonJs and AMD. How do you write commonJs

const animal = require('./content.js')
	// content.js
	module.exports = 'a cat'
Copy the code

This is what require.js does // content.js

define('content.js', function () {
	return 'A cat'
})

require(['./content.js'], function (animal) {
	console.log(animal) // a cat
})
Copy the code

ES6 syntax (in my vue, this is what I use)

import animal from './content'
// content.js
export default 'a cat'
Copy the code

Es6 import animal from ‘./content’ animal this value can be changed to suit your liking, but there is a problem with importing a function or a variable You have to be consistent with the name in content, Import {say, type} from ‘./content’; import * as content from ‘./content’