ES6新增语法详述
Posted gqy02
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6新增语法详述 相关的知识，希望对你有一定的参考价值。
原文: http://blog.gqylpy.com/gqy/275
"@
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(); // ??
obj.foo02(); //zyk
</script>"
原文: http://blog.gqylpy.com/gqy/275
以上是关于ES6新增语法详述 的主要内容，如果未能解决你的问题，请参考以下文章