ES6新增了关于变量的定义，函数扩展，数据结构，类，模块等概念，本文将详细介绍常用的ES6语法。

1. 变量的定义

let

ES6中新增了let语法，用来声明变量，用法类似var。

let定义的变量只在当前代码块内有效.

如下示例：

<script>
    if (true) {
        var username = 'zyk';
        let age = 60;
    }
    console.log(username);  // zyk
    console.log(age);  // 错误
</script>

ES5中只有全局作用域和函数作用域，没有块级作用域，所以下面代码中的var变量定义会被提升到函数作用域顶部：

<script>
    var username = 'zyk';
    function foo() {
        console.log(username);  // 打印结果为：undefined
        if (true) {
        	var username= "无名";
        	// var定义的变量会被提升至作用域的顶部
        }
    }
    foo()
</script>

而将var修改为let后，即可避免全局变量username被if代码块中username替代。

还有一种情况，使用var定义变量时，用来计数的循环变量会泄漏为全局变量，如下示例：

<script>
    // ES5中没有块级作用域
    for (var i = 0; i < 10; i++) {}
    // 此时i在全局作用域生效，值为10
    console.log(i);
</script>

同样，我们可以将var改为let来定义变量，使得循环变量只在当前代码块生效。

# . 变量提升

·

在ES5或更早的版本，我们使用var定义变量，使用该语法定义变量时，JavaScript引擎默认会将函数及变量的定义提升到代码块顶端，也就是说，除了在函数中定义的变量会被提升到函数作用域顶端外，在其它地方定义的变量，都会被定义在全局。

·

var定义的变量会发生"变量提升"现象，即变量可以在声明之前使用，值为"undefined"，这不符合大多数编程语言的规范，也会多多少少带来一些问题，为了解决这个问题，ES6中引入了let命令。使用let定义的变量，必须在声明之后才能使用，否则报错。

let不能重复定义变量：

<script>
    let username = 'zyk01';
    let username = 'zyk02';
    console.log(username);  // 错误
</script>

const

定义后不能修改

const定义一个只读常量，常量一旦被声明，就不能被更改.

声明时必须赋值

const声明的变量，必须在声明时赋值，否则会报错.

不能重复定义

与let命令一样，使用const定义的常量不能重复定义.

不存在变量提升

. 关于const的可变与不可变问题

·

使用const定义的常量，不可改变，这里的不可改变，指的是该数据类型本身不可改变，比如字符串，数字，假设使用const定义一个对象或者数组，因为对象和数组这两种数据类型本身是可以被新增或者删除元素的，所以，此时const定义的常量可以被改变。

·

const实际上保证的，并不是变量的值不可改变，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（比如对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

2. 模版字符串

在ES5中，字符串拼接我们使用“+”号，ES6中新增了一种方式，叫做模板字符串，下面我们来使用该功能进行字符串的拼接：

<body>
    <div id="app"></div>
    <script>
        let oDiv = document.getElementById('app');
        // ==== ES5用法 ====
        // oDiv.innerHTML = "<h1>Hello Vue</h1>" + "<h2>Hello Vue</h2>" + "<h3>Hello Vue</h3>";
        // ==== ES6用法 ====
        // 反引号进行字符串的拼接
        // 可用用${}将定义的变量传入网页展示
        let username01 = 'zyk01';
        let username02 = 'zyk02';
        oDiv.innerHTML = `
            <h1>Hello Vue</h1>
            <h2>Hello ${username01}</h2>
            <h3>Hello ${username02}</h3>
        `
    </script>
</body>

3. 数据解构

迭代访问数组或对象

在ES5中，我们访问数组或对象的数据只能一个个访问，但是在ES6中我们可以使用数据的解构。

<script>
    let obj = {
        name: 'zyk',
        sex: 'male',
    };
    let userinfo = ['zyk', 'male'];
    // ==== ES6用法 ====
    // 访问对象
    let {name, sex} = obj;
    // 访问数组
    let [name, sex] = userinfo;
	// 访问对象
    let { name: username, sex: usersex} = obj;
    console.log(username, usersex);  // zyk male
</script>

4. 函数扩展

设置默认值

在ES5中，由于函数不支持设置默认值，所以当遇到需要设置默认值的情况的时候，只能采用变通的方式，不过这种变通的方式会存在一些问题。ES6中引入了函数的默认值参数，解决了这些问题。

