ES6 stands for ECMAScript
1. Features of ES6 with high usage frequency
1.Destruct assignment (changed the form of parameter assignment, variable assignment).2.Arrow function.3.Data structure:Set 和 Map 。
4.Asynchronous operations: Solve the callback nightmare.5.Classes and objects.6.Modular.Copy the code2. Learn the steps of ES6
1.Build an ES6-enabled environment (gulp/Babel/webpack/NPM).2.Learn basic ES6 grammar (understand usage; Code usage examples; Notes)3.Actual project development.Copy the code3. Compare ES6 and ES5 < Reflect that ES6 has strong productivity and improve our development efficiency >
3.1 Compare syntax differences between ES6 and ES5 by Object Copy
// ES5 syntax implements object copy copy
var createAssigner = function(keyFunc, defaults) {
return function(obj) {
// arguments.length indicates how many arguments are actually passed to the Function. This number can be larger or smaller than the number of parameters (the number of parameters can be retrieved from function.length).
var length = arguments.length
if (defaults) obj = Object(obj)
if (length < 2 || obj == null) return obj
for (var index = 1; index < length; index++) {
var source = arguments[index]
var keys = keyFunc(source)
var l = keys.length
for (var i = 0; i < l; i++) {
var key = keys[i]
if(! defaults || obj[key] ===void 0) {
obj[key] = source[key]
}
}
}
console.log('ES5 -- Object copy: ', obj)
returnobj; }}var allKeys = function (obj) {
var keys = []
for (var key in obj) keys.push(key)
return keys
}
var extend = createAssigner(allKeys)
extend({t:1}, {k:2})
// ES6 implementation
const ES6ArrObj = [
{t:1},
{k:2}]const ES6Obj = Object.assign(ES6ArrObj)
ES6ArrObj[0].t = 'asdas'
console.log('ES6 -- Object copy - After copy (.assign object copy is not deep copy) : ', ES6Obj)
console.log('ES6 -- Object copy - Source object: ', ES6Obj)
Copy the code3.2 Using Default Parameters to compare syntax differences between ES6 and ES5
/ / ES5 syntax
function defaultParameter (txt) {
/ * * 1. In the ES5 we through '| |' or operator to ensure that the 'TXT' is a value. 2. That is to say we're in the business development, if the call defaultParameter didn't pass this method, through the '| |' operator and the back of the 'hello world' default values, to achieve the effect of the variable cannot be empty. * /
txt = txt || 'hello world'
console.log('ES5 syntax: ', txt);
}
defaultParameter()
/ / ES6 syntax
function defaultParameterES6 (txt = 'hello world') {
/** 1. This is how ES6 is used. 2. The ES6 approach doesn't make our code bloated. 3. ES6 is the default value added to the parameter when the function is declared. There is nothing in our executing code that has anything to do with default values, and ES6 code is much cleaner than ES5 code. * /
console.log('ES6 syntax: ', txt);
}
defaultParameterES6()
Copy the code3.3 Using string Templates to Compare syntax differences between ES6 and ES5
/** ** 1. ES5 handles string templates in this way: * 2. _ represents a library that references a third party and requires template Compiled to be used. * /
/ / ES5 syntax
var stringTemplate = _.template("hello: <%= name %>")
compiled({name: 'moe'})
/** * 1. ES6 uses string concatenation to compile templates and data. * 3. And it doesn't rely on any third party libraries. * /
/ / ES6 syntax
var stringTemplateES6 = 'limi'
var txtES6 = `hello ${stringTemplateES6}`
console.log('ES6 handles string templates: ', txtES6)
Copy the codeI have sorted out some knowledge points before, and now I will share the relevant content with you slowly after verification; This feature is a related column on “Front-end ES6 Basics”; Short step, without thousands of miles, quit coke quit impetuous.