ECMAScript 6语法和应用
let const声明变量关键字
var 可以重复声明，无法限制修改， var没有块级作用域。ES6新增let和const命令，用来声明变量，用法类似于var, let声明的变量，只在let命令所在的代码块内有效。let命令不存在变量提升，lei命令不允许在相同作用域内，重复声明同一个变量。const命令声明一个只读的常量，一旦声明常量的值就不能改变，const命令声明的常量不得改变值，一旦声明必须初始化。const命令声明的常量，只在声明所在块级作用域内有效，const命令声明的常量不提升，只在声明的位置后使用，const命令声明常量与let一样不可重复声明，const命令声明的复合类型数据（主要是对象和数组），变量指向内存地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//重复声明a
var a=10;
var a=20;
a=20
console.log(a)
//块级作用域之外可以使用b (var 变量只有在函数作用域中才能不跨域)
{
var b=10;
console.log(b);
}
console.log(b)
var name="moon";
if(true){
var name="aaa";
console.log(name)
}
console.log(name)
</script>
</body>
</html>
箭头函数Arrow Function
ES6允许使用“箭头”(=>) 定义；不需要参数或需要多个参数，就用圆括号代；代码块部分多于一条语句，就用大括号括起来，并且用return返回；箭头函数返回对象时，必须在对象外面加上括号；箭头函数使得表达式更加简洁，箭头函数能够简化回调函数；
普通函数的this：指向它的调用者，如果没有调用者默认指向window; 箭头函数的this：指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this. 综上：箭头函数没有自己的this ,它的this是继承而来，默认指向在定义它时所处的对象（宿主对象）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fun(x){
return x*x;
}
const fun1 = function(x){
return x*x;
}
const fun2=x=>x*x; // 简单写法
const fun3=(x)=>{return x*x} //完整写法
// (x)=>{
// return x*x
// }
// 1. 如果没有参数，或者有多个参数就需要()来定义参数列表
// 2. 如果有一个参数可以不用()
// 3. 如果函数体中只有一条语句，可以不用{},就不用使用return, 会自动加上
console.log(fun(10))
console.log(fun1(10))
console.log(fun2(10))
console.log(fun3(10))
const obj ={
fun:function(){
console.log(this)
}
}
obj.fun()
const obj2 = {
fun:()=>{
console.log(this)
}
}
obj2.fun()
function add(){
console.log(this)
}
add()
</script>
</body>
</html>
数组新增方法
filter过滤器 map映射 reduce汇总 (some, every)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//大于10元的商品打5折，打折后的商品的总价格
let goods = [30,50,80,1,5,9,3];
let goods1=[];
for (let n of goods){
if(n>=10)
goods1.push(n);
}
console.log(goods1);
let goods2 =[];
for (let n of goods1){
goods2.push(n*0.5)
}
console.log(goods2)
let sum =0;
for (let n of goods2){
sum+=n;
}
console.log(sum)
//新实现
goods1 = goods.filter(function(n){
return n>=10;
})
console.log(goods1)
goods2 = goods1.map(function(n){
return n*0.5
})
console.log(goods2)
sum = goods2.reduce(function(s,n){
return s+n;
},0)
console.log(sum);
//简写
sum = goods.filter(n=> n>=10).map(n=>n*0.5).reduce((s,n)=>s+n);
console.log(sum)
</script>
</body>
</html>
set和map数据结构
Map数据结构类似于对象，是键值对的集合，传统的键只能用字符串，Map的键不限于字符串，各种类型的值（包括对象）都可以当作键。
| 属性 | 操作方法 |
|---|---|
| size属性 | 返回Map结构的成员总数 |
| set(key,value)方法 | 设置key:value ，如果key存在更新value,返回整个map结构 |
| get(key)方法 | 获取key的值，没有key返回undefined |
| has(key)方法 | 返回布尔值，判断是否有key |
| delete(key) | 删除key，返回布尔值 |
| clear(key) | 清除所有成员，没有返回值 |
| map遍历 | 作用 |
|---|---|
| keys() | 返回键名遍历器 |
| values() | 返回键值得遍历器 |
| entries() | 返回所有成员遍历器 |
| forEach() | 遍历map所有成员 |
字符串新功能
- startWith 判断以什么字符串开头 ,endWith判断以什么字符串结尾
- 模板字符串(template string)是增强版字符串，用反引号(`)标示。 它可以当做普通字符串使用，也可以来定义多行字符串，或者在字符串中嵌入变量。
解构赋值和扩展运算符
解构赋值: 左右两边必须一样，右边必须有值，声明和赋值不能分开。
扩展运算符： ...三点运算符 ，展开数组， 默认参数
对象的新语法
ES6的class概念：constructor是构造方法，this关键字代表实例对象，通过extends关键字实现继承，super关键字，表示父类的构造函数，用来新建父类的this对象。
JSON 新应用： JSON.stringfy()串行化， JSOB.parse()反串行化，简写：(属性和值)名字一样可以简写，方法一样可以简写（:function省）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 以前声明类
function Person(name,age,sex){
this.name = name;
this.age=age;
this.sex=sex;
this.say = function(){
console.log(name);
}
this.run = function(){
}
}
let p = new Person("zhangsan",10,"男")
p.say()
// ES6现在
class Per{
constructor(name,age,sex){
this.name = name;
this.age=age;
this.sex=sex;
}
say(){
console.log(this.name)
}
}
const p1=new Per("lisi",20,"男");
p1.say()
//ES6类继承
class Student extends Per{
constructor(name,age,sex,school){
super(name,age,sex);
this.school=school;
}
}
const s1=new Student("wangwu",20,"男","一中");
s1.say()
</script>
</body>
</html>