ES 6语法

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

ES 6语法

ES 6语法

目录

1.let、const

2.箭头函数

3.模板字符串

4.解构赋值

5.rest参数

注意，rest参数后不能再有其他参数。

6.扩展运算符

7.class

8.import、export

推荐阅读更多精彩内容