JavaScript——ES 6语法简介

ES 6语法简介

---

let、const

let和const是ES6中新增的两个关键词，用来声明变量，let和const都是块级作用域，let声明的变量只有在let命令所在代码块中有效，const声明是一个只读的常量，一旦声明，就不能改变了。

{
    var a = 1;
    let b = 2;
}
console.log(a); //1
console.log(b); // referenceError : b is not defined
const c = 3;
c = 4; //TypeError : Assignment to constant variable

箭头函数

ES6 允许使用箭头(=>)定义函数，这种方式不需要function关键词，并且可以省略return关键词。同时箭头函数内的this指向函数定义时所在的上下文对象，而不是函数执行时的上下文对象。

var f = a => a+1;
//等价于
var 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)
}

多个参数

var f = (a,b) => a+b;

多个语句

var f = (x,y)=>{
    x++;
    y--;
    return x+y;
}

模板字符串

模板字符串是增强版的字符串，用反引号(`)来标识字符串。处理可以当作是普通字符串使用外，还可以用来定义多行字符串，以及在字符串中嵌入变量等。

//普通字符串
`react is wonderful !`
//多行字符串
`js is wonderful !
React is wonderful!`
//字符串中嵌入变量
var name = "React";
`Hello , $(name)!`;

解构赋值

ES 6允许按照一定的模式从数据和对象中提取出来值，对变量进行赋值

// 数组解构
let [a,b,c] = [1,2,3];
// a = 1
// b = 2
// c = 3
//对象解构
let name = "Lily";
let age = 4;
let person = {name, age};
// person = {name: "Lily", age:4}
//对象解构的另外一种形式
let person = {name:"Lily", age : 4}
let {name, age} = person;
//就可以重新解构出来

rest参数

ES 6引入rest参数（形式为…变量名）用于获取参数的多余的参数，以替代arguments对象的使用，rest参数是一个数组，数组的元素是多余的参数。

function languages(lang, ...types) {
    console.log(types);
}
languages('JavaScript','Java','Python')
// ["Java","Python"]

扩展运算符

扩展运算符是三个点(…)， 它将一个数组转为用逗号分隔的参数序列，类似rest参数的逆运算。

function sum(a,b,c) {
    return a+b+c;
}
let numbers = [1,2,3];
sum(...numbers);

扩展运算符常用于合并数组以及与解构赋值结合使用。

let arr1 = ['a'];
let arr2 = ['b', 'c'];
let arr3 = ['d', 'e'];
[...arr1, arr2, ...arr3];
// ['a', 'b', 'c', 'd','e ']

class

ES 6引入了class(类)这个概念。新的clas写法让对象原型的写法更加清晰，也更像传统的面向对象程序语言的写法。

//定义一个类
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);

class Man extends Person {
    constructor(name, age) {
        super(name,age);
    }
    getGender(){
        return 'male';
    }
    
}

let man = new Man('Jack', 20);

import 、export

ES 6实现了自己的模块化的标准，ES 6模块功能主要由两个关键词构成，export和import，export用于模块对外暴漏的接口，import用于引入其他模块提供的接口。

//a.js
const foo = () =>"foo";
const bar = () => "bar";
export default foo ;// 导出默认的接口
export {bar}; //导出普通接口
//另外一个文件
import foo,{bar} from './a'