2. Understanding of let and const
3.The difference between let, const and var
5. Function default parameters
6. Arrow function [Key points]
Edit 7. Object initialization abbreviation and case analysis [Key points]
9. Case analysis of object propagation operator
1.ES6 Overview
ES6, the full name of ECMAScript 6.0, is the next version standard of JavaScript, released in 2015.06.
2. Understanding of let and const
In the past, constants and variables were defined using var.
Now use let to define variables and const to define constants for better differentiation
3.The difference between let, const and var
Here it should print 0 1 2 3 4 5 but it prints 5 directly. This is a problem with var. Variable penetration because var definition can be a variable.
It can be a constant, so as a constant it penetrates here.
Using let to define variables will not cause penetration problems
At the same time, our constants cannot be modified as const. Constants can be defined directly and modification is not allowed.
Modify constants and report an error directly
// In actual development and production, if it is a small program, uniapp or scaffolding, you can boldly use let and const
// In web development, it is recommended to use var. Some browsers do not support ES6.
summary:
1.let and const mainly solve the problem of variable penetration and constant modification
4. Template string
Compared with the traditional string concatenation ES6's `${}` is more concise and easy to use.
5. Function default parameters
6. Arrow function [Key points]
7. Object initialization abbreviation and case analysis [Key points]
Object abbreviation case
8. Object destructuring
8. Object spread operator
<script>
// 对象传播操作符 ...
var person={
name:'taohy',
address:'suzhou',
link:'csdn',
phone:15250,
go(){
console.log('开始上课了....')
}
}
//解构出来
var {name,address,...person2} = person;
console.info(name);
console.info(address);
console.info(person2);
</script>9. Case analysis of object propagation operator
<script>
// java 后台
// 数据格式 var userPage ={page:10,users:[{},{}],pageNo:1,pageSize:10,total:100}
// 异步请求
// $.post('/user/search',function(res){})
var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};
var {users,...userPage2} = userPage;
console.log(users);
console.log(userPage2);
</script>
10.ArrayMap
<script>
let arr = [1,2,3,4,5,6,7];
// 需求，对数组中每个数 乘以2
// 传统做法
let arrNew = [];
for(let i = 0; i < arr.length; i++){
arrNew.push(arr[i] * 2);
}
console.info(arrNew);
// ES6 Map 自带循环功能 并且会把处理的值回填到对应的位置
// var arrNew2 = arr.map(function (ele) {
// return ele * 2; // 必须return
// })
// 省略
var arrNew2 = arr.map(ele => ele * 2);
console.info(arrNew2);
// map 处理对象的数据
// 实现对象年龄加1
var users = [{age:10,name:'小绿'},{age:12,name:'小红'}];
// var usersNew= users.map(function (ele) {
// ele.age = ele.age + 1;
// return ele;
// })
// 简写
var usersNew = users.map(ele => {
ele.age = ele.age + 1;
ele.check = true;
return ele;
});
console.info(usersNew);
</script>
11.ArrayReduce
<script>
let arr = [1,2,3,4];
// a=1 b=2 a+b;a=3 b=3 a+b;
let result = arr.reduce((a,b) => {
return a + b;
})
console.info(result);// 全部相加 10
</script>12.NodeJS Summary
In the new ES6 js file, it can be used directly in node.
