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