One 、 Reference link

Two 、 Installation dependency

cnpm i -D babel-preset-env babel-loader babel-core babel-polyfill babel-plugin-transform-runtime

See the browser for es6 Support for

cnpm i -g es-checker

3、 ... and 、 File configuration

module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: 'bundle.js'
devtool: "inline-source-map",
module: {
rules: [
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'

  Four 、 Declare variables
1、 keyword
var Declared variables have variable Promotion , Will be initialized to undefined;
let The declared variable does not have a variable promotion , Will remain uninitialized .let Declare a block level scope , No variable promotion , Temporary dead zone ( Closed scope ), Duplicate statements are not allowed . Try to avoid declaring functions in a block level scope , If you really need , You should also write function expressions , Instead of writing function declarations .
const The declared variable is not a value and cannot be modified , Instead, the memory address pointed to by the variable cannot be modified . Declare a block level scope , No variable promotion , Temporary dead zone ( Closed scope ), Duplicate statements are not allowed .
3、 Global variables and top-level objects

Top objects , In browser environment, it means window object , stay Node refer to global object .es5 in , Global variables are properties of top-level objects ,es6 Middle is not .

// Get the top level object 
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');

5、 ... and 、 Deconstruction and assignment of variables
Deconstruction and assignment of variables , To the right of the equal sign could be an array , object , character string , The number , Boolean value . The rule of deconstruction assignment is , As long as the value to the right of the equals sign is not an object or an array , Just turn it into an object . because undefined and null Can't convert to object , So we deconstruct them , All will report wrong. .
1、 Array

let [a, b, c] = [4, 5, 6];

As long as a data structure has Iterator Interface , Can be used as an array of deconstruction assignment .

let [k = 1] = [undefined];
let [x, y, z] = [1,,5];

2、 object

let { m, n } = { m: "aaa", n: "bbb" };
let { l = "ccc", m = l } = { m: "aaa", n: "bbb" }; // The default value is set successfully ,m by "aaa"
let { m: l } = { m: "aaa", n: "bbb" }; // Pattern matching succeeded ,l by "aaa"

3、 character string

let [a, b, c] = "hello";
let { length: len } = "hello"; // len by 5

4、 Numerical and Boolean

let { toString: s } = 12; //s === Number.prototype.toString
let { toString: s } = true; //s === Boolean.prototype.toString

5、 function

// The default value of a function parameter is an empty object , Function sets the default value of the object deconstruction assignment .
function fn1({x = 0, y = 0} = {}) {
return [x, y];
console.log(fn1({})); //[0, 0] // The default value of a function parameter is an object with specific properties , Function does not set the default value of the object deconstruction assignment .
function fn2({x, y} = { x: 0, y: 0 }) {
return [x, y];
console.log(fn2({})); //[undefined, undefined]

6、 ... and 、 String extension
1、 Some functions

'hello'.includes('l'); //true
'hello'.startsWith('h'); //true
'hello'.endsWith('o'); //true
'hello'.repeat(3); //"hellohellohello"
'hello'.padStart(8,'hi,'); //"hi,hello"
'hello'.padEnd(11,',world'); //"hello,world"

2、 Template string

let name = "camille";
`hello,my name is ${name}`
); let h = document.querySelector('body');
h.innerHTML = `<h1 style="color:red"> Hello! </h1>`;

3、 The label template
Tag templates are another form of function calls , That is, the template string follows the function name . The label here refers to the function , The template string is the parameter of the function .

// Filter HTML character string , Prevent users from entering malicious content .
function SaferHTML(templateData) {
let s = templateData[0];
for (let i = 1; i < arguments.length; i++) {
let arg = String(arguments[i]); s += arg.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;"); s += templateData[i];
return s;
} let sender = '<script>alert("abc")</script>'; // Malicious code
let message = SaferHTML`<p>${sender} has sent you a message.</p>`; console.log(message);

7、 ... and 、 Functional rest Extension operators for parameters and arrays
What do you think , All are 3 A little bit , Functional rest Parameters can convert a sequence of parameters into an array . Array extension operators ,... You can convert an array to a sequence of parameters ,[...] To have iterator Interface to an array ,[...] Converts a string to an array .

8、 ... and 、 stay html Write in es6

<script type="text/babel">
// Yours ES6 Code

es6 More about those things

  1. ES5 and ES6 Things you have to know ( 3、 ... and )

    ES5 and ES6 Things you have to know ES6 What's new One . Block level scope : keyword let, Constant const let And var The difference between : a. No variable declaration Promotion b. Variables are not allowed to be defined repeatedly c. Variables are not allowed to be deleted d ...

  2. ES5 and ES6 Things you have to know ( Two )

    ES5 and ES6 Things you have to know ES5 What's new Two . Object methods 1.Object.getPrototypeOf(object) Returns the prototype of the object function Pasta(grain, widt ...

  3. ES5 and ES6 Things you have to know ( One )

    ES5 and ES6 Things you have to know ES5 What's new One . Array methods 1.forEach     purpose : Traverse , loop Callback functions are not executed for empty arrays // usage array.forEach( function( ...

  4. About ES6 Of let、const Those things

    Babel Transcoder Babel It's a widely used one ES6 converter , take ES6 Code to ES5 Code , In order to implement in the old version of the browser . let and const command let The declared variables are only in let The command is valid within the code block ...

  5. Vue ES6 Jade Scss Webpack Gulp

    I've always been very glad to have turned it over < The code of 2>: This makes my rough road of programming less a lot of unnecessary bumps . It has written an article in the topic of software technology :" The first is to write programs for people , The second is the machine (Write Programs ...

  6. webpack course Those things 04-webpack Project actual combat analysis

    This section focuses on the real project uses webpack Configuration problem , Project practice It's like we're not going to do a whole project , It's not like someone else's wheel . This configuration we borrow vue-cli Build the configuration to study , Because it's good enough . With the front base ...

  7. Abreast of the times JavaScript Core language standards &mdash;&mdash;ES6, Completely change what you write JS The way the code works !【 Reprint + Arrangement 】

    Original address The content of this article is ECMAScript What has changed ? The new standard Version number 6 Keep your promise Iterators and for-of loop generator Generators Template string Indefinite parameters and default parameters deconstruction Destructu ...

  8. Explain profound theories in simple language ES6( sixteen ): modular Modules

    author  Jason Orendorff  github Home page As early as 2007 I just joined Mozilla Of JavaScript It's widely spread in the team ...

  9. Explain profound theories in simple language ES6( 11、 ... and ): generator Generators, sequel

    author  Jason Orendorff  github Home page Welcome back to the simple ES6 special column , I hope you are ES6 The journey of exploration brings knowledge and happiness ! Programmers are working ...

Random recommendation

  1. Scala The foundation of functional programming in ( One )

    Mainly from Scala Inventor of language Martin Odersky Professor's Coursera Course <Functional Programming Principles in Scala>. ...

  2. SVG Achieve stroke animation

    Speaking of SVG, I hate it and love it , I hate it because I'm stupid when I first touch it B I want to write it in code , Actually in web We only use a few common features to interact with it , Other labels know that and they become , In fact, it is a kind of image format , ...

  3. Visual Studio Default encoding for new source files

    original VS The default encoding of the new source file is based on the system locale Select the . Mine is national standard 2312. what the fuck . But it's killing me . I didn't know . At that time, we mainly needed to use doxygen Generate html file , Its default input file format is UTF-8, It is not ...

  4. Function internal use setTimeout() Calling its own function is equivalent to setInterval()

    Originally setTimeout(function(){},time) Only executed once function, But when function demo() { alert(1); setTimeout('demo()' ,5 ...

  5. Entity Framework Code First Learning Series

    Entity Framework Code First Learning Series catalog Entity Framework Code First Learn series instructions : The development environment is Visual Studio 2010 + Entity ...

  6. 6、 ... and 、web Application and Tomcat

    Software system architecture 1  Common software system architecture B/S.C/S 1.1 C/S l C/S The structure is the client / The server (Client/Server), for example QQ: l  You need to write server-side programs , And client programs , For example, we are Ann ...

  7. Linux Lower installation nodejs

    linux edition uname -a Linux -29deepin-generic # SMP Fri Jul :: UTC x86_64 GNU/Linux Nodejs edition :node-v10.1 ...

  8. Spring Boot And OAuth2 The official most detailed tutorial ...

  9. Wechat applet selects pictures , Check the picture information , Browse the pictures , Image upload

    Click on the link in turn to see the following steps Select Picture : ...

  10. To iqiyi PC Web For the main station , good SEO Can help it get more search traffic , Therefore, some very important content on the page still needs to be rendered by the server , Due to the development of another set based on Node Of SSR Back office costs are high , And fun ( be based on java and velocity template engine ) Platform as a rendering system has been very mature and stable , After full test , We decided to Uniqy The server synchronous and client browser asynchronous secondary rendering method is used in , combination Vue2.0 Provided slot Slot mechanism , very dried food | Iqiyi PC Web The new framework practices original :  Front end R & D team   Iqiyi technology product team   yesterday