ECMAScript6语法总结

ECMAScript6语法总结

ECMAScript6对javascript的变量类型进行了区分,同时增加了一些新的语言特性

1.块级作用域

ES5中的全局作用域,函数作用域的基础上,ES6新增了块级作用域: {} ,if和for中的{}也属于块级作用域

    {
        var a = 1;
        console.log(a); // 1
    }
    console.log(a); // 1
    // 通过var定义的变量可以跨块作用域访问到。
 
    (function A() {
        var b = 2;
        console.log(b); // 2
    })();
    // console.log(b); // 报错，
    // 可见，通过var定义的变量不能跨函数作用域访问到
 
    if(true) {
        var c = 3;
    }
    console.log(c); // 3
    for(var i = 0; i < 4; i ++) {
        var d = 5;
    };
    console.log(i); // 4   (循环结束i已经是4，所以此处i为4)
    console.log(d); // 5
    // if语句和for语句中用var定义的变量可以在外面访问到，
    // 可见，if语句和for语句属于块作用域，不属于函数作用域。

2.let,const与var

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

    // 块作用域
    {
        var a = 1;
        let b = 2;
        const c = 3;
        // c = 4; // 报错
        var aa;
        let bb;
        // const cc; // 报错
        console.log(a); // 1
        console.log(b); // 2
        console.log(c); // 3
        console.log(aa); // undefined
        console.log(bb); // undefined
    }
    console.log(a); // 1
    // console.log(b); // 报错
    // console.log(c); // 报错
 
    // 函数作用域
    (function A() {
        var d = 5;
        let e = 6;
        const f = 7;
        console.log(d); // 5
        console.log(e); // 6  
        console.log(f); // 7 
 
    })();
    // console.log(d); // 报错
    // console.log(e); // 报错
    // console.log(f); // 报错

3.import, export与export default

ES6模块主要有两个功能：export和import

export:用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import:用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

// a.js文件中:
let obj01 = "zhangsan";
let obj02 = "lisi";

export {obj01, obj02}
export var obj03 = "wangwu";
export function obj04() {
    // ...
}
// 上面都是正确的写法

// b.js文件中可以引入a.js文件中的变量
import {obj01, obj02, obj03, obj04} from "./a.js" // 填写路径

export default {
    method: [
        console.log(obj01);
        obj04();
    ]
}

export与export default

1. export与export default均可用于导出常量、函数、文件、模块等
2. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3. 在一个文件或模块中，export、import可以有多个，export default仅有一个
4. 通过export方式导出，在导入时要加{ }，export default则不需要

4.ES6其他新增特性

/**
 * 1.箭头函数
 *
 */
function es5(res) {
	
}
// 等同于
res => {
	
}

// 2.解构
var parent = {
	code: 0,
	message: "text",
	data: {}
}

var {data} = parent;

var {code, message} = parent;



// 3.属性简写
let parent = {123}
let test = {
	parent // parent: parent的简写
}

// 4.map方法
let list = [1, 2, 3, 4];
let data = list.map(item => item * item);
console.log(data); // [1, 4, 9, 16]

let obj = [
    {id:1, name:'zhangsan'},
    {id:2, name:'lisi'},
    {id:3, name:'wangwu'}
]
let ids = obj.map(item => item.id);
let names = obj.map(data => data.name);
console.log(ids); // [1, 2, 3]
console.log(names); // ['zhangsan', 'lisi', 'wangwu']

// 5.forEach方法
list.forEach(e => console.log(e));
obj.forEach(e => console.log(e.id));