1, arrow function this

You need to go to the outside scope to find this, which usually points to window

2. Es6 shorthand for object methods

Const obj ={name1:"lala", showName:function(){console.log(this.name1)}} const obj ={name1:"lala", ShowName (){console.log(this.name1)}} const obj ={name1:"lala", showName:() => { console.log(this.name1) } }Copy the code

3. You cannot use arrow functions as constructors

function Course(){ this.name = name; this.price = price; } /* const Course =(name , price) =>{ this.name = name; this.price = price; } */ const c1 = new Course('es',500); console.log('c1',c1)Copy the code

New feature in ES6, template strings, backquotes

5. Why you can’t use arrow functions at will

  • Now, the event callback function, when you write it as the arrow function, this points to the windoe instead of to the event.

  • When arrow functions define methods on objects, this points to a different object than function.

  • In arrow functions, objects like Arguments are not allowed.

  • Do not use the arrow function as a constructor; this points to the problem.

  • Arrow functions cannot define methods under stereotypes.

6, the structure of the left and right sides of the deconstruction assignment is exactly the same, it is possible to give the value a nickname when deconstructing assignment

const course = { name:'es6', price:500, teacher:{ name:'xie', Const {name: courseName, price, teacher: courseName, name: courseName, price, teacher: courseName, name: courseName, price, teacher: courseName, name: courseName, price, teacher: { name , age } ,test:111}= course ; console.log( courseName , price , name , age , test); //es6 500 xie 34 111Copy the code

7. Function parameters are destructed and assigned with initial values

Const foo = ({name,age,school=' learn '}) => {console.log(name,age,school) // Chapter 3 20 learn}; Foo ({name: 'in chapter three, the age: 20});Copy the code

When the return value is an object, we can use destruct assignment to take the argument

Const foo = () => {return {name:' chapter 3 ', age:20}} const {name, age} = foo()Copy the code

Swap the values of the two variables

let a = 1; let b = 2; [b,a] = [a,b]; console.log(a,b); 1 / / 2Copy the code

Json is a file used for data interaction at the front and back ends, which is basically a string. Use destructively assigned JSON

const json = '{ "name":"es","price":500}'
const {name,price} = JSON.parse(json)
Copy the code

Vue encapsulates the library axios uses to send requests

axios.get('./data.json').then(({data:{name,price}})=>{
    console.log(name,price)
})
Copy the code

12,

13. Open the terminal shortcut key command+esc in vscode

NPM is the package management tool of Node. NPM is delivered with node installation. Therefore, NPM does not need to be installed separately.

Check node -v and NPM -v on the terminal

Create the Babel environment in the project folder: NPM init -y in the terminal folder path

Then enter the command NPM install –save-dev babel-env Babel -cli

Can be abbreviated to NPM I -d Babel -env Babel – CLI

–save-dev and -d both install only under the current project

After the configuration is complete, write the ES6 syntax in the SRC file, and use the Babel command to translate the ES5 syntax that can be recognized by the browser into the dist file

-o: output

-w: Watch

Babel SRC /index.js -o dist/index.js // Convert a single fileCopy the code

But it’s usually done by configuring Babel in the WebPack build tool.

14. The foundation of es syntax is the foundation of all development, vue, React, wechat applets, Node, etc