<script>
    // ES5中不能使用函数参数默认值，只能采用变通的方法
    // 这种方式会出现一些问题
    function foo01(num) {
        num = num || 2;
        console.log(num);
    }
    foo01(1);  // 1
    foo01();  // 2
    foo01(0);  // 2   问题就在这里，传入整数0就相当于false
    // ES6中引入了函数参数默认值，完美解决了ES5中存在的问题
    function foo02(num=2) {
        console.log(num);
    }
</script>

箭头函数

ES6中引入了箭头函数，其实就相当于Python当中的匿名函数lambda，接下来我们详细看看箭头函数的使用方式以及使用箭头函数时需要注意的地方。

定义箭头函数

// 定义一个箭头函数
var f = v => v;
// 等同于：
var f = function (v) {
	return v;
}

零个或多个参数的函数定义方式如下：

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

如果箭头函数的代码块部分多于一条语句，就需要使用大括号将它们括起来，并且使用return语句返回：

var f = (a, b) => { return a + b; };
// 所以，箭头函数的定义也可以是如下形式：
var f = () => {};

箭头函数的用途

1、箭头函数可以简化代码，比如如下需求：

<script>
    // ==== 判断一个数是否是偶数 ====
    // 普通函数
    function isEven01(num) {
        if (num % 2 === 0) {
            return true
        } else {
            return false
        }
    }
    // 箭头函数
    var isEven02 = n => n % 2 === 0;
</script>

2、箭头函数可以简化回调函数的写法，比如map和sort中的回调函数：

<script>
    // ==== map ====
    let ary = [1, 2, 3];
    //普通函数写法
    let ary01 = ary.map(function (x) {
        return x * x;
    });
    // 箭头函数写法
    let ary02 = ary.map(x => x * x);
    // ==== sort倒序排列数组 ====
    lst = [ 0, 2, 4, 6, 8, 1, 3, 5, 7, 9];
    // 普通函数写法
    lst.sort(function (a, b) {
        return b - a;
    });
    // 箭头函数写法
    lst.sort((a, b) => { return b - a });
</script>

箭头函数的this指向问题

首先，箭头函数中的this不再随着调用它的对象而改变，this对象变成固定的了，它固定的指向该箭头函数被定义时的作用域，而不是像普通函数那样，指向函数调用时的作用域。

<script>
    function foo() {
        console.log(this);
    }
    let obj = {
        func: foo
    };
    foo(1, 2);  // 此时this指向window对象
    obj.func(1, 2);  // 此时this指向obj对象
</script>

下面的代码中this对象指向该箭头函数定义时所在的作用域：

<script>
    function foo() {
        setTimeout(() => {
            console.log('id01:', this.id);
        }, 1000);
        setTimeout(function () {
            console.log('id02:', this.id);
        }, 2000);
    }
    var id = 21;
    foo.call({id: 42});
</script>

这个是非常重要的不同点，也是vue.js中比较常用的一个知识点。

5. 类的定义 class

ES5实例化对象的方式

ES5中我们常使用构造函数的方式，创建一个实例化对象，如下示例：

<script>
    function Person(username, sex, hobby) {
        this.username = username;
        this.sex = sex;
        this.hobby = hobby;
    }
    Person.prototype.showInfo = function () {
        console.log(this.username, this.sex, this.hobby);
    };
    let zyk = new Person('zyk', 'male', 'ES6');
    zyk.showInfo();  // zyk male ES6
</script>

ES6实例化对象方式

ES6给我们引入了class关键字，我们可以使用class关键字来创建一个类：

<script>
    // 类中必须要有constructor方法，如果没有，默认会给一个空的constructor方法：constructor () {};
    // 必须要用new调用，不能直接调用，否则会报错；
    class Person {
        constructor (username, sex, hobby) {
            this.username = username;
            this.sex = sex;
            this.hobby = hobby;
        }
        showInfo () {
            console.log(this.username, this.sex, this.hobby);
        }
    }
    let zyk = new Person('zyk', 'male', 'ES6');
    zyk.showInfo();  // zyk male ES6
</script>

类的继承

如下示例：

<script>
    // 父类
    class Up {
        constructor (user, sex) {
            this.user = user;
            this.sex = sex;
            this.money = 10000;
        }
        showInfo () {
            console.log(this.user, this.sex, this.money);
        }
    }
    // 子类
    class Load extends Up {
        constructor (user, sex) {
            super();  // 子类必须执行super方法
            this.user = user;
            this.sex = sex;
        }
    }
    let zyk = new Load('zyk', 'male');
    // 子类的对象执行父类的方法：
    zyk.showInfo()  // zyk male 10000
