目录
1.let、const
2.箭头函数
3.模板字符串
4.解构赋值
5.rest参数
6.扩展运算符
7.class
8.import、export
1.let、const
let和const 是ES 6中新增的两个关键字，用来声明变量，let 和 const 都是块级作用域。
let声明的变量只在let命令所在的代码块有效。
const声明的一个只读的常量，一旦声明，常量的值就不能发生改变
例如：
let a = 1;
var b = 2;
const c = 3;
2.箭头函数
ES6 允许使用"箭头"（=>）定义函数。这种方式创建的函数不需要function关键字，并且还可以省略return关键字。
同时，箭头函数内的 this 指向函数定义时所在的上下文对象，而不是函数执行时的上下文对象。
let f = a => a + 1;
// 等价于
let f = function(a) {
return a + 1;
}
function foo() {
this.bar = 1;
this.f = (a) => a + this.bar
}
// 等价于
function foo() {
this.bar = 1;
this.f = (function(a) {
return a + this.bar
}).bind(this)
}
如果箭头函数的参数多于1个或者不需要参数，就需要使用一个圆括号代表参数。
let e = () => 4;
let g = (a, b) => a + b;
如果函数体内包含的语句多于一条，就需要使用大括号将函数体括起来，使用return语句返回
let f2 = (x, y) => {
x++;
y++;
return x + y
}
3.模板字符串
模板字符串是增强版的字符串，用反引号（'）标识字符串。除了可以当作普通字符串使用外，它还可以用来定义多行字符串，以及在字符串中嵌入变量，功能很强大。
//普通字符串
let text = "React is Wonderful !";
//多行字符串
let text2 = `JS is Wonderful !
React is Wonderful !`
//字符串中嵌入变量
let name = "React";
let name2 = `Hello, ${name} !`;
4.解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构。
//数组解构
let [a1, b1, c1] = [1, 2, 3];
console.log(a1) // 1
console.log(b1) // 2
console.log(c1) // 3
//对象解构
let name3 = "Lily";
let age = 14;
let person = {
name3, age
};
console.log(person)
// { name3: 'Lily', age: 14 }
//对象解构的另一种形式
let person = {
name: "Lily",
age: 14
};
let { name, age } = person;
console.log(person) // { name: 'Lily', age: 14 }
console.log(name) // Lily
console.log(age) // 14
函数的参数也可以使用解构赋值。
//函数的参数也可以使用解构赋值。
//数组解构参数
function sum([x, y]) {
return x + y;
}
let value = sum([1, 2]);
console.log(value) // 3
//对象参数解构
function sum2({ x, y }) {
return x + y;
}
let value2 = sum2({ x: 1, y: 3 })
console.log(value2) // 4
解构同样适用于嵌套解构的数组或对象
//嵌套解构的数组解构
let [z, [x], v] = [1, [2], 3];
console.log(z) // 1
console.log(x) // 2
console.log(v) // 3
//嵌套解构的对象解构
let { person: { name, age }, foo3 } = {
person: {
name: "Lily",
age: 4,
}, foo3: "foo"
};
console.log(name) // Lily
console.log(age) // 4
console.log(foo3) // foo
5.rest参数
ES6 引入rest参数（形式为...变量名）用于获取函数的多余参数，以代替 arguments 对象的使用。
rest 参数是一个数组，数组中的元素是多余的参数。
注意，rest参数后不能再有其他参数。
//ES6 引入rest参数（形式为...变量名）用于获取函数的多余参数，以代替 arguments 对象的使用。
//rest 参数是一个数组，数组中的元素是多余的参数。
//注意，rest参数后不能再有其他参数。
function languages(lang, ...types) {
console.log(types)
}
languages("JS", "java", "php")
6.扩展运算符
//扩展运算符是三个点（...）,它将一个数组转为用逗号分隔的参数序列，类似于rest参数的逆运算。
function sum(a, b, c) {
return a + b + c;
}
let numbers = [1, 2, 3];
sum(...numbers)
console.log(sum(...numbers)) // 6
//扩展运算符还常用于合并数组以及与解构值结合使用
//合并数组
let arr1 = ["a"];
let arr2 = ["b", "c"];
let arr3 = ["d", "e"];
let arr4 = [...arr1, ...arr2, ...arr3];
console.log(arr4) // [ 'a', 'b', 'c', 'd', 'e' ]
//与解构赋值结合
let [m, ...rest] = ["a", "b", "c"];
console.log(rest) // [ 'b', 'c' ]
//扩展运算符还可以用于取出参数对象的所有可遍历属性，复制到当前对象之中。
let bar = { a: 1, b: 2 };
let foo5 = { ...bar };
console.log(foo5) // { a: 1, b: 2 }
7.class
ES6引入了class(类)这个概念，新的class写法让对象原型的写法更加清晰，也更像传统的面向对象编程语言的写法
//ES6引入了class(类)这个概念，新的class写法让对象原型的写法更加清晰，也更像传统的面向对象编程语言的写法
//定义一个类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
}
//根据类创建对象
let person = new Person("Lily", 4);
console.log(person) // Person { name: 'Lily', age: 4 }
console.log(person.getAge()) // 4
console.log(person.getName()) // Lily
//class之间可以通过 extends 关键字实现继承
class Man extends Person {
constructor(name, age) {
super(name, age)
}
}
let man = new Man("Jack", 20);
console.log(man) // Man { name: 'Jack', age: 20 }
console.log(man.getName()) // Jack
8.import、export
ES6 实现了自己的模块化标准，ES6 模块功能主要由两个关键字构成：export 和 import 。
export 用于规定模块对外暴露的接口，
import 用于引入其他模块提供的接口
const foo = () => "foo";
//导出默认接口
export default foo;
const bar = () => "bar";
//导出普通接口
export { bar };
//注意默认接口和普通接口导入的区别
import foo, { bar } from "a"
console.log(foo()) // foo
console.log(bar()) // bar