</script>

6. 对象的单体模式

如下示例：

<script>
    let obj = {
        name: 'zyk',
        foo01: () => console.log(this.name),
        foo02: () {
            console.log(this.name);
        }
    };
    obj.foo01();  // 												
											【ES6新增语法详述】的更多相关文章
	
								ECMAScript简介以及es6新增语法
		ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
		
						ES6新增语法和内置对象（let,const, Array/String/Set 扩展方法(解构赋值，箭头函数，剩余参数)）
		1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...
		
						ES6新增语法(一)——let、const、var的区别
		ES6简介 ES6是ECMAScript 6.0的简称,是javascript语言的下一代标准,已经在2015年6月正式发布上线.目的就是为了统一javascript的语法标准,可以用来开发大型应用程 ...
		
						面向对象编程-终结篇 es6新增语法
		各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...
		
						es6新增语法之`${}`
		这是es6中新增的字符串方法 可以配合反单引号完成拼接字符串的功能 1.反单引号怎么打出来?将输入法调整为英文输入法,单击键盘上数字键1左边的按键. 2.用法step1: 定义需要拼接进去的字符串变量 ...
		
						ES6新增语法(四)——面向对象
		ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 ,  ...
		
						ES6新增语法(三)——面向对象
		ES6中json的2个变化 简写:名字和值相同时,json可以可以简写 let a=12,b=5; let json = { a, b } console.log(json) // { a:12 ,  ...
		
						ES6新增语法(二)——函数和参数
		箭头函数 箭头函数:将原来函数的function关键字和函数名都删掉,并使用"=>"连接参数列表和函数体. 箭头函数语法: (参数1,参数2)=>{ 函数体 } 注意点 ...
		
						ES6新增语法(七)——async...await
		什么是async async的意思是"异步",顾名思义就是有关异步操作的关键字,async 是 ES7 才有的,与我们之前说的Promise.Generator有很大的关联. 使用 ...
		
		
	
随机推荐
	
									常用phpstorm快捷键
			欢迎提交你经常使用的快捷键 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 ctrl+q 查看代码注释 ctrl+d 复制当前行 ctr ...
			
						ZJOI2006 书架 lg2596
			题面见https://www.luogu.org/problemnew/show/P2596 题面就是描述了一个书柜从上到下放着书,可以看作一个序列,每个数的序号为它在从上向下数第几本 一开始建树偷了 ...
			
						Python并发学习
			#Python并发 多任务 多进程 多线程 线程同步 #多任务处理 多任务处理:使得计算机可以同时处理多个任务 听歌的同时QQ聊天.办公.下载文件 实现方式:多进程.多线程 #程序和进程 程序:是一个 ...
			
						HDU 1542 Atlantis（扫描线算法）
			题意:给出n个矩形的左下角左边和右上角坐标,求这n个矩形的面积并 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1542 典型的扫描线算法的题目 什么是 ...
			
						jQuery的12种选择器
			jQuery的12种选择器  1.#id : 根据给定的ID匹配一个元素 显示(用加粗的代替颜色): 这是第一个p标签 2.* : 匹配所有元素,多用于结合上下文来搜索 显示 : 这是p标签 这是di ...
			
						安装python3并新建python3的虚拟环境
			安装依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel -y 下载P ...
			
						解决报错：ERROR 1005 (HY000): Can't create table 'market.orders' (errno: 150)
			1.描述问题: 在这里我新建了两张表(customers_info和orders) 表一:customers_info CREATE TABLE customers_info ( c_num INT( ...
			
						HTML5使用JavaScript控制＜audio>音频的播放
			1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...
			
						题解 P4289 【[HAOI2008]移动玩具】
			题目地址:https://www.luogu.com.cn/problem/P4289 题解原地址:https://createsj.blog.luogu.org/solution-p4289 让我们 ...
			
						Leetcode 面试题 01.01. 判定字符是否唯一
			实现一个算法,确定一个字符串 s 的所有字符是否全都不同. 示例 1: 输入: s = "leetcode"输出: false 示例 2: 输入: s = "abc&qu ...

【ES6新增语法详述】

1. 变量的定义

let

const

. 关于const的可变与不可变问题